Designing Effective Websites Day 5 - May 1 Did you find any URLs - PowerPoint PPT Presentation

Designing Effective Websites Day 5 - May 1

Did you find any URLs like these? • Have you come across URL' like these:

Building a Mobile Website • Some opt to build a separate (secondary) site for mobile • Not necessarily a flawed approach • For some, it has a valid business case

For the rest of us… • Avoid duplication of effort • Want a "more robust" solution • Be prepared for the coming unknown • Adaptable

Reference • Using CSS, we adapt our page's layout based on screen width • Many sources of information on the topic • Ethan Marcotte's Responsive Web Design (A Book Apart)

Ingredients for Responsive Web Design (RWD) • A flexible, grid-based layout • Flexible images and media • Media Queries

Fixed Layout • Web pages created at a specific pixel width. • Emulates print design. • Maintains relationship of page elements, alignment, and line lengths • …regardless of available screen space

Advantages of Fixed • Predictable and offers better control over line length. • Easier to design and produce.

Disadvantages of Fixed • Content on the right edge will be hidden if the browser window is smaller than the page. • May be an awkward amount of left over space on large screens. • Line lengths may grow awkwardly short at very large text sizes. • Takes control away from the user.

Fluid Layout • Page area and columns within the page get wider or narrower to fill the available space. • There is no attempt to control the width of the content or line breaks. • The text is permitted to reflow as required.

Fluid Advantages • Keeps with spirit and nature of the medium. • They avoid potentially awkward empty space because the text fills the window. • Users have control of the width. • No horizontal scrollbars.

Fluid Disadvantages • On large monitors, line lengths can get very long and hard to read. • Less predictable. • Achieving white space may prove difficult. • Requires more attention to dimensional measurements.

Grid-based Layout • For some, the concept of a grid- based layout may be familiar. • Traditionally, we would layout a fixed page design based on some type of grid. • Example taken from Marcotte’s book

Typesetting for RWD • Much of the content we put on the web today is still textual. • Starting point of RWD is we need to make the text of our site responsive. • Traditionally, the practice has been to set font size based on pixels.

Proportional Typesetting • Common practice is to set fonts based on pixels (px). • Today, we need to think proportionally. • Rather than using pixels, we need to start using em s.

Viewport vs. Device Width • Viewport - the "canvas" that mobile browsers use to render (display) a web page. • Device Width - mobile browsers often shrink this viewport down to fit the width of their screen or device width.

Viewport Example - iPhone • On an iPhone, Mobile Safari sets the viewport width to 980 pixels • Safari then shrinks this to 320 pixels to display in the actual width of the iPhone 320 px • An example of this can be seen by viewing the New York Times (www.nytimes.com) Desktop page

From Flexible Fonts to a Flexible Layout • Just as we made our text proportional, we can apply that same approach to other visual elements of our design. • We no longer use unchanging, inflexible pixels. • We express size in terms of proportions or percentages

Setting the Viewport • One of the first things we need to do to prepare our site, is to set the Viewport. • We want to "take control" of what and how our content is to be displayed. • Possible by adding a meta element to the head of our HTML document: <meta name="viewport" content="width=device-width, initial- scale=1.0">

Making Images Flexible • In its simplest form, all we need to do is add the following to our stylesheet: img { max-width: 100%; }

Media Queries • Allow designers to deliver styles based on media types. • The defined media types are print, screen, handheld, braille, projection, screen, tty, and tv. • The keyword “all” indicates that the styles apply to all media types.

Media Queries • Can also evaluate specific media features such as device-width, orientation, and resolution. • Most properties can be tested for a minimum or maximum value using the min- or max- prefixes.

Other Media Features We Can Check

Defining a Media Query • Starts with the @media keyword • Followed by the target media type (e.g., screen) • The media feature and the value being tested, contained in parentheses • The styles to be applied for those browsers meeting the criteria appear in a set curly braces {}

A Typical Media Query @media screen and (max- width: 700px;) { margin: 1em 5% 1em 25%; }

Media Query Example 1 • Testing screen width and orientation: @media screen and (max-width: 700px;) and (orientation: landscape;) { /* styling for devices / browsers that pass */ }

Media Query example 2 @media screen and (-webkit-min-device-pixel-ratio: 2), screen and (-moz-min-device-pixel-ratio: 2), screen and (-o-min-device-pixel-ratio: 2), screen and (min-device-pixel-ratio: 2) { /* styles referencing high-resolution images here */ }

Breakpoint Chart

Other Challenges of Responsive Web Design • "Responsive" Images How do we get the right sized image delivered to smaller screens that may also be mobile • Does One Size Fit All? Is a Responsive Design appropriate for our site / app?