Download - Responsive Web Design
![Page 1: Responsive Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062511/54c7ee344a795999488b4812/html5/thumbnails/1.jpg)
Responsive Web Design (RWD)by Mario Hernandez
![Page 2: Responsive Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062511/54c7ee344a795999488b4812/html5/thumbnails/2.jpg)
Web: http://DesignsDrive.com
Email: [email protected]
Twitter: @DesignsDrive
Slides available at: http://slideshare.net/marequi
MARIO HERNANDEZFront-End Developer
![Page 3: Responsive Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062511/54c7ee344a795999488b4812/html5/thumbnails/3.jpg)
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
![Page 4: Responsive Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062511/54c7ee344a795999488b4812/html5/thumbnails/4.jpg)
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
![Page 5: Responsive Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062511/54c7ee344a795999488b4812/html5/thumbnails/5.jpg)
Agenda
Session One:
Responsive Web Design or RWD
![Page 6: Responsive Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062511/54c7ee344a795999488b4812/html5/thumbnails/6.jpg)
mariohernandez.github.io/responsive
Our Project
![Page 7: Responsive Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062511/54c7ee344a795999488b4812/html5/thumbnails/7.jpg)
SEO
Search Engine Optimization
![Page 8: Responsive Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062511/54c7ee344a795999488b4812/html5/thumbnails/8.jpg)
What search engines are looking for
![Page 9: Responsive Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062511/54c7ee344a795999488b4812/html5/thumbnails/9.jpg)
What search engines are looking for
Content
![Page 10: Responsive Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062511/54c7ee344a795999488b4812/html5/thumbnails/10.jpg)
What search engines are looking for
ContentPerformance
![Page 11: Responsive Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062511/54c7ee344a795999488b4812/html5/thumbnails/11.jpg)
What search engines are looking for
ContentPerformance
Authority
![Page 12: Responsive Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062511/54c7ee344a795999488b4812/html5/thumbnails/12.jpg)
What search engines are looking for
ContentPerformance
AuthorityUser Experience
Source: http://searchenginewatch.com/article/2259693/SEO-Basics-8-Essentials-When-Optimizing-Your-Site
![Page 13: Responsive Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062511/54c7ee344a795999488b4812/html5/thumbnails/13.jpg)
What search engines are NOT looking for
![Page 14: Responsive Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062511/54c7ee344a795999488b4812/html5/thumbnails/14.jpg)
What search engines are NOT looking for
Keyword Stuffing
![Page 15: Responsive Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062511/54c7ee344a795999488b4812/html5/thumbnails/15.jpg)
What search engines are NOT looking for
Keyword StuffingPurchased Links
![Page 16: Responsive Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062511/54c7ee344a795999488b4812/html5/thumbnails/16.jpg)
What search engines are NOT looking for
Keyword StuffingPurchased Links
Poor User Experience
![Page 17: Responsive Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062511/54c7ee344a795999488b4812/html5/thumbnails/17.jpg)
Be consistent with Domain Names
![Page 18: Responsive Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062511/54c7ee344a795999488b4812/html5/thumbnails/18.jpg)
HTML5Document Object Model (DOM)
![Page 19: Responsive Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062511/54c7ee344a795999488b4812/html5/thumbnails/19.jpg)
IT’S NOT ONE BIG THING
How can I start using HTML5 if browsers don’t support it?
![Page 20: Responsive Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062511/54c7ee344a795999488b4812/html5/thumbnails/20.jpg)
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)
![Page 21: Responsive Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062511/54c7ee344a795999488b4812/html5/thumbnails/21.jpg)
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
![Page 22: Responsive Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062511/54c7ee344a795999488b4812/html5/thumbnails/22.jpg)
IT’S EASY TO GET STARTED
![Page 23: Responsive Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062511/54c7ee344a795999488b4812/html5/thumbnails/23.jpg)
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.
![Page 24: Responsive Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062511/54c7ee344a795999488b4812/html5/thumbnails/24.jpg)
PROGRESSIVE ENHANCEMENT
Progressive Enhancement refers to the habit of building first for the less capable, outdated browser and then enhance for the latest technologies.
![Page 25: Responsive Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062511/54c7ee344a795999488b4812/html5/thumbnails/25.jpg)
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.
![Page 26: Responsive Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062511/54c7ee344a795999488b4812/html5/thumbnails/26.jpg)
DOM
![Page 27: Responsive Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062511/54c7ee344a795999488b4812/html5/thumbnails/27.jpg)
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
![Page 28: Responsive Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062511/54c7ee344a795999488b4812/html5/thumbnails/28.jpg)
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">
Source: Book: HTML5 For Web Designers by Jeremy Keith
![Page 29: Responsive Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062511/54c7ee344a795999488b4812/html5/thumbnails/29.jpg)
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">
Source: Book: HTML5 For Web Designers by Jeremy Keith
![Page 30: Responsive Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062511/54c7ee344a795999488b4812/html5/thumbnails/30.jpg)
DOCTYPE
HTML5:
<!DOCTYPE html>
Source: Book: HTML5 For Web Designers by Jeremy Keith
![Page 31: Responsive Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062511/54c7ee344a795999488b4812/html5/thumbnails/31.jpg)
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/
![Page 32: Responsive Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062511/54c7ee344a795999488b4812/html5/thumbnails/32.jpg)
http://www.abookapart.com/products/responsive-web-design
![Page 33: Responsive Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062511/54c7ee344a795999488b4812/html5/thumbnails/33.jpg)
Elements of RWD
● Fluid Grid
![Page 34: Responsive Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062511/54c7ee344a795999488b4812/html5/thumbnails/34.jpg)
Elements of RWD
● Fluid Grid● Resizable Images (media)
![Page 35: Responsive Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062511/54c7ee344a795999488b4812/html5/thumbnails/35.jpg)
Elements of RWD
● Fluid Grid● Resizable Images (media)● Media Queries
![Page 36: Responsive Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062511/54c7ee344a795999488b4812/html5/thumbnails/36.jpg)
Elements of RWD
● Fluid Grid● Resizable Images (media)● Media Queries
+ a lot more stuff you need to deal with
![Page 37: Responsive Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062511/54c7ee344a795999488b4812/html5/thumbnails/37.jpg)
Fonts
![Page 38: Responsive Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062511/54c7ee344a795999488b4812/html5/thumbnails/38.jpg)
Fonts - PXs
Fixed size
![Page 39: Responsive Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062511/54c7ee344a795999488b4812/html5/thumbnails/39.jpg)
Fonts - PXs
Fixed sizeNot resizable
![Page 40: Responsive Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062511/54c7ee344a795999488b4812/html5/thumbnails/40.jpg)
Fonts - PXs
Fixed sizeNot resizableNot relative
![Page 41: Responsive Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062511/54c7ee344a795999488b4812/html5/thumbnails/41.jpg)
Fonts - EMs
![Page 42: Responsive Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062511/54c7ee344a795999488b4812/html5/thumbnails/42.jpg)
Fonts - EMs
Base font size is based on M
![Page 43: Responsive Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062511/54c7ee344a795999488b4812/html5/thumbnails/43.jpg)
Fonts - EMs
Base font size is based on M1em = Browser default body font size = 16px1em = 100% the default body font size
![Page 44: Responsive Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062511/54c7ee344a795999488b4812/html5/thumbnails/44.jpg)
Fonts - EMs
Base font size is based on M1em = Browser default body font size = 16px1em = 100% the default body font size
2em = 32px
![Page 45: Responsive Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062511/54c7ee344a795999488b4812/html5/thumbnails/45.jpg)
Fonts - EMs
Base font size is based on M1em = Browser default body font size = 16px1em = 100% the default body font size
2em = 32px
EMs can be used for anything: width, height, margin, padding, etc.
![Page 46: Responsive Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062511/54c7ee344a795999488b4812/html5/thumbnails/46.jpg)
Fonts - EMs
Problems with EMs
![Page 47: Responsive Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062511/54c7ee344a795999488b4812/html5/thumbnails/47.jpg)
Fonts - EMs
Problems with EMs
The cascade/compounding problem, em's are relative to font size of parent
![Page 48: Responsive Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062511/54c7ee344a795999488b4812/html5/thumbnails/48.jpg)
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
![Page 49: Responsive Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062511/54c7ee344a795999488b4812/html5/thumbnails/49.jpg)
Fonts - REMs
REMs like EMs, but based on root HTML element size
![Page 50: Responsive Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062511/54c7ee344a795999488b4812/html5/thumbnails/50.jpg)
Fonts - REMs
REMs like EMs, but based on root HTML element size
Supported by all modern browsers
CodePen Demo
![Page 51: Responsive Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062511/54c7ee344a795999488b4812/html5/thumbnails/51.jpg)
Fonts - REMs
REMs like EMs, but based on root HTML element size
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
![Page 52: Responsive Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062511/54c7ee344a795999488b4812/html5/thumbnails/52.jpg)
Grid Systems
![Page 53: Responsive Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062511/54c7ee344a795999488b4812/html5/thumbnails/53.jpg)
SkeletonNeat
960 Grid System
Simple Grid
csswizardry-grids
BootstrapFoundation
Singularity GS
Sussy
Profound Grid
Responsive Grid System
rwdgrid
CSS Smart Grid
![Page 54: Responsive Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062511/54c7ee344a795999488b4812/html5/thumbnails/54.jpg)
Why Grids?
![Page 55: Responsive Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062511/54c7ee344a795999488b4812/html5/thumbnails/55.jpg)
How do Grids work?
● Grid systems are built using rows & columns● A fluid grid uses percentages instead of pixels
![Page 56: Responsive Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062511/54c7ee344a795999488b4812/html5/thumbnails/56.jpg)
Media Queries
![Page 57: Responsive Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062511/54c7ee344a795999488b4812/html5/thumbnails/57.jpg)
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.
![Page 58: Responsive Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062511/54c7ee344a795999488b4812/html5/thumbnails/58.jpg)
Devices
![Page 59: Responsive Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062511/54c7ee344a795999488b4812/html5/thumbnails/59.jpg)
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
![Page 60: Responsive Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062511/54c7ee344a795999488b4812/html5/thumbnails/60.jpg)
Resizable Images
img {max-width: 100%;height: auto;}
![Page 61: Responsive Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062511/54c7ee344a795999488b4812/html5/thumbnails/61.jpg)
Resizable Images
img, embed, object, video, iframe {max-width: 100%;height: auto;}
![Page 62: Responsive Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062511/54c7ee344a795999488b4812/html5/thumbnails/62.jpg)
Viewport meta tag
<meta name="viewport" content="width=device-width" />
![Page 63: Responsive Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062511/54c7ee344a795999488b4812/html5/thumbnails/63.jpg)
![Page 64: Responsive Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062511/54c7ee344a795999488b4812/html5/thumbnails/64.jpg)
What do you do when you
lose 80% of your canvas?
![Page 65: Responsive Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062511/54c7ee344a795999488b4812/html5/thumbnails/65.jpg)
http://www.abookapart.com/products/mobile-first
![Page 66: Responsive Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062511/54c7ee344a795999488b4812/html5/thumbnails/66.jpg)
Building a Responsive Website
![Page 67: Responsive Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062511/54c7ee344a795999488b4812/html5/thumbnails/67.jpg)
Planning
● Reset or normalize?● Viewport meta tag● Browser and device support● Navigation● Resizable Images/Media● CSS3
![Page 68: Responsive Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062511/54c7ee344a795999488b4812/html5/thumbnails/68.jpg)
Layout
● Sketching and/or Wireframing
● Content decisions● Source Ordering
![Page 69: Responsive Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062511/54c7ee344a795999488b4812/html5/thumbnails/69.jpg)
Navigation
● The concept● Options● Issues to consider● Fixes and Hacks
![Page 70: Responsive Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062511/54c7ee344a795999488b4812/html5/thumbnails/70.jpg)
Testing
● Browser test● Simulator test● Device test
![Page 71: Responsive Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062511/54c7ee344a795999488b4812/html5/thumbnails/71.jpg)
Addressing Issues
● Internet Explorer and HTML5 elements● Internet Explorer and Media Queries● Proactively implementing fallbacks
![Page 72: Responsive Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062511/54c7ee344a795999488b4812/html5/thumbnails/72.jpg)
What’s next?
● Versioning control● Putting your site up on github● Accessing your website on the web● Additional resources (review relevant
resources and information)
![Page 73: Responsive Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062511/54c7ee344a795999488b4812/html5/thumbnails/73.jpg)
Front-End Frameworks
![Page 74: Responsive Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062511/54c7ee344a795999488b4812/html5/thumbnails/74.jpg)
Comparing Frameworks
● Bootstrap● Foundation
![Page 75: Responsive Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062511/54c7ee344a795999488b4812/html5/thumbnails/75.jpg)
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/
![Page 76: Responsive Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062511/54c7ee344a795999488b4812/html5/thumbnails/76.jpg)
Web: http://DesignsDrive.com
Email: [email protected]
Twitter: @DesignsDrive
Slides available at: http://slideshare.net/marequi
MARIO HERNANDEZFront-End Developer