Responsive Design: Out of the Box and Down the Rabbit Hole
•Télécharger en tant que PPT, PDF•
2 j'aime•10,747 vues
When building a responsive website in Drupal, you may hear about starter themes that are responsive "out of the box". What you learn is that responsive design is such a deep and complex field that "out of the box" doesn't really exist. Let's begin to explore the deep rabbit hole that is responsive web design. From a designer and front end developer perspective.
Recommandé
Recommandé
Contenu connexe
En vedette
En vedette (20)
Similaire à Responsive Design: Out of the Box and Down the Rabbit Hole
Similaire à Responsive Design: Out of the Box and Down the Rabbit Hole (20)
Dernier
Dernier (20)
Responsive Design: Out of the Box and Down the Rabbit Hole
- 1. Responsive design Out of the box and down the rabbit hole
- 2. Responsive web design out of the box : down the rabbit hole down the rabbit hole Who am I? Dan Moriarty Electric Citizen @minneapolisdan
- 3. Responsive web design ABOUT MY APPROACH ABOUT MY APPROACH I only currently use a normal and fluid grid, using Omega Theme. TO DO: wide grid Few grid columns = better? 12 max, 6 is better TO DO: Start with base CSS that covers mobile, and then add styles based on min-width, enhancing experience for those with bigger screens. Don’t start from desktop and then scale down (something I’ve been guilty of)
- 4. The secret is out Responsive Design is amazing awesome, fantastically wonderful, and super trendy We all have seen these squishy, stretchy, fluid, flexible sites 2013,“Year of Responsive Design”* http://mashable.com/2012/12/11/responsive-web-design/
- 5. Responsive web design out of the box : down the rabbit hole down the rabbit hole “Do you do responsive design?” No?? Then you are an idiot!
- 6. http://mediaqueri.es/ Ethan Marcotte Responsive web design out of the box : down the rabbit hole down the rabbit hole
- 7. Responsive web design out of the box : down the rabbit hole down the rabbit hole Adaptive vs Responsive?
- 8. Responsive web design out of the box : down the rabbit hole down the rabbit hole It’s all about watching sites stretch and squish, right?
- 11. Responsive web design out of the box : down the rabbit hole down the rabbit hole What do these Out of the Box solutions offer?
- 12. Out of the box Media Queries 960 Grid, Narrow Grid, Fluid Grid, Wide Grid Breakpoints for iPhones, iPads, etc
- 13. starter themes Really great, but...
- 14. Responsive web design out of the box : down the rabbit hole down the rabbit hole * AFAIK There is no such thing as Out of the Box Responsive Websites!!*
- 15. Responsive web design out of the box : down the rabbit hole down the rabbit hole Why Not?
- 16. Responsive web design out of the box : down the rabbit hole down the rabbit hole Custom grid anyone? Grids within grids More than default breakpoints Custom designs don’t always fit neatly into the box Handling tables, lists, forms, images, iframes, maps, video Font sizing
- 17. responsive web design: grids grids 960.gs has been great. But not the answer for everything.
- 18. http://www.1080.gs/ 1000px grid - 6 cols http://elliotjaystocks.com/blog/a-better-photoshop-grid-for-responsive-we responsive web design: custom grids custom grids
- 19. responsive web design: custom grids custom grids
- 20. responsive web design: grids grids Out of the Box has you covered for a preset 12 or 16 col grid But even if you don’t choose a custom grid, what happens when you put grids inside of grids? Mo’ Grids, Mo’ Problems
- 21. You’re familiar with this kind of layout? Grids within grids
- 22. 24col, 960 grid:6col=230px Switch to flexible grid and 6col = 23% Grids within grids
- 23. When sidebars shift and containers widen, these are still 23% Grids within grids
- 24. Now we want that grid-2 to be more like a grid-4 or grid-8 Grids within grids
- 25. How is this currently handled? I write a lot of overrides at different breakpoints. But wouldn’t it be nice if I didn’t have to do that (as much)? Grids within grids
- 26. grids within grids How to Resolve Grids within Grids? Semantic Grids, Zen Grids, Susy Take the grid-x out of the code
- 27. responsive web design: grids grids But wait, does that mean...
- 28. responsive web design: grids grids Now you need SASS or LESS Not out of the box at all
- 29. custom breakpoints iPad = 768px-1024px iPhone = 320-480px But there are other breakpoints to consider!
- 30. trouble items: how to solve how to solve Slideshows Tables iFrames withVideos and Maps Image Maps iOS Orientation
- 31. trouble items: slideshows slideshows Always Use Flexslider, ForgetViews Slideshow Get away from inline widths and heights www.woothemes.com/flexslider drupal.org/project/flexs lider
- 32. trouble items: tables tables Avoid tables when possible, only for tabular data (semantic) Several options to responsiveness There’s a module for that! drupal.org/project/responsive maxbronsema.com/blog/2 013/02/26/zurb- responsive-tables-within- drupal/ with drupal.org/project/flexifilte r
- 33. trouble items: tables tables Avoid tables when possible, only for tabular data (semantic) Several options to responsiveness There’s a module for that
- 34. trouble items: iframes iframes Use one relative and one absolute DIV, following code discussed here: http://alistapart.com/article/creating-intrinsic-ratios-for-video
- 35. trouble items: image maps image maps Image Maps Don’t Scale So Nice github.com/stowball/jQuery-rwdImageMaps http://mattstow.com/experiment/responsive-image-maps/rwd-image-maps.html
- 36. trouble items: iOS Orientation OS Orientation Previous to iOS6 Zoom when changing orientation Use github.com/scottjehl/iOS-Orientationchange-Fix
- 37. Responsive “Views” View and Grids (aka Tables) Views and HTML Lists (better but...) /*News Stories, list */.item-list ul.news-stories li { background: none repeat scroll 0 0 #FFFFFF; border: 1px solid #CCCCCC; display: inline-bloc float: left; margin: 5px 2% 10px 0; max-height: 280px; overflow: hidden; padding: 15px 10px 5 width: 32%;}
- 38. Responsive “Views” Views Responsive Grid Module Uses Grid Settings - your views grid follows same responsive rules as grid
- 39. responsive type Typography should change with the device being used Change line-heights, font sizes Hover declarations are worthless REM and other ideas
- 42. box model: your new best friend your new best friend IE7 and earlier modelVS Everyone else: Padding+Bo rder+Cont ent=Width http://www.eclipsewebmedia.com/css-box-model-explained/
- 43. box model: your new best friend your new best friend With Fluid Grids, trying to track widths of content+padding+bord ers at a Percentage Value that’s changing = YUCK! www.paulirish.com/2012/box-sizing-border-box-ftw /* apply a natural box layout model to all elements */ * { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
- 44. responsive web design: out of the box? out of the box? Destroy the box!
- 45. responsive web design: down the rabbit hole down the rabbit hole Shall we go on?
- 47. performance measuring download speeds measuring download speeds Testing download speeds on mobile devices : mobitest.akamai.com/m/index.cgi How to reduce filesize?
- 48. performance reduce filesize reduce filesize Image Size Scripts Reduce markup
- 50. performance: images images <picture> <source media="(min-width: 40em)" srcset="big.jpg 1x, big- hd.jpg 2x"> <source srcset="small.jpg 1x, small-hd.jpg 2x"> <img src="fallback.jpg" alt=""> </picture>
- 51. performance: images images SVG Format? Font Icons Data URIs Content Delivery Network?
- 52. performance: scripts scripts jQuery is great, but it’s big! Over 200k jQuery mobile is also fairly large What’s the alternative? http://jquerybyexample.blogspot.com/2013/05/jquery-library-file-size-over-years.html
- 54. performance: reduce markup reduce markup Drupal Fences module
- 55. performance: content content Adjusting page content based on device being used? AKA “the Internet Fridge”
- 56. responsive web design still evolving rapidly still evolving rapidly “If Responsive Web Design is truly an answer to a mobile society, it has to do more than stretch and pull”
- 58. Dan Moriarty, Electric Citizen @minneapolisdan
Notes de l'éditeur
- Who am I? - design, planning, ux, and front end development, plus a few other hats - head up responsive design for EC
- Well, let’s look at what they provide... Media Query Breakpoints, set to current iPhone/iPad widths. 960 grids at normal, narrow, wide, fluid widths. Img { max-width:100%; } CSS. Great! Is that all we need? Are we 90% of the way there? 50%? 25%?
- First off, responsive design... It’s not a big secret anymore. You’ve all (hopefully) heard of it. Quick show of hands, >>who here has built responsive sites? Who is totally new to the concept? If new, slide 3, if none, slide 4.
- Intro to RWD, shot of website, link out to various sites, mention Ethan Marcotte, etc. Note difference between Responsive and Adaptive.
- In my reading, I’ve come across this discussion of Adaptive vs Responsive, and what those terms mean. I used to think Adaptive was the process of building a site that changes at fixed width points, vs. Responsive, which meant your site is changing/flexing at all different widths of the browser. - Now I’m being told Adaptive refers to how a site can change, device specific (such as touch buttons on iPad) vs Responsive being browser-based, and the width of the browser/screen
- Either way, Responsive Design - You Ok, so you know Responsive Design, or know about it. It’s all about making sites that squish and stretch, right?
- Since this is a Drupal Camp, let’s talk about this in Drupal terms. You want a responsive site in Drupal, where do you start? - Starter themes? (*assuming audience knows what this is) >>> ASK AUDIENCE ABOUT THIS - Look at some of the more popular starter themes: Omega, Zen, Adapative Theme. Aren’t these just Responsive OUT OF THE BOX? - Just turn ‘em on and away you go? - This assumes a grid-based layout
- DISCLAIMER: - This presentation is based on MY experience with themes, mostly Omega 3 and some Adaptive Theme in the past - I understand that Omega 4 presents a different option and Zen 7.5 has some awesome sauce that is worth mentioning - I also know there are some other starter themes out there, such as Foundation and Skeleton, there’s Twitter Bootstrap, there’s custom made starter themes, etc.
- Well, let’s look at what they provide... Media Query Breakpoints, set to current iPhone/iPad widths. 960 grids at normal, narrow, wide, fluid widths. Img { max-width:100%; } CSS. Great! Is that all we need? Are we 90% of the way there? 50%? 25%?
- - I would say we’re 10% of the way there at best. - the glass is half full - Out of the box responsive just means some default grid sizes, maybe a little CSS, some media queries... All necessary! But just the beginning.
- Why? Let’s look at what these systems DON’T provide* (afaik) - has anyone had a bad experience of sites from desktop to mobile? - what’s the purpose here? you want the site to look good
- There are other grid systems to be found: - 1080-divisible by 2, 3, 4, 5, 6, 8, 10, 12, 15, 20, 24, 30, 40, 60, 120, good for wider screens as well as smaller - There are custom grid systems that may exist from your client, or that come out of the design process Everyone the same gets boring http://emergenturbanism.com/2009/02/16/the-complex-grid
- Sometimes a client has their own idea of a grid that you should use. And the design you choose should be free as any preset grid notion as well.
- Custom designs - Zurb and Twitter Bootstrap are nice, if we want all our sites to look the same - Sometimes a custom design leads you to grids that don’t fit the preset
- Let’s say this sidebar right is 4 cols, and then the main col is 8 cols wide. Then you pop in a callout with 4 columns. You define each as 2 cols wide. - Now you’ve got a grid within a grid. No big deal, right?
- Let’s say this sidebar right is 4 cols, and then the main col is 8 cols wide. Then you pop in a callout with 4 columns. You define each as 2 cols wide. - Now you’ve got a grid within a grid. No big deal, right?
- But what happens when when shrink this page down?
- But now I want the grid-6 to be 49-50% - 10% of 960px is a lot different than 10% of 400px -
- But now I want the grid-6 to be 49-50% - 10% of 960px is a lot different than 10% of 400px -
- Semantic Grids, a solution to grids within grids. Look at how Zen provides some support for this. http://susy.oddbird.net/ - You simply specify the default number of columns and a few size options (column width, grid padding, etc), and Susy calculates the correct percentages for your elements. - Rather than setting a grid-”x” to be a width and then overriding that value for an element, you can set the grid width of the element IN your CSS, and then override it with inline media queries
- But wait, to use these, you need SASS! or LESS. But that’s not IN THE BOX! The plot thickens... - add Learning image
- Breakpoints should be informed by your design. How to understand this? Start by dragging your browser window narrower, and see where the design needs your help to adjust.
- Videos, iFrames, Google Maps, HTML tables, HTML forms etc. They aren’t always so flexible. How to handle? In Drupal, Views Slideshow and jCarousel. -ALWAYS use flexslider
- tips on slideshows
- http://foundation.zurb.com/responsive-tables.php http://zurb.com/playground/responsive-tables in drupal, look at http://maxbronsema.com/blog/ 2013/02/26/zurb-responsive-tables-within-drupal/ https://drupal. org/project/responsive_tables -- hiding some cells from users
- http://foundation.zurb.com/responsive-tables.php https://drupal.org/project/responsive_tables
- tips on iFrames http://npr.github.io/responsiveiframe/
- tips on image maps http://mattstow.com/experiment/responsive-image-maps/rwd-image-maps.html
- Views and RWD, https://drupal.org/project/views_responsive_grid (Drupal 7 only; d8 uses divs for grids, not tables) Go to DEMO>>>> - sample view at http://test.pcae.electriccitizen.net/outreach/ar ts-integration/units
- Views and RWD, https://drupal.org/project/views_responsive_grid (Drupal 7 only; d8 uses divs for grids, not tables) - sample view at http://test.pcae.electriccitizen.net/outreach/ar ts-integration/units
- Font sizing. Should that big old H1 header still be 32px on an iPhone? Should your paragraphs still be spaced the same (line height and space between paragraphs). - http://trentwalton.com/2010/07/05/non-hover/ -REM and other techniques http://techtime.getharvest.com/blog/in-defen se-of-rem-units
- Site navigation methods - new Superfish, jumpmenus, etc. - DISCUSS, WHAT DO YOU PREFER??
- Site navigation methods - new Superfish, jumpmenus, etc.
- Step 1: Box Model - back in late 90s, when some of us were 1st learning our CSS chops, there was a lot of talk about this, and how crazy stupid IE was with their box model. Rather than the logical (sarcasm) model of calculating the width of a box (DIV) by adding padding+margin+width, IE chose to not count padding on the width. This meant then when you built your little site with a float:left sidebar of 300px and float:right content of 700px, and you carefully calculated the padding on each, adding the totals of 260+20+20+10+20+640+20+10 = xxx and this was the total width of your wrapper div, cause you had a fixed width wrapper div (and btw, it wasn’t 960, it was either mapped to the popular resolution of the day, and your sidebar was some completely abritrary number, as was your main col)... well then in IE, this all got screwed up, right? (show why)... So a lot of people decided this needed fixing, and came up box model hacks.
- Box Model Part 2 - and so it continued to this day, and good themers know to put the padding on an inside DIV, and not the main DIV with a set width. And we happily cluttered our code with DIVs inside DIVs, often for just this purpose. And no one thought it was stupid! - But now! Now I’ve seen the light. And I say the 1st thing to do in RWD is redefine this box model. - What I’m saying is IE got it right! They aren’t pure evil! Why? Because when you switch widths to percentages, and try to do the math, it gets really hard. - Not to mention browsers struggle too.
- These are the challenges that I’ve found are NOT addressed by any Out of the Box theme. And we’ll look at ways to address them on your sites. So we’re moving away from the BOX, and towards that rabbit hole. Once we get there, and start going down, we’re going to find out how very deep that goes.
- So now we’re down the rabbit hole.. We’ve got our site squishing and stretching, our images, our videos, maps, our cool responsive nav. But wait, this hole keeps going!
- First stop, Performance! This is the next stage in RWD, the next logical point of focus... Your web page may FIT inside a mobile phone, but it’s still the same filesize as it was on a desktop. It doesn’t need to be.
- First stop, Performance! This is the next stage in RWD, the next logical point of focus... Your web page may FIT inside a mobile phone, but it’s still the same filesize as it was on a desktop. It doesn’t need to be. Start with images
- Where do we go to reduce filesize, and make your pages faster to download?
- Smaller image > Smaller image size! >>ASK WHAT AUDIENCE USES>>> - these rely on your Image Cache tools http://adaptive-images.com/ http://coding.smashingmagaz ine.com/2013/06/02/clown-car-technique-solving-for-adaptive-images-in-responsive-web-design/
- - See http://responsiveimages.org/ and the idea of the Picture element, which would allow you to specify in code a set of images to be used at certain breakpoints, and offer a ‘fallback’ img as well. - Demo at http://picture7d.h011.attiks .com/node/1 https://drupal.org/project/ breakpoints https://drupal.org/project/p icture
- Image Compression, SVG format, Font Icons, Data URIs - maybe content delivery network? - http://css-tricks.com/data-uris/
- Scripts! WHy include a whole jQuery library when viewing on a mobile device? - http://zeptojs.com/ , 8kb http://net.tutsplus .com/tutorials/javascript-ajax/the-essentials-of-zepto-js/ https://developers .google.com/closure/compiler/https://drupal.org/project/closure_compiler jQue ry mobile requires two js file jquery.min.js - 93kb jquery.mobile.min.js - 83kb
- Scripts! WHy include a whole jQuery library when viewing on a mobile device? - http://zeptojs.com/ , 8kb http://net.tutsplus .com/tutorials/javascript-ajax/the-essentials-of-zepto-js/ https://developers .google.com/closure/compiler/https://drupal.org/project/closure_compiler jQue ry mobile requires two js file jquery.min.js - 93kb jquery.mobile.min.js - 83kb
- Reduce markup on your Drupal site, less code=smaller file size Fences module - fewer HTTP requests means faster downloads, this can be achieved by media queries within your stylesheet, reducing number of stylesheets in use
- Content, adjusting based on media query? Systems are not in place to offer content broken up in to alll these pieces, clients unwilling to do so http://www.gizmag.com/go/1132/ http://www.markboulton.co.uk/j ournal/responsive-content-is-not-a-thing
- Thanks!