Driving Behavioral Change for Information Management through Data-Driven Gree...
Enhancing SharePoint with Responsive Web Design
1. Your SharePoint Branding
Experts
Enhancing SharePoint with
Responsive Web Design
Eric Overfield
SharePoint Branding and UI Lead
PixelMill
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. PixelMill
• Developing SharePoint solutions since 2004
• SharePoint Branding and UI Specialists
• Developer of Cost effective SharePoint Templates
• Your SharePoint Branding Experts
4. Agenda
• What is Responsive Web Design (RWD)?
• Why Should We Use It
• Joining RWD and SharePoint
• What about SharePoint 2013?
5. 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 (Media Queries) and JavaScript
• All devices load same page, use CSS3 to adapt
6. What About Progressive Enhancement
• “Mobile First” and Progressive Enhancement
• Unobtrusive JavaScript
7. Progressive Enhancement
• #1 trend for 2012 - .net Magazine
• Coined by Steven Champeon in 2003
• Content first, then add styling
• Separate Content from Presentation
8. 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
16. Why We Use Responsive Web Design
"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
17. Why 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
18. 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!
19. 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?
24. Step 2: Install a template
• Download a Template
• v5, 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
30. Device Channels Anyone?
• New to SharePoint 2013
• Interfaces tailored and maps to specific device(s)
• Custom Master Pages per Channel
• Custom DeviceChannelPanels
31. 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?
32. 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
33. 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
34. 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
35. Resources
• FireBug and Responsive Design View (Ctrl-Shift-M) in Firefox
• 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
36. Your SharePoint Branding
Experts
Thank You
Eric Overfield
@EricOverfield
blog.pixelmill.com/ericoverfield
eoverfield@pixelmill.com
Notes de l'éditeur
Recording session Slides will be available from blog and twitter Indepth 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 demos
Recording session and will make available on blog and twitter, so if you remember one of those then you can always review everything we discuss tonight
In joining together we will use readily available solution so as not to reinvent the wheel. This will give us a chance to review how the code works.
fluid proportion-based grids (which use percentages pixels) to adapt the layout to the viewing environment All 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. As a result, users across a broad range of devices and browsers will have access to a single source of content, laid out so as to be easy to read and navigate with a minimum of resizing, panning, and scrolling.
fluid proportion-based grids (which use percentages pixels) to adapt the layout to the viewing environment All 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. As a result, users across a broad range of devices and browsers will have access to a single source of content, laid out so as to be easy to read and navigate with a minimum of resizing, panning, and scrolling.
Html is very clean and simple Using 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.
Mississippi Department of IT
Midwest and European brand that manufactures outdoor power equipment
European renewalable energy company
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 expereince for each device? Modern devices share basic ability with css, js though which his a plus
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.
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 friendly Require 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/
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 that Design and code an interface that can scale itself to different devices
Let’s look at what we have OOTB as well as with just minor modifications. Stay away from total code re-write
Complex enough that it is far better to start with a template. You can still move a lot around, but we want to a lot of the plumbing started for us. V5 handles the ribbon a little better but does not include layouts. Although any OOTB page layout should work.
After downloading a template, move all components to the correct location, check in and publish.
After downloading a template, move all components to the correct location, check in and publish.
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?
I propose that sites be built using RWD principles If you organization will have primarily one mobile device, say an ipad or iphone, then look to create a device channel just for that device. this way you have a site that will respond to almost all devices but a tailored experience towards your primary devices.
In 2010 I suggest RWD as it is the most compatible with SP allows for the targeting of most devices, Needs one Master page In 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.
Html5shiv
Html5shiv
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