Empfohlen
Weitere ähnliche Inhalte
Ähnlich wie Responsive Web Design: From Mobile To Desktop, And Beyond (updated for MobiDevDay)
Ähnlich wie Responsive Web Design: From Mobile To Desktop, And Beyond (updated for MobiDevDay) (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
Responsive Web Design: From Mobile To Desktop, And Beyond (updated for MobiDevDay)
- 2. What? Why? How? What is responsive web design? And why should you use it? 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
- 3. What is A Responsive WebSITE? A fluid layout and flexible images adapted with media queries
- 4. 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)
- 5. WHY GO Responsive? No good reason to limit mobile content Many people have mobile devices as their primary internet access The lines between mobile/tablet/desktop are becoming blurred Alternative to native mobile apps
- 6. Basic Components A flexible, grid-based layout Flexible images and media Media queries for specific adjustments
- 7. Fluid on smaller screens + fixed maximum size Hybrid Approaches One column flexible + one column fixed
- 8. Plan at least 3 size layouts Create responsive wireframes: http://foundation.zurb.com Example Pay attention to order and flow Designing Responsively
- 10. 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
- 11. Float columns: ! #LeftColumn { float: left; width: 70%; }! ! #RightColumn { float: right; width: 30%; }! Set a fluid grid
- 12. 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!
- 13. #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)
- 14. Nested Columns Widths set with percentage are relative to their container element!
- 15. Nested Columns #ContentLeft { float: left; width: 60%; padding-right: 40px; box-sizing: border-box; }! #ContentRight { float: left; width: 40%; box-sizing: border-box; }!
- 16. 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)”>!
- 17. 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) { }!
- 18. Or, go “mobile first”: • @media (min-width: 480px) { }! • @media (min-width: 720px) { }! • Etc…! Better for performance! Make Changes with Media Queries
- 19. Make Changes with Media Queries
- 20. @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
- 21. Example Site Queries @media (max-width: 900px) { !#ContentLeft, #ContentRight {! ! ! width:100%;! ! padding:0; ! !} }!
- 23. @media (max-width: 730px) { #LeftColumn, #RightColumn { ! ! ! width: 100%;! ! !} #FooterLeft, #FooterMiddle, ! ! #FooterRight {! ! width: 100%; ! ! margin: 0 0 20px 0; ! ! !} }! Example Site Queries
- 25. @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
- 27. @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
- 29. Set Font Sizes Set font sizes in rem’s: • html { font-size: 62.5%; } ! • body { font-size: 14px; font-size: 1.4rem; } ! • h1 { font-size: 24px; font-size: 2.4rem; } ! • Can change body size % in @media to adjust all site fonts Use Fittext.js for scalable headlines that fit the width of its surrounding element.
- 30. 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)
- 31. 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.
- 32. Hide Content display:none! • Hide unnecessary content for mobile • Add mobile only content with display:none in the regular CSS Important Note: Use Sparingly! - Don’t limit content
- 33. 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.
- 34. 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>!
- 35. 1. Flow the menu onto two lines
- 36. 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
- 37. Tutorial: http://designshack.net/articles/css/ code-a-responsive-navigation-menu 1. Flow the menu onto two lines
- 38. 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
- 39. 2. Switch a horizontal menu to vertical
- 40. 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; }!
- 41. 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
- 42. 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
- 43. 3. Switch to an expandable menu button
- 44. 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>!
- 45. • 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
- 46. 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
- 47. 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
- 48. 4. Switch to a dropdown (select) menu
- 49. 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 !
- 51. 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
- 52. 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
- 53. Remember the Viewport Ensure mobile browsers will scale to view your site correctly Include in the <head> : <meta name="viewport" content="width=device-width”>!
- 54. Resources • Responsive Web Design (A Book Apart 4): Ethan Marcotte • Implementing Responsive Design: Tim Kadlec • MediaQueri.es • http://bradfrostweb.com/responsive-web- design-newsletter • http://bdconf.com/newsletter !
- 55. Amelia Marschall-Miller Gravity Works Design + Development Partner & Creative Director GravityWorksDesign.com AmeliaMarschall.com @MimiAmelia Questions?
Hinweis der Redaktion
- What really makes a site responsive – there are some misconceptionsGoal will be to have a good understanding of what makes up a responsive website, the basics of how to implement it, and how to choose the right website solution for you and your client.
- This terminology has really helped me define sites as we worked on them and talked about them, and I’ve tried to stick with it.Discuss dedicatedNot one right approach for all projects. Sometimes adaptive looks and works fine for all users, and saves testing time.
- - There’s no reason to dumb-down the mobile experience. Anyone on a mobile device could be searching to find the same info they would on a mobile device. No just on-the-go info.Pew Internet Study from last june found: 17% of cell phone users do most of their internet browsing on their phones.Percentage higher for Low income, teens/young adults. Phablet/Lablet- Can create web apps with nearly the same features for less cost, and more reach, than native mobile apps
- Going to go over the basicsMy website as a simple example
- Add an imageNote keep it simple
- I was against this at first. I thought ‘yeah it does not make sense, but that is the standard and we should stick to it’. I thought it was a hack. Could cause problems if you have to work with a site using border box and have to switch thinking for their hack and not using conventions.But for responsive, it REALLY makes sense….When I talk about keeping it simple, this is one of those examples. If you’ve read A Book Apart’s Responsive Web Design, and I recommend you do, they outline a more complex way to setting margins with percentages. And while that works, I don’t think that technique is always necessary. Sometimes I know I want a 10px margin (can set with padding), and that’s that. The measurement I’m used to, and I know if will work. Box sixing allows you to do this without having to adjust your percentage column widths to work with your spacing.
- Margin as a basic term for spacingUse prefixes – will not have prefixes all througout for space
- Can keep it simple and round or find exact widths
- Add more here!
- Lots of different query options: resolutionMake sure @media comes after regular styles in single CSS sheet – go in order down – I prefer thisDirectly in your file, or link from HTML to base-mobile CSS with media query (only load the css that’s needed, but more annoying to maintain)
- Don’t feel like you have to use certain breakpoints – follow the points where your design starts to “break” and use media queries to adjust when that happens. Scale your browser down, see where problems occur, and address them.
- We are starting to move this way. It is better for performance, to load larger background images and code only if a browser is above a certain size. But it’s a challenging process mentally to do this opposed to adding smaller media queries. (google maps example loads a lot of files – just do a map link unless on a large screen)Most of our clients are still coming to us for “a new website”. A mobile or responsive version is still an “add on” that we have to sell them on. It’s the secondary though for clients. They still want to see a shiny photoshop mockup of what their site will look at on a big computer screen. But we have started presenting desktop/tablet/mobile mockups pretty simultaneously in the design phase on some projects.- Also issue where if media queries “don’t work” – is it better to be stuck with a mobile site on desktop, or a desktop site on mobile?
- Don’t feel like you have to use certain breakpoints – follow the points where your design starts to “break” and use media queries to adjust when that happens
- Media only works in IE9+ - adds support for queries (using min-width or max-width) Or can use conditional comments to link to an IE specific style sheetWhen these are used only for a mobile site, its not as big of a deal, because there were not widespread mobile/tablet IE devices. Now that is changing, and for a responsive site, you want to make sure it works for all desktop IE browsers, no matter the screen size.I like min/max width, but there is a lot of discussion and experimentation lately for also targeting connection speed etc to better optimize what is served
- Fix description content layout?
- Figure out if these need the clears or not (like last example)
- Will talk about menu later
- Rems: “root ems”The em unit is relative to the font-size of the parent, which causes the compounding issue. The rem unit is relative to the root—or the html—element. That means that we can define a single font size on the html element and define all rem units to be a percentage of that.16px is the default for all browsersThe technique modifies the base font-size on the body using a percentage. This adjusts things so that 1em equals 10px, instead of the default 16px. To set the font-size to the equivalent of 14px, set it to 1.4rem.Can set a media query for body { font-size: 90% } and have all site fonts adjust
- Don’t set media height and width in WYSIWYG – will be fixed and break grid when site is adjusted.Upload media at the maximum size you want it to displayMax width = important??? – override any set widths
- Adaptive – 2 requests for each image, but still saves resources to load the smaller sized images when needed on mobile. It sucks to load multiple images, this is the direction I want to see things goingLots of discussion and debate over responsive images
- Create class: hide mobile/hidedesktopNo link to full site fore responsive – responsive should should basically all your actual CONTENT of the full site
- Parent element – not img element
- Can use any menu system or module with unordered lists, to access and style with CSS
- What a horizontal UL will naturally doWorks ok if you can fit everything on two linesWorks ok if you don’t have second level menus (or they can be hidden and accessed on subpages)
- What a horizontal UL will naturally do – not a lot of code to show hereWorks ok if you can fit everything on two linesWorks ok if you don’t have second level menus (or they can be hidden and accessed on subpages)MI energy experience going back and adjusting padding/font size in media queries each time the menu changed
- Fixed 8 – 4 – 2 across often is not flexible enough with ability for clients to add or change menu items in CMSMI energy experience going back and adjusting padding/font size in media queries each time the menu changed
- What a horizontal UL will naturally doWorks ok if you can fit everything on two lines (few pages/short page names)Works ok if you don’t have second level menus (or they can be hidden and accessed on subpages)
- Big buttons for each
- Works on mobile, but some potential issues: sometimes :hover is wishy. The menu expand disappears when you move away/scroll, on iphone
- Most DNN sites need a pretty flexible option
- Script add the toggle. Media query makes the “main menu” link show or hide
- Regular CSS: style menu normally and display none on the show mobileScript add the toggle. Media query makes the “main menu” link show or hide
- New photos – MAMC/MSA
- Ensure you already are including jquery (DNN auto right?)Is there more to this? When it applies
- Tinynav.js – does same switches ul li to select options, using jQuerySelect nav: inspired by tinynav, but totally independed (no jquery or other libraries needed), supports multiple levels)
- If don’t want javascript, could put both menus in html code, but that does not really work with DNN menu options
- This prevents phones like iPhone from “zooming out” and displaying the full site, forces smaller viewport to activate responsive size.What about different resolutions?
- Add slides upload linkWE”RE HIRING!!!