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.
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.
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?
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.
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
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.
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.
Image height should scale down at the same proportion as its width scales down so that images don’t become stretched or skewed.
Images should never display larger than their original dimensions because they will become pixelated.
Mobile use is BIG.
But the growing list of new devices is BIGGER.
Where is responsive website design headed next?
Augmented/Virtual Reality to hit $150 billion disrupting mobile by 2020.
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.
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.
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
Columns, images, text, and more are scaled down as the screen gets smaller.
Elements remain the same size, but columns are stacked as the screen gets smaller.
The site uses different page layouts for large, medium, and small screens.
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.
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
Responsive design examples in the wild
To see how they respond to changing screen size, click and drag to resize your browser window.
– Media Queries, a gallery of responsive website design examples
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.