Presentation on theme: "CS 300 Client Side Web Development"— Presentation transcript:
1CS 300 Client Side Web Development Planning & Design
2Step 1: Project Proposal Build a web development teamHtml 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
3Step 1: Project Proposal Choose a site title & domain nameDetermine 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 featureLimiting factors - Identify any technical or audience factors that could limit the design goals of the site.
4Choose your name wisely. Easy to spellAvoid words/terms with more than one potential spellingKISS PRINCIPLE - Keep it short and simpleMake sure it doesn’t have any negative connotationsAnd above all - make sure it is available for you to use…
5Step 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 & IIIExample of a web developers project time line.
6What 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…
7Step 3: Design Considerations PortableEfficientUnified “look and feel”Design for online
8Design 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)
9Design Considerations: efficient keep page length to a minimumkeep load time to 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 ruleAdd 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)
10Design 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 estatepage banner - keep the same or similar graphic or logo, primary navigation, common color strip
11Design Consideration: Unified Look color scheme - unless you are an art major/minor consider a visit to or other color scheme siteThe colors you choose can have implications to the viewer.What does red say, as opposed to blue?Muted colors Vs. neon colorsmatch graphics and logo with color scheme(don’t wear plaid pants with a polka dot shirt)
12Design Consideration: Design for online Save room for active white space.landscape layout Consider a short, wide page when filling with content.Can you read this?Provide contrast between background and text colors, without being difficult to read.Use hyper-linking for non-linear access.Can you read this?Choose a font for 72 dpi readability.Italics is difficult to read.Can you read this?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 carefullypassivewhite spaceWCAG -Web Content Accessibility GuidelinesGo to:
13Step 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?Do your pages load quickly & efficiently?Do all your images have text alternates?Any broken links?Do you have spelling errors?How’s your grammar?Did you offend anyone?Remember, the site is going out to the WWW.Use different people, different platforms, different browsers,anddifferent computers.
14TEST IT AGAIN!!! Step 5: Update! Make revisions/repairs as needed after testing the siteandTESTITAGAIN!!!
15Step 6: Get Noticed - Search Engine Indexing Add an XMLSite Map to your sitefor use by therobots&web crawlersIf a tree falls in the forest and no one hears it, does it make a sound?If your website has an awesome piece of information and no one knows it exists except for the members of your web staff that posted it, does it really exist?What are meta tags?Use <title>, <alt text with images>, and <description meta tags>
16Step 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: