Web Design Designing for the Unknown

WHY? Challenges of Web Design As 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

Unknown Browsers “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

Unknown Browsers The Big Guys… Microsoft Internet Explorer Firefox Chrome Others? Safari, Lynx, Opera Browser Statistics http://www.w3schools.com/browsers/browsers_stats.asp

Unknown User Preferences 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.

Unknown Platform 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

Unknown Colors 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 Value Overall brightness of a monitor’s display Mac 1.8, PC 2.2, Unix 2.5 gamma setting Higher the gamma – darker the display Image appear brighter on a Mac Gamma simulators available

Unknown Fonts 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)

Unknown Resolutions 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

Unknown 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

Unknown Connection Speed 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

How do we design for the Unknown? 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)

How do we design for the Unknown? 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.

OPTIMIZING WEB GRAPHICS Where do we start? OPTIMIZING WEB GRAPHICS

Web Graphic File Formats Common Web File Formats GIF Graphics Interchange Format JPEG Joint Photographic Experts Group PNG Portable Network Graphic

Optimizing Web Graphics - GIF 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

Optimizing Web Graphics - JPEG JPEG (Joint Photographic Expert Group) In general, best for continuous-tone photographic images. Lossy compression 24-bit color support (Millions of colors) Progressive JPEG

Optimizing Web Graphics - PNG 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)

Optimizing Web Graphics - Compression 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

Compression- Lossy 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.

Compression- Lossless 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.

Bit Depth 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…