The Design Dilemma of  Mobile and SharePoint                     PWR 103               Eric Overfield    SharePoint Advoca...
Introduction – Eric Overfield                    Founder and SharePoint Branding/UI Lead, PixelMill                    S...
What You Will Learn        How Accessing the Web has Changed        Differences Between Devices        Possible Solutio...
The Web has Changed?             @EricOverfield - pixelmill.com
Not The Web              @EricOverfield - pixelmill.com
Today’s Web              @EricOverfield - pixelmill.com
And Tomorrow?            Televisions? Cameras?    Who Knows?  Watches?                 Printers?Game Devices?             ...
"There’s a plethora of devicesout there with widely differingabilities – it’s never been moreconfusing or challenging tocr...
How All Devices Differ  Screen Size  Functionality  Usability                         @EricOverfield - pixelmill.com
How All Devices Differ  Screen Size  Functionality  Usability                         @EricOverfield - pixelmill.com
Screen Size     Height – Width – Resolution – Layout                               @EricOverfield - pixelmill.com
How All Devices Differ  Screen Size  Functionality  Usability                         @EricOverfield - pixelmill.com
Clicks    Mouse-overs       Touch    SwipePlugin SupportNot all devices are created equal.                                ...
How All Devices Differ  Screen Size  Functionality  Usability                         @EricOverfield - pixelmill.com
Load Time  Content Placement     Screen Utilization Navigation    Searchability                    @EricOverfield - pixelm...
Embrace the UnforeseeableBuild Towards the Future, not the Past                          @EricOverfield - pixelmill.com
What We Can Do          @EricOverfield - pixelmill.com
Available Options  Device Specific Interfaces     SharePoint 2010 - Mobile Detection     SharePoint 2013 – Device Chann...
The Mobile Interface  SharePoint 2010 has a mobile interface      Allows access to documents, lists, calendars, search, ...
Code Once, Use Everywhere   Progressive Enhancement   Responsive Web Design                            @EricOverfield - pi...
Progressive Enhancement  #1 trend for 2012 - .net Magazine  Mobile First Strategy  Coined by Steven Champeon in 2003  ...
SharePoint and Progressive Enhancement  SharePoint was not built with PE in mind  JavaScript and SharePoint  Too much p...
Responsive Web Design              @EricOverfield - pixelmill.com
Responsive Web Design  #2 trend for 2012 - .net Magazine  Coined by Ethan Marcotte in May 2010  Use fluid grids and fle...
Fluid Grid – Flexible Media – CSS3 Media Queries                                 @EricOverfield - pixelmill.com
Responsive In Action              @EricOverfield - pixelmill.com
www.its.ms.gov                 @EricOverfield - pixelmill.com
@EricOverfield - pixelmill.com
www.ariensco.com                   @EricOverfield - pixelmill.com
www.ariensco.com                   @EricOverfield - pixelmill.com
www.gse.it             @EricOverfield - pixelmill.com
www.gse.it             @EricOverfield - pixelmill.com
SharePoint and Responsive Design  Uses CSS3 (media queries) and maybe HTML5.  SharePoint already has a mobile view     ...
SharePoint and Responsive Design  Additional overhead  Does require CSS3 (SharePoint 2010 not CSS3 Ready)  Bandwidth Co...
What to Do         @EricOverfield - pixelmill.com
 PE (AWD?) vs RWD vs Separate Mobile One site is difficult enough to maintain SharePoint limits our options Responsive...
And SharePoint 2013?              @EricOverfield - pixelmill.com
Device Channels Anyone?  New to SharePoint 2013  Interfaces tailored and maps to specific device(s)  Custom Master Page...
 Device Channels – The Good      Tailored interfaces! Device Channels – The Bad      Only works with Publishing Sites ...
The Best of Both WorldsResponsive Design and Device ChannelsBuild a Responsive site for all devicesUse DeviceChannelPanels...
Summary  Build towards the future, not the past  Mobile devices will penetrate the corporate firewall  SharePoint 2010 ...
Resources "Responsive Web Design" by Ethan Marcottes             http://pxml.ly/23fkmjd Ethan Marcottes’ 20 Favorite Respo...
The Design Dilemma of  Mobile and SharePoint              PWR 103       Thank You            Eric Overfield           @Eri...
Upcoming SlideShare
Loading in...5
×

The Design Dilemma of Mobile and SharePoint

702

Published on

