Designing for the Unknown. Challenges of Web Design As frustrating as it may be – there is no...
-
Upload
louise-holland -
Category
Documents
-
view
213 -
download
1
Transcript of Designing for the Unknown. Challenges of Web Design As frustrating as it may be – there is no...
![Page 1: 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.](https://reader030.fdocuments.us/reader030/viewer/2022032803/56649e215503460f94b0e194/html5/thumbnails/1.jpg)
Designing for the Unknown
![Page 2: 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.](https://reader030.fdocuments.us/reader030/viewer/2022032803/56649e215503460f94b0e194/html5/thumbnails/2.jpg)
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…
![Page 3: 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.](https://reader030.fdocuments.us/reader030/viewer/2022032803/56649e215503460f94b0e194/html5/thumbnails/3.jpg)
Designing for the Unknown
bradfrostweb.com
![Page 4: 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.](https://reader030.fdocuments.us/reader030/viewer/2022032803/56649e215503460f94b0e194/html5/thumbnails/4.jpg)
Designing for the Unknown•Unknown Browsers•Unknown Computer Platforms•Unknown User Preferences•Unknown Monitor Size/Resolution•Unknown Colors•Unknown Fonts•Unknown Connection Speed
![Page 5: 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.](https://reader030.fdocuments.us/reader030/viewer/2022032803/56649e215503460f94b0e194/html5/thumbnails/5.jpg)
“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
![Page 6: 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.](https://reader030.fdocuments.us/reader030/viewer/2022032803/56649e215503460f94b0e194/html5/thumbnails/6.jpg)
The Big Guys…
Microsoft Internet Explorer
Firefox
Chrome
Others?
Safari, Lynx, Opera
Browser Statistics http://www.w3schools.com/browsers/browsers_stats.asp
![Page 7: 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.](https://reader030.fdocuments.us/reader030/viewer/2022032803/56649e215503460f94b0e194/html5/thumbnails/7.jpg)
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.
![Page 8: 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.](https://reader030.fdocuments.us/reader030/viewer/2022032803/56649e215503460f94b0e194/html5/thumbnails/8.jpg)
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
![Page 9: 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.](https://reader030.fdocuments.us/reader030/viewer/2022032803/56649e215503460f94b0e194/html5/thumbnails/9.jpg)
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
![Page 10: 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.](https://reader030.fdocuments.us/reader030/viewer/2022032803/56649e215503460f94b0e194/html5/thumbnails/10.jpg)
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)
![Page 11: 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.](https://reader030.fdocuments.us/reader030/viewer/2022032803/56649e215503460f94b0e194/html5/thumbnails/11.jpg)
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
![Page 12: 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.](https://reader030.fdocuments.us/reader030/viewer/2022032803/56649e215503460f94b0e194/html5/thumbnails/12.jpg)
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
![Page 13: 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.](https://reader030.fdocuments.us/reader030/viewer/2022032803/56649e215503460f94b0e194/html5/thumbnails/13.jpg)
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
![Page 14: 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.](https://reader030.fdocuments.us/reader030/viewer/2022032803/56649e215503460f94b0e194/html5/thumbnails/14.jpg)
• 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)
![Page 15: 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.](https://reader030.fdocuments.us/reader030/viewer/2022032803/56649e215503460f94b0e194/html5/thumbnails/15.jpg)
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.
![Page 16: 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.](https://reader030.fdocuments.us/reader030/viewer/2022032803/56649e215503460f94b0e194/html5/thumbnails/16.jpg)
Where do we start?
OPTIMIZING WEB GRAPHICS
![Page 17: 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.](https://reader030.fdocuments.us/reader030/viewer/2022032803/56649e215503460f94b0e194/html5/thumbnails/17.jpg)
Common Web File Formats GIF
Graphics Interchange Format JPEG
Joint Photographic Experts Group PNG
Portable Network Graphic
![Page 18: 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.](https://reader030.fdocuments.us/reader030/viewer/2022032803/56649e215503460f94b0e194/html5/thumbnails/18.jpg)
• 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
![Page 19: 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.](https://reader030.fdocuments.us/reader030/viewer/2022032803/56649e215503460f94b0e194/html5/thumbnails/19.jpg)
• JPEG (Joint Photographic Expert
Group)• In general, best for continuous-tone photographic images.
• Lossy compression
• 24-bit color support (Millions of colors)
• Progressive JPEG
![Page 20: 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.](https://reader030.fdocuments.us/reader030/viewer/2022032803/56649e215503460f94b0e194/html5/thumbnails/20.jpg)
• 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)
![Page 21: 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.](https://reader030.fdocuments.us/reader030/viewer/2022032803/56649e215503460f94b0e194/html5/thumbnails/21.jpg)
• 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
![Page 22: 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.](https://reader030.fdocuments.us/reader030/viewer/2022032803/56649e215503460f94b0e194/html5/thumbnails/22.jpg)
• 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.
![Page 23: 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.](https://reader030.fdocuments.us/reader030/viewer/2022032803/56649e215503460f94b0e194/html5/thumbnails/23.jpg)
• 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.
![Page 24: 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.](https://reader030.fdocuments.us/reader030/viewer/2022032803/56649e215503460f94b0e194/html5/thumbnails/24.jpg)
• 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
![Page 25: 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.](https://reader030.fdocuments.us/reader030/viewer/2022032803/56649e215503460f94b0e194/html5/thumbnails/25.jpg)
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).
![Page 26: 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.](https://reader030.fdocuments.us/reader030/viewer/2022032803/56649e215503460f94b0e194/html5/thumbnails/26.jpg)
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.
![Page 27: 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.](https://reader030.fdocuments.us/reader030/viewer/2022032803/56649e215503460f94b0e194/html5/thumbnails/27.jpg)
Let’s create some graphics…