Your SlideShare is downloading. ×
0
Your SharePoint Branding                          ExpertsReshaping SharePoint forEvolving Internet Devices            Eric...
Introduction – Eric Overfield• Founder and SharePoint Branding Lead, PixelMill• Working with SharePoint since 2004• Web De...
PixelMill• Developing SharePoint solutions since 2004• SharePoint Branding and UI Specialists• Developer of Cost effective...
Agenda• Difference between Devices• Why We Care• Possible Solutions with SharePoint• What about SharePoint 2013?
What is the Difference Between Devices? "There’s a plethora of devices out there with widely differing abilities – it’s ne...
Why Do We Care?• Mobile Devices are Invading    • If not now then in a few years.• How old is your Intranet?• Build toward...
So What Do We Do?
Available Options• Device Specific Interfaces   • SharePoint 2010 has Mobile Detection   • SharePoint 2013?• One design to...
The Mobile Interface• SharePoint 2010 has a mobile interface    • Allows access to documents, lists, calendars, search, SM...
Code Once Use Everywhere•Two primary methods   • Progressive Enhancement   • Responsive Web Design
Progressive Enhancement• #1 trend for 2012 - .net Magazine• Coined by Steven Champeon in 2003• Content first, then add sty...
SharePoint and Progressive Enhancement• SharePoint was not built with PE in mind• JavaScript and SharePoint• Too much pres...
Responsive Web Design• #2 trend for 2012 - .net Magazine• Coined by Ethan Marcotte in May 2010• Use fluid grids to adapt t...
Responsive Design    Examples
www.its.ms.gov
www.its.ms.gov
www.ariensco.com
www.ariensco.com
www.gse.it
www.gse.it
SharePoint and Responsive Design• Uses CSS3 (media queries) and possibly HTML5.• SharePoint already has a mobile view   • ...
SharePoint and Responsive Design• Additional overhead• Does require CSS3• Bandwidth Concerns• Are mobile users and desktop...
What to do?• PE vs RWD vs Separate Mobile• One site is difficult enough to maintain• SharePoint limits our options• Respon...
Device Channels Anyone?• New to SharePoint 2013• Interfaces tailored and maps to specific device(s)• Custom Master Pages p...
Devices Channels, the Good and Bad• Tailored interfaces• Only works with Publishing Sites• Maintain multiple Master Pages ...
The Best of Both Worlds?• Responsive Design and Device Channels• Built a Responsive site for all devices• Use DeviceChanne...
Summary• Build towards the future, not the past• Mobile devices will penetrate the corporate firewall• SharePoint 2010 – R...
Resources• "Responsive Web Design" by Ethan Marcottes         http://bit.ly/bcKwQS• Ethan Marcottes’ 20 Favorite Responsiv...
Your SharePoint Branding                         Experts      Thank You        Eric Overfield        @EricOverfieldblog.pi...
Upcoming SlideShare
Loading in...5
×

Reshaping SharePoint for Evolving Internet Devices

468

Published on

Reshaping SharePoint for mobile devices including tablets and smartphones. First presented at the Puget Sound SharePoint User Group, September 2012.

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

  • Be the first to like this

