Transcript ppt - pantherFILE

Web Design
Designing for the Unknown
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.
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…