Mobile styling

screenshot

Click here to see the demo.

When writing code I always try to keep things simple and with smartphones, this is a really good idea. Compared to a desktop or laptop, a smartphone is a puny thing: much less screen area, and less bandwidth and processing power. Good reasons to keep those HTML and CSS files as small as possible.

The HTML

A simple HTML5 document. Notice the viewport metatag in the header and the calls to the stylesheet and jQuery. The body of the document has some h tags followed by a definition list (dl). Each defenition term (dt) gives the title of a chapter and is followed by an empty definition description (dd). I am going to use jQuery to load the chapter (AJAX) into the dd when the user clicks a dt.


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
	<meta name="viewport" content="width=device-width" />
    <title>Alice in Wonderland</title>
    <link rel="stylesheet" href="style.css">
	<script src="jquery.js"></script>
    <script src="script.js"></script>
  </head>
  <body>
<!-- page content -->
<div id="page">
<div id="title">
<h1>Alice’s Adventures in Wonderland</h1>
<h2>by Lewis Carroll</h2>
<h3>Illustrated by Sir John Tenniel</h3>
</div>

<dl id="text">
<dt class="chapter1"><span>I</span> Down the Rabbit-Hole</dt>
<dd class="chapter1"></dd>
<dt class="chapter2"><span>II</span> The Pool of Tears</dt>
<dd class="chapter2"></dd>
<dt class="chapter3"><span>III</span> A Caucus-Race and a Long Tale</dt>
<dd class="chapter3"></dd>
<dt class="chapter4"><span>IV</span> The Rabbit Sends in a Little Bill</dt>
<dd class="chapter4"></dd>
<dt class="chapter5"><span>V</span> Advice from a Caterpillar</dt>
<dd class="chapter5"></dd>
<dt class="chapter6"><span>VI</span> Pig and Pepper</dt>
<dd class="chapter6"></dd>
<dt class="chapter7"><span>VII</span> A Mad Tea-Party</dt>
<dd class="chapter7"></dd>
<dt class="chapter8"><span>VIII</span> The Queen's Croquet-Ground</dt>
<dd class="chapter8"></dd>
<dt class="chapter9"><span>IX</span> The Mock Turtle's Story</dt>
<dd class="chapter9"></dd>
<dt class="chapter10"><span>X</span> The Lobster Quadrille</dt>
<dd class="chapter10"></dd>
<dt class="chapter11"><span>XI</span> Who Stole the Tarts?</dt>
<dd class="chapter11"></dd>
<dt class="chapter12"><span>XII</span> Alice's Evidence</dt>
<dd class="chapter12"></dd>
	
	</dl>
	
	<br /><br />
	</div>
	<!-- end page content -->
  </body>
</html>

The AJAX source document

The source document is Alice's Adventures in Wonderland that I downloaded from Project Gutenburg and renamed "aaiw.html". The only modifications I made to it were to

  1. wrap each chapter in an appropriately id-ed div. (e.g. <div id="chapter1"></div>) and
  2. add the images (also from Project Gutenberg) in appropriate places in the text.

 

The CSS

You can see all the CSS by viewing the source in the demo, but I want to point out a few key excerpts.

To preserve the precious little screen space, I set the padding and margin on the <body> to zero. So this web page will look good in a desktop browser, I added a <div id="page"> inside the body and styled it as follows:


#page { max-width: 480px; margin: 0 auto; }

This centers the content in the browser window and prevents it from getting too wide to read. No one wants to read a 960px wide line of text!

Styling the buttons

I want the chapter titles to be like smartphone-style buttons so I styled them as follows:


dt {
  font-size: 14px; 
  font-weight: bold;
  color: #fff;
  font-family: helvetica, sans-serif;
  text-shadow: 1px 1px 1px #246;
  padding: 6px 12px 8px 18px;
  margin: 0 auto 3px auto;
  background-color: #48a;
  width: 86%;
  border: 1px solid #48a;
   -webkit-border-radius: 12px;
   -moz-border-radius: 12px;
   border-radius: 12px;
   cursor: pointer;
}

dt:hover { background-color: #3af; }

It starts with basic font styling, sizing and coloring and then adds some CSS3 rounded corners and changes the cursor to show its clickable. I added a generous amount of padding to make them finger sized - an important consideration with touchscreens.

At one point I played with adding "-webkit-gradient" but I don't care for gratuitous gradients all that much and I've heard that rendering CSS gradients uses a lot of processing power.

Solving probems

I ran into a few difficulties that I had to work around with some CSS.

One was that the chapter number and title was included when the div AJAXed into the dd. This was easily solved by setting the display of this h2 and h3 to "none".


#text h2, #text h3{
  display: none;
}

Another problem was that some fancy typographic effects (e.g. the long tail) were wrapped in pre tags and this was causing the chapter that had such effects to shrink to fit long lines into the screen width which broke my layout. This was solved by setting the white-space property to pre-wrap which allowed the lines to wrap.


#text pre {
  white-space: pre-wrap;
  font-size: .9em;
  margin: 0 4px;
  }

Styling the images

The images provided by Project Gutenburg were of various dimensions. I wanted some images to fill the screen width and some to take up just part of the screen with the text wrapping arond them, so as I added the images I gave each the class of "full" or "half" and styled them with


#text img.half {
  width: 50%;
  float: right;
  margin: 0 0 0 8px;
}

#text img.full {
  width: 90%;
  margin: 0 auto 8px;
  display: block; 
}

Note that the width refers not to the size of the image itself but to its size relative to its container.

A little flourish

I thought drop-capping the first letter of each chapter would be a nice touch, so I used the first-letter psuedo-class. It seems to work only in Safari, but it's just a flourish.


#text dd { text-indent: -4px; }

#text dd:first-letter {
  float: left;
  font-size: 48px;
  line-height: 24px;
  margin: 2px 5px 0 0;
}

The jQuery AJAX machine

The code is heavily commented to explain the logic.



$(document).ready(function() {

  $(window).scrollTop(0);

  // hide all the content divs
  $('dd').hide();
  
  //function that runs whe a user clicks on chapter link
  $('dt').click(function(){
	//capture the class of the dt
	var which = $(this).attr('class');
	var thetarget = 'dd.' + which;
	var book = 'aaiw.html';
		
	// replace 'chapter' so inchapter contains just the number
	inchapter = which.replace('chapter','');
	//append className to book filename
	var thechapter = (book + ' #' + which);

	//load chapter into the dd
	$(thetarget).load(thechapter);
		
	//handle the hiding and showing of dd's
	if ($(thetarget).is(':visible')){
		$(thetarget).slideToggle('fast');
		//scroll window page top
		$(window).scrollTop(0);
	} else {
		$('#text dd').slideUp('fast');
		$(thetarget).slideToggle('slow');
		//scroll window so chapter title is at the top
		var whereto = 0;
		var whereto = ((inchapter * 34) + 50);
		$(window).scrollTop(whereto);
	}
		
   });
   
});