5. Screen Sizes & Flexible Layout
● Organize Content
● Set Viewport Size
<meta name="viewport" content="width=device-width, initial-scale=1,
maximum-scale=1, user-scalable=no" />
● Media Queries
@media only screen and (max-width : 320px) {
/* Styles for screen-widths equal to or less than 320px */
}
8. Icon Font
UPSIDE
● Cross browser support
● Full css styles advantages: size, color, text-shadow, etc.
DOWNSIDES
● only monochrome color
● time consuming to maintain *
* Font Custom
10. Scalable Vector Graphics (SVG)
UPSIDES
● Suitable for all screen sizes and resolutions
● Relatively small file size
● Works for animations
● It is XML Data – You can make (small) design adjustments directly from
your editor or via css / javascript.
● You can embed SVG using: object, embed, iframe, as background-
image, or directly inside html with a <svg> tag.
DOWNSIDES
● Needs fallback to png/jpg/gif for ancient browsers
● Performance: Resource intense (specially for animations / complex
images)
11. Responsive Media Embedding
container
100%
Images
max-width: 100%;
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and ( min--moz-device-pixel-ratio: 2),
...
{
/* Retina-specific stuff here -> Serve double-sized image and scale it 50% */
}
