Argument in America

Learn English online. — Bring Argument in America with you wherever you go. This site is fully mobile responsive.

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.

Narrow viewport template proportions — For narrow viewports (up to 480 pixels wide), all content spans the width of four columns.

Medium viewport template proportions — For medium-width viewports (between 480 and 800 pixels), the margin widths double, the layout expands to eight columns, and an inset three-column module is introduced for supporting content.

Wide viewport template proportions — For wide viewports (above 800 pixels), the layout expands to twelve columns. The main content retains its eight-column width on the right, supporting content gets a dedicated four columns on the left, and oversized content spans the full twelve columns.

Wide viewport archive page proportions — This archive page is one example of how the grid allows me to build on the limitations of the standard template.

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.

For medium viewports (eight columns):

--------------------------------------------------------
|                         684                          |
--------------------------------------------------------
|    |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |    |
| 72 |36|  |36|  |36|  |36|  |36|  |36|  |36|  |36| 72 |
|    |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |    |
--------------------------------------------------------
|    |                    540                     |    |
--------------------------------------------------------
|    |Main (.medium) & Oversized (.large) Content |    |
|    |                (8 Columns)                 |    |
|    |------------------                          |    |
|    |     108      |  |                          |    |
|    |------------------                          |    |
|    |  Supporting  |  |                          |    |
|    |   (.small)   |  |                          |    |
|    |   Content    |  |                          |    |
|    |  (3 Columns  |  |                          |    |
|    |    Inset)    |  |                          |    |
|    |------------------                          |    |
--------------------------------------------------------

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.