Responsive Web Design: From Mobile To Desktop, And Beyond (updated for MobiDevDay)

Editor's Notes

1. 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.
2. 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.
3. - 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
4. Going to go over the basicsMy website as a simple example
5. Add an imageNote keep it simple
6. 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.
7. Margin as a basic term for spacingUse prefixes – will not have prefixes all througout for space
8. Can keep it simple and round or find exact widths
9. Add more here!
10. 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)
11. 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.
12. 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?
13. 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
14. 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
15. Fix description content layout?
16. Figure out if these need the clears or not (like last example)
17. Will talk about menu later
18. 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
19. 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
20. 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
21. Create class: hide mobile/hidedesktopNo link to full site fore responsive – responsive should should basically all your actual CONTENT of the full site
22. Parent element – not img element
23. Can use any menu system or module with unordered lists, to access and style with CSS
24. 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)
25. 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
26. 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
27. 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)
28. Big buttons for each
29. Works on mobile, but some potential issues: sometimes :hover is wishy. The menu expand disappears when you move away/scroll, on iphone
30. Most DNN sites need a pretty flexible option
31. Script add the toggle. Media query makes the “main menu” link show or hide
32. 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
33. New photos – MAMC/MSA
34. Ensure you already are including jquery (DNN auto right?)Is there more to this? When it applies
35. 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)
36. If don’t want javascript, could put both menus in html code, but that does not really work with DNN menu options
37. This prevents phones like iPhone from “zooming out” and displaying the full site, forces smaller viewport to activate responsive size.What about different resolutions?
38. Add slides upload linkWE”RE HIRING!!!