Your SlideShare is downloading. ×
0
Enhance SharePointWith Responsive Web Design                      DEV 201                Eric Overfield     SharePoint Adv...
Introduction – Eric Overfield                    Founder and SharePoint Branding/UI Lead, PixelMill                    S...
What You Will Learn       What is Responsive Web Design (RWD)       Why Should We Use It       The Responsive Process  ...
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
@EricOverfield - pixelmill.com
@EricOverfield - pixelmill.com
Why Do We NeedResponsive Design?            @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
The Responsive   Process          @EricOverfield - pixelmill.com
Our Responsive Goals  Single site (i.e. no separate mobile)  Serve a variety of Viewports  Future Friendly             ...
Responsive Drawbacks  Desktop vs. Mobile content  Content order  Maybe SharePoint can help?                            ...
Start with Content             @EricOverfield - pixelmill.com
Design   to theExtremes                  @EricOverfield - pixelmill.com
@EricOverfield - pixelmill.com
Navigation  Responsive Navigation the most difficult decision  SharePoint Navigation is not Responsive friendly  ShareP...
Responsive Navigation  Floating  Drop down  Collapse  Off Canvas  Others?                        @EricOverfield - pixelmil...
Floating Navigation                      @EricOverfield - pixelmill.com
Responsive Navigation  Floating  Drop down  Collapse  Off Canvas  Others?                        @EricOverfield - pixelmil...
Dropdown Navigation                  @EricOverfield - pixelmill.com
Responsive Navigation  Floating  Drop down  Collapsing  Off Canvas  Others?                        @EricOverfield - pixelm...
Collapsing Navigation                    @EricOverfield - pixelmill.com
Responsive Navigation  Floating  Drop down  Collapsing  Off Canvas  Others?                        @EricOverfield - pixelm...
Off Canvas Navigation                    @EricOverfield - pixelmill.com
Responsive Navigation  Floating  Drop down  Collapsing  Off Canvas  Others?                        @EricOverfield - pixelm...
Hide and Cry   Overlay      Footer Navigation   Global NavigationjQuery or no jQueryNo two projects are the same          ...
Time to Code it Up            @EricOverfield - pixelmill.com
Frameworks  Pre-Built Responsive and Fluid Grids  Saves time and resources  Many include extras  i.e. Collapsing navig...
Framework Drawbacks  May take time to learn framework  Not always SharePoint friendly                              @Eric...
Twitter Bootstrap   Zurb Foundation      Skeleton  Less Framework     and so many more                     @EricOverfield ...
Mobile First  Build Mobile interface first  Forces us to concentrate on content  Helps control some resources  Mobile ...
Mobile First In Action                         @EricOverfield - pixelmill.com
Build to the Design  not the Device             @EricOverfield - pixelmill.com
Become Device Independent  Base breakpoints based on design  Allows for any device  Use a background image to help  Te...
And SharePoint 2013?              @EricOverfield - pixelmill.com
Device Channels  New to SharePoint 2013  Interfaces tailored and maps to specific device(s)  Custom Master Pages per Ch...
Demos        @EricOverfield - pixelmill.com
There is no silver bulletBuild towards progress     Perfection does not yet exist                            @EricOverfiel...
Resources "Responsive Web Design" by Ethan Marcotte             http://pxml.ly/23fkmjd Ethan Marcotte’s 20 Favorite Respon...
Resources Twitter Bootstrap           http://pxml.ly/d3qbekq Zurb Foundation           http://pxml.ly/wcxkqv Skeleton Fram...
Enhance SharePointWith Responsive Web Design              DEV 201       Thank You            Eric Overfield           @Eri...
Upcoming SlideShare
Loading in...5
×

Enhance SharePoint with Responsive Web Design

2,594

Published on

Session Dev 201 from SharePoint Fest Denver 2013.

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

