Responsive web-design
- 1. Optimizing web content for mobile/responsive design Eric Craypo Recreational Sports Matt Matsuoka University Relations Patrick McMahon Graduate Division
- 2. Introduction • Mobile internet use will continue to surge • More than half of Facebook users are using mobile • Mobile use is increasing at Berkeley
- 3. Mobile use at Berkeley • 577% increase mobile visits to newscenter.berkeley.edu compared to two years ago • This year: • 13% of visitors to Grad Division grad.berkeley.edu • 16% of visitors to the alumni network, cal.berkeley.edu • 20% of visitors to Rec Sports, recsports.berkeley.edu
- 4. How can we better serve our increasingly mobile users? • Design: Build responsiveness into your websites and applications • Content: Think about content from a mobile first perspective
- 5. Design: Build responsiveness into your websites and applications
- 6. Content: Think about content from a mobile first perspective • A responsive website does not make responsive content • Curate your content down to its essential points • Consider the needs of the mobile user first
- 7. Now what do you do?
- 8. Deciding what to do and when to do it. • What can you do right now? • Test your website: http://responsinator.com • Use Google Analytics • CSS/HTML skills are needed to make a site responsive • Change what is not mobile friendly: Flash, hover states • Decide if you really need all those API bells and whistles • Read-up mobile content strategy, mobile first
- 9. What should you plan for the future? • Make changes during a site redesign • Leverage responsive themes for Drupal or Wordpress • Use a responsive framework such as Foundation CSS or Bootstrap • Consider Sec. 508 accessibility • Consider waiting for a responsive Berkeley template based on the new brand
- 10. Other topics • What about native apps? • What about HTML newsletters? • Questions? • Campus resources: http://ux.berkeley.edu http://webaccess.berkeley.edu • Resources: http://foundation.zurb.com http://twitter.github.io/bootstrap/ http://screenqueri.es http://www.responsinator.com Want to design your own responsive website Email: hello@nooriwebstudio.com Website: https://nooriwebstudio.com
Editor's Notes
- #3: Eric introduces Matt and Patrick. Anything else to say? Statistics showing increased mobile use (EC and or PM) - Talk about the growing use of mobile devices on the web. Maybe something along the lines of this: http://articles.washingtonpost.com/2013-02-06/business/36937190_1_mobile-internet-mobile-devices-data-traffic - More than half of Facebook users are mobile users...who you want to click-through to your content (http://news.cnet.com/8301-1023_3-57480950-93/facebook-over-955-million-users-543-million-mobile-users/) SHOW: Summary screen of collective GA stats
- #4: Mobile device and application use on campus will continue to proliferate. In 2011, 50% of students and faculty own Internet-capable mobile devices, according to recent surveys of the UC Berkeley student and faculty populations by the California Digital Library, and a survey of students in the Residential Halls. 13% mobile for Graduate Division website. Half phone, half tablet.
- #5: Overview
- #6: - What is it? A website layout that responds to a users’ device automatically. - Adaptive, Responsive and Mobile are somewhat interchangeable ways of talking about the same thing. (In general, they all intend to make it so that people viewing your site on a smart phone or tablet can navigate and read content without doing an excessive amount of pinching and zooming...that the experience is optimized for their device.) SHOW AND TELL: Show a site without CSS (the presentation layer). Examples of desktop site and same site on mobile. Example of a site with breakpoints versus a site that is fully responsive (fluid). Show that there are multiple approaches to achieve the same layout goals. Anecdotal stories about students not even looking at sites that are not optimized.
- #7: - A responsive website does not make your content any better. - If you write and design for the Mobile user first this will help you curate your content down to its essential points. - Less content means less bandwidth, which might improve the mobile experience better. - Consider the needs of the mobile user, within the physical context of the use of your content or web application. Lots of events? Perhaps make details more easy to find on Mobile. Office hours, contact information? Maybe more important for mobile users to see upfront. SHOW AND TELL: Consider progressively revealing content (Eric’s site)? Or find a good real-world example of this?
- #8: A break from information overload…
- #9: What can you do right now? (PM and/or MM) - Test your website (responsinator), Your site probably already looks/works great on Tablet. - Install/mine Google Analytics to determine ways to cut unnecessary content, features. - You need CSS/HTML skills to make a site responsive. You can make your website responsive before redesigning it (and some CMS’s make this easier), but it depends on the site. Ask your web designer for an estimate on what would be involved to upgrade your current site, and be prepared to have a dialogue with them about the order and flow of content at various breakpoints and if any types of content should be hidden from mobile users. - Maybe you do nothing now, focus on improving your content and your Facebook presence (too cheeky?) - Do you really need those plugins/APIs and bells and whistles? - Read-up on mobile content strategy, mobile first. SHOW AND TELL: Eric shows the RSF site (hmm...screenshots?), and explains his choices...or we critique a site.
- #10: What should you plan for the future? (PM and/or MM) - Ideally, consider making changes that incorporate both a mobile first content strategy along with a responsive web design when you do a site redesign. Tackle the content first. - When you do a re-design, look for Drupal/WordPress/CMS themes that are responsive, or frameworks such as Foundation or Bootstrap that have responsiveness baked-in. - Consider accessibility as a motivator for doing your re-design; Bootstrap was recently successfully tested by Lucy Greco. - Consider waiting for a responsive Berkeley template based on the new brand.
- #11: IF WE HAVE TIME What about Apps? What’s the difference? (MM) - Native web apps (not our topic of discussion, but indicate it is separate). Indicated how these are device-specific (iPhone or Android only) and typically rely on phone/tablet technology to function (GPS, Phone, Camera, accelerometer), serve a niche function or act as a tool. Examples: Instagram, Angry Birds. (More clarity here? Add to INTRO instead?) What about HTML emails/newsletter? (PM) - Mobile first content ideas: more focused, judicious use of images. - easy to touch actionable areas (typically drive traffic back to your site) SHOW: Perhaps show HTML email, TBD. Questions? Resources http://foundation.zurb.com http://twitter.github.io/bootstrap/ http://screenqueri.es http://www.responsinator.com http://crossbrowsertesting.com/pricing