Send the link below via email or IMCopy
Present to your audienceStart remote presentation
- Invited audience members will follow you as you navigate and present
- People invited to a presentation do not need a Prezi account
- This link expires 10 minutes after you close the presentation
- A maximum of 30 users can follow your presentation
- Learn more about this feature in our knowledge base article
Do you really want to delete this prezi?
Neither you, nor the coeditors you shared it with will be able to recover it again.
Make your likes visible on Facebook?
You can change this under Settings & Account at any time.
Responsive Web Design
Transcript of Responsive Web Design
and what text should be adjusted. 2 No textured borders No gradient bgs Still stubborn? Use "easily tiled" images X Y Wrong way.. Good way.. x should always be n times as big as y x should always be npx bigger than y modules that can be re-organized, re-sized, and shuffled 3 Make it Modular Implementation Tips Flexible Grid Flexible Images Patterns Media Queries Make it your own.. Main Ingredients Flexible Grid
Media Queries target / context = result Typesetting Set body font-size to 100%
Use em instead of px Layout What about margins and paddings? What about the images that need to live in the bg? Flexible tiled bg images
Using background-size CSS property
Media queries to apply different bg images optimize the display correct imperfections How to use them? They have two components: media type
and the feature - value. How to identify the breakpoints? Twitter Bootstrap Foundation Less Framework Fluid Grid Column drop Layout Shifter Adaptive Off Canvas Thanks! References: a book apart - responsive web design by Jeremy Keith
designing for a responsive web by Max Luzuriaga
multi-device layout patterns by Luke Wroblewski Example psd target / context = result 900px blog: 95%