CIS89A - 10. Site Planning

From WikiEducator
Jump to: navigation, search
Eejanaika coaster

Site Planning - Design & Implementation

A homepage of your own

There are millions of web sites. Creating a web site and building an online presence is easy and inexpensive, so everyone is doing it. There are personal web sites as well as sites for schools, businesses and organizations. People expect to find every business, service and person via the internet.
Knowing how to code HTML and CSS are just the beginning. Putting these together to produce a functional and attractive web site are the next step. There are many factors to consider when designing and deploying a site.

Learning outcomes

  • visit domain name registration sites
  • plan a site launch


  • domain name, hosting, meta content, mobile, browsers, FTP, testing, publicize, marketing, Search Engine Optimization (SEO), HTML email, plain-text

Reading guide

  • What options are available for domain name selection and registration?
  • What criteria should be considered when selecting a web host for your site?
  • What is "meta" content? Why is it important?
  • How many different browsers should be tested?
  • How are HTML files transferred to the host?
  • What are some ways to attract visitors to a site?
  • What are some of the advantages of HTML email? What are the disadvantages?


The key skills of web development are teamwork, attention to detail, debugging, project management, distributed version control, the agile process, accessibility and usability, user needs analysis, user testing, and much more.

Coding project required elements

  • title, meta, description, keywords
  • head element meta information for Search Engine Optimization, keywords, title, description , comments for .html and .css documentation

  1. Review the Keywords and Reading guide at the top of this page. These will help you look for important ideas in the rest of assignments for this module.

  2. Textbook - HTML and CSS Visual Quickstart Guide, Eighth Edition. Castro and Hyslop Chapter 20 Testing & Debugging Web Pages, Chapter 21 Publishing Your Pages on the Web

  3. Web site development - Read the description of the site development for the redesign of the Tate Kids site (part of the Tate Museums in the U.K.). What are some of the main issues for the client? How did the developer work with the client to address their concerns? How did they include interaction in the site? What were some of the important features of the new site? Write a brief summary highlighting ONE important thing you learned about professional web site development from this article. Post your response to Tate Kids site discussion.

  4. Domain names - Learn about domain names and registration and web hosting. There are 1000s of sites that offer domain registration and hosting services. Find a hosting site (other than GoDaddy or Network Solutions or any previously posted in the discussion) and use the site's search to see if some domain names you might want for your own site are available. Review their services and pricing. Are there other features or services that you might need? Are you going to have a business site? Are you going to sell stuff through your site? In the Site hosting discussion, post a link to the site you accessed and write a brief description of your findings.

  5. Rubrics - A rubric is a set of "rules" for an evaluation. By defining the criteria for ratings in advance, it is easier to provide objective feedback and a specific rating. There are lots of rubrics available for rating student-produced web sites. Layout, Design and Content Organization, are usually 3 of the criteria included in a web site evaluation rubric. Visit some examples. Then select a rubric that you will use to evaluate web sites.
    The rubric you select should include 4-5 characteristics and 3 levels to judge work - Needs work, Acceptable, Exceptional. Usually there is a score for each level for each criteria that is used to provide a score out of the possible total. Your selected rubric should include specific criteria for each area being assessed. There should be specific measurements or counts in each. This ensures that the evaluation is consistent and explainable. The descriptions of the work at each level will help the creator of the work being assessed to understand your evaluation and what they would need to do to improve the web site.
    Submit a link to the rubric you select along with a brief description of the objective of criteria and scoring to the Rubric discussion.
    Review the posts of 2 others and post a reply with your thoughts about the appropriateness of the rubrics to your site.

  6. Site evaluation - Test drive your rubric against a really 'good' site and a really 'bad' site. Pick two sites to review. Review the sites using your rubric selection. Provide the score and a brief description of your evaluation to the Site evaluation discussion.

  7. WEB SITE PROJECT - The Web Site Project is covered in 3 modules - 10. Planning, 11. Development and 12. Review. Consider these as parts of a single project assignment. You need to look ahead and be considering the work associated with all 3. Feedback is one of the most useful parts of the whole project. The steps are separated to provide guidance on time management and development process work. Look in Module 11. Web Site Projects for the details.

  8. Project planning - You have this week and next week to work on your project site. In a new coding project, create a page with your plan for your Project web site. The site will consist of 3-5 pages. This is the plan of your Project site. This is NOT your project site. This is the "what" and "why" description for the site, like the Tate Kids article. Who is your audience? What is their experience intended to be like? Create a ONE page outline for the site as the content of this page.
    * Provide a brief overview of the purpose and intended audience for your site.
    * CSS and "look" - Describe your choices for colors, fonts, layout. Why did you select these?
    This is a coding assignment too.
    * Include all the basics such as comments and error free code. Use the assignment elements and tags to make your planning page professional, too.
    * The stylesheet for this outline should show the look-and-feel of your site - colors, layout, that you will use throughout your project site.
    * List the search engine optimization keywords that you will use in the head meta element. Do a search using these keywords to ensure that the other sites that come up are similar to you planned site. Include links to 2 sites that were “found” by that search.
    * Add information to improve the viewer experience and to increase the probability that your site will be "found" in searches that are appropriate to your content.
    * Use all these elements and tags within your project page.
    Note: Your plan and your project are separate pages, although your project will be based on the outline in your plan. You can start your project, although it won't be reviewed or graded in this module. Take advantage of this time to work on your project as you plan and describe your project.

  9. Validate code - See what users will see when they visit your page. Check your page with the tools.
  10. Mobile display - See what your page looks like when your visitors are using tablets or smartphones. Check your page.
  11. Check your site's accessibility. What evaluation site did you use? What did you change to make your site more accessible? Use the WAVE site evaluation.

  12. Submit the link to your project plan to the Project planning assignment.
  13. Post a link to your project plan file and any comments or questions about the assignment to the Project planning discussion. Did the validation and mobile display check provide useful feedback? Will your intended audience include mobile users?
  14. Review the work of 2 others and post a note with links to those pages, and a brief description of your observations - anything that you learned from looking at these? Any ideas you have for using in your own work in the future? Post as a reply to your post to Project planning discussion.

  15. Business and Social Media - It was a big deal when there were more web addresses in business magazine ads than phone or fax numbers. Today, many business list their social media locations. What do experts say about this? What do you think? Find an resources that discusses business and social media. Post a link to the resource and a brief summary along with your personal opinion to the Business and Social Media discussion.

  16. New normal - Everyone has had to adapt to 'personal distancing'. Many businesses and services will be changed forever. XR - eXtended Reality - Augmented Reality (AR) and Virtual Reality (VR) alternatives are being developed to replace in-person experiences. Shopping, spectator sports, live entertainment, school are a few. Find an example of eXtended Reality (XR / AR / VR) - either currently available or that will be available soon. Include the link and a brief explanation of how you personally will be impacted by this development, and post to the New Normal - XR (eXtended Reality) discussion. Review and comment on 2 others.

  17. Group Project groups discussions - Web Design Summary - For the activities throughout the course, you accessed web sites, practiced evaluating web design, commented on your observations and shared with your group. Review all the web design related posts in your group discussion and summarize 3-4 of the best web designs ideas. These can be from sites you visited or based on comments from others in your group. What is something important and interesting that you learned about good web design from each of these sites? How would you apply these design ideas to your own work? Summarize your 3-4 web design selections and link to your selected examples of the design features. Post your summary and related links to the Web Design Summary discussion - this is a discussion that everyone can access.

  18. Groups - Working in groups is challenging and rewarding. Although your project is an individual project, work together in your groups to discuss ideas, make suggestions, review work and provide feedback. These are the same groups that were automatically assigned by Canvas earlier in the course. Everyone should participate in the discussion for project related work such as questions and suggestions. There is a discussion thread for your group in the TOPIC: Group Project groups discussions.

