Responsive Handling, Not Just for Cars Anymore.

By Claire Urban

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?

  1. 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.
  2. 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.
  3. 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.
  4. 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.
  5. 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.

Advertisements

4 Responses to Responsive Handling, Not Just for Cars Anymore.

  1. virtualeyes says:

    Nice article,

    I really like responsive layouts, incredible stuff, but I struggle a bit with the issue of appropriate content based on device, particularly the amount and/or weight of displayed content.

    For example, one of my clients has a paid subscription news blog where an entire month’s worth of news is displayed at a time (they do not want to break the news up into days & weeks as they would then have pressure to publish articles year-round).

    For a mobile device displaying 100kb+ of text is maybe not such a good thing and would be more appropriately split into weekly and daily chunks (where given the small screen size it is less important to the business owner that they did not produce many articles in a given week).

    Similarly, the desktop user will see a number of gallery-style photos, optimized, but still a significant amount of bandwidth for a mobile device to handle.

    If we follow Marcotte’s suggestion of serving a single html document with media queries to alter rendered display, it seems that a more client-side js-based approach would be needed to prevent desktop content from being downloaded off the server for a mobile device. For example, on page load an ajax call would pull down several photos for desktop, and a single photo for a mobile device.

    In other words, while media queries may serve to scale down images and/or hide content, they do not filter out content itself (i.e. from being downloaded server-side).

    I am unsure of how to work around this issue. I prefer server-side (Scala, Ruby) to client-side (arcane, verbose javascript) where possible, but it seems like responsive design actually requires client-side functionality in order to complete the loop (of fluid content representation combined with device-specific content delivery).

    How are you (and others) approaching this problem?

    • Immersion Active says:

      Hi virtualeyes–thanks for the nice compliments on our post. I think you raise a lot of interesting questions.

      To us, responsive design is more than just a way of coding, but is also a new way of thinking about how to deliver the information to the end-user. So maybe the approach is not “How do I code this?” but rather “How do I think about this content in a manner that allows a consistent user experience across devices?”

      Take an application like Flipboard, for example. I am not savvy to how it is coded on the back end, but while the interface between the iPhone and iPad versions is different, they both deliver the exact same amount and type of information, and allow the same types of interactions. It’s a great example, if you’re not already familiar with it, I’d suggest taking a look–it might give you some new and different thoughts as to how to solve the issues you’re running into.

      • virtualeyes says:

        Flipboard appears to be an app. I’m talking web applications that require no download/install, just a web browser.

        I understand that responsive design encourages looking at design from a new perspective, but that perspective seems to be more, how do I simplify my design so it works on all devices vs. how do I offer rich content based on a given device.

        Take ESPN for example. Their desktop oriented site has little to do with the mobile version. Desktop is fixed width, resize the browser window and nada, images don’t scale, nothing changes. There is of course a ton of content displayed, feature rich.

        Now look at ESPN on your mobile device, totally different. Much less content, tabbed browsing, different navigation method, trimmed total text, etc. Still, a rich content experience (i.e. not just dumbing down desktop perspective) that is appropriate to the capabilities of the device.

        My point is: there are trade-offs to be made everywhere in web development.

        Responsive design requires % based elements, calculating every single element relative to a total fixed width. That’s not a trivial amount of work.

        On the flip side, fixed width designs require at a minimum templates for each device you intend to support, and more likely, different applications entirely if functionality is drastically different between devices.

        Similarly, there’s the choice between server-side and client-side, which one runs the show? Is server-side just the dumb data repository that sends back JSON to the client that then controls the application? Or, does client-side consist of handy js plugins and the application logic lives on the server.

        It amazes me how complex web development is when you take into account the full stack:

        physical firewall
        load balancer/static file server (apache, nginx, etc.)
        application server (jetty, tomcat, etc.)
        middleware (scala, java, ruby, python, etc.)
        template engine (jsp, gsp, scalate, erb, etc.)
        persistence (Oracle, MySQL, Mongo, Couch, etc.)
        ORM (Hibernate, Active Record, Sequel, etc.)
        test suite, continuous integration, etc., etc.

        and that does not even get into client-side, choosing js frameworks, plugins, UI, css framework and on and on

        Maybe just a hand written html page on CDN would be the saner approach 😉

      • Immersion Active says:

        Yes, Flipboard is definitely an app, and while I understand what you’re getting at, the principles of thinking about the experience are the same. I think smartly designed apps like this will be what all types of good interactive experiences will look like in the future, regardless of the device.

        And you’re right–there are tradeoffs to be made everywhere in web design. Responsive design is no easy task, and will require its share of compromises, especially as we as an industry adjust to thinking about our user experiences in that way. Soon, I believe it will be what separates the good from the bad. I think it’s great you’re thinking about this so much–if people like you are doing that, the future bodes well for interactive experiences for end users everywhere!

        Thanks again for writing; it’s great to have a little intellectual discourse to push our own thinking forward!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: