Learning Responsive Web Design
Author: Clarissa Peterson
Pub Date: 2014
ISBN: 978-1-44936-294-2
Pages: 412
Language: English
Format: PDF
Size: 39 Mb

Deliver an optimal user experience to all devices—including tablets, smartphones, feature phones, laptops, and large screens—by learning the basics of responsive web design. In this hands-on guide, UX designer Clarissa Peterson explains how responsive web design works, and takes you through a responsive workflow from project kickoff to site launch.
Ideal for anyone involved in the process of creating websites—not just developers—this book teaches you fundamental strategies and techniques for using HTML and CSS to design websites that not only adapt to any screen size, but also use progressive enhancement to provide a better user experience based on device capabilities such as touchscreens and retina displays.

  • Start with content strategy before creating a visual design
  • Learn why your default design should be for the narrowest screens
  • Explore the HTML elements and CSS properties essential for responsive web design
  • Use media queries to display different CSS styles based on a device’s viewport width
  • Handle elements such as images, typography, and navigation
  • Use performance optimization techniques to make your site lighter and faster

Working Responsively

The rise of smartphones means that more and more people are going online from mobile devices According to Pew Internet, 57% of Americans said they’d used a mobile device to access the Internet in 2013 A surprisingly large number—34%—of these mobile Internet users said that was the primary way they accessed the Web . This is a large and growing audience

Teens are increasingly mobile-primary users Although many of them have access to a desktop computer at home, they have a greater sense of privacy on a mobile phone, which just belongs to them, as opposed to a desktop computer shared with other family members, where they may get little privacy They also aren’t sitting in front of a computer all day like many offie workers Teens may not be a big part of your target audience, but as they grow into adults, they will continue to be comfortable using their phones for a majority of their web browsing

So what does this mean? Your website has to work on all devices You can’t assume that if something is too “complicated” for a small screen, you can just ignore the issue because users will switch to a larger screen for that activity Not all of them will

And don’t think that just telling users they need to switch to a desktop browser is enough It’s not up to you what devices users choose; it’s up to them

It may not be possible to make everything easy to use on a small screen, but at least don’t make things not usable Unless, that is, you are willing to lose a portion of your users or customers.

Validation tools are built into web developer add-ons for major browsers, or you can use an online service to validate your code, such as the W3C Markup Validation Service (for HTML) and the W3C CSS Validation Service.