eCommerce site designs are not going to look the same and code will not render the same on every device. What makes the Web great can also frustrate clients when they view their sites online. But this isn't a bad thing, or a good thing, it’s just the way it is and should be. When clients express their concern over their site not looking the same when viewing on their Lenovo laptop running IE8 and the office iPad running Safari, I like to point out: "It won't look the same everywhere and shouldn't, this is the Web, that can only happen in print." But they may respond with: "But I want it to look the same." Again, this is the sort of thinking that comes from an expectation that the Web is the new print media. It isn't. It is another media all together. It is more dynamic and rich and fluid. When you think of an eCommerce website, do visions of customers browsing through the massive Sears catalog appear in your mind? Where every man, woman and child has the same experience as they turn the pages and highlight or circle items for their wish list? Is it possible to create the same experience on the Internet where every man, woman and child has the same experience? The answer is no. Check out this proof.
We have been trained by print and by faux expectations to believe that eCommerce website designs must look the same everywhere, the company's brand is at risk and the customer's expectations, and subsequent revenue, is also at risk. But this is not true. Lets take a closer look and make this reality a little bit more comfortable to accept.
Why Things Look Different
First, I would like to refer you to a previous blog post I wrote regarding mobile first design. In this article I wrote about the importance of your website design from mobile devices up. The reason is mobile devices like iPhones and Droids cannot do the same things that a high-powered desktop machine with a 26" HD monitor and 16 gigs of RAM can do. Makes sense, right? This is reason number one why your site cannot render the same everywhere. See, you already knew that.
That is a modern example, but historically the Web was never meant to present content the same everywhere. From a Q&A on FYICenter.com about fonts not looking the same everywhere: "The WWW was originally devised to present the same content in different presentation situations and for a wide range of readers: on that basis, 'looking the same' is not a design criterion, indeed different presentations would be expected to look different." Basically the Web was never intended to work like print.
Here is a short list of some of the most common reasons why your site will not be identical everywhere:
1. Screen resolutions are not the same. Common pixel dimension for new machines is 1280x1024. Still, you may find folks who have there setting set to 1024x768 or an older machine may have a resolution of 800x600. The differences are like watching the game on your new HD flat screen versus your old tube TV, clearly a drastically different experience.
2. The operating system has a big effect on how your site renders. Most people are either on a Mac or a PC, not many are on both so you may not come across the differences in your day-to-day. But they exist. The most common discrepancy comes with fonts. Fonts that are standard on a PC may not even be present on the Mac, and vise versa. This will cause default font substitution that will change the presentation of your site.
3. The browsers used to view your site will effect presentation, even if you view the site in the same browser on a different machine. Currently there are nearly a dozen popularly used browsers, with Google Chrome, Mozilla Firefox, Internet Explorer, Opera and Safari rounding out the top of the list. With the top five there are also several different version of each browser to account for, plus mobile versions.
4. Vision impaired folks may never see your site, let alone see it how you or I see it. So a solid structure with appropriate tags and semantic code will effectively allow readers to present your site audibly to the impaired. This proves that strict presentation isn't as important as a well-designed and developed site.
Should I Worry?
If you are a client of Groove, there is nothing to worry about. Savvy designers and developers already know about this information and should inform the client of the realities of eCommerce site presentation and rendering. But not knowing what to expect and what is technically possible on the Web is a cause for concern. It’s all about what your expectations are and if they are in line with what is feasible. Reading up on the topic is important. Pushing for the latest technological advances like CSS3 and HTML5 are a good idea, because they are pushing the Web to a better place where more standardized practices are in place and bad practices and out of date browsers and technology are being phased out. The good news is now you are more educated and better prepared to talk about what your site should look like and how it should render. The real lesson here is your site will not and should not look the same on every device. Your site on an iPhone should not look exactly the same as your site on a desktop. But what should be the same is the experience, the smoothness of navigation, and most importantly the ease in which customers/visitors can find what they are looking for and an overall good experience.