Good afternoon everybody and welcome to this special case study on how to convert a flash website into WordPress and Thesis 2.1. We’ll be using Thesis Classic Responsive as the skin. The website that we will be converting is a restaurant website in Australia and the reason why we’re converting this site is because the site itself doesn’t contain any text.
Existing Site Setup – Content Not Searchable
You can see as we jump from menu item to menu item the URL doesn’t change which means we’re staying on the same page. If we view the page source, you can see that there isn’t much to it and all of the scripts content is actually contained in this little embed right here which is entirely indexable by search engines.
So as far as Google is concerned, this is essentially an empty page and if somebody wants to search for the content that’s on here they’re not going to find it.
Steps To Convert the Flash Site to Thesis 2.1
So we’re going to take this site and convert into a Thesis 2.1 site and we’re doing so on a development subdomain here. There are a number of steps to go through in order to really successfully do this and the first step is to inventory the existing site because obviously we need to know all the pieces of the existing site before we can figure out the framework for converting this site.
Pages To Be Re-Created
First what we have is a number of pages or what appeared to be pages. There’s the home page with this content. There’s a menu page that actually is a link to a downloadable menus or pdf menus. There’s a Reservations page which is a link to an online booking engine and an Events page which has some older event information plus links to downloadable pdfs of upcoming and past events. Finally there’s this Gift Voucher page which has a link to an order form and then a fax number to fax that order form to.
We have a slideshow or an album where you can scroll through and look at different pictures both of food and the setting and then we have a Join Our Team page. That page has some text and email link off to that email address. So those are the pages that we have to create really 1, 2, 3, 4, 5, 6, 7, 8 pages.
Architecture of Existing Site
The architecture of this site is very simple. None of these pages have subpages, all of these pages are essentially on the main level of the site. So there will be the home and then wasabi/menu and then /reservations and /events and /reviews so on and so forth. So the architecture actually is very simple and none of these pages links to other pages. If it wasn’t as simple we’d have to consider that as well.
Now, there are a handful of images that are being used. First we have the rotating image banner up here and we have an image for the logo and we’ve got an image link here. We’ve got images for Twitter and Facebook and of course we’ve got the gallery.
Then we have relatively simple colors. For example, the primary color on this site is that 272727 and the primary font color we can find with ColorZilla – it’s just white. There is a light grey color as well for links there. You can see that hover color there as our link color and let’s just try to pick up that color again here. Well, it’s not going to give us the hover color but we’ll figure it out.
Capturing the Layout
Anyway, those are the colors that we have and then we have a layout and I think the best way for us to get our layout here is going to actually be to take a screenshot of it and import it into Photoshop. Okay, let’s hit escape, there we go. We could measure to try and measure this but I think it’s going to be easier for us to just take a screenshot and use that instead.
Let’s just look at the way this is laid out. Right now the object right there, there’s our embed so since this is 900 pixels by 700 pixels, I’m going to take a screenshot of that and my favorite software for this is Snagit. This is one I use to create screenshots so I’m going to take this and save it as the wasabi-template and then we’ll use that to measure the dimensions once we get to that part of it.
Obviously in terms of layout this is a 2 Column layout, right? So we’ve got a header image, a nav menu, a sidebar with logo and some social proof type of widgets. We’ve got a content area and then we’ve got a footer.
I think the way this was built, this Twitter and Facebook were added to this site after the rest of the site was built and so it was placed down here at the very bottom but I think as a practical matter, I’m going to take that up and bring it into the sidebar. We’ll just let the address be there at the very bottom. So it’s header, nav menu, 2 columns of content and a footer so fairly straightforward layout as well.
Next up we’ll be collecting the assets from the existing flash site such as images for the gallery and the site in general and pdf documents that we need to link to, text files for various pages and so on.