Mr. Justin “JET” Turner CSCI 3000 – Fall 2015 CRN Section A – TR 9:30-10:45 CRN – Section B – TR 5:30-6:45

Responsive Web Design Responsive Web Design (RWD) is the concept of building a site to render well on various platforms and screen sizes “Content is like water” RWD employs various HTML/CSS/JS to achieve the various content layouts on different sized screens Fluid Grid Flexible Images Media Queries Responsive JS

Fluid Grid Fluid Grid is the concept of laying out the page like a grid, and giving each element a certain number of cells in the grid When we discussed basic layout, using float, we set our menu to 20%, our sidebar to 20% and our main content to 60%, this is a fluid grid, where we broke that row into 1/5 sections, and gave the main content 3 of those sections 20% (1/5)60% (3/5)20% (1/5) MENUMAIN CONTENTSIDEBAR

Fluid Grid How we divide up the page is entirely up to us and our content The header area might be broken into 1/3 sections, with 1/3 for the logo, and 2/3 for the top menus Another key component to consider, is our total screen space 20% of a desktop screen is an easy to read size 20% of a tablet is probably ok 20% of a vertical phone is not really going to be usable

Fluid Grid So, often we determine grids for various screen sizes Desktop has 1-12 sections Tablet has 1-8 sections Phone has 1-5 sections (horizontal) Phone has 1-3 sections (vertical) Then, as we adjust from one screen size to another, we take into account how many sections the content needs to properly display

Fluid Grid We can also take a section, and break it up further Main content is 60% This could be made into three 20% sections, two 30% sections, etc Every option we decide to use on our desktop view has to be considered as we translate down into other screen sizes For example, the ung.edu allows the main content area to be broken into 4 columns if there is a menu and no sidebar, if there is no menu, the max is 5 columns

Flexible Images Now that our content is broken into containers that we can later adjust for different screen sizes, we need to consider images Images do not scale up in size very well in most browsers, the stretching often leaves them looking pixelated So, we need to start with an image that is the appropriate size for the largest we will want it to be, and then scale it down based on the container we put it in on the page

Flexible Images Depending on how an image is used, it may need to be larger on a phone or tablet than it would be on a desktop, so we need to take this into consideration when determining image size For example, if we have our image set to be 2/12 sections in our desktop view, but decide on phone view to make it the full width (3/3), then it would larger on the phone The key to flexible image sizing, is making sure the image respects the size of the container it is in as the maximum size

Flexible Images If the container is 200px wide or 50px wide, we expect the image to stay within the container, and not expand past the bounds Our tricks for doing this include: max-width: 100% height: auto This ensures the image fills the entire width, but automatically choses a height that maintains the aspect ratio of the image to prevent stretch/skew issues

Media Queries Finally we look at media queries, which is the final part of our HTML/CSS side of RWD Media Queries allow us to apply specific styles based on the browser window only screen and (max-width:900px){} This creates a place where we can apply CSS that will only take effect if the width of the screen is 900px or less We can then stack these queries to handle various sizes differently y.asp

RWD Like many tasks related to web development, there are several tools online to help get you started Fluid Grid HTML/CSS Builder: There are also several tools online for helping you get your media queries initially set up

Responsive JS As we have discussed before, we can use onresize() to determine when a window size changes and execute JS based on the change But, this is a problem many programmers have run into before, so with a little bit of searching, we can find some pre-built examples of how to do this One such example, is called jRespond Since this is on github, we will want to download our own copy and use that instead of a CDN

jRespond The basic concept behind jRespond is setting up begin/end points for various device types, then executing specific functions at the begin/end points For example, when you leave tablet view around 980px, you might execute one function that removes some tablet specific JS, but then execute a desktop function to initialize the desktop version of the JS

RWD JS To achieve the best final view for different devices, sometimes we need to move content from one container to another when shifting from one screen size to another Instead of just putting that content in multiple places before loading the page, we can let JS move the content for us based on the page size

Project 1 – Responsive Site Due: Oct 8 th Build a responsive site with 3+ pages on a separate sub- domain (ex: project1.yourdomain.com) Screen Sizes: Desktop – 1280 X 1024 Tablet – 1024 X 768 Phone – 320 X 480 Home Page Header/Footer Slideshow

Project 1 – Responsive Site Interior Page 1 Header/Footer Main Content + Sidebar Content Interior Page 2 Header/Footer Main Content (no sidebar) Table that fills content area on desktop view (use JS/CSS to adjust for smaller views) Extra Credit (2pts) Tabbed content in desktop view that switches to vertical expandable content in tablet/phone views

Next Time Begin PHP I am getting us a day ahead, as I am going to be out Sept 22 nd to present at a conference, which was supposed to be the first day of MySQL Sept 10 th – PHP Sept 15 th – PHP Sept 17 th – MySQL Sept 22 nd – No Class Sept 24 th - MySQL