Responsive-Design

Responsive, Reactive, Mobile First, Progressive Enhancement, etc What does it mean?

Responsive web design (RWD) is an approach to web design aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones).

The web is viewed by more phones & Tablets than computers today.

Yet many web sites still have features that can only be used by a computer

Hover(Mouse-Over & Mouse-Out), Right-Click, Flash & Slide Shows that generate Flash, to mention a few.

as of 2015 - Google is ranking sites lower if they are not responsive

Responsive/Reactive/Adataptive: Your Site RESPONDS to different screen sizes. It needs JavaScript to READ the Client (your computer) to see what size screen you have. See how your web site looks in Different Width screens http://mattkersley.com/responsive/

JavaScript can read information about a CLIENT (your Personal Device), what operating system, what browser, what screen size, what windows size, etc.

Use Google Chrome's Developers Tools to see how the site would look on different types of Comp/Phone/Tablets.

Jen Kramer defines it as the ability to do 3 things:

Jen has a great article and ongoing discussion at Smashing Magazine
Jen's Bootstrap Workshop http://jenkramer.com/twitter-bootstrap-workshop
1. GRID Design - Display the page easily depending on screen width
2. Media Queries - Load different CSS dependent on Screen Width

Flexible Images - dependent on Screen Width
Server Side components to deliver media faster dependent on your device

In the beginning - web pages - were just that a page ... ex. http://homepages.sover.net/~jilmac/

The first line was <html>
and then you began your <head>

We then started using the <table> tag to identify areas of the page and CSS for page formatting

ex. http://jilmac.com or http://stweb.ccv.edu/CIS-2140-VO01-V14SP/jam08260/Menus/ResponsiveDesign/TableDesign/
The first line was

With HTML5, CSS & JS we are able to leave the <table> tag to organize data and use

<!DOCTYPE html> <html lang="en"> <head>

Note: Your <!Doctype will determine what rules you are judged on when Verifying your Site.

Responsive Page Design

- 3 Reasons Why Responsive Web Design is the Best Option For Your Mobile SEO Strategy

How do you use JavaScript to READ the Screen Size?

Web Site example: http://stweb.ccv.edu/CIS-2140-VO01-V14SP/jlo11180

Shane suggested an enhancement for the web page regarding your navigation table. CSS provides a 'float' property that allows objects to share the same space yet not interfere too harshly with each other. I noticed that your navigation table pushes your header image down. If this is intentional then just totally disregard me. But I think your page might feel better to a visitor if you try to add the float property to your table. Try this:

<head>

<style>

table {

float: left;

}

</style>

</head>

More about float and css here: http://www.w3schools.com/cssref/pr_class_float.asp