Resolution Independence - Preparing Websites for Retina Displays

Independence
Preparing Websites for Retina Displays

Thursday, July 19, 12

Why are we here?

To discuss development techniques
as they relate to high-res displays


That Retina Display Looks Great!
So why does my website look terrible?


Why?
Packing more pixels in the same sized screens
In the past, 72dpi graphics were just scaled down
Retina displays scale up graphics anywhere from 224 to 326ppi
99% of all bitmap graphics on the web are 72dpi.*

* I made that up, but it’s probably close or true.


So what can we do about it?


Learn from Print
Print has always had to deal with high-resolutions and varying dpi.
When dealing with bitmap images, print works with high-res sources.
Other images and typography use Resolution-Independent sources.
Embedded fonts
Vector artwork
Program FX (i.e. layer effects)


So what are the issues?
Photography
Logos and Icons
Fonts
UI elements


Photography
High-res JPEGs
We’re not going to get away for bitmap graphics completely
Possible to use high-res ﬁles, but use with caution
Low res standard JPEGs of photography still look decent
New standards are being crafted right now
There are server-side and client-side options available


Logos and Icons
SVG Files
Scalable Vector Graphics are like Illustrator files for the web
They look crisp and are often smaller files
Creating these can be tricky
Some special effects in Illustrator won’t work in the SVG file format
Won’t work for everything, but great for logos


Fonts
Web Fonts
Using web fonts helps reduce development costs
Increases SEO and can lower overall bandwidth usage
There is no shame in using web safe fonts, but there are free solutions
if paid solutions are not available.
Also consider icon fonts (http://keyamoon.com/icomoon)
Advanced web typography doesn’t need graphical text
(http://letteringjs.com/)


UI Elements
CSS Effects
Effects are generated by the browser. Similar to using Photoshop
Layer Effects.
Effects are resolution independent.
Can have dramatic results on the speed of a website.


CSS Effects
CSS Drop Shadows
Text Shadows
Multiple Text Shadows
Box Shadows
Inset Box Shadows
Multiple Box Shadows
Only on boxes and text :(


CSS Effects
CSS Drop Shadows
1.Setting the distance via X/Y
2.Setting the size (it’s possible to
support spread as well)
3.Color can be set via hex code
4.or color and opacity can be
set via RGBA values


CSS Effects
Border Radius
Rounded Corners
You can make circles!
Control each corner


Perfect Resolution Independence
Shadows and rounded corners scale beautifully


CSS Effects
CSS Gradients
Can do linear or radial
Can do RGBA (transparency)
Can be layered for interesting effects
http://lea.verou.me/css3patterns/
Will be supported in IE10, but we can create fallbacks
Ultimate CSS Generator is great and works just like gradients in
Photoshop. http://www.colorzilla.com/gradient-editor/


Isn’t this more difﬁcult?
Using web fonts shouldn’t impact design at all.
Using SVG is a little more hassle, but worth the effort.
Using CSS effects can ease development and designers only need to
be aware of how we’re using them.
Designers may need to keep track of high-res assets for developers.
Use “place” in Photoshop for example.


What other beneﬁts are there?
Web fonts
Lower bandwidth due to few graphics
Easier to update
Necessary for dynamic text
SVG
Tiny ﬁles
CSS Effects
Lower bandwidth due to few graphics
Easier to update
Can change styles subtly without needing all new graphics
CSS animations!


This isn’t a mandate.
There are no laws being made here.


Be aware of what’s possible.
Let’s push the envelope!


Thank you for listening!
Any Questions?


Resolution Independence - Preparing Websites for Retina Displays

Recommandé

Recommandé

Contenu connexe

En vedette

En vedette (18)

Similaire à Resolution Independence - Preparing Websites for Retina Displays

Similaire à Resolution Independence - Preparing Websites for Retina Displays (20)

Dernier

Dernier (20)

Resolution Independence - Preparing Websites for Retina Displays