Responsive Design and Joomla!
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Responsive Design and Joomla!

  • 4,031 views
Uploaded on

The JoomlaChicago Loop sponsored "Joomla & Responsive Design", a presentation focused on the key ingredients and dynamics of making a Joomla website flow and react to the different viewing devices......

The JoomlaChicago Loop sponsored "Joomla & Responsive Design", a presentation focused on the key ingredients and dynamics of making a Joomla website flow and react to the different viewing devices and browser viewport sizes.

Dennis Kmetz (Director of Interactive Media, Taylor Bruce Design Partnership) presented Joomla & Responsive Design on Thursday, March 1, 2012.

More in: Technology , Business
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
4,031
On Slideshare
3,928
From Embeds
103
Number of Embeds
2

Actions

Shares
Downloads
67
Comments
0
Likes
2

Embeds 103

http://www.joomlachicago.com 57
http://joomlachicago.com 46

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Responsive Design - more than adaptive layouts -
  • 2. Todays Presenter Dennis Kmetz dkmetz@taylorbruce.com 312 943 5529 EXT. 19 312.550.1760 (mobile)
  • 3. Responsive Design:• History/Definition• Adaptive Layouts• Joomla! Usage
  • 4. Demo of Responsive Designwww.alistapart.com/d/responsive-web-design/ex/ex-site-FINAL.htmlOthers:bostonglobe.com2011.dconstruct.org (max-width: 1210, width:90%)Many others:http://mediaqueri.es/
  • 5. What You Sawwww.alistapart.com/d/responsive-web-design/ex/ex-site-FINAL.html
  • 6. Adaptive Layouts
  • 7. Adaptive Layouts - What Do They Do? Enables development of designs that “adapt” to various screen sizesScreen Size vs. Viewport size:2660px by 1440px 27” displays now cost $600 - $800
  • 8. Ethan Marcotte (May 2010 article in alistapart.com)http://www.alistapart.com/articles/responsive-web-design RESPONSIVE DESIGN: Three Methods: 1. CSS3 Media queries 2. Flexible Layout (aka fluid grids, elastic layouts, etc.) 3. Flexible images“INTERACTIVE ARCHITECTURE” (by Michael Fox and Miles Kemp) • “a multiple-loop system… a continual information exchange.” • Rather than creating immutable, unchanging spaces that define a particular experience, they suggest that the inhabitant and structure can—and should—mutually influence each other. This is our way forward.
  • 9. Ethan’s Book “But most importantly, responsive web design isn’t intended to serve as a replacement for mobile web sites. Responsive design is, I believe, • one part design philosophy, • one part front-end development strategy. And as a development strategy, it’s meant to be evaluated to see if it meets the needs of the project you’re working on."http://mediaqueri.es has several example sites
  • 10. Mark Boulten(Jan 2011 at the New Adventures Conference Nottingham, England)http://2011.newadventuresconf.com/audio/mark.htmlResponsive design is nothing new. • Products adapt to our needs. • Human / technology connection that started with the monks.EMBRACE REFLOW!!!
  • 11. Mark Boulten(Jan 2011 at the New Adventures Conference Nottingham, England) 1. Design base layout size from the content. If no constraints, create some 2. Use relative measurements, not fixed or absolute 3. Use media queries and responsive design techniques… embrace REFLOW
  • 12. Mark Boulten (Jan 2011) Adaptive Layouts: Currently we’re changing layouts based on a screen size. We’re capable of so much more. Today: • Screen size Device capabilities Consider: • Network and context (at home, in a train (direction), etc.) • Content based on contexthttp://www.markboulton.co.uk/journal/comments/a-responsive-experience
  • 13. Mark Boulten (Jan 2011) Responsive Web Design • Currently changes a layout because of the environment. • Will grow into a practice of changing an experience because of the environment: 1. Content 2. Layout 3. Behavior 4. Perception 5. Brand 6. Feel All of those things are open for change…http://www.markboulton.co.uk/journal/comments/a-responsive-experiencehttp://2011.newadventuresconf.com/audio/mark.html
  • 14. What is Responsive Design? Adaptive Layout + ??????? ???????? + ???? ??????????Mairead Buchan – headlondon.comhttp://headlondon.com/our-thoughts/news/posts/responsive-web-design
  • 15. Jeffrey Zeldman July 2011 – expands definitionOur understanding of responsive design should be broadenedto cover any approach that delivers elegant visualexperiences regardless of the size of the user’s display andthe limitations or capabilities of the device."http://unstoppablerobotninja.com/
  • 16. Dan Cederholm (Aug 2011) Finally… we’re not designing sheets of paper that happen to be on screen. √ “I’d love us to rethink things in a more holistic manner…but for now… for dribbble.com let’s take a step towards a responsive design by crafting an adaptive stylesheet… (and) continue to maintain just one codebase. http://simplebits.com/notebook/2011/08/19/adapted/Aaron Gustafson - ADAPTIVE WEB DESIGN (progressive enhancement)Jared Ponchot (Sept, 2011) The key to understanding progressive enhancement or graceful degradation lies in the starting point.√ So, Ive continued believing that "adaptive web design" refers more to the secondary and less fluid approach of adapting existing web designs, or designing for controlled adaptation as opposed to a truly fluid and flexible "responsive" design.http://www.lullabot.com/articles/responsive-adaptive-web-design
  • 17. What is Responsive Design? Adaptive Layout + C?????? S??????? + ???? ??????????Mairead Buchan – headlondon.comhttp://headlondon.com/our-thoughts/news/posts/responsive-web-design
  • 18. Where do I start?Adaptive Style-sheet ?Holistic ApproachProgressive EnhancementGraceful DegradationFluid Grid
  • 19. Mobile First (invert the design approach)a half-day of brainstorming “Just about your mobile experience can open up new ways of thinking about your product” “With responsive web design, you can set a baseline (mobile) experience first, then progressively enhance or adapt your layout as device capabilities change.” “This is accomplished by setting resolution “break points” and applying a different set of layout rules and media assets to each. A break point can be thought of as a conditional statement that determines if a device meets specific criteria like a minimum width of 600 pixels. If that condition is true, then the browser applies a different set of layout rules, usually through CSS, though sometimes with a little JavaScript as well”
  • 20. “Web products should be designed for mobile first.”Luke Wroblewski - December 7, 2011 Technology Conference & Expo -Washington, DC We really need to shift now to start thinking about building mobile first. This is an even bigger shift than the PC revolution.” -Kevin Lynch, CTO Adobe “Designing the mobile app first forced us to strip down to essentials.” -Bill DeRouchey, BankSimple Were just now starting to think about mobile first and desktop second for a lot of our products.” -Kate Aronowitz, Design Director Facebook
  • 21. Designing for Mobile FirstKnow your customers and their business… The Southwest Airlines iPhone application only has room for what actually mattersDesigning for mobile forces you to get there, like it or not.
  • 22. What is Responsive Design? Adaptive Layout + C?????? S??????? + ???? ??????????Mairead Buchan – headlondon.comhttp://headlondon.com/our-thoughts/news/posts/responsive-web-design
  • 23. What is Responsive Design? Adaptive Layout + Content Strategy + ???? ??????????Mairead Buchan – headlondon.comhttp://headlondon.com/our-thoughts/news/posts/responsive-web-design
  • 24. ContentAnything that conveys information • Audio • Text • Downloadable • Images documents • Graphics • Icons • Social media • Logos • Video • ButtonsAll disciplines are responsible for content • Brand managers • Copywriters • Developers • UX • Designers • Online marketers
  • 25. Content StrategyHarmony through collaboration • On-message copy • On-brand design • Intuitive and memorable interface • Solid and accommodating technology There are no requirements for pixel perfection across platforms… content is malleable Create the right content to serve the users’ needs.net issue 222 “Content strategy for the web” – Sandi Wassmer
  • 26. Jeffrey Zeldm anOur understanding of responsive design should be broadenedto cover any approach that delivers elegant visualexperiences regardless of the size of the user’s display andthe limitations or capabilities of the device."“Remember to think cross-device instead of just mobile.”
  • 27. What is Responsive Design? Adaptive Layout + Content Strategy + U??? E?????????Mairead Buchan – headlondon.comhttp://headlondon.com/our-thoughts/news/posts/responsive-web-design
  • 28. What is Responsive Design? Adaptive Layout + Content Strategy + User ExperienceMairead Buchan – headlondon.comhttp://headlondon.com/our-thoughts/news/posts/responsive-web-design
  • 29. User ExperienceDan Saffer, Kicker Studios 1. What a customer perceives while engaged with your product 2. A way of looking at a product holistically… doesn’t care how its made…Jared Spool, CEO of User Interface Engineering UX is just one thing… whether or not your design is intuitive • The average designer doesn’t spend any time watching people use the things they design • If you think of a designer as a type of artist, their medium is actually the behavior of the users • A good designer creates behaviors
  • 30. Responsive Design Is Adaptive Layout + Content Strategy + User ExperienceMairead Buchan – headlondon.comhttp://headlondon.com/our-thoughts/news/posts/responsive-web-design
  • 31. Two of my favorites:
  • 32. Responsive Design: Adaptive Layout CSS3 Media queries • Flexible Layout (aka fluid grids, elastic layouts, etc.) • Flexible images + Content Strategy + User ExperienceMairead Buchan – headlondon.comhttp://headlondon.com/our-thoughts/news/posts/responsive-web-design
  • 33. Media QueriesAllow detection of: 1. Width, height, orientation, aspect ratioExample (HTML):<link rel=“stylesheet” href=“ipad.css” media=“screen”>@media [not|only] type [and] (expression) {rules} [,type… ] [,type…]Use of a meta tag is recommended:<meta name=“viewport” content=“width=device-width initial-scale=1”>Examples (CSS usage):@import url(“iphone.css") screen and (max-device-width: 480px);The not negates what follows… all that follows, except the comma OR@media not screen and (min-width: 600px) and (max-width:1200px)The “only” keyword forces usage only by CSS3 capable browsers@media only and (device-aspect-ratio:16/9)
  • 34. Media Queries Supported in all “modern” browsers (except IE8 and under) • respond.js by Scott Jehl https://github.com/philwareham/txp-h5bp-theme/issues/9 • http://code.google.com/p/css3-mediaqueries-js/ • http://protofunc.com/scripts/jquery/mediaqueries/http://www.quirksmode.org/blog/archives/2010/09/combining_meta.htmlhttp://www.smashingmagazine.com/2011/07/22/responsive-web-design-techniques-tools-and-design-strategies/http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-querieshttp://resizemybrowser.com/
  • 35. Combine <meta> with viewport media queries <meta name="viewport" content="width=device-width"> Normally the If you combine layout a width media query viewport with the meta takes a width viewport tag, your that the site will use the vendor has width that the device decided is vendor considers optimal for optimal. viewing desktop sites.http://www.quirksmode.org/blog/archives/2010/09/combining_meta.html
  • 36. Common Media Querieshttp://www.smipple.net/snippet/joost.kiens/Common%20@media%20queries/* Smartphones (portrait and landscape) ----------- */@media only screen and (min-device-width : 320px) and (max-device-width : 480px) { /* Styles */ }/* Smartphones (landscape) ----------- */@media only screen and (min-width : 321px) { /* Styles */ }/* Smartphones (portrait) ----------- */@media only screen and (max-width : 320px) { /* Styles */ }/* iPads (portrait and landscape) ----------- */@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { /* Styles */ }/* iPads (landscape) ----------- */@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation :landscape) { /* Styles */ }/* iPads (portrait) ----------- */@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation :portrait) { /* Styles */ }//* Desktops and laptops ----------- */@media only screen and (min-width : 1224px) { /* Styles */ }/* Large screens ----------- */@media only screen and (min-width : 1824px) { /* Styles */ }/* iPhone 4 ----------- */@media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) { /* Styles */ }
  • 37. Responsive Design: Adaptive Layout • CSS3 Media queries Flexible Layout (aka fluid, liquid grids, elastic layouts, etc.) • Flexible images + Content Strategy + User ExperienceMairead Buchan – headlondon.comhttp://headlondon.com/our-thoughts/news/posts/responsive-web-design
  • 38. Grid Systems1. A grid is a consistent system for the placment of content2. It works on two levels: • at the unit level of cells (e.g. 60×60 pixels) • at the column level (e.g. 4 columns)”3. Consistently implemented, increases readers’ confidence1140 – http://cssgrid.net 960 – 960.gshttp://www.smashingmagazine.com/2007/04/14/designing-with-grid-based-approach/http://www.codinghorror.com/blog/2007/05/lets-build-a-grid.html
  • 39. Two levels - Unit (cell) and Column
  • 40. Balance Increases ConfidenceA confident layout A grid-less “insecure” layout
  • 41. Mind the grid: • When youre not sure where to begin with your UI design, start by building a grid. • Not a straitjacket. • Embracing the constraints of a grid in your design-- and knowing when to break those constraints-- is a crucial skill for designers.http://www.smashingmagazine.com/2007/04/14/designing-with-grid-based-approach/http://www.codinghorror.com/blog/2007/05/lets-build-a-grid.html
  • 42. Flexible Grids – usage overview Flexible Layouts (Grids) 1. Use percentages (for column widths, margins, padding, etc.) 2. Use ems instead of pixels (for font size and line height) 3. Use media queries when flexible layouts break… all layouts will have a “breakpoint” 4. Applied different CSS to change the layout aspect for each “breakpoint”
  • 43. GridsFIXED FLUID, LIQUID, ADAPTIVE http://coding.smashingmagazine.com/2009/06/02/fixed-vs-fluid-vs-elastic-layout-whats-the-right-one-for-you
  • 44. Grid Math- its all relative1. Start with the container, set it in pixels… say 960px2. Make internal columns percentages using this formula: target ÷ context = result 200px ÷ 960 = 20.83%3. Change Fonts and Line Height from “px” to “em”: 1. Font-size:24px becomes font-size:1.5em (24px ÷ 16px = 1.5em) 2. Font-size:14px becomes font-size:0.875em (14px ÷ 16px = 0.875) 3. Font-size:12px becomes font-size:0.75 em (12px ÷ 16px = 0.75) 4. Font-size:12px becomes font-size:75% 5. Line-height: 1.5em; (em is relative to its container… 18px for 12px font size)4. Now change the container to a percentage (960px to something like 80%)That’s it! QED
  • 45. resizemybrowser.com
  • 46. benjaminkeen.com/misc/br icss/
  • 47. pxtoem.com
  • 48. Responsive Design: Adaptive Layout • CSS3 Media queries • Flexible Layout (aka fluid grids, elastic layouts, etc.) Flexible images + Content Strategy + User ExperienceMairead Buchan – headlondon.comhttp://headlondon.com/our-thoughts/news/posts/responsive-web-design
  • 49. Flexible ImagesImages:width: 100% and use ie9.jsmax-width: 100%Backgrounds:jquery-backstretch by Scott Robbin for IE6, IE7, IE8background-size:cover; – Scales the image, while preserving its intrinsic aspect ratio (if any), to the smallest size such that both its width and its height can completely cover the background positioning area.background-size:contain; – Scales the image, while preserving its intrinsic aspect ratio (if any), to the largest size such that both its width and its height can fit inside the background positioning area.
  • 50. caniuse.com
  • 51. Responsive Design is: Adaptive Layout + Content Strategy + User ExperienceMairead Buchan – headlondon.comhttp://headlondon.com/our-thoughts/news/posts/responsive-web-design
  • 52. Joomla Template Vendors with Responsive Templates 1. JoomlaBamboo – yes since Sept 2011 2. JoomlaArt – yes since January, 2012 (T3V2) 3. JoomlaPraise – yes since March, 2012 4. JoomlaJunkie – not yet (Morph/modernizer) 5. Rocket Theme – not yet (Gantry/960 grid) 6. YooTheme – not yet (Warp)EXTENSIONS 1. Mobile Joomla - www.mobilejoomla.com/CUSTOMSeth Warburton (internet-inspired.com) created a starterHTML5/mobile-first Joomla template, along with HTML5content override modules
  • 53. joomlabamb oo.comUse Coupon Code (does not expire): chicagobamboofor 25% off a subscription… compliments of Anthony Olsen
  • 54. End of Presentation Q&A andThank You!