Welcome to Our WebsiteComments and Suggestions Welcomed!

Presented by: Vicky Green

Key points Addressed in PowerPoint:

#1. Design Techniques

Color Scheme: Yellow and Black are highly contrasting colors used in advertisement to reach a consumer/s short-term memory within seconds (Ad Age 2009).

Left to Right Eye Flow: Placing the logo in the right hand corner and using effective layout in which forces the viewer to scan left to right, creates more covered of website in less time. In addition, this reduces scrolling.

Mobile Device Layout: Creating a content area no larger than 960px in width and 760px in height ensures users on hand held mobile devices can see key parts of the website with out scrolling and enlarging the site. Spending less time trying to locate information increases time spent on the website reviewing viable information (Ref here).

Design #1 Design #2

Design #3 Design #4

Key Points Cont…#2 Learning Dreamweaver Cs5 (Complications)

Design vs. Code: Dreamweaver Cs5 offers two settings for creating websites. 40% of the design time was wasted typing code on the design page of DWcs5. (tip: be sure you are on the source code tab not the design tab)

Properly nestled vs. incorrectly nestled: 40% of time wasted through not nestling correctly. Understanding the container holds the header, content, navigation and footer, then closing the </div> will help to nestle your code. In addition, practicing the Box model design helps.

Managing your site: 20% time wasted not managing the site. Ensuring the site files are contained in the same folders and consistently update your site will save time and minimize confusion when uploading to the comp site.

Results of wasted time: 100% of my time was wasted trying to design through Photoshop and Hyper linking the images. Scott Wright and Robin Stuttle offered feedback regarding my navigation. The first two (left &middle) were confusing, both recommend a simple and easy to read design (far right design).

#2 Success with Dreamweaver

Margin and Padding: Learning how to effectively use margin and padding in CSS has allowed the sites content and navigation bar placement to help the user’s eye flow to scan left to right.

Learning HTML: through proper nestling has allowed for <p> and <h1> placement in the website for a “document look”. Designing the pages with “read more” options emulates “reading a book”.

Learning Script: Although, I have not created this in my site yet, I have been able to successfully insert script into the site. I’ve decide through feedback from Robin Stuttle to use this script as a comment box to ensure eye flow goes left to right.

Further Work Needed: In addition to JavaScript, external hyperlinks to potential sponsors and previous page links need to be completed.

Section 508 ComplianceEach Image, text box, navigation and footer have alt tags complete with detailed Descriptions of each element. This will help users who use Web developer and Screen readers. In addition each page has a consistent layout to reduce alt tagLength and redundancy. Also, all images belong to Vicky Green or have beenCreated/re-designed to reduce and eliminate copyright issues. The futureSite for implementing the proposed grant will contain actually logos from Johnson and Johnson and additional sponsors, but for the purpose of the Assignment, re-design was efficient due to time constraints.

Lets Take A Tour!