×
  • Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
 

Optimizing your layout for phones and tablets using viewport and media queries

by Group Leader Developer Relations at Opera Software on Oct 13, 2011

  • 20,252 views

With mobile web browsing becoming widespread, users expect their favorite sites to "just work" on their mobile device of choice. Exciting times, especially as there are a number of new hooks in modern ...

With mobile web browsing becoming widespread, users expect their favorite sites to "just work" on their mobile device of choice. Exciting times, especially as there are a number of new hooks in modern mobile browsers that help web designers to create compelling experiences on phones and tablets.

In my talk, I cover the various features of the viewport meta tag, and look at how they allow you to control mobile browsers' zoom behaviors. I also connect this to Opera's CSS Device Adaptation proposal, which brings this feature to CSS in the form of the @viewport rule.

Furthermore, I explain how viewport can be combined with media queries to create super-flexible layouts that work nicely across different browsing contexts and devices, and explore various strategies to dealing with different screen sizes and pixel densities.

Viewport demos can be found on http://people.opera.com/andreasb/demos/parisweb2011/

Statistics

Views

Total Views
20,252
Views on SlideShare
19,002
Embed Views
1,250

Actions

Likes
55
Downloads
394
Comments
0

25 Embeds 1,250

http://www.conseilsmarketing.com 350
http://www.paris-web.fr 316
http://blog.johanbleuzen.fr 111
http://parisweb2011 88
http://lanyrd.com 76
http://us-w1.rockmelt.com 62
http://a0.twimg.com 61
http://www.scoop.it 59
http://feeds.feedburner.com 29
http://www.stonepower.fr 29
http://paper.li 14
http://soup.sindre.at 13
http://85.17.163.194 7
http://www.johan.me 6
https://twitter.com 6
http://oembed.wordpress.dev 6
http://blog.gaborit-d.com 5
http://www.paperblog.fr 3
http://moisesgarcia.es 2
http://www.johanbleuzen.fr 2
http://www.bonkm.com 1
http://zootool.com 1
http://localhost 1
http://www.lablogule.com 1
https://www.rebelmouse.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via SlideShare as Adobe PDF

Usage Rights

CC Attribution License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
Post Comment
Edit your comment

Optimizing your layout for phones and tablets using viewport and media queries Optimizing your layout for phones and tablets using viewport and media queries Presentation Transcript