Argument in America
This site is dedicated to preparing international students for academic studies at universities in the United States. Each unit will introduce 50 new vocabulary words, and each lesson within the unit focuses on a single skill: reading, writing, listening, or speaking. If you go through the lessons one by one from start to finish, and do not feel too lost or confused, you will find yourself amply prepared to take the TOEFL and enter university studies. It will be hard work. I do not recommend this site for beginners—only intermediate and advanced students will be able to cope.
Why Argument in America?
Good speaking is persuasive speaking. Good writing is persuasive writing. There is always an argument, and there must be support. This site is my first full-scale attempt at responsive design. It uses one template for all pages, with built-in modules to support three different content sizes: main (medium), supporting (small), and oversized (large). Since all of those modules accept virtually any type of content (text, images, tables, etc), this template gives me a good variety of layout options right out of the box. However, if it proves too limiting for what I want to do with a particular page, the template’s underlying grid allows for many more possibilities, and with just a few additional lines of code in a page-specific stylesheet, I’m off to the races.
Of course, nothing about the approach I’ve described so far is peculiar to responsive design. The amount of layout versatility this template enjoys is most applicable to a desktop display, a large canvas whose luxurious expanse of screen real estate is growing less relevant with every iPhone sold. To be properly responsive, this thing needs to work well in a variety of screen contexts. Luckily, my grid is designed to scale, and the display of each of the content modules (as well as page-specific styles) can easily be modified within the grid to suit the width of the user’s viewport.
Navigating this Site
Though my design began with the desktop and scaled down from there, the site is actually built in reverse order, for reasons expertly outlined in Luke Wroblewski’s superb Mobile First. In that order, the diagrams below illustrate what I’ve described above. Please note that while the grid and module widths have their basis in pixels, the widths are not fixed, so the numbers actually represent proportions.
Ask not what ASCII can do for you.
Since responsive design’s fluid nature requires widths to be specified primarily in percentages, and my twitching neuroses demand precision to as many decimal places as possible, my CSS is full of scary-looking numerals. I was careful to add comments explaining where each percentage came from, but the comments still worked best in conjunction with an image.
Impress your friends!
Now that you know the underlying logic that shapes the pages on this site, I encourage you to regale your friends and family with the details at your next gathering. Bring a projector and laser pointer. They will thank you.