The Battle of the Browsers

Class Discussion on History of Web Design:

• Slide presentation 30+ Years of Website Design
• Watch Evolution of Web Design
• Read Web Design History

Class Discussion on Principles of Web Design:

• Principles of Modern Design
• Site Inspire - Web Design Gallery

Assignment:
Use the following articles to answer the questions below in a Google Docs document:

1. Read 9 Principles of Good Web Design
2. Read Web design basics that will help you create a fantastic website
3. Read How to Achieve Visual Hierarchy
4. Web Design Trends to Watch

Questions to Answer in a Google Docs document:

1. Complete the table below using the article "9 Principles of Good Web Design"
   
   

   Principle	Purpose	How to Achieve it

2. Why should a grid system be used in design?
3. What considerations should be taken when choosing fonts?
4. What considerations should be taken when choosing colours?
5. What considerations should be taken when choosing images?
6. What is visual hierarchy?
7. What are 3 ways to achieve visual hierarchy?
8. Complete the table below using the article "Web Design Trends to Watch"
   
   

   Trend	Why is it useful?

Exercise:

Create a new document in Google Docs called Web Design tips. Add a section titled "RWD Basic Principles".

Read the w3Schools RWD Design tutorials from the intro to images and add notes to your Google Doc:

1. RWD Intro
2. Viewport
3. Grid
4. Media Queries
5. Images

Take a look at the code for some responsive templates provided by w3: https://www.w3schools.com/css/css_templates.asp.

Basic Responsive Design: columns for wide screen and rows for devices using CSS Grid.

'CSS Grid' is a newer collection of CSS properties that allow for the *fairly* easy layout of page elements in rows and columns.

'Media Queries* allow you to create sections of your CSS file for different sizes of devices. This allows your page to adjust any CSS property (likely at least a Grid Layout) when your browser width changes.

What to do:
1) Watch this video: The Easiest Way to Get Started With CSS Grid and use this code.
2) Add the following:

1. Three rows of three columns of content
2. An image between each row that is centered and responsive.
3. Creating a cool responsive heading with CSS, some lesser known CSS properties

3) Evaluation: 10/10 if completed correctly and validates, 8/10 if any mistakes, 6/10 if you tried.

CSS Grid Resources:

• display: grid;
• grid-template-columns:
• grid-template-rows:
• gap:
• grid-area:
• CSS Media Queries: Changing a Grid's Layout Based on Browser Width:
• Responsive Web Design Intro:
• Media Queries:
• Responsive Design CSS Templates:

This lesson will teach Mobile First Design and show you how to 'lay out' CSS grids using a different method: grid-area with grid-template-areas.

What to do:
1) Watch and code along with this video: Learn CSS Grid the easy way. Use the Github repository linked to under the video to get the HTML and css-start.css file, and the images.
2) Evaluation: 10/10 if completed correctly and validates, 8/10 if any mistakes, 6/10 if you tried.

More info:

grid-area

grid-template-areas

Sample responsive templates provided by w3 (only use the CSS Grid examples)

Exercise:

1. Open your Google Docs called Web Design Tips.
2. Read Responsive Design: Best Practice and Considerations. Add the following to your notes:
   • Why is it important to design for mobile first?
   • Add a Best Practices for responsive design list to your notes.
3. Add a section titled "Screen Sizes to Design For". Look at Global Web Stats https://gs.statcounter.com/. Viewport Size for Devices will tell you what devices use these resolutions (Note: the difference between Viewport Size and Device Resolution is explained here: Responsive Web Design — device resolution and viewport width.. Answer this question in your document: What are the 5 most popular screen sizes being used right now?
4. Make your browser window full size. Now go to What size is my browser window? http://howbigismybrowser.com/. Answer this question in your document: What is the size of your browser window?
5. Answer this question in your document: What breakpoints should be used on a responsive website being design today?

The Project: reorganize and and improve the responsive design of the Atmosphaire website using modern design principles.

Things to note:

