March 26, 2018, posted by iq

Responsive Website Design: Creating Future-Friendly Experiences

When mobile usage surpassed desktop, responsive website design became an industry buzzword – and for good reason. Why design four versions of your site when a well-structured single design serves users’ needs? But now that the industry is again evolving with smartwatches, augmented reality goggles, and screen-free voice recognition devices, what does that mean for responsive design? Read on to learn more about the responsive design process, and how to make it work for your company.

A design where the layout and content adapt to the user’s environment, which includes their screen size, platform, and even orientation. Basically, it means using good code to create a site that works on a majority of devices, including those that haven’t been invented yet.

Responsive Website Design Across Multiple Devices

How Many Sites Are You Building Now?

You start with a website that works well for a desktop computer. Then someone says you need a mobile site because your current site looks and works terribly on a phone. So… you build a mobile site that will work on phones.

Someone points out that your desktop site isn’t optimized for touch screens, so no one can use it on an iPad. So… you build a site for the iPad.

Then Amazon releases the Kindle Fire, and the screen is too small for your desktop site but too big for your mobile site. What now?

Build a site for the Fire? Hope that your users don’t use your site on the Fire (or Kindle, Nook, or any other e-reader device)? And what about users looking at your site on a 42” TV they connected to their Mac Mini in their living room?

When does it end? And who’s maintaining (and paying for) all of these sites?

Responsive Website Design: Build Once For All Devices

Responsive design allows you to build your site once and use code to adjust the site based on screen size. So you don’t have to redesign your site for every new device — your site does the work for you.

Responsive Website Design Across Multiple Devices 2

How Does It Work?

A responsive website design contains 3 core ingredients:

  • A layout based on grid and percentages
  • Media queries
  • Fluid images and media
  • And a bonus ingredient: Accessibility

Not sure how to implement each of these? We’ll explore them more in the following sections, but the main idea is that flexibility is the key. Create your content (and code, and images, too) once, and responsive website design makes your site flexible enough to fit various screen sizes.

A Grid-Based Layout

What does it mean to have a flexible, grid-based site?

grid layout

It means that your site has a set number of columns at different screen widths, and your site’s content will adapt to fit the columns. For example, if the desktop version of your site is on a 16-column grid, the tablet version would be on an 8-column grid, and the phone version would be on a 4-column grid.

grid layout 2

grid layout 3
But you’ve heard that you should be “mobile-first” – why?

Starting from your smallest screen is easier and saves time in the long run.

It forces you to rank your content and features, aka “create a hierarchy.” If you start with mobile, you’re rank-ordering the priority of every piece of content.

To learn more about creating a content calendar, check out How to Build a Content Calendar

With a content hierarchy, you’re prepared for the interfaces of the future: 

  • Tiny screens – Watches and other wearables
  • Giant screens – Curved mega TVs, wall monitors, and VR overlays
  • No screens at all – Voice and gesture-controlled devices

Media Queries

responsive web design content flow example

So you’ve got a grid-based layout, but how does your site decide which number of columns to display? 

It decides how many columns by running a media query, which means it’s asking the user’s device, “What size are you?”

If the user’s device answers,

  • “I’m 300 pixels wide!” your site will display the 4-column version.
  • “I’m 700 pixels wide!” = 8-column version
  • “I’m 1200 pixels wide!” = 16-column version

Note that your site’s media query isn’t asking the user’s device, “Are you a smartphone, a tablet, or a desktop?” because we’re designing for devices that don’t even exist yet, so we do it by size and not the device.

To learn more about media queries, including breakpoints, check out responsivedesign.is’s breakdown

Fluid Images And Media

Responding to device size

Image size should scale down as its parent container scales down, like from desktop to mobile.

grid layout 4

Text in images

Images shouldn’t contain text because the users’ perception of the font size will change as the image scales. This photos’ text was originally 12 pt and it’s now displaying at 74 pt, which distorts it.text in images

Skewing

Image height should scale down at the same proportion as its width scales down so that images don’t become stretched or skewed.

skewing

Original Dimensions

Images should never display larger than their original dimensions because they will become pixelated.original dimensions

Mobile use is BIG.

But the growing list of new devices is BIGGER.

Mobile Expansion

Where is responsive website design headed next?

Augmented/Virtual Reality to hit $150 billion disrupting mobile by 2020.

— Digi-Capital

Native speech recognition software for mobile devices will likely skyrocket from 45 percent usage in 2014 to 82 percent usage in 2020. In addition, the report stated that biometric identification and voiceprints for authentication will grow from almost zero percent to nearly 36 percent by the year 2020.

— Tractica

Or maybe it’s something else…

Responsive Design is “Future Friendly”

Content portability ensures that the content can actually live and thrive in all platforms to which it gets distributed (even those that do not yet exist).

— Daniel Jacobson

You may think people aren’t viewing your site on a gaming system, TV, or watch and maybe they’re not… today. But what about tomorrow? Is your content ready?

Preparation now can ensure your content flows (like water) into other devices, even those that don’t exist or that a use case doesn’t exist for yet.

Accessibility

The bonus ingredient in responsive design

Accessibility has never been more important than now. Users with diverse abilities are interacting with a huge – and growing – range of devices.

The design community has long discussed “the most readable font” and “high contrast for low-vision users” near the end of the process. But now, the tenets of accessibility are merging with responsive design earlier in the process because what is responsive design about if not accessibility?

Responding to the Future

What features will make it easier to use the next devices? The force touch, the long press, the flick, etc. were all developed to make desktop sites respond to mobile inputs. How will we respond to motion-based gestural devices like the Kinect or the HoloLens? How about gaze tracking devices, which we see the beginnings of in phones that recognize when we’re looking at them? Or voice-only devices, like Amazon’s Echo?

