SharePoint and Responsive Design for All Devices
•
1 gefällt mir•797 views
How does your SharePoint site handle the growing number of devices that are or will be soon accessing your site? Traditional branding for SharePoint has its shortcomings with modern devices. In this session we will review available options to enhance SharePoint and create a unified experience across modern internet devices with an in-depth review of current trends and how to utilize them in your current or upcoming SharePoint project. We will finish by considering how this might be impacted by SharePoint 2013. Session Take-aways: As an introduction session to modern Internet devices and how they affect the presentation of a SharePoint 2010 site, each attendee should leave the session with a solid understanding of how different devices and viewports treat SharePoint including the good and the bad. Further they will have been exposed to multiple techniques and methods in which SharePoint can be modified to enhance SharePoint for modern Internet devices including tablets and smartphones with a look at the benefits and shortcomings of each method. After a review of SharePoint 2013's addition of devices channels, attendees will also learn how to leverage this new understanding of Internet devices with device channels for a truly usable, maintainable SharePoint branding initiative moving forward. Highlights: Learn the shortcomings of SharePoint's interface with modern Internet devices. See modern techniques Branding experts use to solve the mobile problems. Find out how to leverage this knowledge in SharePoint 2010 and SharePoint 2013.
Empfohlen
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Ähnlich wie SharePoint and Responsive Design for All Devices
Ähnlich wie SharePoint and Responsive Design for All Devices (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
SharePoint and Responsive Design for All Devices
- 1. Beyond Branding SharePoint SharePoint and Today’s Web 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 How Accessing the Web has Changed Difference between Devices Possible Solutions with SharePoint What about SharePoint 2013?
- 5. The Web has Changed?
- 6. Not The Web
- 7. Today’s Web
- 8. And Tomorrow? Televisions? Cameras? Who Knows? Watches? Printers? Game Devices? Toasters?
- 9. "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
- 10. How All Devices Differ Screen Size Functionality Usability
- 11. How All Devices Differ Screen Size Functionality Usability
- 12. Screen Size Height – Width – Resolution – Layout
- 13. How All Devices Differ Screen Size Functionality Usability
- 14. Clicks Mouse-overs Touch Swipe Plugin Support Not all devices are created equal.
- 15. How All Devices Differ Screen Size Functionality Usability
- 16. Load Time Content Placement Screen Utilization Navigation Searchability
- 17. Embrace the Unforeseeable Build Towards the Future, not the Past
- 18. What We Can Do
- 19. 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?
- 20. 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
- 21. Code Once, Use Everywhere Progressive Enhancement Responsive Web Design
- 22. 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
- 23. 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!
- 25. 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
- 26. Fluid Grid – Flexible Media – CSS3 Media Queries
- 28. www.its.ms.gov
- 29. www.its.ms.gov
- 30. www.ariensco.com
- 31. www.ariensco.com
- 32. www.gse.it
- 33. www.gse.it
- 34. 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!
- 35. SharePoint and Responsive Design Additional overhead Does require CSS3 Bandwidth Concerns Are mobile users and desktop users the same? User site requirements
- 36. What to Do
- 37. 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 Responsive Design is not for the faint of heart
- 39. Device Channels Anyone? New to SharePoint 2013 Interfaces tailored and mapped to specific device(s) Custom Master Pages per Channel Custom DeviceChannelPanels
- 40. 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
- 41. 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?
- 42. 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
- 43. 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 Configure SharePoint Server 2010 for Mobile Device Access http://bit.ly/cg6fYo
- 44. Beyond Branding SharePoint SharePoint and Today’s Web Thank You Eric Overfield @EricOverfield blog.pixelmill.com/ericoverfield eoverfield@pixelmill.com
Hinweis der Redaktion
- Recording sessionSlides 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.
- 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
- 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 I don’t like it, 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
- 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