responsive web design
Post on 28-Jan-2015
3.690 Views
Preview:
DESCRIPTION
TRANSCRIPT
Responsive Web Design (RWD)by Mario Hernandez
Web: http://DesignsDrive.com
Email: designsdrive@gmail.com
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
What search engines are looking for
Content
What search engines are looking for
ContentPerformance
What search engines are looking for
ContentPerformance
Authority
What search engines are looking for
ContentPerformance
AuthorityUser Experience
Source: http://searchenginewatch.com/article/2259693/SEO-Basics-8-Essentials-When-Optimizing-Your-Site
What search engines are NOT looking for
What search engines are NOT looking for
Keyword Stuffing
What search engines are NOT looking for
Keyword StuffingPurchased Links
What search engines are NOT looking for
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.
DOM
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">
Source: Book: HTML5 For Web Designers by Jeremy Keith
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
DOCTYPE
HTML5:
<!DOCTYPE html>
Source: Book: HTML5 For Web Designers by Jeremy Keith
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
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
Base font size is based on M1em = Browser default body font size = 16px1em = 100% the default body font size
2em = 32px
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.
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
REMs like EMs, but based on root HTML element size
Supported by all modern browsers
CodePen Demo
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
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: designsdrive@gmail.com
Twitter: @DesignsDrive
Slides available at: http://slideshare.net/marequi
MARIO HERNANDEZFront-End Developer
top related