1. No copyright may be broken. All written content on the site must be copied from the original site or written by you.
2. All images must be from the original site or be licensed for use on a commercial website. Include a credits.txt in the folder containing your website with links to all images you found online with their licenses.
3. The design must be responsive
4. The redesign should be just that: a redesign that fixes current issues with the website and improves upon it
5. Follow Steps to Build Your Website
6. Meet all the milestones on time
7. Meet all the marking criteria

Resources:

1. Look here for examples of modern design: Website Designs to Inspire You
2. Find additional images at MdInfoTech Graphics Resources.
3. How to Create a Website

Steps to Build Your Website

1. Organize your content.
2. Sketch a layout design on paper for the homepage (front page) and the content pages (all other pages). You may begin with a responsive design template from w3 schools CSS Templates if you wish.
3. Build the layout for both with div tags and the CSS Grid system. While designing the layout, put different background colors on each div tag so you can see where it is and how much space it takes up. These background colors can be removed when you start adding design and content. You should end up with two templates: a home page template, and a content page template. If you are unsure about building your template, use one of these: w3 Templates or one of the templates from any of the web building videos you have done.
4. Validate HTML & CSS.
5. Test that both templates are responsive by changing the size of the browser viewport, and use the Chrome Dev Tools phone emulator.
6. Decide how images will be used in the layout (logo, backgrounds, banners, content)
7. Get your images.
8. Pick a color scheme, perhaps from your images, and decide how it will be applied to text, logo, links, backgrounds etc.
9. Add the color scheme and images to your template.
10. Validate HTML & CSS.
11. Duplicate your content template for each content page of your site. You will have one CSS file and many HTML files.
12. Add your text and image content to each page.
13. Stylize your text and image content to each page.
14. Validate HTML & CSS.
15. You are done!

Milestones

• Milestone 1:
  1. Content Organization List: Organize your content by listing the landing pages (all html pages) and what is on each one.
  2. Draw the layout of your home page, and content pages
  
• Milestone 2: Build skeleton template for the responsive home page and your responsive content page. Include all your breakpoints. There does not need any actual content. Use different background colors on div tags to make them visible. Navigation/color scheme/typography/icons do not need to be completed yet. The screens below the home screen may be empty. Validate HTML and CSS. If you need assistance getting started, start with a responsive design template from w3 schools CSS Templates.
• Milestone 3: Finish the following for the home and content templates and for all breakpoints:
  1. application of your colour scheme to your design,
  2. all the content and design in the header, this includes fonts, colors, typography, your hero image on the home page (if you have one) etc.
  3. all the content and design in the footer(s),
  4. and text and design of navigation (Links currently go to home page (href="#"))
• Milestone 4:
  
  1. On the home page add all your actual content and typography and design
  2. Make one copy of content template for each content page you have: for example, if your content pages are "about" and "team" then create about.html and team.html.
  3. Modify each new copy enough so that it is visually obvious which page is which (change the page title and text).
  4. Make the links in the nav bar work for all pages
  5. Complete all the content and style one of your content pages.
  6. Validate.

Content and Organization(/5)

1. It is easy to find specific info
2. The user sees the most important info first
3. The content is concise, none is repeated
4. Content is grouped intuitively
5. No grammatical, punctuation, spelling errors
6. Headings are used to make content easy to navigate

	5	                4	                    3	                2	             1	 	
	All criteria met	Most criteria met	Some criteria met	Multiple Issues	    Incomplete		
	All criteria met	1 -2 issues	        3-4 small issues                            Very little or no changes made to 
	                                            and/or 1 big issue                          original site organization.

Navigation, Byte Size and Functionality (/5)

1. Byte Size less than 4 MB?
2. Home page called index.html
3. User Friendly navigation in both mobile and wide screen modes
4. Images, links and additional functionality all work

	5	                4	                    3	                2	            1		
	All criteria met	Most criteria met	Some criteria met	Multiple Issues	    Incomplete		
	All criteria met	1 -2 issues	        3-4 small issues                	    Minimal attempt to implement this criteria.

Usability and Presentation (/10)

