Group 3: Art Gallery

Monica Almendarez Content/Project Manager

Willliam EgleTechnology Manager

Christina PiéUsability/ADA Compliance Manager

Mirjana VukovicDesign Manager

Team Process

We have been working collaboratively in our team to maximize our time together.

We meet after class on Wednesdays and communicate via Blackboard during the week.

We’ve set a schedule and posted it on Blackboard to make sure that we are staying on target.

Content Goals

Provide amateur artists with an electronic portfolio.

Provide information about the artist – contact information and artist’s statement.

Create a usable, image based site with appropriate content.

Target Audience

Art Aficionados Mature Audience – contemplative and open to

new ideas Visual Learners – are more interested in

images than text Media Savvy

What’s Left for Content?

We have a long way to go, but have wisely chosen to use these first weeks for planning initiatives.

We need to add the artist’s statements and captions to every picture.

We need to add our ALT tags to images. We need to create our text-based site.

Web Design – Home Page

Logo About Us Contact Us Link to Text Site

Artist 1 Photo

Artist 4 PhotoArtist 3 Photo

Artist 2 PhotoArtists Names

Web Design – Artist Page

Photos

Logo Artist Statement Contact the Author Link to Text Site

Artists Names

Thumbnails of Photos

BorderColor is Unique To Artist

Graphics and Visual Representation of Content

Content is mostly images. Using JPEGs because of image quality. We plan on using ALT tags for images. Individual artist galleries will be characterized

by different background colors. In order to achieve visual continuity, we will

use style sheets for font and other basic visual components.

What’s Left for Design?

Upload all images and improve look and feel of galleries.

Create a graphical logo for the site that will appear on every page.

Make sure that galleries are distinct, yet harmonize well with the entire design of the site.

Web Hosting & Publication

We will be hosting the site on the Drexel web space.– Located at

http://www.pages.drexel.edu/~wfe24/termproject/

Programming

Using a combination of frames and tables to create the galleries.– Frames

Title bar Menus and Thumbnail menu

– Tables for general formatting within Content frame

Style Sheets

Style sheets to enable global updates without much difficulty.– Title and menu use one style sheet– Each gallery has its own style sheet allowing for

individual customization.

Technical Issues re: Images

Photographs in .jpg format– Allows best color depth– Good compression

Photograph sizing– Some photos much larger than others– Used WIDTH=“100%” or WIDTH=“95%” attribute of IMG tag

Photos fit within the limited size of a frame without having to specify a particular pixel size

By only specifying the width (or height) of an image, it is kept in proportion automatically

What’s Left for Programming?

Update general content– Photograph captions– Photographer information

Background Contact

– Formatting issues Thumbnails take too long to load

– Need all photographs over a certain size (100k) copied to a smaller format for use in thumbnails.

Different browsers display the title bar differently

Usability Background

– Keep background simple; provide contrast with images, text, and link colors.

Text– Consider placement, font size, color. Is text easy to read?

Links– Are links clearly marked? – Include matching text tags for image links.

General design– Is there consistent display in a variety of browsers?– Do pages download quickly?– Does entry/main page fit 640x460 pixels standard browser window?

Usability Issues re: Images

Graphics– Size of file– Ease of loading– ALT tags for most images

Navigation

Navigation– Include standard navigation menu– Clear, simple, easy to use and understand– Avoid scrolling when possible– Provide useful, descriptive page titles– Provide navigation back to main sections– Include index or site map

Universal Design Principles

Consider the needs of people with disabilities who are unable to use a mouse and rely on

the keyboard for internet use who are older using older hardware and software with language barriers

ADA Compliance

Our site is mainly images, and therefore will not be very accessible to the sight-impaired. We plan to add ALT tags to all of the images.

We will consider making an all-text alternative site for people who use speech output systems that read aloud the text on the screen.

Include descriptive captions.

Accessibility Testing

Consult W3C Web Accessibility Initiative (WAI) and W3C Web Content Accessibility Guidelines.

Test site using a number of web browsers. Consider how site displays with different

monitor sizes and screen resolutions. Can site’s features be accessed with keyboard

only?

Accessibility Testing and Validation

Test for usability using software such as Wave 3.0A-Prompt

Check code using W3C’s HTML validator

Conduct user testing by asking people unfamiliar with the site to use the site and make suggestions.

Add Content Rating

What’s Left for Usability?

Include Contact information and last updated information on the main page.

Consider adding a Search engine. Printing capability

– Provide print version of page if page will not print as shown in browser window.

Questions? Comments?