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.
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
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?
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, …
26.
27. Responsive Typography
Choose the rightfont size for
content & context
Fluid content size
RESPONSIVE TYPOGRAPHY:
THE BASICS
RESPONSIVE TYPOGRAPHY IN
ACTION
Units: em, rem, %
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
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