According to the W3Schools latest statistics, access of internet pages by smart-phones and other pocket-sized devices has doubled in the past year. It’s still only about 1.3% of all internet usage, but it’s a trend that is going to continue. In order to stay ahead of this curve, we need to rethink the processes by which we design and build sites for clients.
You may have heard buzz over the last few months around the concepts of “Responsive Web Design” and “Mobile First.” These are attempts to utilize new technological advances in web browsers — specifically in HTML5 and CSS3 — to develop sites that are designed, built and launched in such a way that they can be dished up to multiple devices with screens of any size.
640PX, 720PX, 800PX, 960PX, 1024PX, 1200PX …. 320PX
Even in the very recent past, we’ve been designing sites around the increasing display sizes made possible by bigger and bigger monitors. 21″ desktop monitors have been a graphic designer’s dream come true: Bigger = Better was the operative phrase in user interface design. But increased mobile usage is forcing a fundamental shift in thinking here. Before long, more people will be using small screens to access content than large ones. The online experieces we create for our clients need to be ones designed for the small screens of the future.
RESPONSIVE WEB DESIGN
Before the introduction of HTML5 and CSS3, we used device detection scripts to sniff out what sort of device and browser (desktop running IE 8, Opera or Bolt running on Blackberry, iPhone running Safari, etc.) was being used to view a site and then we served up the appropriate version of the site for that device and browser. This is a huge pain — there are thousands of devices already and more coming out every week…keeping up with all of the possible variations is virtually impossible.
Responsive Web Design uses new features in CSS3 to determine the actual width of the viewport that a website visitor is using to view the site and to dynamically adjust the content in a way that optimizes their experiences. Because all we really need to know is “How wide is your window?”
The copy blocks and images shift and scale to accommodate the size of the screen. Page elements that might dampen or hamper the mobile experience (like large video files or slideshows) can be completely hidden. No room for that right-hand column on the mobile version?…we can hide it or stack it below other content. Images too big for a small screen?…we can scale them down for those screens. Font size too big? Logo too big? Type face not readable? — all of that can now be changed on the fly.
MOBILE-FIRST DESIGN
Mobile first design is the most radical articulation of this focus on small-screen usability. In short, the guiding principle is that instead of designing big sites that work on small screens; we should be designing small sites that work on big screens. Don’t start with the desktop and then build the mobile version. Do the opposite.
CONCLUSIONS
Most of our clients are not actively thinking about how mobile users are experience their sites. Mobile sites are an afterthought. One of our big jobs as an agency is to educate clients on upcoming technological trends and to insure that they are prepared to take advantage of the shift appearing on the horizon.
BONUS MATERIAL
Here’s a really cool tool:
Enter the URL of your site, and The Responsinator quickly renders it in various devices and various orientations. iPad, Android, etc. This shows how it will lay out at typical viewport widths. It’s a useful design tool.
