Your website does not look correctly on 4S?, on other smart phones neither? In fact, it does not even load? Oh, no… What are you going to do?
We first create a website, and then ‘adapt’ it to mobile website, viewable on mobile devices. And how are we doing it? There is lots of ways: mobile plugins, responsive design, conditional css, using grid etc. You can look it up… Shouldn’t though mobile version be created first and given the right to it’s own set of rules and best practices, before treated as hand-me-down version of something bigger and better? You’re right it should!
It may seem like a nuisance to design (and more importantly, maintain up-to-date) a separate mobile website just for mobile devices, but it does make perfect sense, if you know how websites and servers work.
You may think that when the code detects small device, just execute ‘display:none’ for complicated elements and resize your high resolution images and everything will be all right. What about beautifully designed block menus, sparkling with colors on ‘hover‘, centered across fixed width template? What about sophisticated backgrounds and elaborate horizontal galleries? Plugins to popular content management software are well developed to take care of most challenges with mobile web design, but here is something to think about:
Responsive design wakeup call: not displaying large element on a mobile device does not prevent it from being download anyway! What does it mean? Simply, all large files still have to end up on a mobile device before the pages are displayed, even when these large files are already coded to not being shown. It has been proven by looking at the server log files.
Why it matters? Because mobile devices work not on a broadband cable or fiber internet connection like standard computers, but on telecom data packages that have much smaller capacity and are more expensive per megabyte transmitted that way.
It does make a lot of sense to design separate mobile site. Mobile devices are gaining market share as a primary internet channel and cannot be ‘adapted‘ from your main website any longer. Mobile users have specific needs that need to be addressed to sell your products, services, ideas and information.
Focus on one transaction is base of a mobile experience. Content overload has no place on a small screen.
Because of touch screen capabilities, various operating systems and technology, color or greyscale screens – Say NO to:
- Fixed-width layout
- Complex navigation paths with submenus
- Playing with hover features
- Low contrast designs
- Less is more
- Engage better with focused interaction
- Use simpler interface, text rather than logos with details
- Forget about partner promos, loosely related links, multiple sponsor logos, big ‘About’ pages and fat footers – too much content
- Click on button evolves to touch-and-swipe – be open to NEW
And face it: Your website cannot be all things to all people.
Its functionality and convenience are more important for the best consumer experience than haute couture look and reference library stack of resources combined.