Designing for the Unknown. Challenges of Web Design As frustrating as it may be – there is no...
-
Upload
louise-holland -
Category
Documents
-
view
214 -
download
1
Transcript of Designing for the Unknown. Challenges of Web Design As frustrating as it may be – there is no...
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…