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
• n 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
• n 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

ems.

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

• An example of this can be

seen by viewing the New York Times (www.nytimes.com) Desktop page

320 px

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
• ur 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
• f 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?