Beyond responsive design - UI for the modern web application
Responsive Web Design: From Mobile To Desktop, And Beyond
53
-
Upload
gravityworksdd -
Category
Documents
-
view
111 -
download
2
description
As mobile device usage continues to expand, the variety of screen sizes, resolutions, and capabilities of mobile phones and tablets is becoming more and more diverse. It's possible, and important, to ensure your site provides an optimal experience for whatever device your audience is using. Responsive web design allows your site to seamlessly adjust and fit the screen its viewed on, and can easily be implemented in most major CMS systems. Learn how to design and plan your responsive site, develop your layouts with a fluid grid, and test to ensure your site looks great on tons of devices!
Transcript of Responsive Web Design: From Mobile To Desktop, And Beyond
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
What is A Responsive WebSITE?
A fluid layout and flexible images adapted with media queries
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)
Basic Components
A flexible, grid-based layout
Flexible images and media
Media queries for specific adjustments
Fluid on smaller screens + fixed maximum size
Hybrid Approaches
One column flexible + one column fixed
Let’s Get Started! AmeliaMarschall.com
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
Float columns: !
#LeftColumn { float: left; width: 70%; }!!
#RightColumn { float: right; width: 30%; }!
Set a fluid grid
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!
#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)
Nested Columns
Widths set with percentage are relative to their container element!
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; }!
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)”>!
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) { }!
Or, go “mobile first”: • @media (min-width: 480px) { }!• @media (min-width: 720px) { }!• Etc…!
Better for performance!
Make Changes with Media Queries
Make Changes with Media Queries
@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
Example Site Queries
@media (max-width: 900px) {!#ContentLeft, #ContentRight {! ! ! width:100%;! ! padding:0; !!} }!
@media (max-width: 900px)!
@media (max-width: 730px) { #LeftColumn, #RightColumn { ! ! ! width: 100%;! ! !} #FooterLeft, #FooterMiddle, ! ! #FooterRight {! ! width: 100%; ! ! margin: 0 0 20px 0; !! !} }!
Example Site Queries
@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
@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
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.
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)
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.
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!
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.
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>!
1. Flow the menu onto two lines
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
Tutorial: http://designshack.net/articles/css/ code-a-responsive-navigation-menu
1. Flow the menu onto two lines
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
2. Switch a horizontal menu to vertical
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; }!
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
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
3. Switch to an expandable menu button
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>!
• 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
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
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
4. Switch to a dropdown (select) menu
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 !
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
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
Remember the Viewport
Ensure mobile browsers will scale to view your site correctly
Include in the <head> :
<meta name="viewport" content="width=device-width”>!
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
!
Amelia Marschall-Miller
Gravity Works Design + Development Partner & Creative Director
GravityWorksDesign.com
AmeliaMarschall.com
@MimiAmelia
Questions?
