CIS89A - 10. Site Planning

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 steps. There are many factors to consider when designing and deploying a site.


Learning outcomes

• visit domain name registration sites
• plan a site launch


Keywords

• 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?

Assignments

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.

You will be demonstrating most of these key web developer skills to build the Web Site project over these two modules. In this module, prepare a Plan. For the next module, the coding project is the Web Site based on the planning in this module.

Web Site PLAN - Coding project required elements - a single web page overview of your final site project. It is important to plan a web site before getting into the main coding. Think through the entire project and develop a sample first. For the PLAN, include

• head element meta information for Search Engine Optimization, keywords, title, description
• comments for .html and .css documentation
• proposed css theme for the web site
• plan details - purpose, site outline, audience, user experience
• list of pages with brief description of contents of each

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 - Read HTML and CSS Visual Quickstart Guide, Ninth Edition. Casabona.
   * Chapter 21 Getting Your Website Online . Chapter 22 Testing Your Website . Chapter 23 Improving Website Performance . Chapter 24 Web Accessibility
   
   
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.) AND Designing a new Foundation: Spotify for Desktop for Spotify music service. What are some of the main issues for the old site in each case? How did the developer address these 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 Site redesign discussion.
   
   
4. Website hosting - Learn about domain name registration and web hosting services. There are 1000s of sites that offer hosting services. Do you have any experience with a web hosting service? What services were offered? Did they provide templates or web page development tools? Find a hosting site and use the site's search to see if some domain names you might want for your own site are available. Review their hosting services and pricing. What other features or services will you 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 hosting service you selected and write a brief description of your findings.
   
   
5. Rubric - By defining a list of features and evaluation criteria in advance, it is easier to provide objective feedback. There are lots of checklists and rubrics for guiding web sites development. Visit some examples. Layout, Design and Content Organization are general categories. Select or create your own rubric to use to evaluate web sites. Include 4-5 characteristics with 3-5 details each so the site is consistent and explainable. The descriptions identify what is needed to improve the web site.
   Submit a link to the rubric along with a brief description of the objective of criteria to the Rubric discussion.
   Review the posts of 2 others and post a reply with your thoughts about the appropriateness of their criteria 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. Provide a brief description of your evaluation of each site 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. This is a coding project. In a new coding project, create ONE page with your PLAN for your Project web site. The actual 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 plan 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 project 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 proposed site - colors, layout, that you will use throughout your project site.
   * List the search engine optimization (SEO) 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.
   
   * NOTE * Your Final Project MUST be several .html files and ONE shared .css file. You can host these on Voyager or any other hosting service. These must be publicly accessible web pages and include head and body elements in the .html files.
   
   
9. Validate code - See what users will see when they visit your page. Check your page with the validator.w3.org tools.
10. Mobile display - See what your page looks like when your visitors are using tablets or smartphones. Check your page. https://search.google.com/test/mobile-friendly
    
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. https://wave.webaim.org/
    
    
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. AND provide feedback and get feedback ... Review 2 other projects and REPLY to THEIR post with a comment. Point out something that you learned or you liked AND ask one question about the planned site design. Post as a reply in the Project planning discussion.
    Check back to see the feedback you received.
    
    
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 a resource 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. 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.
    
    
17. 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 Group Project groups discussions.

Media

Textbook - Read HTML and CSS Visual Quickstart Guide, Ninth Edition. Casabona.
* Chapter 21 Getting Your Website Online . Chapter 22 Testing Your Website . Chapter 23 Improving Website Performance . Chapter 24 Web Accessibility

Examples

Learning Resource - Site Plan

"Learning ResourceProject Site PlanPurpose and Intended AudienceThe purpose of thi...

Photography Portfolio

"Purpose and AudienceMy final project is going to my photography portfolio. This y...

Project Plan

"Project PlansProject Statement and PurposeMy project site would be to recreate/co...

SITES - overall design considerations

Google My Business - Get Your Free Business Listing on Google – Google

Attract new customers with your free Google listing. Your listing appears right when people are searching for your business or businesses like yours on Google Search and Maps. Google My Business ma...

7 Proven Ways to Know Your Audience Better

Review any current data and analytics Look to previous successes among your audience Create buyer personas Conduct surveys Keep an eye on your competitors Monitor audience feedba...

Designing a new Foundation: Spotify for Desktop | Spotify Design

The new Desktop app has rolled out, replacing one of Spotify’s oldest and most loved clients. As a Design Team, it's often difficult (sometimes impossible) to take big risks in order to build...

Usability considerations

Accessible Websites: Best Practices for Educators | Tech & Learning

"If you have an accessible website, guess what? You’ve reached the widest possible audience,” said Laura Ogando, program manager digital literacy and inclusion for the New York City Depart...

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

Rubric - website development

How to Plan a Web Development Project - YouTube

Having a website project management plan is crucial to maximizing success when you are working on a web development project. Stay on top of your web dev projects and ensure you don’t miss any imp...

Website Design Checklist: The Blueprint for a Perfect Site | UX 4Sight

The website design checklist ensures that your site is visually appealing, user-friendly, and well-optimized. Also, it ensures that no aspect is overlooked, guaranteeing a high-quality and effectiv...

HTML validation tools - check your code

The W3C Markup Validation Service

Markup Validation Service Check the markup (HTML, XHTML, …) of Web documents. This validator checks the markup validity of Web documents in HTML, XHTML, SMIL, MathML, etc. there are other valida...

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

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

BEST WEB HOSTING SITES • TOP 10

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

How web bloat impacts users with slow devices

Another pattern we can see is how the older sites are, in general, faster than the newer ones, with sites that (visually) look like they haven't been updated in a decade or two tending to be am...

Ko-fi - Get Donations, Memberships and Shop Sales. No Fees!

"Accept donations, monthly memberships and shop sales - all in one placeStart accepting donations in 60 seconds. Grow your income by opening your Ko-fi Shop, offering memberships or selling co...

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