Download - Responsive Web Design Basics
INTERNET USERS
199535MM, 0.6% of world pop.
http://www.kpcb.com/internet-trends
INTERNET USERS
20142.8B, 39% of world pop.
http://www.kpcb.com/internet-trends
MOBILE PHONE USERS
199580MM, 1% of world pop.
http://www.kpcb.com/internet-trends
MOBILE PHONE USERS
20145.2B, 73% of world pop.
http://www.kpcb.com/internet-trends
BASIC CRITERIADiscoverability Highly targeted audience or broadly available?
Control How detailed do we want to be?
Functionality Do we need device specific functionality such as utilizing accelerometers?
Overhead Does the value of operating separate customer facing applications outweigh the effort to maintain separate codebases? How quickly can we update?
POSSIBLE SOLUTIONSSOLUTION WINS ON LOSES ON
Native App Control, Functionality Overhead, Discoverability
Mobile Site Control, Discoverability Overhead, Functionality
Responsive Discoverability, Overhead Functionality, Control
WE’RE GOING TO ASSUME…• We can deliver everything we need to in a browser • We want to quickly reach as many people as easily as possible • We don’t want to maintain separate codebases
LAYOUT VIA GRIDSExample 12 Column Grid
ARTICLE
META
NAV
OVERSIZED HEADLINE
Too Tight?
Breaks out?
Unused Width?
Wraps?
CSS MEDIA QUERIES• CSS defines the visual style of the HTML elements on a page • CSS media queries allow you to define specific visual styles
whenever the browser meets certain criteria • Usually based on the width of the browser window
CSS MEDIA QUERIESMobile First For screens larger than X, apply these styles…
Desktop First For screens smaller than Y, apply these styles…
MOBILE FIRST.headline-container { width: 100%; }
@media screen and (min-width: 320px) { .headline-container { width: 66.6666667%; }}
Best practice is to start developing ‘Mobile First’ but for this demo we’ll be doing ‘Desktop First’.
DESKTOP FIRST.headline-container { width: 66.6666667%; }
@media screen and (max-width: 320px) { .headline-container { width: 100%; }}
Best practice is to start developing ‘Mobile First’ but for this demo we’ll be doing ‘Desktop First’.
LAYOUT VIA GRIDSExample 12 Column Grid
ARTICLE
META
NAV
OVERSIZED HEADLINE
Too Tight?
Breaks out?
Unused Width?
Wraps?
EXAMPLESThis Is Responsive Bare bones responsive layout demo
Uncrate Simple layout with responsive aspects
The Onion More complex than Uncrate
Invision Labs Highly polished responsive example
Rally Interactive Highly polished responsive example
BEST PRACTICESKeep page weight light
Utilize a mobile first approach to ensure you don’t accidentally punish mobile users
Characteristics ≠ Capabilities
Don’t infer device capability from device characteristics or type
Be consistent across breakpoints
Don’t unreasonably remove or display content / functionality based on breakpoints
CLIENT SIDE + SERVER SIDE• Responsive Web Design is focused on the client side (browser) • RESS = Responsive with Server Side components • Server detects device type based on UA (User Agent) and sends
content specifically for that type of device • Benefits of an m. site without a redirect or separate codebase
THE LATEST DEVELOPMENTSGoogle’s Mobile Friendly Tag
In mobile search results, Google will tag your site as ‘Mobile Friendly’ and penalize you if it’s not
Google’s Accelerated Mobile Pages (AMP)
Special stripped down HTML pages that Google’s promoting in search results
Increasing support for flex box
More flexible in layout control than floated columns
WHAT WE TALKED ABOUTDevice Proliferation
As device sizes fragment, we need a solution that covers this breadth
Why Responsive Responsive web design provides more breadth but less functionality compared to native apps
Grids & Media Queries
We can adapt the layout (and other) characteristics of our site for different devices
RESS & Latest Developments
New approaches continue to be developed to meet different needs
LEARNING MORECODE
Google Developers (Mobile)
Codepen
Codrops Playground
Twitter Bootstrap
RESOURCES
This Is Responsive
A List Apart
A Book Apart
PEOPLE
Brad Frost
Luke W.
Ethan Marcotte
Scott Jehl
• RWD is only a small part of what we do
• Our TechnologySolutions practice coverscustom app dev,eCommerce, mobile apps, analytics and other
• We’re looking for FEDs inthe UX practice
CREDERA MC
UX
TECH
credera.com/careers ▪ ux.credera.com ▪ [email protected]