CIS89A - Web site planning

From WikiEducator
Jump to: navigation, search

A homepage of your own - Site planning

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.

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?

Icon multimedia.gif


  • Wendy Willard - Chapter 15. Publishing Pages, Chapter 16. HTML for Email
  • HTML Dog HTML Beginner Tutorial
  • Visual Quickstart - 2. Working with Webpage Files, 7. CSS Building Blocks, 20. Testing & Debugging Webpages

Real world

  • 9 GIFs That Explain Responsive Design Brilliantly - What is responsive design? Most people vaguely understand that it refers to websites that work just as well on desktops as they do on smartphones, but there's a lot more to it than that, leading to widespread confusion
  • Web Design Trends - in addition to some examples of web design, there are also links to infographics for designing web sites.
  • 9 Tips to make a website that doesn’t suck - Really Annoying Things People Do On Websites: If I have to struggle to read it, it is highly unlikely that I’m going to spend the extra time trying.
  • Search Engine Optimization (SEO) and usability SEO is about attracting people to your site in the first place by making sure it shows up in search queries. Usability is about people's behavior after they arrive on your site, with the main goal being to increase the conversion rate.
  • Usability 101: Introduction to Usability - How to define usability? How, when, and where to improve it? Why should you care? Overview defines key usability concepts and answers basic questions.
  • The 10 Things You Should Include In Your Website - These are small things but they collectively add up and can surprisingly make a big difference to your website.
  • How do I include one HTML file inside another? - handy for adding standard headers and footers to multiple pages
  • Bootstrap - front-end template - open free collection of tools for creating websites and web applications. It contains HTML and CSS-based design templates for typography, forms, buttons, navigation and other interface components, as well as optional JavaScript extensions.
  • HTML5 Boilerplate - front-end template - build fast, robust, and adaptable web apps or sites. Kick-start your project with the combined knowledge and effort of 100s of developers, all in one little package.

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

HTML validation tools

Web developer news, information, resources

  • Web Master World - News and Discussion for the Web Professional
  • Ultimate CSS Gradient Generator - A powerful Photoshop-like CSS gradient editor from ColorZilla.
  • ColorHex - a free color tool providing information about any color. Just type any color values (view full list here) in the search field and ColorHexa will offer a detailed description and automatically convert it to its equivalent value. ColorHexa will also generate matching color schemes such as complementary, split complementary, analogous, triadic, tetradic and monochromatic colors.

Evaluation, Rubrics

Learn more

5 Free Design Resources Creative Learners Will Love Using
"many kind souls have put time and effort into developing quality resources with open-source access for all. Check out this short list below of 5 of the best sites with free design resources f...
Digital Principles
"Living guidelines for technology-enabled programsPrinciples 1 pagerThe Principles for Digital Development (download PDF in English, Español, Français, or Português) seek to institutionaliz...
Our Approach | Motoli by Education Technology for Development LLC.
"Principles for Digital Development* that leading international development organizations have articulated so well: Design with the User. Understand the Existing Ecosystem. Design for...
Search Analytics Report - Search Console Help
"The Search Analytics Report shows how often your site appears in Google search results. Filter and group data by categories such as search query, date, or device. Use the results to improve y...


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.

Assignment file name and required elements

  • cis89site1 - title, meta, description, keywords
  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. Read Chapter 15. Publishing Pages, Chapter 16. HTML for Email in the textbook.

  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. Review the posts of 3 others.

  4. Responsive design and Progressive web apps - Visitors may access your site from big desktop monitors, tablets and/or phones. Developing truly responsive design is beyond the scope of this course. Learn more about "responsive design" - principles, coding requirements and working examples. Progressive web apps include the user interface and the server-side application processing as well. Post a link to a good resource and a brief description of what you learned to the Responsive Design discussion. Review the resources provided by 2 others.

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

  6. 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 3 others and post a reply with your thoughts about the appropriateness of the rubrics to your site.

  7. 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. Review the evaluations of 3 others.

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

  9. Project site planning - You have this week and next week to work on your project site. In a new Thimble file, plan a web site consisting of 3-5 pages for a course, community group or a subject of interest. This is the plan of your Project site file. This is NOT your actual 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. Describe your choices for colors, fonts, layout. Why did you select these? The stylesheet for this outline should show the look-and-feel of your site - colors, layout, that you will use throughout your project site. This is a coding assignment too. Be sure to include all the basics such as comments and error free code. Use the assignment elements and tags to make your planning page look professional, too. 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. Plan to use all the 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.
    Submit the full name of your project plan file to the Project planning assignment. Post a link to your project plan file and any comments or questions about the assignment to the Project planning discussion.

  10. Groups - Working in groups is challenging and rewarding. Although your project is an individual project, you can work together in groups to discuss ideas, make suggestions, review work and provide feedback.
    See module 11. Web Site Projects - Project section - description, submission, group choice, group discussions. There is only one "group" that includes the whole class. Everyone should participate in the discussion for project related work such as questions and suggestions. There will be a "quiz" for you to evaluate your group experience when all the projects are completed.

  11. Validate code - See what users will see when they visit your page. Check your page with the tools.
  12. Mobile display - See what your page looks like when your visitors are using iPads, iPods or iPhones. Check your page with

  13. Post a link to your assignment file and any comments or questions about the assignment to the Project site 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 site planning discussion.
  15. Submit the web address of your assignment page file to the Site planning assignment.

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