Transcript CS 300 Client Side Web Development

CS 300
Client Side Web Development
Planning & Design
Step 1: Project Proposal
Build a web development team
Html coders (write the actual code)
Designers (graphically, how the site should look)
Information writers (create the text & hypertext content)
Marketing (attract visitors to the site)
Others: server administrators, software programmers, DBAs
Step 1: Project Proposal
 Choose a site title & domain name
 Determine the rationale or focus - What type of website are you
going to build?
 Design goals - What is the site going to look like?
 Target audience - Describe the audience that your site is intended
to reach.
 List the main elements of the site (at least 5 main features)
 Estimate the content - the number of pages needed for each
feature
 Limiting factors - Identify any technical or audience factors that
could limit the design goals of the site.
Choose your name wisely.
Easy to spell
Avoid words/terms with more than one potential spelling
KISS PRINCIPLE - Keep it short and simple
Make sure it doesn’t have any negative connotations
And above all - make sure it is available for you to use…
Step 2:
Schedule, Milestones, Deliverables
Break the project into smaller parts and schedule tasks as milestones to
be completed by specified dates, and the deliverables you will provide
your client.
See Projects II & III
Example of a web developers
project time line.
What about web space?
Start with a search for “top 10” web hosts.
Look at a minimum of 3 web host ranking sites.
(They will all be slightly different.)
Pick 2 or 3 hosting services that were consistently in the “top 10”,
and view their website for the services they offer, and price.
Make a decision, and pick a web host.
Note: Most web hosts can also register a domain name for you…
•
•
•
•
Step 3:
Design Considerations
Portable
Efficient
Unified “look and feel”
Design for online
Design Considerations:
Keep it portable
 Build a relative file structure.
 Stick to W3C coding standards and you will avoid most
pitfalls.
 filename convention:
 use l.c. letters, numbers, no special symbols,
 and no spaces! (use - and _ instead, if you must)
 View site as it is being developed on different platforms, with
different browsers, and different monitors.
(try Lynx - text only browser)
Design Considerations:








efficient
keep page length to a minimum
keep load time to 10-20 seconds (speed of connectivity)
limit quantity of information on each page (use page turners)
use small image files (<100 kb),sparingly per page & use
cache (browser’s temp storage area- reuse images)
place navigation for easy access to information
(look at the “Big Guys” on the web for ideas)
leave a breadcrumb so visitors don’t get lost.
keep a Flat Hierarchy - remember the 3 clicks rule
Add A Site Map: graphically displays the organization of a web
site for the user to navigate directly to desired content (use
intuitive page description list)
Design Consideration:
Unified Look
First, consider your audience, then plan accordingly.
• font choices - choose a limited selection & determine what the are to
denote, (e.g. headings, body, features)
Are you considering the use of text images?
• navigation - keep it in the same place, if using text links make sure to
underline them (it’s the convention)
• page layout - consider a standard page layout, keeping aware of web
page real estate
• page banner - keep the same or similar graphic or logo, primary
navigation, common color strip
Design Consideration:
Unified Look
• color scheme - unless you are an art major/minor consider a
visit to http://www.colorcombos.com/ or other color scheme
site
The colors you choose can have implications to the viewer.
What does red say, as opposed to blue?
Muted colors Vs. neon colors
• match graphics and logo with color scheme
(don’t wear plaid pants with a polka dot shirt)
Design Consideration: Design for online
Save room for active white space.
landscape layout
Consider a short, wide
page when filling
with content.
Provide contrast between
background and text colors,
without being difficult to read.
Choose a font for 72 dpi readability.
Use hyper-linking for
non-linear access.
Italics is difficult to read.
Avoid horizontal scrolling -----keep page width to current standard 1024 pixels, (975px)
Use logical navigation terms,
e.g. HOME - main page of site,
and choose navigation icons carefully
passive
white space
WCAG -Web Content Accessibility Guidelines
Go to:
http://www.w3.org/WAI/WCAG20/quickref/
Step 4:
Testing, 1,2,3, testing…
before going “public” -
• Is your site accessible for your audience?
• Are visitors viewing the page as you had intended ?
• Is your navigation structure navigatable?
Use different • Do your pages load quickly & efficiently?
people,
• Do all your images have text alternates?
different
• Any broken links?
platforms,
different
• Do you have spelling errors?
browsers,
and
• How’s your grammar?
different
computers. • Did you offend anyone?
Remember, the site is going out to the WWW.
Step 5:
Update!
Make revisions/repairs
as needed after testing the
site
and
TEST
IT
AGAIN!!!
Step 6:
Get Noticed - Search Engine Indexing
Add an XML
If a tree falls in the
Site forest
Map to and
your no
siteone hears
it, does it make a sound?
for use by the
robots
&
If your website hasweb
an crawlers
awesome piece of
information and no one knows it exists
except for the members of your web staffWhat are
meta tags?
that posted it, does it really exist?
Use <title>, <alt text with images>, and <description meta tags>
Step 7:
Maintenance-a web weaver’s work is never done.
As with all information, once it is created, it is
then “dated” - destined to become obsolete.
Thus, it is essential to maintain good
client/developer relationships as site
maintenance can provide continued income.
It is your responsibility as a web developer to
note areas to be revised, due to advances in
technology or text information
(e.g. pricing, events, seasonal).
Use <!--comments --> to “mark” areas for
regular updates.
Support your client by noting these areas for
revision, and promptly make changes, upon
client approval, as needed.
page updated: 01.31.12