1) The document discusses responsive web design, which involves making websites flexible and adaptable to different devices through flexible grids, images, and media queries.
2) Key aspects of responsive design include thinking of user needs rather than our own, adapting to various device capabilities, and future-proofing sites.
3) Media queries allow scoping styles to specific device capabilities like width, height, and orientation. Common patterns like fluid, column drop, and layout shifter are described.
UI:UX Design and Empowerment Strategies for Underprivileged Transgender Indiv...
Design
1. Responsive Web Design
JavaScript Open Day
get the best of your designs
2015-06-25
Frédéric Harper
@fharper | outofcomfortzone.net
CreativeCommons:https://flic.kr/p/5azfgH
9. Responsive Web Design
ü Thinking of the user’s needs instead of ours.
ü Adapt to various device capabilities instead of configurations.
ü Help future-proof our sites.
13. what’s the problem?
§ Non-responsive sites are no fun.
§ Fixed-width sites are not the best experiences.
§ Not thinking about new web platforms.
23. not so long ago…
§ We could define media types: screen and print.
§ But not easily respond to the user’s display.
§ Lots of grunt work.
§ Didn’t spend much time thinking about mobile devices.
24. CSS Media Queries
The CSS3 Media Queries Module specifies methods to enable web
developers to scope a style sheet to a set of precise device
capabilities.
25. media queries at work
@media screen and (max-width: 600px) {
body {
font-size: 80%;
}
}
26. let’s get funky
@media screen and (min-width:320px) and
(max-width:480px) { /* add your code here */ }
@media not print and (max-width:600px) {
/* add your code here */ }
@media screen (x) and (y), print (a) and (b) {
/* add your code here */ }
27. want more?
@import url(mq.css) only screen
and (max-width:600px)
<link rel=“stylesheet”
media=“only screen and (max-width:800px)”
href=“mq.css”>
44. in the end
§ Is it best that all sites are responsive?
§ Do we start with mobile-first?
§ Do we go Adaptive Web Design instead?
§ Do we need or want to do visual comps for every device?
§ Don’t dismiss mobile as walking and looking something up.