Optimizing Web Content for Mobile/Responsive Design

Optimizing web content for mobile/responsive design Eric Craypo Recreational Sports

Matt Matsuoka University Relations

Patrick McMahon Graduate Division

Introduction • Mobile internet use will continue to surge • More than half of Facebook users are using mobile • Mobile use is increasing at Berkeley

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

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

Design: Build responsiveness into your websites and applications

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

Now what do you do?

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

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

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