Learning Responsive Web Design: A Beginner's Guide

Learning Responsive Web Design: A Beginner's Guide

Clarissa Peterson

Language: English

Pages: 412

ISBN: 144936294X

Format: PDF / Kindle (mobi) / ePub


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

Getting Started with Backbone Marionette

Guide to Web Development with Java: Understanding Website Creation

Build a Website for Free

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 289 Margins and Padding. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 291 Changing Typeface for Screen Size. . . . . . . . . . . . . . . . . . . 291 Summary. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 293 Chapter 10 Navigation and Header

doesn’t fill the space. The height is, by default, as high as it needs to be to contain the content. For example, a paragraph will be the height necessary to contain all the text as it wraps onto multiple lines, as you can see in Figure 4-8. 84  |   LEARNING RESPONSIVE WEB DESIGN Figure 4-8. Block elements are by default as wide as their containing element, and as tall as they need to be to contain their content. You can change the width or height of a block element with CSS: div { width:

which means they will be equally divided on the left and right (the result is shown in Figure 5-16): #fullpage { max-width: 63em; margin: auto; } Figure 5-16. The layout is now centered on the screen. | 5. Media Queries      131 How to Choose Breakpoints As we learned, breakpoints can be added at any browser width. You’ll probably have a general idea of where breakpoints will go as you’re doing your preliminary sketches, but it’s hard to know exactly where they need to go until you try out

display each particular piece of the image in the correct place on the page. These combined images are called image sprites. For example, Figure 6-2 is the image sprite that Apple uses to display the background for the top navigation on its website. It’s various states for each button (active page, hover, etc.), combined in one image. 138  |   LEARNING RESPONSIVE WEB DESIGN Figure 6-2. This image sprite is used to create many variations of the navigation on the Apple website. The actual

the Web, and that they would need to find a way to make web pages that were easier to view on the iPhone’s small screen. MOBILE WEBSITES Because designers were accustomed to making web pages with fixed widths, the easiest and most obvious solution was to simply make separate mobile websites with a fixed page width that would fit on a 320pixel-wide screen, instead of the common 1,024-pixel-wide monitor, as in Figure 1-6. Users were often automatically redirected to the mobile version of the site

Download sample

Download