Icon multimedia.gif


  • Textbook - HTML and CSS Visual Quickstart Guide, Eighth Edition. Castro and Hyslop Chapter 20 Testing & Debugging Web Pages, Chapter 21 Publishing Your Pages on the Web

SITES - overall design considerations

Top 10 Web Design Trends in 2020 - Every Designer Should Know - YouTube
"Here are Top 10 Web Design Trends that you will see in 2020. We have picked the most popular designs from Dribbble and we predict & assuming these will become trends in the web design ind...
Common CSS Flexbox Layout Patterns with Example Code | Tobias Ahlin
list of 10 example flexbox layouts with CSS that you can copy and paste to get started with your own layouts. We’ll walk through these basic layout patterns (click to jump to an example): Every e...
10 Principles Of Good Website Design — Smashing Magazine
January 31, 2008 Usability and the utility, not the visual design, determine the success or failure of a web-site. Since the visitor of the page is the only person who clicks the mouse and theref...
27 of the Best Website Designs to Inspire You in 2020
Whether it's the design aesthetic, usability, interactivity, sound design, or value that the site provides, each one is a masterpiece in its respective industry, and something to be inspired by...
21 Award-Winning Website Designs & What They Did Right
award-honoring sites and pulled the ones that are not only beautiful examples of modern design but also exercise UX, UI, information architecture, conversion rate optimization, video marketing, tac...

