As a driver of a Jeep Wrangler, I have driven on and off pavement, over dirt hills and ditches, through deep mud, water and snow. I have even driven over a bridge made of two logs to cross a creek with the guiding direction of Trail Guides. I have learned to adjust my driving skills to the road that lies ahead. The same flexibility is required in web design, where the trend of mobile Internet access through smart phones and a variety of other devices is changing the way web sites are driven. The average web surfer looking for the latest news, media or Facebook updates gives little thought to the development of the web site he/she’s visiting. However, as a Senior Interface Designer, I needed to take care just as I do when heading on to a new trail head.
Trends in Mobile Design
When it comes to design, there are two sides to the mobile Internet coin: device-driven design on one side and responsive web design on the other.
Device-driven design means developing a site for each device to create the best user experience for that specific device. As recently as just a few years ago this was as a plausible approach. There was the desktop/laptop computer and a few smart phones. But those days are gone, as it seems that every month a new device enters the market. Designers must adapt to desktop web standards, phone, Android, BlackBerry, iPad, Netbook, Google TV, Kindle Fire and so many more devices. Many of these offer the feature of being able to view the site either vertically or horizontally, multiplying the number of options designers must consider.
“We need to let go. Rather than creating disconnected designs, each tailored to a particular device or browser; we should instead treat them as facets of the same experience.”
— Ethan Marcotte
The second, new side of the mobile Internet coin is Responsive Web Design. Wait, responsive design? Isn’t that something Road & Track Magazine reports on every year as the latest sports car models and tire innovations are released? Well, to be honest that is where my mind went the first time I heard about “responsive design.” But it seems that the car market has new competition when it comes to being truly “responsive.”
Responsive Design Defined
Responsive Design is a web site design/development approach that adjusts the content to meet the requirements and/or limitations of the device that the web site is be displayed on. So I know you are asking yourself, what does this mean? Well, it means that the design is no longer a rigid, skyscraper-like design, set to display within the specific requirements of a single device. The design must be developed more as a viscous fluid that responds to the device on which it’s displayed. It needs to be able to move and scale portions of the page, or hide them completely, to optimize the message/content being presented. This is where the design challenge arises.
Designing with the iron fist structure of early HTML tables, with fixed columns and rows has been gone for years, but this ultra-fluid design concept takes planning process to the next abstract level. The design must be able to move, to create a flexible layout that combines elements. Media such as videos and photos need to be scalable to meet the screen resolution of the device. This responsive method of design requires a new level of programming of the page, the magic created by the web site development team, never to be seen by the end user.
Responsive Design’s Look & Feel
If the design is done well, the user will be able to navigate this site without a second thought, never needing to consider how it was designed or for what device. As we develop new sites for the 50+ market we need to keep the ease of use in mind at all times. But ease of use for the mature market is much more than big type and big buttons…it is creating emotional storytelling that weaves together with clear and purposeful information.
Let’s look at a sample responsive design concept. A picture is worth a thousand words.
With a desktop/laptop screen size of 1024 pixels wide by 768 pixels tall. There is plenty of room for a standard 3-column web site design. The main navigation can span the page (A) with in-section subnavigation listed as the first column. The width allows for a large relevant animated photo gallery (B) that has multiple photos that rotate with scripting and a nice wide main content column (C). It also allows for related content to be featured as call-to-actions (CTAs).
On a mobile device the same web site (320 wide by 480 tall or a new higher device resolution of 640 pixels wide by 960 pixels tall), can contain the same information, but requires a little reorganization of the content. All of the navigation is now featured in the header as a pull-down menu (A). A strong feature image is used here (B), but may not support the animation script that was used on the desktop version due to reduced viewing size or lack of device support. Finally, the copy is presented much as it is on the desktop version (C), but the related CTAs are now in the single column that displays. Scripting allows for device detection up front as the user loads the page. But on this version of the mobile site we also offer the user the option to load the desktop version of the web site if they prefer as smart phones become higher resolution and faster. And are able to include features like a linked phone number that dials for the user to make contacting the company directly easier.
Effects of Responsive Design on Web site Development
So what are some of the tricks of the trade, when designing for endless screen sizes, especially for the 50+ market? Well it comes down to thinking like the end user. What is the average user looking for when they visit the site I am designing?
- Main navigation: on a traditional site the main navigation might run across the page; however, if it is viewed on a smaller screen, it might be easier to navigate with a pull-down menu or list of links at the bottom of the page, as a conclusion to the page.
- Column width: When designing for a single format, like a 1024 wide x 768 tall screen, the columns just need to add up to about 990 pixels wide, so column widths used to be set to an exact number and the horizontal scroll bar does not appear on most screens. Now with the responsive designs, the exact pixel number is traded for percentage of the page. For example, a right sidebar to hold CTAs or related links might be set to 35% of the page width.
- Content: Tell a story that grabs users and makes them interact with your site. As you reduce the screen, you need to decide what content really needs to be displayed. Here at Immersion Active, we have a saying: simplify, then simplify again. It is important to consider the most important information and present that alone. Too much content can cause users to be overwhelmed and looking else where for direct information.
- Images: Once set to an exact pixel size and optimized for a single device, uploaded and placed, images are now displayed on demand. Code scripts scale the image and present it at optimal size for the device on which it will be displayed. This is known as context-aware image sizing.
- Media: Be it video, animation or audio is king. Advances in access speeds, HTML5 coding, and free services like YouTube have made the desire for media increase across the board. As we develop for the different types of browsers, we can use scripting to deliver media to match the specs of the device. So you can seamlessly serve up a video on a smart phone or animated graphics in the most recent browser on your laptop.
What Does it All Mean?
The continuing evolution of design technology tells us that while the method of delivering the content is always changing, the user experience is still the most important aspect of design. I need to steer the content to connect with the person who is coming to the site I design. It does not matter if it is on a laptop in their home office or on a smart phone in a train. What matters most is the value of the content being presented and how easy it is understand.
Ethan Marcotte, says it well,
“…at its most basic level, responsive design is about serving one HTML document to countless browsers and devices, using flexible layouts and media queries to ensure that design is as portable and accessible as possible.”
Like driving off the main roads in my Jeep Wrangler, design today needs to be fluid; it needs to allow the user to look beyond structure. Forget the axles and tires of the vehicle and focus on the experience, whether it’s delivering the client’s message with optimal impact or conquering that large pile of rocks challenging me to drive over it. I have learned to adjust my driving skills to the road that lies ahead and I continue to adjust my design skills to the evolving world of online content.4 Comments