Responsive design
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Responsive design

  • 672 views
Uploaded on

Presented at JoomlaDay Sydney 2013 by Anthony Olsen, Joomla Bamboo

Presented at JoomlaDay Sydney 2013 by Anthony Olsen, Joomla Bamboo

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
672
On Slideshare
672
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
13
Comments
0
Likes
1

Embeds 0

No embeds

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 by Anthony Olsen Saturday, 19 October 13
  • 2. A little about me ... Saturday, 19 October 13
  • 3. That’s not me. First learnt Joomla while building a website for my acupuncture practice. Became hooked on the challenges of design and built my first template. Curiosity turned to obsession and so late in 2006 Joomlabamboo was born. Saturday, 19 October 13
  • 4. Since 2006 we have created 80+ templates 30 or more of them are responsive. First responsive design released in October 2011. Saturday, 19 October 13
  • 5. Saturday, 19 October 13
  • 6. Saturday, 19 October 13
  • 7. Saturday, 19 October 13
  • 8. Saturday, 19 October 13
  • 9. Saturday, 19 October 13
  • 10. Saturday, 19 October 13
  • 11. Saturday, 19 October 13
  • 12. Saturday, 19 October 13
  • 13. Saturday, 19 October 13
  • 14. In addition to our themes we released Zentools in December 2011. Saturday, 19 October 13
  • 15. In December 2011 we released ... -Responsive module designed to complement responsive Joomla templates. -All in one solution for creating: grids, lists, carousel, slideshows, accordions, filters - Comes with a responsive lightbox - Works with Joomla, K2, images from a folder (Soon to have more sources) - Built in image resizing - Drag and drop templating Saturday, 19 October 13
  • 16. What is Responsive design? ... but first a few questions for you. Saturday, 19 October 13
  • 17. Who here has a responsive website? Saturday, 19 October 13
  • 18. Who here has used a responsive template? Saturday, 19 October 13
  • 19. Who here has built a responsive template? Saturday, 19 October 13
  • 20. Who here doesn’t own a smart phone? The rise of the mobile generation. Saturday, 19 October 13
  • 21. 17.4% of all global internet traffic comes from mobile sources. http://mashable.com/2013/08/20/mobile-web-traffic/ South America, Africa and Asia are leading the mobile push. Saturday, 19 October 13
  • 22. Saturday, 19 October 13
  • 23. Mobile is becoming ubiquitous. There were 2.1 billion mobile Web users in the world at the end of 2012. Mobile-broadband subscription outnumber fixed broadband subscriptions 3:1 In developed countries mobile-broadband users often also have access to a fixed-broadband connection, but in developing countries mobile broadband is often the only access method available to people. http://www.itu.int/en/ITU-D/Statistics/Pages/stat/default.aspx Saturday, 19 October 13
  • 24. Mobile use doubles from 2012 to 2013. Desktop Tablet Smart Phone 11% 6% 10% 5% 89% 79% Quarter 1 - 2012 Quarter 1 - 2013 http://www.smartinsights.com/mobile-marketing/mobile-marketing-analytics/mobile-marketing-statistics/ Saturday, 19 October 13
  • 25. So should you believe the hype? Do you need to make mobile a priority - right now? Based on these figures you should ... ... but first ... ... a disclaimer of sorts. Saturday, 19 October 13
  • 26. The fine print. (Part 1) Mobile traffic really depends on the type of site you have, your content, your marketing strategy and your audience. Not everyone is necessarily viewing your site on a mobile right now ... But this is changing ... quickly. Saturday, 19 October 13
  • 27. The fine print. (Part 1) Types of sites that attract a lot of visitors via mobile? - Sites where the visitor consumes content blogs, magazines, newspapers etc - Sites with strong email campaigns. A lot of email is read on mobile devices now. - Sites with strong social media focus - Sites that offer local information. Real estate, tourism etc - Other examples? Saturday, 19 October 13
  • 28. The fine print. (Part 2) Another factor to consider. What % of users visit your site using ie8 and below?. Mobile traffic is the future but ... ... at the moment you may be better off spending more time on crappy browsers. eek :( Saturday, 19 October 13
  • 29. After all, ie8 and below still account for 11% of worldwide browser use. Saturday, 19 October 13
  • 30. Despite this ... ... your client will probably want a mobile optimised site anyway. Saturday, 19 October 13
  • 31. Should you make optimising for mobile a priority for an existing site? Before I answer that let’s look at some some case studies. Saturday, 19 October 13
  • 32. Joomlabamboo.com My own site which has a moderate amount of traffic receives a relatively small number of visitors on mobile devices. - 2% mobile - 2% tablets - 96% Desktop Saturday, 19 October 13 - Monthly email - Close to 4000 twitter followers - Small facebook engagement
  • 33. 2ser.com Sydney radio station with an 18-40 yo demographic. - 20% mobile - 80% Desktop Saturday, 19 October 13 - Dedicated social media team - 9000 Facebook fans - 6100 Twitter Followers
  • 34. greensborosportsplex.com Community sports center on the East Coast of USA Seasonal activity based on sports season. Local information provider. - 18% mobile - 82% Desktop Saturday, 19 October 13 - Regular facebook updates - Small Twitter Following - Monthly newsletter to 60000
  • 35. Does anyone here have examples of sites that have more than average mobile visitors? Saturday, 19 October 13
  • 36. So back to the question at hand ... Should you make optimising for mobile a priority for an existing site? Shorterm: Longterm: Saturday, 19 October 13 It depends. Definitely.
  • 37. Should you optimise new sites for mobile? Yes. - Mobile usage is increasing rapidly. - Optimising for mobile adds a relatively small overhead to the site build vs a complete rebuild in the future. - Cost effective to include in initial build rather than rebuild down the track. - It’s highly likely your client will want it anyway. Saturday, 19 October 13
  • 38. Optimising your site for mobile use is not just about today ... ... it’s about the future. Saturday, 19 October 13
  • 39. Mobile traffic maybe growing but more than that ... ... devices are multiplying. Saturday, 19 October 13
  • 40. It’s not a question of VHS vs BETA anymore. If the release of devices have told us anything in the last few years, the screen size race is not about finding a single screen size to fit everyone. Saturday, 19 October 13
  • 41. 2007 First iPhone released 2008 HTC dream released (Android) 2010 First iPad released 2012 3997 android devices http://opensignal.com/reports/fragmentation.php 2013 11868 android devices http://opensignal.com/reports/fragmentation-2013/ Saturday, 19 October 13
  • 42. 11868 android devices http://opensignal.com/reports/fragmentation-2013/ Saturday, 19 October 13
  • 43. A fork in the road. So we now know, that now or some point in the future, we should start optimising for mobile. Before you do that you need to ask a few questions. How do we do that? What are our options? What is the best way to do this in a rapidly changing landscape? Saturday, 19 October 13
  • 44. So what are the options? Saturday, 19 October 13
  • 45. Dedicated Mobile theme vs Responsive design Neither is perfect ... just yet. Saturday, 19 October 13
  • 46. Dedicated Mobile theme Browser sniff on the server side (using php) to determine the device the user is viewing the site with and then serve a separate design specifically for your visitor’s device. Pros - Usually Fast and optimised for mobile viewing. - Can use more functionality built into the device ios. - Can be easier to implement depending on design. - Off the shelf plugins in some CMS - both wordpress and Joomla. Cons - Relies on browser sniffing which is not 100% accurate. - Threshold between mobile desktop sizes varies and changes. - Link to “full website”. I’m missing out on something here. - May mean managing multiple sets of content. - Multiple domains, urls = headache for seo and user experience. Clicking on a mobile link from the desktop. Saturday, 19 October 13
  • 47. Examples http://sixrevisions.com/mobile/methods-mobile-websites/ Saturday, 19 October 13
  • 48. Responsive theme A single template that uses mediaqueries to control the design at various breakpoints. Pros - A single theme used across all present and all future devices and browsers. - A single set of content - A single site. No mobile domain. One url. - Easy(ish) to update. One design covers all devices and is applied once. - Caters to any screen size. Cons - Can take longer to implement. - More challenging to optimise content for different devices. - Can be slower if not designed mobile first. - Not all mobile devices support all the full range of media queries and css3. Saturday, 19 October 13
  • 49. Examples Saturday, 19 October 13
  • 50. So in a nutshell ... Responsive design aims to provide a single design solution to suit multiple contexts. Saturday, 19 October 13
  • 51. Is Responsive design the future? Responsive design is the leading edge of optimising websites for mobile - now. Technology will change and we will have to adapt (again) but it is the best vehicle we have now for optimising for mobile traffic. Saturday, 19 October 13
  • 52. er v y A brief history of responsive design. May 25 2010 Ethan Marcotte writes Responsive Web Design Article on A List Apart. http://alistapart.com/article/responsive-web-design July 19 2010 Smashing Magazine writes their first article about Responsive design. http://mobile.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/ June 7 2011 Saturday, 19 October 13 Ethan Marcotte publishes Responsive Web Design book.
  • 53. er v y A brief history of responsive design. Sept 2011 Boston Globe has a responsive redesign. Oct 2011 We released our first responsive template. Late 2012 Google recommends responsive design as industry best practice. Jan 1 2013 My Nanna starts using responsive design*. Thought to be the first “big” site to have a responsive makeover. * She doesn’t really. Saturday, 19 October 13
  • 54. Key facets of responsive design. Fluid grid. Rather than using fixed widths responsive grid is based on percentages. Breakpoints and Media Queries. Media queries are used to determine how the design looks at certain breakpoints. Flexible Elements. Images, video and type change characteristic depending on the content. Saturday, 19 October 13
  • 55. Responsive Types Demo Adaptive vs Responsive vs Mixed. Adaptive Fixed width containers that change width at various breakpoints. Responsive Percentage based fluid grid often with a maxwidth set to parent container. Mixed Adaptive at large screen sizes and % based at smaller screen sizes. Saturday, 19 October 13
  • 56. Fluid Grid Set a fixed, max-width or percentage value on the parent container. Fluid grid is fundamental to responsive design Old techniques used fixed values for each column division in a grid based layout. A fluid grid uses a fixed width, max-width or % for the outer container. Each column in the grid is assigned a % to represent each column. Saturday, 19 October 13
  • 57. Fluid Grid Classic pixel grid Classic % grid Sensible % grid .grid_1 {width: 60px;} .grid_2 {width: 140px;} .grid_4 {width: 300px;} .grid_5 {width: 380px;} .grid_7 { width: 540px;} .grid_8 { width: 620px;} .grid_10 {width: 780px;} .grid_11 {width: 860px;} .span_1 {width:6.5%;} .span_2 {width:15.0%;} .span_3 {width:23.5%;} .span_4 {width:32.0%;} .span_5 { width:40.5%;} .span_6 {width:49.0%;} .span_7 { width:57.5%} .span_8 {width:66.0%;} .span_9 {width:74.5%;} .span_10 {width:83.0%;} .span_11 {width:91.5%;} .span_12 {width:100%;} .one-twelth {width:6.5%;} .one-sixth {width:15.0%;} .one-quarter {width:23.5%;} .one-third {width:32.0%;} .five-twelths { width:40.5%;} .one-half {width:49.0%;} .seven-twelths { width:57.5%} .two-thirds {width:66.0%;} .three-quarters {width:74.5%;} .four-fifths {width:83.0%;} .one-whole {width:100%;} Demo Saturday, 19 October 13
  • 58. Breakpoints Breakpoints literally mean the point at which your design breaks. So this means that rather than optimising your design based on the known device sizes eg iPad landscape, portrait etc you optimise your design based on where it breaks. Saturday, 19 October 13
  • 59. Mediaqueries Mediaqueries create breakpoints What is a media query? A css3 technique used to specify the conditions of the viewport for when given css should be applied. Where do you add them? Anywhere you would normally add css to your site. Can keep them in with other rules or separate them into a separate stylesheet. Example @media only screen and (max-width: 800px) { // Enter rules here to target screens under 800px } Saturday, 19 October 13
  • 60. Mediaqueries Min and max-widths. @media (min-width: 481px) and (max-width: 768px) // Enter rules here to target screens above 481px and under 768px } Target Orientation. @media only screen and (orientation : portrait) { /* Target any device in portrait mode.*/ } Saturday, 19 October 13
  • 61. Mediaqueries Demo Target Resolution. @media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5){ /* Enter rules to target screens with 1.5 times resolution or greater .*/ } Saturday, 19 October 13
  • 62. Flexible Elements Demo Fluid Images Simple fix is to add max-width to the img rule. But there is room for improvement here. img {max-width:100%} Fluid Video More complicated and requires javascript but possible. .videoWrapper { ! position: relative; ! padding-bottom: 56.25%; /* 16:9 */ ! padding-top: 25px; ! height: 0; } .videoWrapper object, .videoWrapper embed, { ! position: absolute; ! top: 0; ! left: 0; ! width: 100%; ! height: 100%; } Saturday, 19 October 13 // Find all YouTube videos var $allVideos = $("iframe[src^='http://www.youtube.com']"), // The element that is fluid width $fluidEl = $("body"); // Figure out and save aspect ratio for each video $allVideos.each(function() { ...
  • 63. Flexible Elements Fluid Type Designed to maintain optimum line length for reading on the web. Line Length Optimum line length is somewhere between 45-75 characters per line.. http://trentwalton.com/2012/06/19/fluid-type/ CSS CSS solutions via mediaqueries. Javascript Javascript solutions via scripts like FitText for headings http://fittextjs.com/ Saturday, 19 October 13
  • 64. Responsive Challenges Navigation A lot of options out there now. bradfrost.github.io/this-is-responsive/patterns.html#fluid-images - Select Menu - Toggle Menu - Off Canvas Menu - Footer Links Page Load Building with mobile first strategy in mind. Optimise for essential content first and add progressively enhance from there. Saturday, 19 October 13
  • 65. Questions? Saturday, 19 October 13