Designing for the Unknown

Challenges of Web DesignAs frustrating as it may be – there is no guarantee that people will see/experience your web pages exactly the same way you designed them.

WHY?Unknown variables out of our control…

Designing for the Unknown

bradfrostweb.com

Designing for the Unknown•Unknown Browsers•Unknown Computer Platforms•Unknown User Preferences•Unknown Monitor Size/Resolution•Unknown Colors•Unknown Fonts•Unknown Connection Speed

“old browsers never die…”

Hundreds of browsers in use today

All browsers (and their various versions)

have their own slight variation on how

they interpret and display standard HTML

tags.

Browsers use their internal rendering

systems to read and render the page.

Rendering engines: Trident, Presto, Gecko, Web Kit

The Big Guys…

Microsoft Internet Explorer

Firefox

Chrome

Others?

Safari, Lynx, Opera

Browser Statistics http://www.w3schools.com/browsers/browsers_stats.asp

Users can control preferences such as

colors,

fonts,

sizes

Graphics/no graphics

A document viewed on the same browser

version can look very different as a result of

the user’s preferences / settings.

Operating Systems

Windows (Win 8, Win 7, Vista, Win2003, Win XP, W2000)

Mac

Linux

Mobile

Each operating system has its own characteristics

and quirks that affect how your pages will be

displayed.

Platform Statistics http://www.w3schools.com/browsers/browsers_os.asp

Variations in # of colors & brightness of colors Bit Depth: # of colors on a monitor

32bit & 24bt = millions of colors 16bit = thousands of colors (65,000 colors, true

color) 8bit = 256 colors (web palette)

Color shifts & Dithering When an image containing thousands of colors is

viewed on an 8 bit monitor – colors shift to nearest palette color

Gamma ValueOverall brightness of a monitor’s displayMac 1.8, PC 2.2, Unix 2.5 gamma settingHigher the gamma – darker the display Image appear brighter on a MacGamma simulators available

Limited control over the fonts used to display

your content

A specified font will only display if it is already

installed on the end user’s machine.

Font size variations between platforms (fonts

appear larger on windows platform)

Your web “page” size is determined by the

size of the browser window.

Common Monitor Resolutions

640X480 | 800X600 | 1024X768

1280X1024 | 1680X1050 | 1920X1080, others

Resolution Statistics http://www.w3schools.com/browsers/browsers_display.asp

http://en.wikipedia.org/wiki/List_of_common_resolutions

Fixed | Flexible | Responsive Design Flexible Design: allowing your web pages to be fluid &

reflow to the size of the browser window disadvantage- long text line length

Fixed Design: uses fixed –width values or absolute positioning - prevents content from shifting and reflowing Disadvantage- some areas of page may be outside browser

window causing missed content or horizontal scrolling

Examples ( Flexible / Fixed )

Responsive Design http://foodsense.is/ | http://www.wm.edu/ |

https://pittsburghkids.org/ Provides custom layouts to devices based on size of the viewport

Everything a user sees on screen must first be sent over a network connection and downloaded locally High speed connections (cable, T1, DSL) view data at approx. 500k per second Dial-up (14.4-56k modems) view data at approx. 1k per second)

Other factors Speed of server | Speed of computer | Amount of traffic on server

HOW TO IMPROVE PERFORMANCE Optimize images Minimize HTML & CSS docs Keep JavaScript to a minimum – don’t load unnecessary assets (js

libraries)

Reduce # of HTTP requests

• Know your design options• Fixed | Flexible | Responsive Design• Lowest common denominator – using only the

technologies that will work on all browsers• Current version of most popular browser – all the bells

and whistles• Multiple versions of the same site | Find a balance

• Know your Audience• What can you assume about them? | What do you know for

fact?Controlled environment? (gov., college, family)

You as the designer must PLAN AHEAD!

•Be aware of the limitations & make appropriate design decisions• Limit dimensions, Reuse (cached images), use

appropriate file type (compression)•Know your target audience, design to reach the greatest # of people in your target audience.

Where do we start?

OPTIMIZING WEB GRAPHICS

Common Web File Formats GIF

Graphics Interchange Format JPEG

Joint Photographic Experts Group PNG

Portable Network Graphic

• GIF (Graphic Interchange

Format)• In general, best for line drawings, cartoons, illustrations,

logos, or images that use large flat areas of color.

• Lossless compression

• 8-bit color support

• Supports interlacing

• Supports transparency

• Supports animation

• JPEG (Joint Photographic Expert

Group)• In general, best for continuous-tone photographic images.

• Lossy compression

• 24-bit color support (Millions of colors)

• Progressive JPEG

• PNG (Portable Network Graphic)

• PNG can be used to save many image types

• PNG-8 (8-bit indexed color) similar to gif

• PNG-24 (24-bit RGB image)

• (48-bit images and 16-bit grayscale)

• Transparency (multiple levels of transparency)

• Progressive display (interlacing)

• *good alternative to GIF, PNG-24 files sizes still a bit larger than jpeg.

(excellent if multiple level of transparency needed)

• The process of reducing the amount

of information needed to display an

image file. Compression shrinks the

file size which results in faster

download times.

• Lossless Compression method

• Lossy Compression method

• Lossy – A compression method, which

creates smaller files sizes by discarding

parts of the image information. Lossy

compression removes detail and color

information that may be unnoticed by

the human eye.

• Lossless: A compression method that

creates smaller files sizes by rewriting

the image data into a compressed

version of the same thing. Lossless

compression does not remove any of the

image data; it simply uses fewer words

to say the same thing.

• The number of bits used to represent the

colors of each pixel in an image. The greater

the bit depth means more bits of information

per pixel.

• 8-bit setting will display 256 colors

• 16-bit setting will display thousands of colors

• 24-bit setting will display millions of colors

Web-safe colors? A color palette made up of 216 colors that are commonly

used on most computer platforms, operating systems,

and browsers. Although a computer monitor is able to

display more than 216 colors, this system was created

so that monitors using a 256 setting on either a MAC or

PC, would see the same range of colors without

dithering. (Only 216 because the 256 colors on the MAC

are not the same 256 colors on a PC. Only 216 colors

common between the two platforms).

Dithering• Dithering: The combining of different-colored pixels from

a 256-color palette into an image to simulate a color that

cannot be displayed on a 256-color monitor.

Gamma• Gamma: The measure of light intensity on display devices

• MAC = 1.8 gamma setting

• PCs = 2.2 gamma setting (Graphics will appear darker on a PC than

on a MAC)

• Gamma simulators in many software programs.

Let’s create some graphics…