Responsive Design

I’ve updated my theme here to make the layout more responsive depending on the device you view it in.  For both smart phones and iPads/tables, the layout linearizes. That is a fancy way of saying the right sidebar should scoot below the main content area, and everything will become 100% wide to fill the screen. 

I did this using CSS3 media queries, this technique only works in newer browsers, including Chrome, Firefox. and Mobile Safari.

First, the viewport tag will help different devices render the page correctly. After reading, Choosing a viewport for iPad sites, and A tale of two viewports — part two, I added this to my page template

{syntaxhighlighter HTML}

I then added three blocks of media queries to adapt the layout depending on the device, the first block linearizes the page content if the device screen is less than 1024px wide. The second and third blocks fix some font sizes so that text renders legible on different devices.

{syntaxhighlighter CSS}
/* LINEARIZE CONTENT */
@media only screen
and (max-device-width: 1024px) {
#wrapper {
width:auto;
padding:10px 10px 0;
}
#container,
#page {
width:auto;
margin:0;
padding:0;
}
#rgCenter,
#rgRight {
float:none;
clear:both;
}
#rgRight {
background-color: #e3e3e3;
padding:20px;
margin:0 -20px -20px;
}
div.span-10,
div.span-6 {
float: none;
width: auto;
margin-right:0px;
}
}
/* ipad / tablets */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px) {
body {
font-size:1.3em;
}
#wrapper {
width:1024px;
padding:20px 20px 0;
}
.dsq-comment-text {
font-size:1.8em;
line-height:1.5;
}
}
/* ipod/iphone3 */
/* Smartphones (portrait and landscape) ———– */
@media only screen
and (max-device-width : 480px) {
/* Styles */
body {
font-size:1.3em;
}
#wrapper {
padding:10px 10px 0;
}
#logo-floater h1 {
font-size:1.5em;
}
#page h1 {
font-size:1.3em;
}
#page h2 {
font-size:1.2em;
}
#page h3 {
font-size:1.1em;
}
}

Web Design is Evolving

I may be a bit late to the party with this observation, but web design is finally evolving. Mobile phones and tablets have freed us from having to use a laptop or desktop to use the web. Using HTML and CSS, designers can now use media queries to control how a site appears on different devices.  If done right, and done from the beginning to save costs, your website can be useable and look nice on multiple devices, without the need to setup a different mobile site or theme.

We may also be seeing the end of the tiny font fad that has made sites illegible for the last decade. It’s about time.

You see, in most cases, if you’re building websites with the font size set between 10 and 15 pixels, you are costing your clients money. And I aim to prove it.

16 Pixels.

Firefox Mobile not on myTouch 3G

Hoping to test out the latest beta of Mozilla’s Mobile Firefox but have a myTouch 3G?  You may be out of luck, while the official builds don’t support the chip in the device, there is an Arm 6 build which is listed as compatible.  I downloaded it and tried to install it, but it wouldn’t install either, despite having what I thought was enough free space available for apps.  Turns out it also requires 13MB space on the SD card (is that feasible?).

 

A List Apart: Articles: Apps vs. the Web

Another viable option for mobile development is to use a framework like Titanium or Phonegap to quickly build out an app using Javascript.  I’ve been looking at Titanium a lot lately and digging into its API.  Seems like you can build anything short of a game using its API and there’s a real buzz when you compile the same (or nearly the same) codebase to run on both Android and iPhone devices.

With this article, I’d like to share my experiences with both mobile web and software development to guide your future developments on the iPhone platform.

A List Apart: Articles: Apps vs. the Web