Responsive Web Design: From Mobile To Desktop, And Beyond
-
Upload
gravityworksdd -
Category
Documents
-
view
108 -
download
2
description
Transcript of Responsive Web Design: From Mobile To Desktop, And Beyond
![Page 1: Responsive Web Design: From Mobile To Desktop, And Beyond](https://reader034.fdocuments.in/reader034/viewer/2022042714/54c7ee314a795989658b4584/html5/thumbnails/1.jpg)
![Page 2: Responsive Web Design: From Mobile To Desktop, And Beyond](https://reader034.fdocuments.in/reader034/viewer/2022042714/54c7ee314a795989658b4584/html5/thumbnails/2.jpg)
What? Why? How?
What is responsive web design?
How to create a responsive layout
How to ensure all site elements work in that layout
Setting breakpoint changes with Media Queries
Responsive menu options
![Page 3: Responsive Web Design: From Mobile To Desktop, And Beyond](https://reader034.fdocuments.in/reader034/viewer/2022042714/54c7ee314a795989658b4584/html5/thumbnails/3.jpg)
What is A Responsive WebSITE?
A fluid layout and flexible images adapted with media queries
![Page 4: Responsive Web Design: From Mobile To Desktop, And Beyond](https://reader034.fdocuments.in/reader034/viewer/2022042714/54c7ee314a795989658b4584/html5/thumbnails/4.jpg)
Responsive vs. Adaptive
A fluid grid layout
Additional changes applied with Media Queries
Multiple fixed width layouts
Layout changes at set breakpoints (with Media Queries)
![Page 5: Responsive Web Design: From Mobile To Desktop, And Beyond](https://reader034.fdocuments.in/reader034/viewer/2022042714/54c7ee314a795989658b4584/html5/thumbnails/5.jpg)
Basic Components
A flexible, grid-based layout
Flexible images and media
Media queries for specific adjustments
![Page 6: Responsive Web Design: From Mobile To Desktop, And Beyond](https://reader034.fdocuments.in/reader034/viewer/2022042714/54c7ee314a795989658b4584/html5/thumbnails/6.jpg)
Fluid on smaller screens + fixed maximum size
Hybrid Approaches
One column flexible + one column fixed
![Page 7: Responsive Web Design: From Mobile To Desktop, And Beyond](https://reader034.fdocuments.in/reader034/viewer/2022042714/54c7ee314a795989658b4584/html5/thumbnails/7.jpg)
Let’s Get Started! AmeliaMarschall.com
![Page 8: Responsive Web Design: From Mobile To Desktop, And Beyond](https://reader034.fdocuments.in/reader034/viewer/2022042714/54c7ee314a795989658b4584/html5/thumbnails/8.jpg)
Fluid wrapper: #page { ! width: 90%;! max-width: 960px; ! margin: 15px auto; }!
or #page { width: 960px; max-width: 90%; margin: 15px auto; }!
Set a fluid grid
![Page 9: Responsive Web Design: From Mobile To Desktop, And Beyond](https://reader034.fdocuments.in/reader034/viewer/2022042714/54c7ee314a795989658b4584/html5/thumbnails/9.jpg)
Float columns: !
#LeftColumn { float: left; width: 70%; }!!
#RightColumn { float: right; width: 30%; }!
Set a fluid grid
![Page 10: Responsive Web Design: From Mobile To Desktop, And Beyond](https://reader034.fdocuments.in/reader034/viewer/2022042714/54c7ee314a795989658b4584/html5/thumbnails/10.jpg)
Set Fixed Margins (really, It’s Ok!)
Use CSS Box Sizing
Standard box model:
Padding & border added on to width/height
box-sizing: content-box!
New box model:
Padding & border subtracted from width/height
box-sizing: border-box!
![Page 11: Responsive Web Design: From Mobile To Desktop, And Beyond](https://reader034.fdocuments.in/reader034/viewer/2022042714/54c7ee314a795989658b4584/html5/thumbnails/11.jpg)
#LeftColumn { padding: 10px 20px;! -moz-box-sizing:border-box; -webkit-box-sizing:border-box;! box-sizing:border-box; }!
#RightColumn { padding: 10px;! -moz-box-sizing:border-box; -webkit-box-sizing:border-box;! box-sizing:border-box; border: 1px solid #627A7E; }!
IE Polyfill: (Natively supported in IE8+) https://github.com/Schepp/box-sizing-polyfill
Set Fixed Margins (Actually padding)
![Page 12: Responsive Web Design: From Mobile To Desktop, And Beyond](https://reader034.fdocuments.in/reader034/viewer/2022042714/54c7ee314a795989658b4584/html5/thumbnails/12.jpg)
Nested Columns
Widths set with percentage are relative to their container element!
![Page 13: Responsive Web Design: From Mobile To Desktop, And Beyond](https://reader034.fdocuments.in/reader034/viewer/2022042714/54c7ee314a795989658b4584/html5/thumbnails/13.jpg)
Nested Columns
#dnn_ContentLeft { float: left; width: 60%; padding-right: 40px; box-sizing: border-box; }!#dnn_ContentRight { float: left; width: 40%; box-sizing: border-box; }!
![Page 14: Responsive Web Design: From Mobile To Desktop, And Beyond](https://reader034.fdocuments.in/reader034/viewer/2022042714/54c7ee314a795989658b4584/html5/thumbnails/14.jpg)
Make Changes with Media Queries
Media queries serve different CSS based on your browser size or type
Include directly in your CSS file, at the end:
@media (max-width: 900px) { }!!
Or link separate CSS files from your HTML: <link rel=“stylesheet” type=“text/css” href=“style.css” media=“all and (min-width: 481px)”>!
![Page 15: Responsive Web Design: From Mobile To Desktop, And Beyond](https://reader034.fdocuments.in/reader034/viewer/2022042714/54c7ee314a795989658b4584/html5/thumbnails/15.jpg)
Make Changes with Media Queries
Define regular (desktop site) styles, then:
• @media (max-width: 900px) { }!• @media (max-width: 720px) { }!• @media (max-width: 480px) { }!• @media (max-width: 320px) { }!
![Page 16: Responsive Web Design: From Mobile To Desktop, And Beyond](https://reader034.fdocuments.in/reader034/viewer/2022042714/54c7ee314a795989658b4584/html5/thumbnails/16.jpg)
Or, go “mobile first”: • @media (min-width: 480px) { }!• @media (min-width: 720px) { }!• Etc…!
Better for performance!
Make Changes with Media Queries
![Page 17: Responsive Web Design: From Mobile To Desktop, And Beyond](https://reader034.fdocuments.in/reader034/viewer/2022042714/54c7ee314a795989658b4584/html5/thumbnails/17.jpg)
Make Changes with Media Queries
![Page 18: Responsive Web Design: From Mobile To Desktop, And Beyond](https://reader034.fdocuments.in/reader034/viewer/2022042714/54c7ee314a795989658b4584/html5/thumbnails/18.jpg)
@media only works in IE 9 +
• Javascript polyfill for IE 8 and below:
– https://github.com/scottjehl/Respond
– Adds support for media queries set with min-width/max-width
• For wider media query support:
– http://code.google.com/p/css3-mediaqueries-js
• Or use conditional comments to link to IE CSS
Media Queries & IE
![Page 19: Responsive Web Design: From Mobile To Desktop, And Beyond](https://reader034.fdocuments.in/reader034/viewer/2022042714/54c7ee314a795989658b4584/html5/thumbnails/19.jpg)
Example Site Queries
@media (max-width: 900px) {!#ContentLeft, #ContentRight {! ! ! width:100%;! ! padding:0; !!} }!
![Page 20: Responsive Web Design: From Mobile To Desktop, And Beyond](https://reader034.fdocuments.in/reader034/viewer/2022042714/54c7ee314a795989658b4584/html5/thumbnails/20.jpg)
@media (max-width: 900px)!
![Page 21: Responsive Web Design: From Mobile To Desktop, And Beyond](https://reader034.fdocuments.in/reader034/viewer/2022042714/54c7ee314a795989658b4584/html5/thumbnails/21.jpg)
@media (max-width: 730px) { #LeftColumn, #RightColumn { ! ! ! width: 100%;! ! !} #FooterLeft, #FooterMiddle, ! ! #FooterRight {! ! width: 100%; ! ! margin: 0 0 20px 0; !! !} }!
Example Site Queries
![Page 22: Responsive Web Design: From Mobile To Desktop, And Beyond](https://reader034.fdocuments.in/reader034/viewer/2022042714/54c7ee314a795989658b4584/html5/thumbnails/22.jpg)
![Page 23: Responsive Web Design: From Mobile To Desktop, And Beyond](https://reader034.fdocuments.in/reader034/viewer/2022042714/54c7ee314a795989658b4584/html5/thumbnails/23.jpg)
@media (max-width: 650px) { #primary .show-mobile {! !! display: block; ! ! padding: 20px 20px 20px 64px;! ! background: url(images/mobile- ! ! menu.png) no-repeat #8CC8D8;!!! } }!
Example Site Queries
![Page 24: Responsive Web Design: From Mobile To Desktop, And Beyond](https://reader034.fdocuments.in/reader034/viewer/2022042714/54c7ee314a795989658b4584/html5/thumbnails/24.jpg)
![Page 25: Responsive Web Design: From Mobile To Desktop, And Beyond](https://reader034.fdocuments.in/reader034/viewer/2022042714/54c7ee314a795989658b4584/html5/thumbnails/25.jpg)
@media (max-width: 470px) { !#page {! ! width:96%; ! ! margin:5px auto; } !!#branding hgroup { ! width: 100%; } ! ! #primary {! ! margin: 0 0 10px 0;! ! width:100%; } #primary .show-mobile { ! ! width:100%;!} }!
Example Site Queries
![Page 26: Responsive Web Design: From Mobile To Desktop, And Beyond](https://reader034.fdocuments.in/reader034/viewer/2022042714/54c7ee314a795989658b4584/html5/thumbnails/26.jpg)
![Page 27: Responsive Web Design: From Mobile To Desktop, And Beyond](https://reader034.fdocuments.in/reader034/viewer/2022042714/54c7ee314a795989658b4584/html5/thumbnails/27.jpg)
Set Font Sizes
Set font sizes in em’s: • body { font-size: 100%; }
( 16px )
• h1 { font-size: 1.5 em } ( 24px / 16px = 1.5 )
• Change body size in @media to adjust all site fonts
Use Fittext.js for scalable headlines that fit the width of its surrounding element.
![Page 28: Responsive Web Design: From Mobile To Desktop, And Beyond](https://reader034.fdocuments.in/reader034/viewer/2022042714/54c7ee314a795989658b4584/html5/thumbnails/28.jpg)
Set (or don’t set) Media Sizes
Ensure media always stays within set columns:
• img, object, embed, iframe, video { max-width:100%; } !
• Do not set inline height and width of images or media
• Use Fitvidsjs.com for video (unless actually using the <video> element)
![Page 29: Responsive Web Design: From Mobile To Desktop, And Beyond](https://reader034.fdocuments.in/reader034/viewer/2022042714/54c7ee314a795989658b4584/html5/thumbnails/29.jpg)
Load Specifically-sized images
Use mobile-first media queries to only load larger images once needed
Or use Adaptive Images: adaptive-images.com • Detects screen size. • Automatically creates, caches, and delivers re-scaled
versions of embedded HTML images. • No mark-up changes needed. • Original PHP by Matt Wilcox. Ports for .NET and Cold
Fusion, Plugins for Wordpress and Drupal.
![Page 30: Responsive Web Design: From Mobile To Desktop, And Beyond](https://reader034.fdocuments.in/reader034/viewer/2022042714/54c7ee314a795989658b4584/html5/thumbnails/30.jpg)
Hide Content
display:none!
• Hide unnecessary content for mobile
• Add mobile only content with
display:none in the regular CSS
Important Note: With no “link to full site”, don’t hide too much!
![Page 31: Responsive Web Design: From Mobile To Desktop, And Beyond](https://reader034.fdocuments.in/reader034/viewer/2022042714/54c7ee314a795989658b4584/html5/thumbnails/31.jpg)
Hide Content
EXTRA Important Note: display:none hides content but (generally) does not improve performance!
Hiding images:
Setting parent element to display:none will prevent the image from being loaded.
![Page 32: Responsive Web Design: From Mobile To Desktop, And Beyond](https://reader034.fdocuments.in/reader034/viewer/2022042714/54c7ee314a795989658b4584/html5/thumbnails/32.jpg)
Responsive Menu Options
Use unordered list menu layouts: <nav> <ul> <li><a href="/”>Home</a></li> <li><a href="/About.aspx">About</a></li> <li><a href="/Speaking.aspx">Speaking</a></li> <li><a href="/Contact.aspx">Contact</a></li> </ul> </nav>!
![Page 33: Responsive Web Design: From Mobile To Desktop, And Beyond](https://reader034.fdocuments.in/reader034/viewer/2022042714/54c7ee314a795989658b4584/html5/thumbnails/33.jpg)
1. Flow the menu onto two lines
![Page 34: Responsive Web Design: From Mobile To Desktop, And Beyond](https://reader034.fdocuments.in/reader034/viewer/2022042714/54c7ee314a795989658b4584/html5/thumbnails/34.jpg)
1. Flow the menu onto two lines
What a horizontal unordered list will naturally do
Can hide submenu dropdowns (If accessible elsewhere)
• nav ul li ul { display:none; }!
Use media queries to reduce font sizes before breaking to two lines
![Page 35: Responsive Web Design: From Mobile To Desktop, And Beyond](https://reader034.fdocuments.in/reader034/viewer/2022042714/54c7ee314a795989658b4584/html5/thumbnails/35.jpg)
Tutorial: http://designshack.net/articles/css/ code-a-responsive-navigation-menu
1. Flow the menu onto two lines
![Page 36: Responsive Web Design: From Mobile To Desktop, And Beyond](https://reader034.fdocuments.in/reader034/viewer/2022042714/54c7ee314a795989658b4584/html5/thumbnails/36.jpg)
When to use it?
Submenus don’t need to be accessed
Items will fit on two lines
Items not expected to change often
A solution without Javascript is desired
Minimal effort desired
1. Flow the menu onto two lines
![Page 37: Responsive Web Design: From Mobile To Desktop, And Beyond](https://reader034.fdocuments.in/reader034/viewer/2022042714/54c7ee314a795989658b4584/html5/thumbnails/37.jpg)
2. Switch a horizontal menu to vertical
![Page 38: Responsive Web Design: From Mobile To Desktop, And Beyond](https://reader034.fdocuments.in/reader034/viewer/2022042714/54c7ee314a795989658b4584/html5/thumbnails/38.jpg)
2. Switch a horizontal menu to vertical
Regular CSS:
• nav ul li { float:left; }!Mobile-size CSS:
• @media (max-width: 480px) { nav ul li { float:none; ! ! ! width:100%; }! }!
Can hide submenu dropdowns (If accessible elsewhere)
• nav ul li ul { display:none; }!
![Page 39: Responsive Web Design: From Mobile To Desktop, And Beyond](https://reader034.fdocuments.in/reader034/viewer/2022042714/54c7ee314a795989658b4584/html5/thumbnails/39.jpg)
Tutorial to include dropdown submenus: http://ejhansel.com/a-responsive-drop-down-navigation-menu
• Based on Suckerfish dropdowns • Uses :hover to expand submenus
2. Switch a horizontal menu to vertical
![Page 40: Responsive Web Design: From Mobile To Desktop, And Beyond](https://reader034.fdocuments.in/reader034/viewer/2022042714/54c7ee314a795989658b4584/html5/thumbnails/40.jpg)
2. Switch a horizontal menu to vertical
When to use it?
More menu items
Longer page names
Can choose whether to include submenus
A solution without Javascript is desired
Minimal effort desired
![Page 41: Responsive Web Design: From Mobile To Desktop, And Beyond](https://reader034.fdocuments.in/reader034/viewer/2022042714/54c7ee314a795989658b4584/html5/thumbnails/41.jpg)
3. Switch to an expandable menu button
![Page 42: Responsive Web Design: From Mobile To Desktop, And Beyond](https://reader034.fdocuments.in/reader034/viewer/2022042714/54c7ee314a795989658b4584/html5/thumbnails/42.jpg)
3. Switch to an expandable menu button
Similar to switching a horizontal menu to vertical, with the addition of hiding the menu until clicked/touched
The markup:
<nav>! ! ! <a href="#" class=” show-mobile">Main Menu</a> ! <ul><li>…</li></ul> !</nav>!
![Page 43: Responsive Web Design: From Mobile To Desktop, And Beyond](https://reader034.fdocuments.in/reader034/viewer/2022042714/54c7ee314a795989658b4584/html5/thumbnails/43.jpg)
• Regular CSS: .show-mobile { display: none; }!
• CSS to show the button and hide the menu for mobile: @media (max-width: 768px) { ! ! nav .show-mobile { display: block; } nav ul {! display: none; } }!
• jQuery for the menu toggle: <script> ! ! jQuery(".show-mobile").click(function () { jQuery("nav ul").toggle("fast"); ! }); <script>
3. Switch to an expandable menu button
![Page 44: Responsive Web Design: From Mobile To Desktop, And Beyond](https://reader034.fdocuments.in/reader034/viewer/2022042714/54c7ee314a795989658b4584/html5/thumbnails/44.jpg)
An in-depth, mobile-first menu tutorial:
• http://azadcreative.com/2012/07/responsive-mobile-first-navigation-menu
• Uses a mobile menu button toggle, and includes submenus expanding on click/touch
3. Switch to an expandable menu button
![Page 45: Responsive Web Design: From Mobile To Desktop, And Beyond](https://reader034.fdocuments.in/reader034/viewer/2022042714/54c7ee314a795989658b4584/html5/thumbnails/45.jpg)
When to use it?
Want mobile menu to fit in a small area
Want a highly stylable, flexible option
More menu items and/or longer page names
Can choose whether to include submenus
Ok with an “extra click” before selecting
3. Switch to an expandable menu button
![Page 46: Responsive Web Design: From Mobile To Desktop, And Beyond](https://reader034.fdocuments.in/reader034/viewer/2022042714/54c7ee314a795989658b4584/html5/thumbnails/46.jpg)
4. Switch to a dropdown (select) menu
![Page 47: Responsive Web Design: From Mobile To Desktop, And Beyond](https://reader034.fdocuments.in/reader034/viewer/2022042714/54c7ee314a795989658b4584/html5/thumbnails/47.jpg)
4. Switch to a dropdown (select) menu
Uses efficient native mobile controls
Use jQuery to dynamically swap: <nav> <ul> <li><a href=“#”>…</a></li> </ul> </nav> -to- <nav> <select> <option value=“#”>…</option> </select> </nav>!From: http://css-tricks.com/convert-menu-to-dropdown !
![Page 48: Responsive Web Design: From Mobile To Desktop, And Beyond](https://reader034.fdocuments.in/reader034/viewer/2022042714/54c7ee314a795989658b4584/html5/thumbnails/48.jpg)
![Page 49: Responsive Web Design: From Mobile To Desktop, And Beyond](https://reader034.fdocuments.in/reader034/viewer/2022042714/54c7ee314a795989658b4584/html5/thumbnails/49.jpg)
Similar options that switch <ul> to <select>: • TinyNav.js:
– Uses jQuery, small file size
– https://github.com/viljamis/TinyNav.js
• Responsive Menu: – Uses jQuery, supports submenus, lots of settings
– https://github.com/mattkersley/Responsive-Menu
• SelectNav.js: – Inspired by TinyNav, Independent (no jQuery),
supports submenus
– http://lukaszfiszer.github.com/selectnav.js
4. Switch to a dropdown (select) menu
![Page 50: Responsive Web Design: From Mobile To Desktop, And Beyond](https://reader034.fdocuments.in/reader034/viewer/2022042714/54c7ee314a795989658b4584/html5/thumbnails/50.jpg)
When to use it?
Want mobile menu to fit in a small area
Want native controls for the mobile menu
More menu items and/or longer page names
Want submenus included
Ok with an “extra click” before selecting
4. Switch to a dropdown (select) menu
![Page 51: Responsive Web Design: From Mobile To Desktop, And Beyond](https://reader034.fdocuments.in/reader034/viewer/2022042714/54c7ee314a795989658b4584/html5/thumbnails/51.jpg)
Remember the Viewport
Ensure mobile browsers will scale to view your site correctly
Include in the <head> :
<meta name="viewport" content="width=device-width”>!
![Page 52: Responsive Web Design: From Mobile To Desktop, And Beyond](https://reader034.fdocuments.in/reader034/viewer/2022042714/54c7ee314a795989658b4584/html5/thumbnails/52.jpg)
Resources
• Responsive Web Design (A Book Apart 4) Ethan Marcotte
• MediaQueri.es • http://bradfrostweb.com/responsive-web-
design-newsletter • http://zomigi.com/blog/essential-
considerations-for-crafting-quality-media-queries
!
![Page 53: Responsive Web Design: From Mobile To Desktop, And Beyond](https://reader034.fdocuments.in/reader034/viewer/2022042714/54c7ee314a795989658b4584/html5/thumbnails/53.jpg)
Amelia Marschall-Miller
Gravity Works Design + Development Partner & Creative Director
GravityWorksDesign.com
AmeliaMarschall.com
@MimiAmelia
Questions?