1. Consistent look and feel, modern design
2. Responsive Design looks good in all sizes
3. Use of Principles of Design: Emphasis, Scale, Alignment, Repetition, Balance, Heirarchy
4. Use of typography
5. Tasteful use of colour scheme
6. Easy to read
7. Appropriate Favicon

	10	                8	                    6	                4	            1		
	All criteria met	Most criteria met	Some criteria met	Multiple Issues	    Incomplete		
	All criteria met	1 -2 issues	        3-4 small issues                    	Minimal attempt to create attractive, responsive, usable design.

Copyrights (/5)

1. no images break copyright, proof must be provided in a credits.txt file
2. all copy is from original site or written by you

	5	                4	                3	                2	            1		
	All criteria met	Most criteria met	Some criteria met	Multiple issues	    Incomplete		
	All criteria met	1 -2 issues	        3-4  issues	                             Not coded to standards taught in class.					
	
			

Code (/5)

1. HTML Validates
2. CSS Validates
3. There is only one CSS file
4. There is only one JS file
5. No JS Error in console
6. Practices separation of languages
7. Code that is taken from tutorials or other sources other than yourself is clearly commented with a link to the source. If credit is claimed for code that is not yours, the project will not be accepted.

	5	                4	                3	                2	            1		
	All criteria met	Most criteria met	Some criteria met	Multiple issues	    Incomplete		
	All criteria met	1 -2 issues	        3-4  issues	                               Not coded to standards taught in class.					
	
			

No copyright laws may be broken in your Website Modernization project.

Great video to watch: YouTube's Copyright System Isn't Broken. The World's Is.

• Read Copyright and Digital Media
• Read What happens when Web Sites break copyrights
• Read Fair Use
• Creative Commons licenses
• Free Image Resources: IT Graphics Links

Layout and Composition

• Watch Beginner Graphic Design: Layout and Composition
• Look up web design galleries for inspiring layouts.

Responsive Template with Navigation

Get demo code from W:\students\Wear_IT\Pick-Up\Web Dev 11

• Hamburger Menus
• w3 Responsive Top Nav
• How to Create a Fixed Side Bar
• For other navigation options: w3 How To Home
• Using Hover and other pseudo classes: How to Use CSS Hover Effects

How to pick a colour scheme for your website.

Watch

1. Watch Beginner Graphic Design: Color
2. Watch Color Psychology In Web Design
3. Watch How to Choose the Right Color Schemes for Your Brand or Website
4. Watch Amazing Color Resources For Designers

Additional colour resources:

1. Realtime Colors - pick a text color, background color, primary, secondary and accent colors and see how it looks!
2. Web Developer's Guide to Colour
3. Coolors - great color pickers
4. Adobe Color - will generate a colour scheme from a photograph.

Do this in class today:

1. Find a colour scheme for your website modernization project by picking colour codes (or names) for each of the questions below. Record these questions and colours in a Google Docs document titled "Website Plan".
2. What is the color of your main content text? What is the background color of your main content text?
3. Choose 2-4 additional colours for the rest of your website. Rank them in order of heirarchy. That is, list the colour that will be used the most first.
4. For example: mdinfotech.net uses the following colors:
   TEXT: #333 (dark grey) on white
   Highlight Colors: 1) #337ab7 (blue) 2) #735fd0 (purple)

• w3 Intro to Icons
• Icon Reference

1. w3 How to - Google Fonts, Google fonts
2. Your Assignment: Pick 3 Google fonts you think might work as titles in your website modernization project. Paste the name of these fonts in your Project Plan document under the heading "Possible Heading Fonts".
3. Watch Google Fonts Articles
4. Use Real Time Colors to see how the fonts look in web design.

• Watch Beginner Graphic Design: Typography
• Typography examples #1
• Emotive considerations for choosing typefaces
• Exploring typefaces with multiple weights or grades
• Best Google Font Pairings

How to Add a Favicon to your website.

Draw your own or upload an image: Favicon.cc

Using the responsive template with the hamburger menu, add the following:

• add a favicon,
• colour scheme,
• 1+ icon(s)
• a google font(s)
• 2+ images
• update the navigation link titles (they don't have to link to anything)

to make a unique design for a blog on a topic decided upon by the class. Note: filler text can remain as is.