No Downloads
Views
Total Views
468
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
12
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Mississippi Department of IT
  • Midwest and European brand that manufactures outdoor power equipment
  • European renewalable energy company
  • Transcript of "Reshaping SharePoint for Evolving Internet Devices"

    1. 1. Your SharePoint Branding ExpertsReshaping SharePoint forEvolving Internet Devices Eric Overfield SharePoint Branding and UI Lead PixelMill
    2. 2. Introduction – Eric Overfield• Founder and SharePoint Branding Lead, PixelMill• Working with SharePoint since 2004• Web Designer since 1998• Located in Davis, CA blog.pixelmill.com/ericoverfield @EricOverfield linkedin.com/in/ericoverfield
    3. 3. PixelMill• Developing SharePoint solutions since 2004• SharePoint Branding and UI Specialists• Developer of Cost effective SharePoint Templates• Your SharePoint Branding Experts
    4. 4. Agenda• Difference between Devices• Why We Care• Possible Solutions with SharePoint• What about SharePoint 2013?
    5. 5. What is the Difference Between Devices? "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 Zeldman • Screen Size • Functionality • Usability
    6. 6. Why Do We Care?• Mobile Devices are Invading • If not now then in a few years.• How old is your Intranet?• Build towards the future, not the past
    7. 7. So What Do We Do?
    8. 8. Available Options• Device Specific Interfaces • SharePoint 2010 has Mobile Detection • SharePoint 2013?• One design to rule them all, one design to bind them • Responsive Web Design anyone?
    9. 9. The Mobile Interface• SharePoint 2010 has a mobile interface • Allows access to documents, lists, calendars, search, SMS alerts• Controlled by USERAGENT • App_Browserscompat.browser• Custom Web Parts, _layouts likely won’t work• Difficult to customize
    10. 10. Code Once Use Everywhere•Two primary methods • Progressive Enhancement • Responsive Web Design
    11. 11. Progressive Enhancement• #1 trend for 2012 - .net Magazine• Coined by Steven Champeon in 2003• Content first, then add styling• Separate Content from Presentation
    12. 12. SharePoint and Progressive Enhancement• SharePoint was not built with PE in mind• JavaScript and SharePoint• Too much presentation baked into html• i.e. Tables, Inline styles
    13. 13. Responsive Web Design• #2 trend for 2012 - .net Magazine• Coined by Ethan Marcotte in May 2010• Use fluid grids to adapt to viewing environment• Uses CSS3 and JavaScript• All devices load same page, use CSS3 to adapt
    14. 14. Responsive Design Examples
    15. 15. www.its.ms.gov
    16. 16. www.its.ms.gov
    17. 17. www.ariensco.com
    18. 18. www.ariensco.com
    19. 19. www.gse.it
    20. 20. www.gse.it
    21. 21. SharePoint and Responsive Design• Uses CSS3 (media queries) and possibly HTML5.• SharePoint already has a mobile view • Configure with compat.browser• Generally only one Master Page for all devices.• Wide lists and Site Settings pages are not mobile friendly• Primary issues are with RWD itself!
    22. 22. SharePoint and Responsive Design• Additional overhead• Does require CSS3• Bandwidth Concerns• Are mobile users and desktop users the same? • Separate mobile vs Responsive? It’s political?
    23. 23. What to do?• PE vs RWD vs Separate Mobile• One site is difficult enough to maintain• SharePoint limits our options• Responsive Web Design is worth considering • Define Project • Limit overhead • Find a CSS guru will be key
    24. 24. Device Channels Anyone?• New to SharePoint 2013• Interfaces tailored and maps to specific device(s)• Custom Master Pages per Channel• Custom DeviceChannelPanels
    25. 25. Devices Channels, the Good and Bad• Tailored interfaces• Only works with Publishing Sites• Maintain multiple Master Pages and/or sites• New devices? Maintain that list too?
    26. 26. The Best of Both Worlds?• Responsive Design and Device Channels• Built a Responsive site for all devices• Use DeviceChannelPanels• Create a Device Channel for special cases• But we have to wait
    27. 27. Summary• Build towards the future, not the past• Mobile devices will penetrate the corporate firewall• SharePoint 2010 – Response Design• SharePoint 2013 – Responsive Design w/ Device Channels
    28. 28. Resources• "Responsive Web Design" by Ethan Marcottes http://bit.ly/bcKwQS• Ethan Marcottes’ 20 Favorite Responsive Designs http://bit.ly/ngkI8D• v5, the Responsive HTML5 Master Page for SharePoint 2010 by Kyle Schaeffer http://bit.ly/n8VQZw• SharePoint 2010 Responsive Web design Template by Luis Kerr http://bit.ly/NKPjwX• Configure SharePoint Server 2010 for Mobile Device Access http://bit.ly/cg6fYo
    29. 29. Your SharePoint Branding Experts Thank You Eric Overfield @EricOverfieldblog.pixelmill.com/ericoverfield eoverfield@pixelmill.com
    1. A particular slide catching your eye?

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

    ×