Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Responsive Web Design and SharePoint

1,080 views

Published on

Session on Responsive Web Design

Published in: Software
  • Be the first to comment

Responsive Web Design and SharePoint

  1. 1. Responsive WebDesign
  2. 2. MOBILE TABLET DESKTOP
  3. 3. It is NOT about DEVICES
  4. 4. It is about CONTENT & CONTEXT
  5. 5. Ethan Marcotte Responsive Web Design – A list apart May 25, 2010
  6. 6. FLUID GRID FLEXIBLE MEDIA MEDIA QUERIES
  7. 7. Origin of GRID SYSTEMS Print Design Graphic Design Swiss Design
  8. 8. Divides the availablespace vertical GRID COLUMNS horizontal GRID ROWS space between GUTTER
  9. 9. Grid systems in web design FIXED Column width in px - pixels Example: • 960.gs • Optimizedfor 1024px FLUID Column width in % vw - View Width vh - View Height em, rem Example: • 13 of the best responsive grid system • countless
  10. 10. 4 3 6 212COLUMNS
  11. 11. Benefit of Grid Systems Clarity / Order Grids bring order to a layout makingit easier for visitors to find and navigate through information. Efficiency Grids allow designers to quickly add elements to a layout because many layout decisions are addressed while building the grid structure. Economy Grids make it easier for other designers to work and collaborate on the design as they provide a plan for where to place elements. Consistency / Harmony Grids lead to consistency in the layout of pages across a single site or even several sites creating a structural harmony in the design. Source: Whygrid?
  12. 12. FLEXIBLE MEDIA IMAGES VIDEOS TYPOGRAPHY
  13. 13. Responsive Media - Images
  14. 14. Technical – Responsive Image - Basics • Mobile device: slow loading image • Desktop: Bad image quality on desktop
  15. 15. <picture> - Better Responsive Images
  16. 16. Responsive Media - Images
  17. 17. Responsive Media – Images - optimised
  18. 18. Responsive Media – Images -SVG Scalable Vector Graphics XML based definition of a vector graphics Native drawing in browser Scales without getting blurry Replacement for: GIF, Icon Fonts
  19. 19. Example – Office 365 Logo Rectangle Circle Ellipses Polygon Polyline Path Text Stroke
  20. 20. How to use SVG in HTML • Directly embed in HTML • Use it as background in CSS • <img> tag • <object> embedding • Data embed Base64 data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL... UTF-8, not encoded data:image/svg+xml;charset=UTF-8,<svg ...> ... </svg> UTF-8, optimized encoding for compatibility data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://...’ Fully URL encodedASCII data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%...
  21. 21. Icon Fonts vs SVG Symbol Set Web font WOFF, TTF, EOT, SVG Font Every letter is a glyph <g> USE: content(‘ ’) CONS: Accessibility problems Hard to debug in code Seren Davies: Death to icon fonts SVG Symbol Set SVG Every icon is a <symbol id=“Office365Icon”> USE: url(’icons.svg#Office365Icon'); PRO: Treated as an image more on symbol
  22. 22. Responsive Video – Html 5 <object>, <embed> Still exists in HTML 5 but not recommended
  23. 23. Responsive Video – Html 5 Based on IFRAMES http://embedresponsively.com YouTube, Vimeo, …
  24. 24. Responsive Typography Choose the rightfont size for content & context Fluid content size RESPONSIVE TYPOGRAPHY: THE BASICS RESPONSIVE TYPOGRAPHY IN ACTION Units: em, rem, %
  25. 25. Media Queries
  26. 26. Media Queries •Exists since 2002 • "print”, "screen", "aural", "braille", "handheld", "projection", "tty", "tv” •CSS 3 • width, height • device-width, device-height • orientation • aspect-ratio,device-aspect-ratio • color, color-index, monochrome • resolution,scan, grid
  27. 27. How it works – Print
  28. 28. How it works – Screen
  29. 29. Responsive Frameworks Simple Frameworks • The 1140 CSS Grid • cssgrid.net • Golden Grid System • Mueller Grid System • Responsive Grid System • Titan • Responsive Grid System • Less Framework 4 • Gridiculo.us • Columnal • Ingrid • 960.gs • Base Complete Frameworks • Bootstrap • Foundation • Skeleton • YAML • Tuktuk • Gumby • Kube • Groundwork • ResponsiveAeon • Office UI Frabric
  30. 30. FRAMEWORKS ARE GREAT BUT …
  31. 31. Framework potential pitfalls • One-size-fits-all • Lookalike issues • Potential for bloat/unneeded stuff (approx. 5% needed for SP) • Might not do everything you need • Compatibility with existing sites • Subscribe to someone else’s structure, naming, style • Technological changes / Structural changes • Learn the framework but not CSS • Lack of accesibilty
  32. 32. SharePoint
  33. 33. SharePoint - Bootstrap
  34. 34. SharePoint – Bootstrap – Branding
  35. 35. Avoid pitfalls with Frameworks I need a burger menu and a grid system? Trim framework to your needs Architect your CSS and Branding Developer your own reusable components

×