1. Web Design
Designing for the Unknown

2. 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…

3. Designing for the Unknown
bradfrostweb.com

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

5. 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

6. Unknown Browsers The Big Guys… Microsoft Internet Explorer Firefox
Chrome
Others?
Safari, Lynx, Opera
Browser Statistics

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

8. 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

9. 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

10. 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)

11. Unknown Resolutions
Your web “page” size is determined by the size of the browser window.
Common Monitor Resolutions
640X480 | 800X600 | X768
1280X1024 | 1680X1050 | 1920X1080, others
Resolution Statistics

12. 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
| |
Provides custom layouts to devices based on size of the viewport

13. 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 ( k 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

14. 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)

15. 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.

16. OPTIMIZING WEB GRAPHICS
Where do we start?
OPTIMIZING WEB GRAPHICS

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

18. 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

19. 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

20. 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)

21. 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

22. 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.

23. 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.

24. 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

25. 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).

26. 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.

27. Let’s create some graphics…