Group 3: Art Gallery

1. Group 3: Art Gallery Monica Almendarez Content/Project Manager Willliam Egle Technology Manager Christina Pié Usability/ADA Compliance Manager Mirjana Vukovic Design Manager

2. 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.

3. 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.

4. Target Audience • Art Aficionados • Mature Audience – contemplative and open to new ideas • Visual Learners – are more interested in images than text • Media Savvy

5. 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.

6. Web Design – Home Page Logo About Us Contact Us Link to Text Site Artist 1 Photo Artist 2 Photo Artists Names Artist 3 Photo Artist 4 Photo

7. Web Design – Artist Page Logo Artist Statement Contact the Author Link to Text Site Artists Names Border Color is Unique To Artist Photos Thumbnails of Photos

8. 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.

9. 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.

10. Web Hosting & Publication • We will be hosting the site on the Drexel web space. • Located at http://www.pages.drexel.edu/~wfe24/termproject/

11. 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

12. 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.

13. 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

14. 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

15. 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?

16. Usability Issues re: Images • Graphics • Size of file • Ease of loading • ALT tags for most images

17. 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

18. 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

19. 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.

20. 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?

21. Accessibility Testing and Validation • Test for usability using software such as Wave 3.0 A-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

22. 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.

23. Questions? Comments?