Loading presentation...

Present Remotely

Send the link below via email or IM


Present to your audience

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


Responsive Web Design

No description

Gloriana Zamora

on 22 June 2012

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of Responsive Web Design

Responsive Web Design "One web to rule them all" but... Making the web site respond to their environment... ...with flexible grids. It doesn't means... having a different web site for every device Frameworks On your own (easy way) (more control) Serving a single html to countless browsers and devices.. why? code devices sharing Design Tips Fluid Grid 1 that means.. Think Proportionally Decide what text on the page should remain constant,
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
Flexible images
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
Javascript-based solutions
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%
Full transcript