Using responsive website design to answer the problems of tomorrow

We’ll accommodate new devices by returning to the basic tenets of responsive design.

– We’ll have a clear, defined hierarchy of our content that can be adapted to fit the interface of any device, from screen readers to smartphones to VR.

– We’ll give users control over their experience by allowing them to customize what their input means to our interface. An example would be that our voice recognition software will recognize natural language instead of computer language.

– We’ll consider the user’s needs that are specific to each new device and modify our content to be useful in their context.

One Site, One URL, Great SEO

Search engines don’t combine the traffic for your main website (domain.com) and its mobile counterpart (m.domain.com). In the example below, your site should have a total of 10 million visits, but Google won’t see it that way. Instead, it treats these as two different pages.

By creating one site with one URL, all traffic to your site – no matter where it comes from – is accounted for in total. This is great for SEO, particularly if you already have a legacy of great SEO for your main website.

Reference: “Why Multiple Domains are Mostly Bad for SEO” and “Google on Mobile SEO: GoogleBot & URL Structure”

Responsive website design requires innovation, but patterns have emerged…

Responsive Website Design Layout Patterns

Mostly Fluid

Columns, images, text, and more are scaled down as the screen gets smaller.

Column Drop

Elements remain the same size, but columns are stacked as the screen gets smaller.

Layout Shifter

The site uses different page layouts for large, medium, and small screens.

Off Canvas

Content is hidden until the user asks for it. This technique is showing up in mobile apps.

Note: These patterns and examples are documented by Luke Wroblewski in his article “Multi-Device Layout Patterns.” Please review his article for more information about each pattern and the pros/cons for them.

Which Pattern Is Right For Your Site?

Each site is unique, so yours may not fit neatly into a pattern. We have a smart, dedicated team at IQ Agency that can help.

Content strategists review your current content and help you think about future content. Then they inventory what you have and what you’ll have eventually, so you know what to design for.

Experience architects help you figure out what features and functions you want the site to have and then prioritize those with your content. They can also help you (along with the rest of the team) determine what size points to use (i.e., the screen sizes you already know you must design for).

Designers create a visual language for your site and determine the best way to scale the content, features, and functions for each screen size.

Developers build the site. They follow coding standards to ensure your site works across as many devices as possible and scales nicely from one screen size to the next.

Business Considerations

Cost is higher up front, but maintenance is likely lower. 

– As with any design, the cost is a factor. Responsive design requires more work because you are essentially designing several versions of one site. However, the cost should be compared with the costs for creating and maintaining separate sites for mobile, desktop, and tablet.

– It’s unlikely you’d have to create a new version of the site every time a new device comes out.

Understand Your Users’ Needs

Some argue that users looking at your site on a phone have different needs than users looking at your site on a desktop. For example, someone looking at a restaurant’s website while walking down the street probably needs an address and a basic menu. They are not interested in large images of the food.

Be wary of this argument.

It’s true that context (e.g., a user on the street versus sitting on their couch) should influence the design, but knowing what device a person is using does not tell you their context.

A Yahoo study found that 86% of mobile internet users are using their device while watching TV. So, don’t assume your iPhone traffic is only from people riding in a taxi or walking down a street.

Sometimes, a separate mobile site with different content and features is appropriate. 

Consider A Conference Website

Before the conference

Users want all of the information. Times, dates, hotel info, travel details, speaker bios, sponsors, blog, and updates, etc. And they likely are using a desktop to get that info.

At the conference 

 

Users only need some information. Their personal schedule of events, suggestions on restaurants, access to rate a speaker or session, etc. And they’re likely using a mobile device, so could you use location services (via GPS) somehow? Some conferences also have touchscreen monitors displaying the website.

There are multiple, distinct needs for this site. At this point, it may be better to design separate experiences so the users’ needs are met in both contexts. Or maybe the experience changes as the event approaches. Or maybe you build a mobile app for the conference instead. These are the discussions that must happen when deciding whether responsive design is right for your users.

A Final Thought About Responsive Design

Regardless of the medium, choosing a canvas is a powerful, creative act: before the first brush stroke, before striking the chisel, the canvas gives the art a dimension and shape, a width and a height, establishing a boundary for the work yet to come.

On the web, we try to mimic this process. We even call it the same thing: we create a ‘canvas’ in our favorite image editor, a blank document with a width and height, with dimension and shape. The problem with this approach is that we’re one step removed from our actual canvas: the browser window, and all of its inconsistencies and imperfections. Because let’s face it: once they’re published online, our designs are immediately at the mercy of the people who view them — to their font settings, to the color of their display, to the shape and size of their browser window.

— Ethan Marcotte, Responsive Website Design available from A Book Apart

Additional Resources

Responsive design examples in the wild

To see how they respond to changing screen size, click and drag to resize your browser window.

– Boston Globe

– Smashing Magazine

– Media Queries, a gallery of responsive website design examples

Articles

For a Future-Friendly Web, Brad Frost | A List Apart

Discusses the importance of making things “future-friendly” or ready for those things that don’t exist yet.

Responsive Website Design, Ethan Marcotte | A List Apart

Explains how responsive website design is possible from a coding standpoint and why it is necessary for creating an optimal user experience.

Share on Facebook Share on Twitter Share on LinkedIn

Digital Best Practices for Live Streaming Video

Digital The Future of Search and Its Impact on Your Marketing

Digital IQ Agency Named A Top Atlanta Digital Marketing Agency

Advertising, Digital First Entertainment: Young Storytellers

Advertising, Digital Daltile: Rewrite The House Rules