Logi Analytics Confidential & Proprietary
What We Are Going to Learn Today
• Fundamentals of Responsive Design
• Design Challenges & Opportunities
• Responsive Approach
3
Logi Analytics Confidential & Proprietary
FUNDAMENTALS OF RESPONSIVE DESIGNStart Thinking in the Responsive Age
Logi Analytics Confidential & ProprietaryLogi Analytics Confidential & Proprietary6
“Fluid grids, flexible images, and media queries are the three technical ingredients for responsive web design, but it also requires a different way of
thinking.”
Ethan Marcotte
Logi Analytics Confidential & Proprietary
A Different Way of Thinking
7
1) Works on everything
2) Clean design
3) Design from content out
4) Design is how it works
5) Less graphic files
6) Keep learning
Logi Analytics Confidential & Proprietary
Think Static FLUID
8
EM unit is equal to the inherited computed font-size for the element.
REM: to the computed value of font-size on the root element.html { font-size: 14px; } .example { height: 2rem; }
.example { font-size: 14px; height: 2em; }
Logi Analytics Confidential & Proprietary
Dealing with the Past
14
+ html5 shiv + ie.css
“It’s not often that we encourage you to stop using our products, but for #IE6, we’ll make an exception.
https://developer.microsoft.com/en-us/microsoft-edge/ie6countdown/
JavaScript Library that detects HTML5 and CSS3
Logi Analytics Confidential & Proprietary
Mobile First
20
Why?
• Number of Mobile users is growing.
• Mobile finally passed desktopusage
Why is it great?
• It’s in the data
• Quicker implementation
• Numbers are growing
• Content first
• Focus on what is most important
Why it sucks?
• More canvas = More freedom
• Making the transition
Logi Analytics Confidential & Proprietary
Prioritize Content for Each View
22
0. Always Hidden
1. Above the fold
2. Just below or bottom of the fold
3. Below the fold
4. Bottom of page
5. Hidden in view
Logi Analytics Confidential & Proprietary
Yesterday’s Design Workflow
23
Sketch
WireframeMockup
Prototype
Logi Analytics Confidential & ProprietaryLogi Analytics Confidential & Proprietary
New Design Workflow
24
Logi Analytics Confidential & Proprietary
Advice
25
• Know the trends
• Design for touch
• Make interactions clear
• Do not forget about navigation
• Cut down on content
Logi Analytics Confidential & Proprietary
Thank You
Source can be downloaded at: https://content.logianalytics.com/logi_public/681fca