No Downloads
Views
Total Views
2,594
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
60
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide
  • Slides will be available from blog and twitterIn-depth look at SharePoint and we can apply RWD to SharePoint.Devs should be happy, we will walk through the process. Business users, you will see what is possible.Meat will be in the demosWho has already worked with RWD and SP? Thoughts? Scratch, framework, how did you do it?
  • Will make available on blog and twitter (slideshare.net), so if you remember one of those then you can always review everything we discuss
  • 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
  • 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
  • Mr. Zeldman 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
  • Mississippi Department of IT
  • Test download using FiddlerTest design on important devices just to make sure
  • 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?
  • HTML MockupInclude bootstrapView resultConvert to gridInclude fluidNavigation types
  • 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 "Enhance SharePoint with Responsive Web Design"

    1. 1. Enhance SharePointWith Responsive Web Design DEV 201 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  What is Responsive Web Design (RWD)  Why Should We Use It  The Responsive Process  Join Response Web Design and SharePoint  SharePoint 2013 Considerations @EricOverfield - pixelmill.com
    4. 4. 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
    5. 5. Fluid Grid – Flexible Media – CSS3 Media Queries @EricOverfield - pixelmill.com
    6. 6. @EricOverfield - pixelmill.com
    7. 7. @EricOverfield - pixelmill.com
    8. 8. Why Do We NeedResponsive Design? @EricOverfield - pixelmill.com
    9. 9. Not The Web @EricOverfield - pixelmill.com
    10. 10. Today’s Web @EricOverfield - pixelmill.com
    11. 11. And Tomorrow? Televisions? Cameras? Who Knows? Watches? Printers?Game Devices? Toasters? @EricOverfield - pixelmill.com
    12. 12. "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
    13. 13. How All Devices Differ Screen Size Functionality Usability @EricOverfield - pixelmill.com
    14. 14. The Responsive Process @EricOverfield - pixelmill.com
    15. 15. Our Responsive Goals  Single site (i.e. no separate mobile)  Serve a variety of Viewports  Future Friendly @EricOverfield - pixelmill.com
    16. 16. Responsive Drawbacks  Desktop vs. Mobile content  Content order  Maybe SharePoint can help? @EricOverfield - pixelmill.com
    17. 17. Start with Content @EricOverfield - pixelmill.com
    18. 18. Design to theExtremes @EricOverfield - pixelmill.com
    19. 19. @EricOverfield - pixelmill.com
    20. 20. Navigation  Responsive Navigation the most difficult decision  SharePoint Navigation is not Responsive friendly  SharePoint relies on hover event  Static Navigation vs. SharePoint Navigation @EricOverfield - pixelmill.com
    21. 21. Responsive Navigation Floating Drop down Collapse Off Canvas Others? @EricOverfield - pixelmill.com
    22. 22. Floating Navigation @EricOverfield - pixelmill.com
    23. 23. Responsive Navigation Floating Drop down Collapse Off Canvas Others? @EricOverfield - pixelmill.com
    24. 24. Dropdown Navigation @EricOverfield - pixelmill.com
    25. 25. Responsive Navigation Floating Drop down Collapsing Off Canvas Others? @EricOverfield - pixelmill.com
    26. 26. Collapsing Navigation @EricOverfield - pixelmill.com
    27. 27. Responsive Navigation Floating Drop down Collapsing Off Canvas Others? @EricOverfield - pixelmill.com
    28. 28. Off Canvas Navigation @EricOverfield - pixelmill.com
    29. 29. Responsive Navigation Floating Drop down Collapsing Off Canvas Others? @EricOverfield - pixelmill.com
    30. 30. Hide and Cry Overlay Footer Navigation Global NavigationjQuery or no jQueryNo two projects are the same @EricOverfield - pixelmill.com
    31. 31. Time to Code it Up @EricOverfield - pixelmill.com
    32. 32. Frameworks  Pre-Built Responsive and Fluid Grids  Saves time and resources  Many include extras  i.e. Collapsing navigation @EricOverfield - pixelmill.com
    33. 33. Framework Drawbacks  May take time to learn framework  Not always SharePoint friendly @EricOverfield - pixelmill.com
    34. 34. Twitter Bootstrap Zurb Foundation Skeleton Less Framework and so many more @EricOverfield - pixelmill.com
    35. 35. Mobile First  Build Mobile interface first  Forces us to concentrate on content  Helps control some resources  Mobile Interface not great for entering content  Considerations needed for page editing  Cross-site publishing in SharePoint 2013? @EricOverfield - pixelmill.com
    36. 36. Mobile First In Action @EricOverfield - pixelmill.com
    37. 37. Build to the Design not the Device @EricOverfield - pixelmill.com
    38. 38. Become Device Independent  Base breakpoints based on design  Allows for any device  Use a background image to help  Temporary background image with columns  Start with 300 pixel block  Then 50 to 100 pixel columns through 1200 pixels total @EricOverfield - pixelmill.com
    39. 39. And SharePoint 2013? @EricOverfield - pixelmill.com
    40. 40. 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 content! @EricOverfield - pixelmill.com
    41. 41. Demos @EricOverfield - pixelmill.com
    42. 42. There is no silver bulletBuild towards progress Perfection does not yet exist @EricOverfield - pixelmill.com
    43. 43. Resources "Responsive Web Design" by Ethan Marcotte http://pxml.ly/23fkmjd Ethan Marcotte’s 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
    44. 44. Resources Twitter Bootstrap http://pxml.ly/d3qbekq Zurb Foundation http://pxml.ly/wcxkqv Skeleton Framework http://pxml.ly/t2gkrft Less Framework http://pxml.ly/y4wq8w Implementing Off Canvas Navigation http://pxml.ly/26ajefj 50 Useful Responsive Web Design Tools For Designers http://pxml.ly/hifruno @EricOverfield - pixelmill.com
    45. 45. Enhance SharePointWith Responsive Web Design DEV 201 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.

    ×