Usability considerations

10 Principles Of Good Website Design — Smashing Magazine
January 31, 2008 Usability and the utility, not the visual design, determine the success or failure of a web-site. Since the visitor of the page is the only person who clicks the mouse and theref...
Usability 101: Introduction to Usability
Usability is a quality attribute that assesses how easy user interfaces are to use. The word "usability" also refers to methods for improving ease-of-use during the design process.Usabili...
Reading Content on Mobile Devices
We found no practical differences in the comprehension scores of the participants, whether they were reading on a mobile device or a computer. Despite this finding, we still recommend prioritizing...

Evaluation, Rubrics - scoring webpages

School Web Page - Rubric
Layout / Design4 - The pages are well organized with tables. Text spacing and alignment make reading easy. The backgrounds enhance the page. The pages are unattractive. Text is difficult to read....
Rubric: Website and Blog Design
design, organization, images, formatting, navigation, mechanics, credibility - exemplary, effective, ineffective
<p class="diigo-tags"><strong>Tags:</strong>...
Mister Wilson's Web Design Class: Web Design Assignment Grading Rubric
Web Design Assignment Grading Rubric:While art is a creative and subjective form of expression, common assessment is vital in evaluating student performance in project based learning courses such a...

HTML validation tools - check your code

15 Most Popular HTML Validator Online Tools in 2020
HTML Validator can be defined as the process to validate HTML web elements for any syntax or format errors.Why validators came into the picture?When a developer designs a perfect web page, then he...
Showing results for contents of text-input area - Nu Html Checker
"Nu Html CheckerThis tool is an ongoing experiment in better HTML checking, and its behavior remains subject to changeShowing results for contents of text-input area"
<p cl...

Hosting and domain registration - some examples - there are 100s

The Best Web Hosting Providers for 2020 - CNET
Find the best web hosting providers using price comparisons and reviews from our expert hosting editor. You can also find hosting for different needs like e-commerce, enterprise, specific content m...
with hundreds of web hosting companies offering all kinds of hosting plans, it has become challenging to find balance between price, features, performance and support. On this page you will find a...

WEBDEV Web Developers tools

IT Accessibility Checklist & Tutorial | Accessible Technology
Web Content Accessibility Guidelines (WCAG ) 2.0 at Level AA. WCAG 2.0 is the standard for web accessibility developed by the World Wide Web Consortium (W3C).Many of the items in the checklist appl...
Learn to become a modern frontend developer
Frontend DeveloperStep by step guide to becoming a modern frontend developer"
<p class="diigo-tags"><strong>Tags:</strong> <a hre...
6 Tips to Practice Web Development to Excel Your Skills – HowToCreateApps
Write code every dayThis has been the most popular tip for every single developer on the planet. If you ask any well-known, experienced developer for tips on becoming a better programmer, this is t...

2016.3 3710 . 2016.11 5720 . 2017.3 7123 . 2018.2 10,261