4. m.yoursite.com
* Possible code fork for your mobile
website
* Easy to fail with device detection
* Bad for link sharing / bookmarking
5. What you really want to do:
* Show your content in a way that
matches your user’s device
* Check for the features not model
number or vendor
* Use CSS media queries
10. Stylesheet
.content { ... }
.sidebar { ... }
/* Large desktop */
@media (min-width: 1200px) { ... }
/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px)
{ ... }
/* Landscape phone to portrait tablet */
@media (max-width: 767px) { ... }
/* Landscape phones and down */
@media (max-width: 480px) { ... }
source: twitter.github.com/bootstrap
11. Media Query
* Set custom CSS based on conditions
—display ratios, widths, type
* Usually focuses around min-width
and max-width.
* Other features you can ask for: print,
handheld, orientation, aspect-ratio,
monochrome, resolution
12. Media query use cases
* Fit the most important piece of
information on screen
* Hide content that’s not so important
* content
Always show mouseover-only
* Make the logo SMALLER?!
13. Media query use cases
* Scrolling is okay! Place elements
elements below each other
* Avoid horizontal scrolling
* links
Increase the size for buttons and