responsive web design

Responsive Web Design (RWD)by Mario Hernandez

Web: http://DesignsDrive.com

Email: [email protected]

Twitter: @DesignsDrive

Slides available at: http://slideshare.net/marequi

MARIO HERNANDEZFront-End Developer

Agenda

Session One:

SEOBest practices, How does it relate to RWD

HTMLIntroduction to HTML5 and CSS3Progressive Enhancement and Graceful DegradationCanIUse.com

FontsPixels vs. EMsProblems with EMsConverting Pixels to EMs

Agenda

Session One:

Grid SystemsWhat are grids and how they apply to web designFixed vs Fluid vs. Responsive gridsManipulating grids in web design (rows, columns, offsets, source order, etc)

Media QueriesWhat are they?What role do they play in responsive design?Working with Breakpoints

Agenda

Session One:

Responsive Web Design or RWD

mariohernandez.github.io/responsive

Our Project

SEO

Search Engine Optimization

What search engines are looking for


Content


ContentPerformance


ContentPerformance

Authority


ContentPerformance

AuthorityUser Experience

Source: http://searchenginewatch.com/article/2259693/SEO-Basics-8-Essentials-When-Optimizing-Your-Site

What search engines are NOT looking for


Keyword Stuffing


Keyword StuffingPurchased Links


Keyword StuffingPurchased Links

Poor User Experience

Be consistent with Domain Names

HTML5Document Object Model (DOM)

IT’S NOT ONE BIG THING

How can I start using HTML5 if browsers don’t support it?

IT’S NOT ONE BIG THING

How can I start using HTML5 if browsers don’t support it?

You can’t detect HTML5 support but you can detect support for individual features (video, canvas or geolocation)

You don’t need to throw anything away

If your web application worked yesterday in HTML 4, it will still work today in HTML5. Period.

HTML5 allows you to improve your website

IT’S EASY TO GET STARTED

GRACEFUL DEGRADATION

Graceful Degradation is a widely used term which ideology is basically using the latest technologies first, and then fix anything that needs fixing for older browsers.

PROGRESSIVE ENHANCEMENT

Progressive Enhancement refers to the habit of building first for the less capable, outdated browser and then enhance for the latest technologies.

DOM

The Document Object Model (DOM) is a cross-platform and language-independent convention for representing and interacting with objects in HTML, XHTML and XML documents.

DOCTYPE

A Document Type Declaration, or doctype for short, has traditionally been used to specify which particular flavor of markup a document is written in.

Source: Book: HTML5 For Web Designers by Jeremy Keith

DOCTYPE

The doctype for HTML 4.01 looks like this (line wraps marked »): <!DOCTYPE HTML PUBLIC » "-//W3C//DTD HTML 4.01//EN" » "http://www.w3.org/TR/html4/strict.dtd">


DOCTYPE

Here’s the doctype for XHTML 1.0: <!DOCTYPE html PUBLIC » "-//W3C//DTD XHTML 1.0 Strict //EN" » "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


DOCTYPE

HTML5:

<!DOCTYPE html>


What is RWD?

Responsive Web Design is the approach to design that allows websites to adapt to ideally fit with screens of different shapes and sizes to provide an optimal viewing experience.

Source: 3seven9.com

http://www.alistapart.com/articles/responsive-web-design/

http://www.abookapart.com/products/responsive-web-design

Elements of RWD

● Fluid Grid

Elements of RWD

● Fluid Grid● Resizable Images (media)

Elements of RWD

● Fluid Grid● Resizable Images (media)● Media Queries

Elements of RWD

● Fluid Grid● Resizable Images (media)● Media Queries

+ a lot more stuff you need to deal with

Fonts - PXs

Fixed size

Fonts - PXs

Fixed sizeNot resizable

Fonts - PXs

Fixed sizeNot resizableNot relative

Fonts - EMs

Fonts - EMs

Base font size is based on M

Fonts - EMs

Base font size is based on M1em = Browser default body font size = 16px1em = 100% the default body font size

Fonts - EMs


2em = 32px

Fonts - EMs


2em = 32px

EMs can be used for anything: width, height, margin, padding, etc.

Fonts - EMs

Problems with EMs

Fonts - EMs

Problems with EMs

The cascade/compounding problem, em's are relative to font size of parent

Fonts - EMs

Problems with EMs

The cascade/compounding problem, em's are relative to font size of parent

li {font-size: 1.5em;} = 24px;A list in a list is not 24px it's a 32px

Fonts - REMs

REMs like EMs, but based on root HTML element size

Fonts - REMs


Supported by all modern browsers

CodePen Demo

Fonts - REMs


Supported by all modern browsers

Need to specify fallback for IE 8 and belowh1{font-size: 16px;font-size: 1rem;}

http://caniuse.com/#search=rem

Grid Systems

SkeletonNeat

960 Grid System

Simple Grid

csswizardry-grids

BootstrapFoundation

Singularity GS

Sussy

Profound Grid

Responsive Grid System

rwdgrid

CSS Smart Grid

Why Grids?

How do Grids work?

● Grid systems are built using rows & columns● A fluid grid uses percentages instead of pixels

Media Queries

Media Queries

Media Queries is a CSS3 module allowing to adapt the rendering of web pages based on conditions such as screen resolution. It was first drafted in 2001 by the W3C and became a recommended standard in June 2012. It is a cornerstone technology to RWD.

Devices

Common Breakpoints

Label Layout Width

Smartphones 480px and below

Portrait Tablets 480px to 768px

Landscape Tablets 768px to 940px

Desktops 940px and up

Large Screen 1210px and up

Resizable Images

img {max-width: 100%;height: auto;}

Resizable Images

img, embed, object, video, iframe {max-width: 100%;height: auto;}

Viewport meta tag

<meta name="viewport" content="width=device-width" />

What do you do when you

lose 80% of your canvas?

http://www.abookapart.com/products/mobile-first

Building a Responsive Website

Planning

● Reset or normalize?● Viewport meta tag● Browser and device support● Navigation● Resizable Images/Media● CSS3

Layout

● Sketching and/or Wireframing

● Content decisions● Source Ordering

Navigation

● The concept● Options● Issues to consider● Fixes and Hacks

Testing

● Browser test● Simulator test● Device test

Addressing Issues

● Internet Explorer and HTML5 elements● Internet Explorer and Media Queries● Proactively implementing fallbacks

What’s next?

● Versioning control● Putting your site up on github● Accessing your website on the web● Additional resources (review relevant

resources and information)

Front-End Frameworks

Comparing Frameworks

● Bootstrap● Foundation

Helpful Resources

● Font Size with REMs: http://snook.ca/archives/html_and_css/font-

size-with-rem

● Media Query Bookmarklet: http://goo.gl/RToKTC

● What's my browser size: http://whatsmybrowsersize.com

● Responsive Navigation: http://responsivenavigation.net/

● Media Queries for iOS devices: http://stephen.io/mediaqueries

● 10 Basic Tips for RWD: http://www.splio.com/responsive

The Ultimate RWD Beginners Resource List:

http://www.targetlocal.co.uk/responsive-web-design-resources/

Web: http://DesignsDrive.com

Email: [email protected]

Twitter: @DesignsDrive

Slides available at: http://slideshare.net/marequi

MARIO HERNANDEZFront-End Developer

responsive web design

Design

fonts ems base font

px ems

fonts ems problems

fonts pxs fixed size

browser default body

doctype html5

fonts rems rems

fonts pixels