Session PWR 103 from SharePoint Fest Denver 2013.

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
702
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
25
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Slides will be available from blog and twitterOverview talk of SharePoint and new devices Light on tech and howto Don’t worry tech folks, many resources at end.
  • Will make available on blog and twitter (slideshare.net), so if you remember one of those then you can always review everything we discuss
  • mobile is invading, for the good, all organizations. if not now then in the next few years.Iphone is estimated to provide 1/3% of gdp.
  • What, you think your next web initiative is only going to last a few years? How long did you last intranet or public facing site last?Built towards to future, not the past, you MUST consider tablets and smart phones at the least
  • MrZeldman founded A List Apart, best practices and innovations in web design.sure, you can zoom in on many smart phones or tablets, but what if you can make tailored experience for each device?Modern devices share basic ability with css, js though which his a plus
  • Let’s look at what we have OOTB as well as with just minor modifications.Stay away from total code re-write
  • Build particular interfaces for specific devices SP 2010 has mobile detection, but it's not good, and difficult to brand What about 2013? We will get to thatDesign and code an interface that can scale itself to different devices
  • Based only on specific user agentsMobile pages do not use master pages, you can modify redirection create mobile control template based on site definition create a mobile adapter for web partLeaving a lot out because too basic
  • Html is very clean and simpleUsing javascript to determine functionality and add on features as allowed.Yahoo, amazon, etc
  • A true PE site should work without JS, SP will not do that.Tables and inline styles breaks the idea of separating content and presentation.
  • fluid proportion-based grids (which use percentages pixels) to adapt the layout to the viewing environmentAll clients effectively load the entire page but using css, hides or replaces elements to tailor the experience to the screen.DOES NOT USE USERAGENT, browser detection, rather works of screen width.Early adopter AIDS.gov
  • Mississippi Department of IT
  • Midwest Tool Manufacture
  • European Alternative Energy Company
  • Uses css3 media queries and js, which is ok with SP.Turn mobile view off in compat.browser found in web applications directory. Look it up.Issues are on next slide.
  • Also a lot of overhead, but SP already has a lot of that as well.Not IE7 and IE8 friendlyRequire CSS3? There is a js ability with jQuery’s help.Does a mobile user need the same information as a desktop user?Adding information vs consuming information. Less real estate and is the navigation necessarily the same?http://mobile.smashingmagazine.com/2012/08/22/separate-mobile-responsive-website-presidential-smackdown/
  • Coding techniques to get around some overhead combine files, minimize scripts use wrapper divs that keep large images off mobile browsers
  • Responsive Design is not for the faint of heartSPD (some limits), Visual Studio, Firebug, Browser issues
  • Device Channels work only with Publishing Sites Allow for one interface for all desktops and another for most tablets let's say.Only 10 device channels per site collection, but do you really want to maintain 10 MP’s?
  • In 2010 I suggest RWD as it is the most compatible with SP allows for the targeting of most devices, Needs one Master pageIn 2013 still use RWD, but you can think about DC for particular devices if the need arises One primary interface that will work with most devices have the ability to allow a target for a few particular devices easier to manage 2-3 branding efforts rather than many if you attempted to tailor your site to all devices.
  • Thank You!Don’t forget to check out my blog where you can download this presentation or the recording.Easiest way to get to the material I referenced
  • Transcript of "The Design Dilemma of Mobile and SharePoint"

    1. 1. The Design Dilemma of Mobile and SharePoint PWR 103 Eric Overfield SharePoint Advocate and Enthusiast PixelMill SharePoint Fest Denver – March 18th - 20th 2013
    2. 2. Introduction – Eric Overfield  Founder and SharePoint Branding/UI Lead, PixelMill  Speaker, Teacher, Advocate  Author, SharePoint Community Organizer  Located in Davis, CA Co-author: “Pro SharePoint 2013 Branding and Responsive Web Development” (Apress – May 2013) ericoverfield.com Order Your Copy @EricOverfield http://pxml.ly/226mwkj
    3. 3. What You Will Learn  How Accessing the Web has Changed  Differences Between Devices  Possible Solutions with SharePoint  What about SharePoint 2013? @EricOverfield - pixelmill.com
    4. 4. The Web has Changed? @EricOverfield - pixelmill.com
    5. 5. Not The Web @EricOverfield - pixelmill.com
    6. 6. Today’s Web @EricOverfield - pixelmill.com
    7. 7. And Tomorrow? Televisions? Cameras? Who Knows? Watches? Printers?Game Devices? Toasters? @EricOverfield - pixelmill.com
    8. 8. "There’s a plethora of devicesout there with widely differingabilities – it’s never been moreconfusing or challenging tocreate brilliant interfaces thatwork across them all.” ~ JefferyZeldman @EricOverfield - pixelmill.com
    9. 9. How All Devices Differ Screen Size Functionality Usability @EricOverfield - pixelmill.com
    10. 10. How All Devices Differ Screen Size Functionality Usability @EricOverfield - pixelmill.com
    11. 11. Screen Size Height – Width – Resolution – Layout @EricOverfield - pixelmill.com
    12. 12. How All Devices Differ Screen Size Functionality Usability @EricOverfield - pixelmill.com
    13. 13. Clicks Mouse-overs Touch SwipePlugin SupportNot all devices are created equal. @EricOverfield - pixelmill.com
    14. 14. How All Devices Differ Screen Size Functionality Usability @EricOverfield - pixelmill.com
    15. 15. Load Time Content Placement Screen Utilization Navigation Searchability @EricOverfield - pixelmill.com
    16. 16. Embrace the UnforeseeableBuild Towards the Future, not the Past @EricOverfield - pixelmill.com
    17. 17. What We Can Do @EricOverfield - pixelmill.com
    18. 18. Available Options  Device Specific Interfaces  SharePoint 2010 - Mobile Detection  SharePoint 2013 – Device Channels  One design to rule them all, one design to bind them  Responsive Web Design Anyone? @EricOverfield - pixelmill.com
    19. 19. 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 @EricOverfield - pixelmill.com
    20. 20. Code Once, Use Everywhere Progressive Enhancement Responsive Web Design @EricOverfield - pixelmill.com
    21. 21. Progressive Enhancement  #1 trend for 2012 - .net Magazine  Mobile First Strategy  Coined by Steven Champeon in 2003  Content first, then add styling  Separate Content from Presentation @EricOverfield - pixelmill.com
    22. 22. 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  But Mobile first is useful! @EricOverfield - pixelmill.com
    23. 23. Responsive Web Design @EricOverfield - pixelmill.com
    24. 24. Responsive Web Design  #2 trend for 2012 - .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 adapt @EricOverfield - pixelmill.com
    25. 25. Fluid Grid – Flexible Media – CSS3 Media Queries @EricOverfield - pixelmill.com
    26. 26. Responsive In Action @EricOverfield - pixelmill.com
    27. 27. www.its.ms.gov @EricOverfield - pixelmill.com
    28. 28. @EricOverfield - pixelmill.com
    29. 29. www.ariensco.com @EricOverfield - pixelmill.com
    30. 30. www.ariensco.com @EricOverfield - pixelmill.com
    31. 31. www.gse.it @EricOverfield - pixelmill.com
    32. 32. www.gse.it @EricOverfield - pixelmill.com
    33. 33. SharePoint and Responsive Design  Uses CSS3 (media queries) and maybe HTML5.  SharePoint already has a mobile view  Configure with compat.browser  Generally only one Master Page for all devices.  Wide lists, OOTB Layouts, Site Settings not mobile friendly  Flexible Media (Images) May Break Ribbon  Issues with RWD itself! @EricOverfield - pixelmill.com
    34. 34. SharePoint and Responsive Design  Additional overhead  Does require CSS3 (SharePoint 2010 not CSS3 Ready)  Bandwidth Concerns  Are mobile users and desktop users the same?  User site requirements @EricOverfield - pixelmill.com
    35. 35. What to Do @EricOverfield - pixelmill.com
    36. 36.  PE (AWD?) 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 HTML/CSS/JS/Media overhead  Find a CSS guru will be key  Use a Framework @EricOverfield - pixelmill.com
    37. 37. And SharePoint 2013? @EricOverfield - pixelmill.com
    38. 38. Device Channels Anyone?  New to SharePoint 2013  Interfaces tailored and maps to specific device(s)  Custom Master Pages per Channel  Custom DeviceChannelPanels @EricOverfield - pixelmill.com
    39. 39.  Device Channels – The Good  Tailored interfaces! Device Channels – The Bad  Only works with Publishing Sites  Maintain multiple Master Pages and/or sites  New devices? Maintain that list too? It’s a mixed bag @EricOverfield - pixelmill.com
    40. 40. The Best of Both WorldsResponsive Design and Device ChannelsBuild a Responsive site for all devicesUse DeviceChannelPanelsCreate a Device Channel for special casesBut when will you upgrade? @EricOverfield - pixelmill.com
    41. 41. Summary  Build towards the future, not the past  Mobile devices will penetrate the corporate firewall  SharePoint 2010 – Responsive Design  SharePoint 2013 – Responsive Design w/ Device Channels @EricOverfield - pixelmill.com
    42. 42. Resources "Responsive Web Design" by Ethan Marcottes http://pxml.ly/23fkmjd Ethan Marcottes’ 20 Favorite Responsive Designs http://pxml.ly/yqiyor v5, the Responsive HTML5 Master Page for SharePoint 2010 by Kyle Schaeffer http://pxml.ly/i3dbxre SharePoint 2010 Responsive Web design Template by Luis Kerr http://pxml.ly/xvr2ny Responsive Frameworks for SharePoint 2010 and 2013 http://responsivesharepoint.codeplex.com Configure SharePoint Server 2010 for Mobile Device Access http://pxml.ly/vh3hhca html5shiv http://pxml.ly/uzcz32 Modernizr http://modernizr.com css3-mediaqueries-js http://pxml.ly/zcw2jb2 @EricOverfield - pixelmill.com
    43. 43. The Design Dilemma of Mobile and SharePoint PWR 103 Thank You Eric Overfield @EricOverfield ericoverfield.com 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.

    ×