ET Productions logo

Web Site Designs for the B2B and Wholesale Sales Market by ET Productions

    ET's Home    
  ET's Services  
About the Web
   Helpful Tips   
   Contact Us   
           Our Portfolio          
 
 Our Answers to the Design Challenge
Screen capture of <GHgeneralStore.com by Yahoo Store developer, ET Productions
The Design for the Yahoo Store
 The design dictated to us was fixed width for an 800 pixel screen. Actually, since an 800 x 600 screen includes a vertical scroll bar that takes up about 30 pixels, the design didn't even fit that screen size, much less the 85% of the screens out there that are larger than 800 x 600. We carefully recalculated the design to drop its width to 770 pixels and thereby avoid horizontal scrolling on an 800 pixel screen. We did this by calculating proportions so that the design would look as close as possible to the 800 pixel version, but actually fit a real world computer screen. To accomodate the large precentage of the users with wider screens, we centered the design in the page, thereby minimizing the margin size by deviding it MGHgeneralStore on a wide screenequally between the two sides of the content. What you see above is the 770 pixel version in an 800 x 600 screen. The image to the right is what the site looks like on my computer.
      We converted as much of the text as possible from images to actual ASCII text styled with CSS. This allowed us to do a reasonable job of optimizing the pages for search engine positioning.
      For branding purposes, we would have liked to get some product pictures above the fold. Unfortunately, with the dictated design, this was not possible. We can only hope that most visitors to the site already know what it is and what it does, and so aren't concerned with its branding.
      Visit the site and see how you think we did. While you're there, expand the window and see the difference between this design and one that fits the available space.
 
 The Design Challenge
MGHgeneralStore.com Yahoo! Store before makeover
Before Makeover

On the surface, this project might seem to be challenge free. The client, Massachusetts General Hospital, has their own web design department and grap[hic artists. They had already developed a look and feel for their front page and all we had to do was implement it in HTML/RTML on the Yahoo! Store platform.
      The fact is that far from simplifying design, implementing a graphic artist's vision almost makes delivering a top-notch Web site FAR more difficult. To begin with, good design practice for the web demands that the design fit the user's screen. Graphic artists are used to an environment where the size of the paper their design will be printed on is the one thing that's a constant. Web browsers, on the other hand, range from 800 x 600 pixels to 2000 x 1200 pixels. Graphic artists typically assume that their screen is everybody's screen and whatever fits nicely on their computer will fit everybody's computer.
      Graphic artists typically are entirely clueless about SEO. Not having any idea what the acronym means or how it is accomplished, they routinely render most or all the text on a design using a graphics program. They pick beautiful cursive fonts not understanding that such fonts will require image-rendered text since most of the users' computers won't have those fonts installed and will not be able to render them from ASCII text. Problem with this is that search engine spiders only read ASCII text. Spiders are incapable of reading text rendered in an image. So text in images is invisible to the search engine. When an entire page is rendered as text, it might as well be a blank sheet of paper as far as a search engine spider is concerned
      Read about how we addressed these design decisions.
 

ET Productions portfolio of web design and writing work