Archive for the ‘Web’ Category

Jun 30 2008

Quadrichrome: a New Blog Layout

I’ve created a new blog template for my other blog. I’m calling it quadrichrome as it’s based on four primary colors. It’s a very pared down design, but hopefully easy to navigate and pleasant to look at.

I’m using the colors as a subtle color coding of sort:

  •  red is for primary content. Since red is such a loud color, I use it for the most important thing on the page
  •  blue is for navigation links, the default color for links since the very first web browser
  •  green is for administration and navigation
  •  yellow is for secondary and quoted content.

I’m thinking of using it on this blog as well. Thoughts?

Design Web
No Comments »

Jun 25 2008

How to optimize a web page for the iPhone

There are a few simple changes you can make to a web page to get it to display better on an iPhone (or iPod Touch). I’ve talked about this elsewhere but I’ve applied it to the layout of this blog as well. Try it out (or look at the screenshots below)!
What are those changes, you ask?
First, in the <head> section, add:
<meta name=“viewport” content=“width = device-width” />
The viewport tag will ensure that the page is taking the full width of the iPhone, without any horizontal scrolling.
Next, add this to the <body> tag:
<body onload="setTimeout(function() { window.scrollTo(0, 1); }, 100);">
This will make sure that once the page is loaded the Safari toolbar at the top will get scrolled out of view so that as much as your web page as possible is displayed on the screen.
Finally, you’ll want a custom stylesheet for the iPhone. My stylesheet is built-in into my blogging template (i.e. not an external file), so I added another <style> tag that overrides and modify the style defined in my “default” stylesheet:
<style media="only screen and (max-device-width: 480px)" type="text/css">

/* Override style definitions as appropriate */
body {
  width:480px;
  background:#f00
  margin:0;
  padding:0;
  font: large "Trebuchet MS",Trebuchet,Arial,Verdana,sans-serif;;
  color:#333;
 }

/* etc… */

.not-iPhone {display:none;}

</style>

There are other ways to accomplish the same thing that are described in Apple’s documentation
Note that I define a #not-iPhone class so that I can hide any content that I don’t want to display on the iPhone, such as large images or content type not supported on the iPhone.
In the iPhone stylesheet, I’ve changed the layout so that it fits the smaller screen of the iPhone (480 px). For example, I moved the sidebar at the bottom of the page, instead of on the right. To take advantage of the limited real estate, I’ve removed some margins. I have also simplified the layout and removed some of the background textures I used on when not on the iPhone. Finally, I used a resized version of the header image (resized to 480 px wide), so that it loads a bit faster.

Development Web
2 Comments »

Jun 24 2008

Template updated

Updated (more like deconstructed, tore apart and rebuilt from the ground up) my blogging template to work nicely with the iPhone. Still not perfect, but better. I’m sure I’ll continue to tweak it over time.

What are those changes, you ask?
In the <head> section, add:
<meta name=“viewport” content=“width = device-width” />
The viewport tag will ensure that the page is taking the full width of the iPhone, without any horizontal scrolling.
Next, add this to the <body> tag:
<body onload="setTimeout(function() { window.scrollTo(0, 1); }, 100);">
This will make sure that once the page is loaded the top toolbar will get scrolled out of view so that as much as your web page as possible is displayed on the screen.
Finally, you’ll want a custom stylesheet for the iPhone. My stylesheet is built-in into my template (i.e. not an external file), so I added another <style> tag that overrides and modify the style defined in my “default” stylesheet:
<style media="only screen and (max-device-width: 480px)" type="text/css">

/* Override style definitions as appropriate */
body {
  width:480px;
  background:#f00
  margin:0;
  padding:0;
  font: large "Trebuchet MS",Trebuchet,Arial,Verdana,sans-serif;;
  color:#333;
 }

/* etc… */

.not-iPhone {display:none;}

</style>

Note that I define a #not-iPhone class so that I can hide any content that I don’t want to show up on the iPhone, such as large images or unsupported media formats.
In the iPhone stylesheet, I’ve changed the layout so that it fits a smaller screen (480 px). For example, I moved the sidebar at the bottom of the page, instead of on the left. I also simplified the layout and removed some of the background textures I used on the desktop. Finally, I used a resized version of the header image (resized to 480 px wide), so that it loads a bit faster.

Design Web
No Comments »