Home Page Home Page
Adapting to Adaptive Design 2

II. Anthology Text Pages

You are welcome to use my css and html for your own sites.  This is different from the previous page's code.
anthology.css
50%/100% images css
Youtube videos
HTML:

 <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html;
      charset=windows-1252">
    <title>Setting up your Louisiana Anthology Assignment</title>
    <link rel="stylesheet" type="text/css"
      href="../../louisiana_anthology/css/anthology.css">
    <link rel="stylesheet" type="text/css"
      href="../../louisiana_anthology/css/100_percent_images.css">
    <link rel="stylesheet" type="text/css"
      href="../../louisiana_anthology/css/50-100_percent_images.css">
    <meta name="viewport" content="width=device-width,
      minimum-scale=1.00">
  </head>

This page is optimized for mobile using the method described here.  Check out the source code if you want to investigate further.

For my text pages on the anthology, I wanted a single center column to carry the text.  I wanted a page that could be read on the back row of my classes off a screen, or on various devices used by students and the general public.  Plus, I wanted the whole site to be tied to a central css file.   Several months after the site was up, I wanted a more authentic font.  I spent an afternoon reading old maps of Louisiana and inspecting the fonts they used.  The closest font I found that was 1). free 2). installed on most computers was "Caslon224 Bk BT"; I added that to my font in my css file, and dozens of web pages changed their font in response.  Similarly, when I was studying  line length and readibility, I learned that single columns were most readable at about 65-70 characters per line.  I was able to modify the column width and font size until the pages on my site reached that average.

So what makes this page responsive?  Once again, the CSS.   After the basic CSS for the site, you see the following lines:

/* Mobile browsers only */
@media only screen and (max-device-width: 480px) {
    body {
      width: 320px;
      background: #e6d6b0 url(background2.jpg);
      background: #e6d6b0 url('../../images/background2.jpg');
      margin: 0;
      padding: 0;

    	}

div.maincontainer{
    width: 320px;
    text-align: left;
    background: url('../images/background2.jpg');
}

p {
  margin-left:5px;
  margin-right:0px;
  padding-left:0px;
  padding-right:5px;
	}

ul {
  margin-left:10px;
  padding-left:0px;
	}

ol {
  margin-left:10px;
  padding-left:0px;
	}

h1, h2, h3, h4 {
	letter-spacing: 0.1em;
	color: #432;
	margin: 0.075em 0.5em 0.5em 0em;
	border-bottom: 1px solid #432;
}

}

The line:

@media only screen and (max-device-width: 480px) {

tells the iPhone and other devices that are 480 pixels wide to follow the next set of directions.  Anything that is NOT changed stayes the same as the above css. The text on the page is now limited to 320 pixels; the images are 100% (from the other css file) of 320 pixels, meaning they fill the screen but don't go past it.  The Youtube code goes into the document itself where you want the video.  It makes the video larger on standard browers, but the screen size on iPhones.  Just change the url in the code to link to the page of your choice.  The main other trick to fit the text within the screen width is to make sure that long strings, like urls, are broken up so they will wrap down to the next line.

The main drawback to this adaptive approach is that it is optimized for only two sizes.  As more sizes of mobile devices come online, an approach is needed that adapts continually to various sizes.


III. Our syllabus and links pages

The approach I use on the syllabus and links pages is the SimpleGrid developed by Connor Muirhead.  He gives you a list of grid combinations you can use on your website.  These respond to the size of the browser rather than to a particular device, and so they respond at a number of sizes.  As a brower gets narrower, the columns actually begin to stack vertically; the page always fits within the screen. 

The drawback with this approach for me is that I'm not comfortable adapting it.  The previous methods are 'grey boxes' for me; I can adjust them a bit as needed.  This is a 'black box'; it may as well be a voodoo hex as computer code.  I put it in place VERY carefully and try not to jostle it.  For example, I'd like a tighter grid, with less space between the boxes.  I don't have a clue how to do that, much less how to do so without crashing the rest of the page.


IV. A Responsive Resume

I haven't used this yet myself, but I am looking forward to seeing how it works.  I understand LinkedIn is a popular professional networking site that is useful in job hunting, but that resumes are still important.  These resumes are instantly available to an employer with a smart phone, giving you an edge when you have one.


Home Page Home Page