Responsive Design for SharePoint
•Descargar como PPTX, PDF•
3 recomendaciones•9,158 vistas
Creating designs that will respond and work with multiple browser and device types has become more and more important. In this session we will examine the concepts behind Responsive Design and how you can and should apply them to SharePoint.
Recomendados
Recomendados
Más contenido relacionado
La actualidad más candente
La actualidad más candente (20)
Destacado
Destacado (18)
Similar a Responsive Design for SharePoint
Similar a Responsive Design for SharePoint (20)
Último
Último (20)
Responsive Design for SharePoint
- 1. Planning for SharePoint Branding SPS ATL - 2013 Cathy Dew
- 2. Speaker Bio Cathy Dew Senior Engineer at Planet Technologies Graphic Designer, Consultant and SharePoint MVP Over 6 years of SharePoint branding experience Author: SharePoint 2010: Six in One catpaint1 on Twitter
- 3. Agenda Intro to responsive design When, where and if you should create a responsive design. Responsive design discussions Responsive and SharePoint 2013 Two ways to create responsive designs
- 4. What is it? Design and Development should respond to the user’s behavior and environment based on screen size, platform and orientation Consists of a Mix of Flexible Grids and Layouts Flexible Images and Media CSS and Media Queries
- 8. Common Grid Systems 960 Grid System Twitter Bootstrap Grid System Generator Flexible CSS Grid Many more… “The grid system is an aid, not a guarantee. It permits a number of possible uses…” -Josef MullerBrockman
- 9. Grid systems explained… Do I really have to use a grid system? These are meant to be a starting point something to help you in creating a flexible site. It’s helpful – but not necessary Make your own, it all depends on your project and what your client needs are.
- 10. Making it Flexible Taking your design beyond Flexible Grids allows you to make a responsive site with images that resize and layouts based on media
- 12. Flexible Images and Media img { max-width: 100%; } Can apply to video and other rich media Has limitations
- 13. Max-width Limitations IE 6 and below isn’t supported Broader issues with Windows IE 7 and lower Firefox 2 and lower Windows 7 and Higher Fixed
- 14. Flexible Images & Backgrounds Create larger than needed image and use a scale % to size it Overflow:Hidden Create Multiple Image Sizes and use them accordingly *
- 15. Media Queries Despite our work with flexible grid layout and flexible images our site might have issues when displayed small or widescreen Media Types defined by W3C
- 16. all Media Types Suitable for all devices. braille Intended for braille tactile feedback devices. embossed Intended for paged braille printers. handheld print Intended for handheld devices (typically small screen, limited bandwidth). Intended for paged material and for documents viewed on screen in print preview mode. Plea projection Intended for projected presentations, for example projectors. Please consult the section on pag screen Intended primarily for color computer screens. speech tty tv Intended for speech synthesizers. Note: CSS2 had a similar media type called 'aural' for this purp Intended for media using a fixed-pitch character grid (such as teletypes, terminals, or portable Intended for television-type devices (low resolution, color, limited-scrollability screens, sound ava
- 17. Media Query @media Asks screen and (min-width: 1024px) 2 questions of the browser Media type (screen) Query – in parenthesis feature and value
- 18. How to Apply Put these directly in a stylesheet with a declaration - <link rel=“stylesheet” href=“sample.css” media=“screen and minwidth: 1024px” /> Or attach to an import - @import url(sample.css) screen and (min-width: 1024px);
- 19. Why Responsive Design? We have to break away from how we traditionally think about web design/development and start thinking with the new medium in mind.
- 22. Maryland.gov
- 23. LGOntario.ca
- 25. CFAInstitute.org
- 26. When to Create Responsive? What are the device/browser needs? What type of Site is it?
- 27. Questions you may be asking… Where do I start to make a Responsive Design? What is this really going to give the Client/me? How much do I need to know to create a Responsive SharePoint site?
- 28. SharePoint Challenges What are the challenges we face? Design Manager creates an HTML master – separation of HTML and .master files Typically Lots of Devices Type of Sites Extra User Experience and Branding effort and costs Not good for intranets
- 29. Tools for Responsive SharePoint Image Renditions Device Channels
- 30. Image Renditions Optimize Images for different resolutions Define multiple sizes of image files to be used in your SharePoint sites Must have Blob Cache enabled in web.config Add Screenshots and Steps - Sample
- 33. Device Channels Device Channels Pros and Cons A DC can use a particular MP Specified for Different Browsers
- 34. Device Channels Device Channels Pros and Cons More Development for creation and Management of Multiple Master Pages Confusing Performance??
- 35. Responsive Design and SharePoint Working with Responsive Design and SharePoint 2013, create, work with and utilize.
- 36. Browsers that Support RWD https://developer.m ozilla.org/enUS/docs/Tools/Resp onsive_Design_View
- 37. Browsers that Support RWD http://blog.divshot.com/post/29829585371/chro me-developer-tools-responsive-design
- 38. Great tools for checking your designs! MattKersley.com/responsive/ Quirktools.com/screenfly/ Screenqueri.es/ Responsinator.com/
- 41. Helpful Links http://msdn.microsoft. com/enus/library/jj733517.aspx http://blogs.technet.c om/b/tothesharepoint /archive/2013/02/07/sh arepoint-andmobile.aspx http://blog.mastykarz.nl/responsiv e-image-renditions-sharepoint2013/ http://msdn.microsoft.com/enus/library/jj733518.aspx http://msdn.microsoft.com/enus/library/jj163242.aspx http://msdn.microsoft.com/enus/library/jj862343.aspx
- 42. Other links for reading http://blog.cloudfour.com/css-media-query-for- mobile-is-fools-gold/ http://alistapart.com/article/responsive-web-design http://timkadlec.com/2012/10/blame-theimplementation-not-the-technique/ http://www.html5rocks.com/en/mobile/responsived esign/ http://coding.smashingmagazine.com/2013/03/11/r esponsible-web-design/
- 44. Session Prizes 1 2 4 $25 gift cards 5 4 $25 gift cards 4 @SPS_ATL 4 $25 gift cards 3 4 $25 gift cards 4 $25 gift cards #SPSATL speaker sponsor
- 45. Talk About Yourself! Fill out surveys for big prizes SCAN QR CODES
- 46. Join us for SharePint 47 |SharePoint Saturday Atlanta
- 47. SharePint Directions 48 |SharePoint Saturday Atlanta
Notas del editor
- http://sender11.typepad.com/sender11/2008/04/mobile-screen-s.html
- Responsive web design (RWD) is a web design approach aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones).[1][2][3]Mashable called 2013 the Year of Responsive Web Design.[4]http://en.wikipedia.org/wiki/Responsive_web_design----------------------------He united these techniques under a single banner – (from Responsive Web Design book)
- If you think about it you may have been working or designing responsively for a while now, just not to this extent. You were always developing and designing to make sure your site worked well in several different browser widths.Why use grids? Because we need flexibility to render our site in different screen sizes.
- http://960.gs/ http://twitter.github.com/bootstraphttp://www.gridsystemgenerator.com/http://semantic.gs/http://www.blankwork.net/http://modulargrid.org/#app
- Let’s talk some grid lingo. A grid is the division of a layout with vertical and/or horizontal guidelines to incorporate margins, spaces and columns in order to provide a framework for organizing content -http://sixrevisions.com/web_design/a-brief-look-at-grid-based-layouts-in-web-design/
- Max-width is used to render img elements of different sizes based on the directive percentageCan apply to video and other rich media as well
- With ie 6 not a huge concern as ie 6 isn’t supported by sp 2013Ie7 and lower can be an issue as can firefoxCan use the AlphaImageLoader command in ie7 or below windows 7 to create flexible imagesAlphaImageLoader (sizingMethod=“scale”)Or javascript you can find onlineThis can have performance impacts on your site thoughWarning needed on that
- Methods for creating fully scaleable background images are many, the most popular are listed above, plus SharePoint has a special version called Image Renditions
- Despite all our hard work, media types can cause issuesW3C defined a listing of media types
- Media queries are fairly simple to understand… it asks 2 questions, what media type and what query In the example above we are looking for a min width of the screen resolution at 1024pxCan be placed in a stylesheet or
- Not just for width and height, can also find device width, device height, orientation, aspect-ration, color, grid and many othersOrientation used to be used for iPads
- Responsive web design (RWD) is a web design approach aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones).[1][2][3]Mashable called 2013 the Year of Responsive Web Design.[4] - http://en.wikipedia.org/wiki/Responsive_web_design----------------------------Check out the article “The Dao of Web Design (http://bkapart.com/rwd/3/) – cool quote from John Allsopp “the control which designers know in the print medium, and often desire in the web medium, is simply a function of the limitation of the printed….”We have been doing this for some time but not realizing it and it hasn’t be more apparent until now. We started designing sites for a 800 width, then moved to 940 from there we moved up to 1024 and now 1280. When designing for these different browser widths we were (or at least should have been) making sure the design rendered nicely in smaller resolutions. Once the iPhone was introduced true mobile browsing or even designing for the mobile experience was something that was never thought about. Once the millions of iPhone users started browsing the web on their tiny form factors then it became apparent that web design would move into a whole new direction. It didn’t happen over night, it has taken us several years to get to the point where now everybody want some type of responsive design. Mashable called 2013 the Year of Responsive Web Design.
- Search is prominent on each layer of responsive design. Once you are at a smaller screen size it is hard to read the text on the image. Once you are on the mobile view it is hard to read the text on the image, this could have been removed to give better access to the information below. The State Agencies and the Online Services provide more of a mobile feel vs the home page.
- The site responsiveness is quirky, there is not a good mid range breakpoint in this design, you either have full or smaller screen. This also didn’t translate to the mobile view.
- Nice use of responsive, however there is a HORZ scroll bar when the screen size is smaller. For the mobile version like how the search bar is shown once you click on explore. I think the image could have been removed for the mobile view, there are a number of elements that could have been shown within the same space giving faster access to those items for the mobile view.
- Items to note on the differences in responsive – Once the screen is smaller then the search is completely off the screen. Trying to scroll down on the mobile app is hard, you cannot use the main center area on the mobile view to scroll down. It would have been better to remove this from the view all together, or just left the grey box and not have the moving lines.
- Client Budget –Labor instensive
- How do I know where to start with responsive design? Again this may comeback to your client’s needs.Really what is this going to get me? How much do I need to know to create a responsive SharePoint site?
- Using the Design ManagerSharePoint corporate implementations use lots of devices and browsersThe type of site might not be conducive
- You can create your own custom sizes for the image renditions under Look and Feel in Site settings
- To modify the actual images you must navigate to the image library – in this case the site collection images and update the image renditions here. This allows you to see the image rendtions as they are defined and cropped. Notice the custom image rendition in the list.
- Get screen shots of using the firefox add inhttp://en.wikipedia.org/wiki/Responsive_web_design
- Find new images!!! Get new screen shotsDid you know the Chrome console allows you to quickly resize the browser viewport to any resolution without the use of extensions? You can also emulate touch events and override the user agent similar to Safari’s developer mode. While it doesn’t beat the iOS and Android emulators it can be super useful!GIVE both MAC And PC shortcuts!Open up the Chrome console (⌘+SHIFT+C or CTRL+SHIFT+C).Click the gear icon in the bottom-right corner.Click the “User agent” tab.
- http://www.hongkiat.com/blog/rwd-tools/ 50 useful RWD tools for designershttp://www.onextrapixel.com/2013/02/20/55-great-and-useful-tools-for-responsive-web-design/
- http://www.metaltoad.com/blog/simple-device-diagram-responsive-design-planninghttp://www.lukew.com/ff/entry.asp?1514 - shows diff layout patternshttp://support.balsamiq.com/customer/portal/articles/615901https://acme.mybalsamiq.com/projects/responsivewireframes-jnolte/01-home-NG
- deliver the same content with different HTML.It’s all very well to hide, say, an advanced mapping application on mobile, but if you use only media queries the browser will still download the scripts associated with the application.Even though images might be hidden from mobile browsers, or low-source ones should be used, the browser still downloads the full-source variants. http://www.quirksmode.org/blog/archives/2010/08/combining_media.html#morehttp://www.scientiamobile.com/blog/post/view/id/24/title/BDConf-and-Exposing-WURFL-Capabilities-to-JavaScriptEvery tool has advantages and disadvantagesYour RWD is only as good as your content and the authors on the site.https://speakerdeck.com/smashingmag/responsive-web-design-clever-tips-and-techniques
- Grand Prize winner selectedfrom session winners