Presentation is loading. Please wait.

Presentation is loading. Please wait.

Web Design Designing for the Unknown.

Similar presentations


Presentation on theme: "Web Design Designing for the Unknown."— Presentation transcript:

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…


Download ppt "Web Design Designing for the Unknown."

Similar presentations


Ads by Google