Case Study Part 2: VictorsFood – Mockup, Markup and Launch

Continuing on the story of the recreation of the VictorsFood website…

The static designs created in Photoshop were converted into HTML and CSS. To achieve the framed effect without traditional frames, css was used to house the logo and menu in its own layout separate from the main body content. This prevented the menu from scrolling off the page when people scrolled down. A tabular layout was still used in the main body content. Why? Primarily because I knew the client would often be updating their own site. WYSIWYG editors and amateur site maintainers seem to handle traditional HTML table layouts better than pure css controlling all elements.

CSS for everything baby
The menu is all css driven and a derivative of the suckerfish dropdown / flyout menu series. A bit of help was needed to get it working across all browsers. The folks at killersites made sure it all went smoothly. This site is invaluable for coding help if you’re ever stuck, pull your hair out for a few hours first, then seek their help. They tend to respond better to people who have tried on their own and made a conscious effort. Others just expect people to code their problems for them as free labor, it doesn’t work that way on internet expert forums.

The site was very image rich, with 3 images featuring in the header area of each page. Other images in the content had a simple polaroid styled border added to give them some depth.

Bigger than Ben Hur
With all web projects, the number of planned pages and the number of pages that actually end up being created are two very different things. The website grew when we realised it would be better for the user experience if content was put into subsections, making full use of the flyout tiered menu structure. It’s always extremely difficult when originally quoting the clients, so I like to quote based on the original number of pages required and state any additional pages will be charged pro rata for the time taken to create them. I don’t believe in charging a $ figure per page. Some pages have two words on them, other pages have loads of images and features and need more time to be made.

Cross browser compatibility woes
Because CSS renders differently on each browser its almost impossible to get your site looking perfect on every version of every browser. My main concerns are always around Internet Explorer users because they account for the lions share of the market. IE 6.0 has many known bugs with sites so I have to make sure the site works ok in that version too. The clients in this instance were MAC based users so they were viewing the site in Safari and having horrors at times with how it was displaying. Its a constant process of checking each major change in the major browsers and reverting to an older version if something blows up.

From woes to go
From the initial client meeting, to the date of launch took a little under 2 months. Bearing in mind I freelance and had to fit this project in around my fulltime work and study. There were a lot of late nights and 16 hour weekend days to get the site finished. For a site of its size though, 8 weeks was a very fast turnaround time and it was only aided by the eagerness and cooperation of the clients. They knew what they wanted and they responded very quickly to queries and gave honest feedback.

If you build it they shall come…
The site was launched with little fanfare as the number of visitors started to increase gradually over a month, when we were up to 20 unique visits a day it was a milestone. In the next and final part of this case study we’ll look at the online marketing and SEO that was used to get this site found by the search engines and become a competitor in its business field.

Advertisements

One thought on “Case Study Part 2: VictorsFood – Mockup, Markup and Launch

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s