ESPC 14 - TH22 - Enhance SharePoint 2013 with Responsive Web Design

  • 648 views
Uploaded on

One of the hottest topics in Web Design over the last few years has been Responsive Web Design (RWD). The theory of one site structure for current web devices, including tablets and smartphones, has …

One of the hottest topics in Web Design over the last few years has been Responsive Web Design (RWD). The theory of one site structure for current web devices, including tablets and smartphones, has also attracted SharePoint developers, but the complexity of RWD has been a stumbling block. In this session we will start with an overview of what is Responsive Web Design followed by an in-depth look into the process of applying a responsive design on SharePoint 2013. We will then dive into the code and learn how to create a SharePoint site that is both responsive and attractive.

More in: Internet , Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
648
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
13
Comments
0
Likes
0

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. TH22 - Enhance SharePoint 2013 With Responsive Design Eric Overfield PixelMill – USA @ericoverfield
  • 2. About Me Founder/SharePoint Branding/UI Lead, PixelMill Speaker, Teacher, Advocate Author, SharePoint Community Organizer
  • 3. You will learn… • What is Responsive Web Design and Why We Need It • Fundamentals of Responsive Web Design • Responsive Design Process • Join Responsive Web Design and SharePoint
  • 4. What is Responsive Web Design
  • 5. Responsive Web Design • A web design methodology – Addresses growing number of Internet devices • Tailored experience to any device – Limits resizing, panning and scrolling • The Key: All devices load the same page*
  • 6. Why we need it
  • 7. So many different devices • Screen size (viewport, proportions, resolution) • Functionality (clicks, hover, touch, swipe…) • Usability (can your site be used on any device?)
  • 8. Responsive Web Design in Action Demo
  • 9. Fundamentals of RWD
  • 10. The 3 pillars of RWD Fluid Grid – Flexible Media – CSS3 Media Queries
  • 11. A fluid grid
  • 12. Flexible media  Flexible Images  Flexible Video  Proportional Text
  • 13. Media queries In-Line Media Query: <link rel="stylesheet" media="screen and (min-width: 768px)" href=“tablet.css" /> <link rel="stylesheet" media="screen and (max-width: 599px)" href=“small.css" /> Media Query in style sheets: Device ability to handle orientation @media screen and (orientation: landscape) { .landscape { width: 30%; float: right; } }
  • 14. Beyond the Pillars
  • 15. Progressive Enhancement Graceful Degradation Adaptive WebDesign Responsive WebDesign DesktopFirstMobileFirst Related terms
  • 16. Mobile first • Build and code mobile interface first • Mobile friendly – progressively enhance • Forces us to concentrate on content • *Caveats for IE8
  • 17. Mobile First – An Introduction Demo Demo
  • 18. Navigation • How will your navigation adapt to different viewports • Responsive navigation may require thought • Only basic SharePoint OOTB navigation is RWD friendly • Multi-level SP OOTB navigation relies on hover
  • 19. Example RWD Navigation - Collapsing Demo
  • 20. Strategy for a RWD Site
  • 21. Begin with site planning • This should be familiar – Start with content / site purpose – Sitemap – Information Architecture • What’s different – Wireframing – including for mobile devices – High fidelity mockups – including for mobile devices • Design to the extremes, then fill in the gaps
  • 22. Always remember SharePoint • What will be a part of the Master Page • How you will you handle navigation? • Current navigation on all pages? • How will Page Layout content be defined?
  • 23. Code a RWD Site A HTML Prototype
  • 24. Custom grid vs existing framework • Pre-built responsive and fluid grids • Saves time and resources • Many include extras • i.e. collapsing navigation
  • 25. Common frameworks • Twitter Bootstrap • Zurb Foundation • Skeleton • Less Framework
  • 26. Framework pluses and minuses • May take time to learn framework • Not always SharePoint ready OOTB • Can save you a bunch of time!
  • 27. A Responsive HTML Prototype Demo
  • 28. Joining RWD And SharePoint
  • 29. Convert key components to SharePoint • Distill page into Master Page and Page Layout(s) • Fix framework to work with SharePoint – Or use pre-converted RWD framework for SharePoint • Add SharePoint controls, snippets and navigation
  • 30. Convert a responsive prototype to SharePoint https://sprwd-public.sharepoint.com/ Demo
  • 31. A quick review • What is Responsive Web Design and Why We Need It • Fundamentals of Responsive Web Design • Responsive Design Process • Join Responsive Web Design and SharePoint
  • 32. Responsive frameworks and SharePoint • Responsive SharePoint at CodePlex – Free, open source responsive SharePoint Frameworks – SharePoint 2013 Ready – http://responsivesharepoint.codeplex.com • SP Blueprint – SharePoint 2013 responsive framework – A lean, custom grid – http://spblueprint.codeplex.com
  • 33. My practical tips to #SPRWD • Use a prebuilt framework (SharePoint ready) • Set project budget, deliverables and expectations accordingly • Develop for the real world (will mobile users need to edit pages?) • Don’t break SharePoint* • Mobile first (with caveats) • Be sure you are very comfortable with CSS/HTML • Test, and test, and test some more • Train content authors! RWD relies on groomed content
  • 34. Resources "Responsive Web Design" by Ethan Marcotte http://pxml.ly/23fkmjd Responsive Frameworks for SharePoint 2010 and 2013 http://responsivesharepoint.codeplex.com SP Blueprint http://spblueprint.codeplex.com html5shiv http://pxml.ly/uzcz32 Modernizr http://modernizr.com css3-mediaqueries-js http://pxml.ly/zcw2jb2 Sample Office 365 SharePoint Online demo http://sprwd-public.sharepoint.com http://pxml.ly/d3qbekq http://pxml.ly/wcxkqv http://pxml.ly/t2gkrft http://pxml.ly/y4wq8w http://pxml.ly/26ajefj
  • 35. TH22 - Enhance SharePoint 2013 With Responsive Design Thank You Eric Overfield PixelMill – USA @ericoverfield