Your SlideShare is downloading. ×
0
TH22 - Enhance SharePoint 2013
With Responsive Design
Eric Overfield
PixelMill – USA
@ericoverfield
About Me
Founder/SharePoint Branding/UI Lead, PixelMill
Speaker, Teacher, Advocate
Author, SharePoint Community Organizer
You will learn…
• What is Responsive Web Design and Why We Need It
• Fundamentals of Responsive Web Design
• Responsive De...
What is Responsive Web Design
Responsive Web Design
• A web design methodology
– Addresses growing number of Internet devices
• Tailored experience to a...
Why we need it
So many different devices
• Screen size (viewport, proportions, resolution)
• Functionality (clicks, hover, touch, swipe…)...
Responsive Web Design in Action
Demo
Fundamentals of RWD
The 3 pillars of RWD
Fluid Grid – Flexible Media – CSS3 Media Queries
A fluid grid
Flexible media
 Flexible Images
 Flexible Video
 Proportional Text
Media queries
In-Line Media Query:
<link rel="stylesheet" media="screen and (min-width: 768px)" href=“tablet.css" />
<link...
Beyond the Pillars
Progressive
Enhancement
Graceful
Degradation
Adaptive WebDesign
Responsive WebDesign DesktopFirstMobileFirst
Related terms
Mobile first
• Build and code mobile interface first
• Mobile friendly – progressively enhance
• Forces us to concentrate ...
Mobile First – An Introduction Demo
Demo
Navigation
• How will your navigation adapt to different viewports
• Responsive navigation may require thought
• Only basi...
Example RWD Navigation - Collapsing
Demo
Strategy for a RWD Site
Begin with site planning
• This should be familiar
– Start with content / site purpose
– Sitemap
– Information Architectur...
Always remember SharePoint
• What will be a part of the Master Page
• How you will you handle navigation?
• Current naviga...
Code a RWD Site
A HTML Prototype
Custom grid vs existing framework
• Pre-built responsive and fluid grids
• Saves time and resources
• Many include extras
...
Common frameworks
• Twitter Bootstrap
• Zurb Foundation
• Skeleton
• Less Framework
Framework pluses and minuses
• May take time to learn framework
• Not always SharePoint ready OOTB
• Can save you a bunch ...
A Responsive HTML Prototype
Demo
Joining RWD
And SharePoint
Convert key components to SharePoint
• Distill page into Master Page and Page Layout(s)
• Fix framework to work with Share...
Convert a responsive prototype to SharePoint
https://sprwd-public.sharepoint.com/
Demo
A quick review
• What is Responsive Web Design and Why We Need It
• Fundamentals of Responsive Web Design
• Responsive Des...
Responsive frameworks and SharePoint
• Responsive SharePoint at CodePlex
– Free, open source responsive SharePoint Framewo...
My practical tips to #SPRWD
• Use a prebuilt framework (SharePoint ready)
• Set project budget, deliverables and expectati...
Resources
"Responsive Web Design" by Ethan Marcotte
http://pxml.ly/23fkmjd
Responsive Frameworks for SharePoint 2010 and 2...
TH22 - Enhance SharePoint 2013
With Responsive Design
Thank You
Eric Overfield
PixelMill – USA
@ericoverfield
Upcoming SlideShare
Loading in...5
×

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

741

Published 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 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.

Published in: Internet, Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
741
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
14
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "ESPC 14 - TH22 - Enhance SharePoint 2013 with Responsive Web Design"

  1. 1. TH22 - Enhance SharePoint 2013 With Responsive Design Eric Overfield PixelMill – USA @ericoverfield
  2. 2. About Me Founder/SharePoint Branding/UI Lead, PixelMill Speaker, Teacher, Advocate Author, SharePoint Community Organizer
  3. 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. 4. What is Responsive Web Design
  5. 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. 6. Why we need it
  7. 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. 8. Responsive Web Design in Action Demo
  9. 9. Fundamentals of RWD
  10. 10. The 3 pillars of RWD Fluid Grid – Flexible Media – CSS3 Media Queries
  11. 11. A fluid grid
  12. 12. Flexible media  Flexible Images  Flexible Video  Proportional Text
  13. 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. 14. Beyond the Pillars
  15. 15. Progressive Enhancement Graceful Degradation Adaptive WebDesign Responsive WebDesign DesktopFirstMobileFirst Related terms
  16. 16. Mobile first • Build and code mobile interface first • Mobile friendly – progressively enhance • Forces us to concentrate on content • *Caveats for IE8
  17. 17. Mobile First – An Introduction Demo Demo
  18. 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. 19. Example RWD Navigation - Collapsing Demo
  20. 20. Strategy for a RWD Site
  21. 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. 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. 23. Code a RWD Site A HTML Prototype
  24. 24. Custom grid vs existing framework • Pre-built responsive and fluid grids • Saves time and resources • Many include extras • i.e. collapsing navigation
  25. 25. Common frameworks • Twitter Bootstrap • Zurb Foundation • Skeleton • Less Framework
  26. 26. Framework pluses and minuses • May take time to learn framework • Not always SharePoint ready OOTB • Can save you a bunch of time!
  27. 27. A Responsive HTML Prototype Demo
  28. 28. Joining RWD And SharePoint
  29. 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. 30. Convert a responsive prototype to SharePoint https://sprwd-public.sharepoint.com/ Demo
  31. 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. 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. 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. 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. 35. TH22 - Enhance SharePoint 2013 With Responsive Design Thank You Eric Overfield PixelMill – USA @ericoverfield
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×