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 pros and cons of applying a responsive design on SharePoint. We will then dive into the code and learn how to create a SharePoint site that is both responsive and attractive. We will finish with a look at SharePoint 2013 and Device Channels, and review how Responsive Web Design can play a role in current and future SharePoint Branding projects.
Session Take-aways:
Building off what was learned in the previous session, Branding SharePoint for Evolving Internet Devices, this session is geared towards web developers, programmers and IT to learn "how" to code for modern Internet devices. Attendees will have been exposed to not only what Responsive Web Design is and how it functions, but also how to apply it directly to SharePoint. As with all techniques, there are pros and cons to Responsive Web Design, not only in general but also how it is applied to, and utilized by SharePoint. After a thorough review and multiple demos attendees will have seen the code and learned what to expect. Finally attendees will learn how SharePoint 2013 handles mobile computing and how Responsive Web Design can help solve SharePoint 2013's mobile computing shortcomings.
Highlights:
Find out what the hot web design topic Response Web Design is all about.
See how to utilize Response Web Design in your SharePoint project.
Learn how to leverage this knowledge in SharePoint 2013 as well.
1. Enhancing SharePoint
With Responsive Web Design
Eric Overfield
SharePoint Branding and UI Lead
PixelMill
SharePoint Saturday Friday Honolulu #SPSHNL – December 7th, 2012
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. What You Will Learn
What is Responsive Web Design (RWD)?
Why Should We Use It
Joining RWD and SharePoint
What about SharePoint 2013?
6. 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
8. What about Progressive Enhancement?
“Mobile First” and Progressive Enhancement
Unobtrusive JavaScript
9. 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
10. 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!
14. And Tomorrow?
Televisions?
Cameras? Who Knows?
Watches? Printers?
Game Devices? Toasters?
15. "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
24. 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 and Site Settings pages are not mobile friendly
Primary issues are with RWD itself!
25. SharePoint and Responsive Design
Additional overhead
Does require CSS3
Bandwidth Concerns
Are mobile users and desktop users the same?
User site requirements
31. Step 2: Install a Template
Download a Framework or 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
Responsive Frameworks for SharePoint 2010/2013
http://responsivesharepoint.codeplex.com
40. Device Channels Anyone?
New to SharePoint 2013
Interfaces tailored and mapped to specific device(s)
Custom Master Pages per Channel
Custom DeviceChannelPanels
41. 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
42. The Best of Both Worlds
Responsive Design and Device Channels
Build a Responsive site for all devices
Use DeviceChannelPanels
Create a Device Channel for special cases
But when will you upgrade?
43. Summary
Build towards the future, not the past
Start with an existing Responsive SharePoint Template
Watch out for wide lists and pages
SharePoint 2010 – Responsive Design
SharePoint 2013 – Responsive Design w/ Device Channels
44. 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
Responsive Frameworks for SharePoint
http://responsivesharepoint.codeplex.com
45. Resources
FireBug and Responsive Design View (Ctrl-Shift-M) in Firefox
Configure SharePoint Server 2010 for Mobile Device Access
http://bit.ly/cg6fYo
46. Enhancing SharePoint
With Responsive Web Design
Thank You
Eric Overfield
@EricOverfield
blog.pixelmill.com/ericoverfield
eoverfield@pixelmill.com
Notas do Editor
Recording sessionSlides will be available from blog and twitterIndepth 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
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 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
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.
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
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/
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
Let’s look at what we have OOTB as well as with just minor modifications.Stay away from total code re-write
SPD (some limits), Visual Studio, Firebug, Browser issues
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.
SPD (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?
SPD (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.
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