This document discusses responsive web design. It begins by stating that responsive design is about content and context, not devices. It then covers fluid grids and flexible layouts using media queries. Grid systems help bring order and structure to layouts. Images, videos, typography and other elements need flexible solutions to respond to different screen sizes. Frameworks provide tools for responsive design but have some potential pitfalls, so tailoring them to specific needs is important.

1. Responsive
WebDesign

2. MOBILE TABLET DESKTOP

4. It is NOT
about DEVICES

5. It is about
CONTENT & CONTEXT

7. Ethan Marcotte
Responsive Web Design – A list apart
May 25, 2010

8. FLUID
GRID
FLEXIBLE
MEDIA
MEDIA
QUERIES

9. Origin of
GRID
SYSTEMS
Print Design
Graphic Design
Swiss Design

10. Divides the
availablespace
vertical
GRID COLUMNS
horizontal
GRID ROWS
space between
GUTTER

11. 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

12. 4 3
6
212COLUMNS

13. 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?

14. FLEXIBLE
MEDIA
IMAGES
VIDEOS
TYPOGRAPHY

15. Responsive Media - Images

16. Technical – Responsive Image - Basics
• Mobile device: slow loading image
• Desktop: Bad image quality on desktop

17. <picture> - Better Responsive Images

18. Responsive Media - Images

19. Responsive Media – Images - optimised

20. 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

21. Example – Office 365 Logo
Rectangle
Circle
Ellipses
Polygon
Polyline
Path
Text
Stroke

22. 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%...

23. 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

24. Responsive Video – Html 5
<object>, <embed>
Still exists in HTML 5 but not recommended

25. Responsive Video – Html 5
Based on IFRAMES
http://embedresponsively.com
YouTube, Vimeo, …

27. Responsive Typography
Choose the rightfont size for
content & context
Fluid content size
RESPONSIVE TYPOGRAPHY:
THE BASICS
RESPONSIVE TYPOGRAPHY IN
ACTION
Units: em, rem, %

28. Media Queries

29. 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

30. How it works – Print

31. How it works – Screen

32. 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

33. FRAMEWORKS
ARE GREAT
BUT …

34. 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

35. SharePoint

36. SharePoint - Bootstrap

37. SharePoint – Bootstrap – Branding

38. 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