Being Responsive to Responsive Web Design
•Download as PPTX, PDF•
1 like•752 views
What is responsive web design and programming, and why is it critically important for your association to adopt this relatively new approach when building your website? With the rise in online access through various mobile devices, association web designers and developers must embrace the concept of planning for mobile first. Learn how!
Recommended
Recommended
More Related Content
Recently uploaded
Recently uploaded (20)
Featured
Featured (20)
Being Responsive to Responsive Web Design
- 1. Thursday, December 6, 10:15 a.m. Hub Tag: #tech12 LK2 Thomas Kugler, John Mills Being Responsive to Responsive Web Design
- 2. • Thomas Kugler: Website Administrator, ASAE(1/11–present, with prior contract assignment 9/10–1/11) • Work with team on Web Strategies, Information Architecture, Content Planning, Social Media; Design & Develop; Innovate • Former ASAE web colleague of John Mills, co-Technology Idea Labs leader “Good design is problem-solving” Who We Are #TECH12 LK2
- 3. • John Mills: Web Manager for PMMI – (8 years in the association world overall) • Design, content, video, narration, social spaces are how and where I live. • Off-hours: Occasionally pretending I'm a Jedi. Who We Are #TECH12 LK2
- 4. What is Responsive Web Design (RWD)? In a nutshell…An approach where a site is optimized for easy reading and navigation across a wide range of devices In other words—one website, delivered differently for different media
- 6. • Keeping your focus on your current audience The Balancing Act • Planning for the future: audience, membership, devices Responsive Design is the Means to Accomplish Both
- 7. Apps Do It All ! The Myth of Apps
- 8. Apps Don’t Do It All ! The Truth of Apps They are part of a digital ecosystem, all things interdependent and playing a part in a bigger picture.
- 9. Apps do one thing (or set of things) very well Apps are often for a pre-existing audience (Esp. in case of associations) The Truth of Apps Apps involve effort, updates, multi-platform iOS, Android, Blackberry, Windows—all separate apps
- 10. • They’re not exciting • People don’t expect much • Apps are more important • Less important than social • HTML5 the wonder tool The Myths of the Web
- 11. • The Universal Portal • Draw people in – Your Web audience is the World • Sell yourself to potential members – Your knowledge and value examples are “out there” – No need to download – SEO » People find things through Google, Social Media – they don’t send links to apps The Truths of the Web
- 12. The Truths of the Web • So Why Responsive and not “M”? – The dreaded “M dot subdomain” • Technical: – Device detection redirects can have unwanted consequences – Performance lag for redirects – Redirects and subdomains - device handlers - add a layer of unnecessary work and maintenance
- 13. • So Why Responsive and not “M”? • Practical: – A parallel site is not good for SEO – Give people ONE URL as a resource – Cost. Why develop twice what you can develop once? – A funny little story about a big misunderstanding: When someone left a responsive site directly to a site with “mobile detect.” Why Responsive Design Matters
- 14. – Two upstart search engines recommend it: • recommends responsive... – http://googlewebmastercentral.blogspot.com/2012/06/rec ommendations-for-building-smartphone.html • ...and so does – http://www.bing.com/community/site_blogs/b/webmaster/ archive/2012/03/07/building-websites-optimized-for-all- platforms-desktop-mobile-etc.aspx Why Responsive Design Matters
- 15. • We’ve been in a mobile world long enough to start making real content strategy changes • Obama and Romney campaigns both struggled with mobile content delivery: http://mobile.smashingmagazine.com/2012/08/22/separat e-mobile-responsive-website-presidential-smackdown/ • Attention Adjustments Responsive Design and Content Strategy And now… Icons source: http://www.iconarchive.com/
- 16. • Boston Globe • http://www.bostonglobe.com/ • Mobile-first thinking • Drag and resize the window to see RWD in “action” The Future is Now
- 17. • The Information Accessibility Revolution • Your site and your content should be equally accessible to all devices • Responsive is a part of this. • Congress.gov – Note that this is a Beta site – it’s OK to be iterative! Even Congress Is On Board…
- 18. What is Responsive Web Design (RWD)? An approach to web design in which a site is crafted to provide an optimal viewing experience— easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones) Wikipedia http://en.wikipedia.org/wiki/Responsive_web_design
- 19. ASAE Technology Conference 2012 Website
- 20. The 3 Building Blocks of Responsive Web Design (RWD): • Fluid Grids • Flexible Images • Media Queries
- 21. Fluid Grids: Ta r g e t ÷ C o n t e x t = R e s u l t # c o n t a i n e r { w i d t h : 9 9 0 p x } = 1 0 0 % # l e f t2 5 5 p x ÷ 9 9 0 p x = 25.7575757575758% # r i g h t 7 0 0 p x ÷ 9 9 0 p x = 70.7070707070707% # s o c i a l 2 0 5 p x ÷ 7 0 0 p x = 29.2857142857143% # c o n t e n t4 1 0 p x ÷ 7 0 0 p x = 58.5714285714286% Margins are also expressed in percentages: #left { margin-left: 03.030303030303% } /* 30px ÷ 990px */ (Percentages are relative, #social { margin-right: 0.021428571428571% } /* 15px ÷ 700px */ pixels are absolute.)
- 22. Fluid Grids (p.2) Ta r g e t ÷ C o n t e x t = R e s u l t ( p . 2 ) Type—Ems vs. Pixels 16px = default cross-browser font-size h3 { font-size: 1.25em; /* 20px ÷16px */ margin-bottom: 0.9em; } /* 18px ÷ 20px */ h4 { font-size: 0.875em; /* 14px ÷ 16px */ margin-bottom: 0.857142857142857em;} /* 12px ÷ 14px */ p, li {font-size: 0.75em; /* 12px ÷ 16px */ line-height: 1.5em; /* 18px ÷ 12px */ margin-bottom: 1.5em;} /* 18px ÷ 12px */ Type will scale proportionately within various device sizes Ems are relative, pixels are absolute
- 23. Fluid Grids (p.3) S c r e e n D i m e n s i o n s — w i d t h s a r e b r e a k p o i n t s f o r M e d i a Q u e r i e s Desktop / Laptop 1200 x 1024 iPad Landscape 1024 x 768 Small Laptop 800 x 600 iPad Portrait 768 x 1024 iPod Touch 640 x 960 Kindle 600 x 800 iPhone Landscape 480 x 320 iPhone Portrait 320 x 480 (note—these are only the most-used screens; there are many other devices with many different dimensions)
- 24. Flexible Images img {max-width: 100%; height: auto;} Prevents images from exceeding the width of their container. The container’s width must therefore be clearly defined. There are many more parameters involved in advanced image preparation, but this CSS declaration covers a lot.
- 25. Media Queries Desktop / Laptop 1200 x 1024 • Declare Desktop/Laptop (standard) styles first • Declare Responsive Styles last, from largest to smallest screen size Examples: @media screen and (max-width: 600px ) { #dateplace, #right, #content, #content.home, #content.inner, #mobileTopnav, #back, #mobileUtility, #mobilePartners { width: 560px; } } @media screen and (max-width: 480px ) { #dateplace, #right, #content, #content.home, #content.inner, #mobileTopnav, #back, #mobileUtility, #mobilePartners { width: 440px; } } @media screen and (max-width: 320px ) { #dateplace, #right, #content, #content.home, #content.inner, #mobileTopnav, #back, #mobileUtility, #mobilePartners { width: 280px; } #content p { clear: both; } }
- 26. Mobile Fir s t & R es pons ive Web D es ign Bundle, fr om A Bo o k Ap a r t
- 27. C ontent Str ategy for Mobile , fr om A Book Apar t
- 28. • A Book Apart http://www.abookapart.com/ • Luke Wroblewski (@lukew on Twitter, http://www.lukew.com) • Don’t Make Me Think (A “Classic”) • Revisit your own assumptions • Treehouse http://teamtreehouse.com/ • Your members – Site analytics, Feedback, ASK them Important Resources
- 29. What did we miss? What else do you want to know? Are you as excited as we are for the future? Questions
- 30. John Mills john@pmmi.org @kesseljunkie Thank You Thomas Kugler tkugler@asaecenter.org @tom8gem
Editor's Notes
- Welcome to our session!
- Graphic & Web Design & Development was a career change for me; I’ve only been doing it five–six years, following previous careers in film and music in Los Angeles. I’ve found it to be a better way to bridge the gap between creativity and commerce, and to have more control over one’s destiny than one has in the entertainment industry. In our web team meetings, we often discuss raising awareness that we’re not just technical, but also a creative team. Since design can be defined as creative problem-solving, RWD fits right in.
- I’ve been meddling in the Interwebs since 1992, learning as I went and ignoring what I thought was my initial calling – theatre – to take part in something that has grown into an artistic, thriving environment that’s getting even more interesting as we have to tackle the challenges of responsive design. There are those that see the design from a Mathematical perspective, but the beautiful puzzle has to do with straight up, unabashed art. The reason I’m so excited for Responsive Design is that this feels like that moment when things truly are limitelss and possible with the Web – a tipping point. A way to make it so that everything is simple AND beautiful and places the emphasis on the user’s experience to get to what they want, when they want it, as easily as you can get it to them.
- (Take this one together—I’ll do second part)
- We are finally at a stage where we all should know that we’re not designing just for our members and prospective members in the current day – we are preparing the path to reach and appeal to the members who are currently 6.
- Responsive Design has arisen as a way to make sites and their content accessible to the Brave New World that is no longer defined by consumption at a desk but on the go. We live in a world with endless tethers but no longer the anchors that used to define connectivity.
- Many people believe and preach that apps “are” a mobile strategy. They rightly focus on the prevalence and dominance of apps, but in the process lose focus on the fact that they are a piece of a mobile strategy,
- Many people believe and preach that apps “are” a mobile strategy. They rightly focus on the prevalence and dominance of apps, but in the process lose focus on the fact that they are a piece of a mobile strategy,
- This is not to say apps don’t have a place! Of course they do! They are a big part of a mobile strategy. But let’s not forget what got us here in the first place: Web sites. Universal, all-encompassing. Does Amazon have an app? Of course! But THEY ARE ALSO constantly working to make their Web site work the best it can cross-device. Does Angry Birds have a Web site? YES THEY DO! To sell merchandise, promote their brand and give you ways to connect!
- Your web site is the HUB for all of your content that you want to get to your members and the world. It’s where you’re sending people when you send out links. It’s your presence in Google searches. HTML5 is the next generation of Hypertext Markup Language. That’s it. HTML5 is not software to be installed but rather a new version of HTML. Irony: the rich experience of apps has led to people expecting more of Web sites. Do sites need to catch up to be as “cool” as apps? Yes – but they are, and Responsive is part of that.
- Your web site can do EVERYTHING (though sometimes not as well as you'd like)
- When someone sends an “m” link to the world, only “m” users will get an arguably satisfying experience. Do you go to www.amazon.com or m.amazon.com? (M-dot redirects you to www now)
- Teve Torbes made a site that worked on a range of devices, and while not perfect, was proud of the first foray into a more responsive world on a small scale. One morning: panic had set in at the office. “His site” wasn’t working properly, per board members and the CEO. See, a link to a hotel registration site was used by necessity that used the dreaded m-dot subdomain that read an iPad (and other tablets) as a phone, leading to a CEO who got flustered (as well as a board), asking why Teve Torbes couldn’t change it. Someone brought up a great point: their membership base still uses Blackberry at a rate of 53% for mobile. All I will say is, good for them, that buys them an extra six months of development time before they get to change over, or accept that the new Blackberry 10 is going to have to play better by responsive rules than old models.
- …and bing is the official search engine of Spider-Man, so they know what they’re talking about.
- Newspapers had to make room for radio, which had to make room for TV. While newspapers are now fading as mobile content consumption increasingly marginalizes their presence, the important thing to remember is this: All three coexist, and all three deliver you the news – just in different formats and designed for where and how you will consume them. The newspaper is designed around a person reading a full article, with updates coming as they are available in new editions. Radio repeats and refines stories through the day in minutes-long segments designed for you to get the biggest highlights in a compressed amount of time – on the way to work, while getting ready to head out. TV news blasts those headlines at you, and in-depth stories are shelved for other programs. The idea is that you will get all the news that is important to your world – which to you is the world itself - within 20 minutes (allowing for ads). And now we have to be mindful that responsive makes us more agile to make sure the content is easily consumed within the context of the newest devices, smartphones and tablets.
- THIS is what the future will be and it’s here now. Pay special attention to the navigation and how it changes based on screen size!
- They might not be able to agree about much, but Congress agreed to push out a Beta responsive site. Important lesson: it’s OK to be iterative.
- For those who attended last year’s Tech conference, our keynote speaker Luke Wroblewski made a very convincing case as to why mobile must be addressed. We don’t need to run through this again; the figures are out there. But there’s one significant thing—Luke doesn’t claim to address how to address mobile. Since a lot of us in the industry have been, or are currently, looking for these answers, let’s look into some particulars. For the reasons just given, many of us have arrived at RWD as the best solution; we’ll now examine some foundational how-to’s of RWD.
- The site for this year’s Tech Conference was my own first foray into RWD. As it’s relatively new to me, I don’t claim to be an expert, but the fact is it’s relatively new to all of us. Even Ethan Marcotte, who wrote the book on it, will emphasize he doesn’t consider himself an expert. There are many moving parts, with new devices with new screen sizes constantly being introduced (the iPad Mini, for example, came out after I did this site). Since time and budgeting only allowed for hitting the primary, most-used screen size targets, there’s plenty of room for improvement here, but the site still provides a good case study.
- (Point out what comprises each div in live site)
- (Use Web Developer Toolbar to show window resized for different devices, pointing out how type sizes remain proportionately consistent.) If someone has screen settings reset, does this get them to square one?
- (Show how/where to add/edit Resize dimensions.) Recommend: we put a link to screen size infographic and/or note about how this is changing content expectation/UI/UX
- We should make notes about the fact that CSS standards are not read “the same way” across all browsers and this needs to be taken into consideration as well. - JWM
- Again, there’s a lot more to it, such as showing or hiding certain elements and preparing alternate graphics and page elements for different sizes, but this will hopefully demystify exactly what a media query is, and how and where to use them. Ethan’s book will help you understand many more particulars… (tie into next frame)
- The best way to get started going into RWD, in this order… Not sure we need this slide here – would instead place this slide later; also, expand to include “content for mobile” released Fall 2012 - JWM
- The best way to get started going into RWD, in this order… Not sure we need this slide here – would instead place this slide later; also, expand to include “content for mobile” released Fall 2012 - JWM