(watch this video in a new tab or window)

  Responsive Design is a design approach allowing for one web page/site to be viewed easily and equally among many different devices and sizes.  It's essentially the way you make your site mobile friendly.  There was a trend not too many years ago to create a separate mobile (or m.) site specifically for smartphone users.  What a silly idea.  People have a very hard time maintaining one site, what made them think they could maintain two sites?  The other thing is that many things were missing on the mobile site.  Whenever I see a mobile site now, I just shake my head and close the window.   
  
With only a few lines of code you can make your site responsive.  Let's learn about it now.  Put this code on a web page and see how the background (and a few other things) change as you change the page size:   
  
/*Responsive Design Style differences for multiple sizes*/   
@media screen and (max-width:320px){   
  body {   
    background:#000;   
    color: #FFF;   
  }   
  A:hover {   
    color: #CCC;   
  }   
}   
@media screen and (min-width:321px) and (max-width:480px){   
  body {   
    background:#CCC;   
  }   
  A:hover {   
   color: #FFF;   
  }   
}   
@media screen and (min-width:481px) and (max-width:600px){   
  body {   
    background:#FAD2D9;   
  }   
}   
@media screen and (min-width:601px) and (max-width:768px){   
  body {   
    background:#D5FAD2;   
  }   
}   
@media screen and (min-width:769px) and (max-width:1024px){   
  body {   
    background:#77BE94;   
  }   
}   
@media screen and (min-width:1025){   
  body {   
    background:#D2DAFA;   
  }   
}   

(watch this video in a new tab or window)

Copy KirksSampleSite.zip to your web space and tweak it to make it your own. Change the color scheme and the menu and, of course, the content to your own interest. This is a sample site to show you how to create a whole site, and not just a page. You need to fill it up with something that is of interest to you. Make it yours. Have a peer evaluate it. Have your parents or friends use it and tell you what they think. Are there any typo's? Does it look different enough from the original to know that it's yours? Do you have an appropriate amount of content? Good luck and have fun.

(watch this video in a new tab or window)

How to do Project 02, MyInterest/index.htm

You can start off by downloading the zipped/compressed MyInterest site

It ended up in my downloads folder

Connect to your webspace

I like to open it in a new window

Then go to your IMS222 folder

Drag Project02Template into your IMS222 folder

Rename the folder to MyInterest

I have a folder structure with fonts and images, an index page which will be the home page

Use the Assignment Viewer to make sure that your project is found

Open up your page in the browser

Now let's start editing the site

Open the index.htm page with your text editor

Rename the title to what your interest is about and change it to your name

Rename the css link and document to match your interest

Change Page01.htm through Page06.htm to reflect your interest, deleting or adding pages as needed

Kirk's interest is music so I'm changing the names that I might use like band, drums, etc

I alphabetized my list

Rename the link to the page name, and rename the document (file) to match the new name

Save it and refresh your home page to verify the changes

I found a font that I like called FoferFont that I downloaded

Copy the font to your web space (in the fonts folder)

Add the new font to your css like the font1942 font

Add the new font to the rest of your css

Remove 'change or remove this' comments

Refresh the web page to see the new font

Working on the band page, I moved the video code to a videos page

So far I have only changed the navigation menu on the home page, so I will need to change the other pages later

Make sure your code and your documents match (including upper/lower case)

I lost connection to the server for a moment but the computer recovered automatically

Copy the title (which you may want to change later), navigation menu, and css lines to every page

On the final project, I will show you how to do header and footer info once and include it on each page using PHP

Change the responsive design to your own look

You will want some padding around the page content

The @media screen section of the css is where you will want to change the navigation menu and potentially other things for smart phones vs devices with larger screens

Change all colors in the css to your own style

You can use Lorem ipsum text while working on your pages but make sure you have real text by the time that it is due

Make sure that your content matches the page name and make sure you have enough content

Make sure your images meet our class image criteria (1024px wider or less, .5MB file size or less)

Name your images so they make sense and give them alt text that also makes sense

I lost my connection to the server, so I reconnected, if that doesn't work, try rebooting your machine and then connecting again

I had to quit my browser and re-open to go back to the web page

Remember to make little changes and reload your page checking the changes as you go

Test your responsive design as you go

I have my css set to change the number of columns for an article using column-count:3; to create 3 columns

Like the header, change the footer on one page, check it, and when you're happy, copy it to all of the other pages

When we use PHP, you will only need to make one footer

In this project, we are making a lot of individual web pages with the same look and feel so it looks like a whole site

When we use PHP, you will see how it really is a whole site

Let's look at the h1 css and change the colors

Now I'll remove the apostrophe from the navigation menu on all pages manually

On the drums page, I'll stay consistent with the h1 being the title of the page and put placeholder text for future content

Next I'll do the same type of thing for the itunes page; it's ok to use an itunes (and other company) logo/graphic but other graphics should be original

How much content do I need, it is based on your topic, think of things that you would expect to see if they land on your site; you should have enough information to keep a user's attention for 5 or 10 minutes

Remember, links off of your site should open in a new tab or window

Make sure you have good css, my demo site is not done yet

I'll change the hover color in the css under the mouse over link section

That should be enough to get you started on your second project, the MyInterest site

You should have all new original content, and the content should be different than what you will use for your final project (HireMe site); I recommend picking a topic of interest like frogs or puppies, not a general 'these are the things I like' type site

I look forward to seeing what you have