Not everything is accessible. But we should try. Image of Paris.

Responsive Web Design

Trying out Skeleton? Use the Design Shack article for a refresher. I recommend you read parts of it. It refers to an older version of Skeleton. When you’re looking around for samples, be sure you’re looking at the most recent version of Skeleton.

Skeleton is incredible and yet there is nothing “out of the box” about it. You will use your CSS knowledge working with this template! Also, consider searching for others who are using Skeleton to see what they’ve made with it.

We use the Liquid layout from chapter 15 first to get you used to the idea of using someone else’s write-up/markup… templates.

Responsive web design (RWD) is trying to make the web page content look good on any size screen or device. Essentially, you use CSS and HTML to fit the content, through resizing (shrinking/enlarging) or hiding content. In many case you are also moving the content–for example the navigation–depending upon which device is being used to view the page.

NOTE: When using RWD you primarily

work with em and % versus pixel (px).

Liquid layout – differences between pixels and percentages

Responsive Web Design

I really can’t say it any better than A List Apart – they have so many articles about all the nuances of responsive web design. However, I do think that one of the best ways you can come to understand it is by experiencing it. That’s why this week is largely focused on you using two layouts. One that could be responsive and one that is.

In addition to several online resources you can use to test your layout, you can load a Chrome add-on to your Chrome web browser; there are at least two in the web store.


Download SkeletonScreen Shot 2015-06-01 at 2.56.13 PM

Download Skeleton. Look at the code. Play with the grid ideas. Explore/play with Skeleton sample landing page.

Get the  source code for Liquid Layouts (from HTML & CSS Book code page).


When you start the assignments for this week, upload your work and then practice using some of the responsive online tools, or the Google Chrome app/add-on options.


Chapter 15 Layout


Layout #01 Liquid

  1. Reproduce the Liquid Layout covered in chapter 15 of your text, but include your own content–no lorem ipsum, etc.–anything quoted must be cited. Every column of this layout should have valuable content that supports your plan/site/goals. (12 points)
  2. Feel free to make the layout work for you, add your own flair. Make it your own! (3 points)
  3. Add your color choices from your recent color work practice to the CSS. (3 points)
  4. UPLOAD Layout  #01 to your space on the CITS server or wherever you are storing your work for public viewing. (1 point) You may want to call this liquid.html
  5. Inside of Blackboard submit a working link to your liquid layout both for grading purposes. (1 point)

Layout #02 Skeleton
THERE is a rubric for scoring this inside of the Discussion board.

  1. Download
  2. Use the skeleton framework (41% of 25 points); in addition to the content you put into layout #01, add three columns of information (15% of 25 points)
  3. UPLOAD the css file and skeleton.html file to your space on the CITS web server, or wherever you are doing your class work. (4% of 25 points) You may want to call this skeleton.html
  4. Inside of Blackboard navigate to the discussion board and submit a working link (4% of 25 points) to your responsive web page (using skeleton). Also, include a three or four paragraph explanation of the main differences between the liquid layout provided in chapter 15 of your text and Skeleton. (36% of 25 points)
  • This week has you focusing on two main elements: premade layouts and Responsive Web Design.
  • You are Learning how to best read and review someone else’s design. Working with, saving, modifying, and uploading all the elements you need to get Skeleton to work in your website space.
  • Developing the skills to download a product like Skeleton, unpack it and review samples prior to using it is an essential skill in web design.
Reading & Watching
  • READ Chapters 15: Layout & 17: HTML5 Layout
  • Can you learn something first by reading about it from those who are “in it” everyday? Take an hour – yes, a whole hour – and do a bit of research on what responsive web design means; look around this ALA (love this site) at 33 articles on responsive web design and how to start thinking about Responsive Web Design.  
  • List Apart article (lists two grid tools available for use)
  • Additional links are provided in the resource section under the lecture tab.
When this week is completed you will be this far through the course.  


How far are we through the course?


260/500 points possible