With Responsive Web Design Eric Overfield SharePoint Advocate and Enthusiast PixelMill SharePoint Fest Denver – March 18 th - 20 th 2013 Enhance SharePoint DEV 201

Introduction – Eric Overfield  Founder and SharePoint Branding/UI Lead, PixelMill  Speaker, Teacher, Advocate  Author, SharePoint Community Organizer  Located in Davis, CA Order Your Copy Co-author: “Pro SharePoint 2013 Branding and Responsive Web Development” (Apress – May 2013)

What You Will Learn  What is Responsive Web Design (RWD)  Why Should We Use It  The Responsive Process  Join Response Web Design and SharePoint  SharePoint pixelmill.com

Responsive Web Design  #2 trend for net Magazine  Coined by Ethan Marcotte in May 2010  Use fluid grids and flexible media to adapt  Uses CSS3 and JavaScript  All devices load same page, use CSS3 to - pixelmill.com

Fluid Grid – Flexible Media – CSS3 Media - pixelmill.com

Why Do We Need Responsive - pixelmill.com

Not The - pixelmill.com

Today’s - pixelmill.com

And Tomorrow? Watches? Game Devices? Printers? Who Knows? Toasters? Televisions? Cameras? ? - pixelmill.com

"There’s a plethora of devices out there with widely differing abilities – it’s never been more confusing or challenging to create brilliant interfaces that work across them all.” ~ Jeffery - pixelmill.com

Screen Size Functionality Usability How All Devices - pixelmill.com

The Responsive - pixelmill.com

Our Responsive Goals  Single site  Serve a variety of - pixelmill.com  Future Friendly (i.e. no separate mobile)

Responsive Drawbacks  Desktop vs. Mobile content  Content - pixelmill.com  Maybe SharePoint can help?

Start with - pixelmill.com

Design - pixelmill.com to the

@EricOverfield - pixelmill.com

Navigation  Responsive Navigation the most difficult decision  SharePoint Navigation is not Responsive - pixelmill.com  SharePoint relies on hover event  Static Navigation vs. SharePoint Navigation

Floating Drop down Collapse Off Canvas Others? Responsive - pixelmill.com

Floating Navigation

Floating Drop down Collapse Off Canvas Others? Responsive - pixelmill.com

Dropdown Navigation

Floating Drop down Collapsing Off Canvas Others? Responsive - pixelmill.com

Collapsing Navigation

Floating Drop down Collapsing Off Canvas Others? Responsive - pixelmill.com

Off Canvas Navigation

Floating Drop down Collapsing Off Canvas Others? Responsive - pixelmill.com

No two projects are the same Hide and Cry Overlay Footer Navigation Global Navigation jQuery or no - pixelmill.com

Time to Code it - pixelmill.com

Frameworks  Pre-Built Responsive and Fluid Grids  Saves time and - pixelmill.com  Many include extras  i.e. Collapsing navigation

Framework Drawbacks  May take time to learn framework  Not always SharePoint - pixelmill.com

Twitter Bootstrap Zurb Foundation Skeleton Less Framework and so many - pixelmill.com

Mobile First  Build Mobile interface first  Forces us to concentrate on content  Helps control some - pixelmill.com  Mobile Interface not great for entering content  Considerations needed for page editing  Cross-site publishing in SharePoint 2013?

Mobile First In - pixelmill.com

Build to the Design not the - pixelmill.com

Become Device Independent  Base breakpoints based on design  Allows for any device  Use a background image to - pixelmill.com  Temporary background image with columns  Start with 300 pixel block  Then 50 to 100 pixel columns through 1200 pixels total

And SharePoint - pixelmill.com

Device Channels  New to SharePoint 2013  Interfaces tailored and maps to specific device(s)  Custom Master Pages per Channel  Custom DeviceChannelPanels  Change the order of - pixelmill.com

- pixelmill.com

Build towards progress Perfection does not yet exist There is no silver - pixelmill.com

Resources "Responsive Web Design" by Ethan Marcotte Responsive Frameworks for SharePoint 2010 and SharePoint 2010 Responsive Web design Template by Luis Kerr v5, the Responsive HTML5 Master Page for SharePoint 2010 by Kyle Schaeffer Ethan Marcotte’s 20 Favorite Responsive Designs Configure SharePoint Server 2010 for Mobile Device Access html5shiv Modernizr css3-mediaqueries-js - pixelmill.com

Resources Twitter Bootstrap Implementing Off Canvas Navigation Less Framework Skeleton Framework Zurb Foundation - pixelmill.com 50 Useful Responsive Web Design Tools For Designers

Eric ericoverfield.com Thank You With Responsive Web Design Enhance SharePoint DEV 201