January 15, 2018, posted by Admin
Responsive Web Design: Future-Friendly Experiences
01.What is Responsive Web Design?
When mobile usage surpassed desktop, responsive web 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 Web 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 web 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 web 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.