Download AJAX Todo List Version 1.0 (6kb)

Comments, suggestions and general feedback are welcomed

Here’s how I did it.

The Core PHP

I googled and found this PHP code courtesy of Andy.

<?php

$mobile_browser = '0';

if(preg_match('/(up.browser|up.link|mmp|symbian|smartphone|midp|wap|phone)/i',
    strtolower($_SERVER['HTTP_USER_AGENT']))){
    $mobile_browser++;
    }

if((strpos(strtolower($_SERVER['HTTP_ACCEPT']),'application/vnd.wap.xhtml+xml')>0) or
    ((isset($_SERVER['HTTP_X_WAP_PROFILE']) or isset($_SERVER['HTTP_PROFILE'])))){
    $mobile_browser++;
    }

$mobile_ua = strtolower(substr($_SERVER['HTTP_USER_AGENT'],0,4));
$mobile_agents = array(
    'w3c ','acs-','alav','alca','amoi','audi','avan','benq','bird','blac',
    'blaz','brew','cell','cldc','cmd-','dang','doco','eric','hipt','inno',
    'ipaq','java','jigs','kddi','keji','leno','lg-c','lg-d','lg-g','lge-',
    'maui','maxo','midp','mits','mmef','mobi','mot-','moto','mwbp','nec-',
    'newt','noki','oper','palm','pana','pant','phil','play','port','prox',
    'qwap','sage','sams','sany','sch-','sec-','send','seri','sgh-','shar',
    'sie-','siem','smal','smar','sony','sph-','symb','t-mo','teli','tim-',
    'tosh','tsm-','upg1','upsi','vk-v','voda','wap-','wapa','wapi','wapp',
    'wapr','webc','winw','winw','xda','xda-');

if(in_array($mobile_ua,$mobile_agents)){
    $mobile_browser++;
    }
if (strpos(strtolower($_SERVER['ALL_HTTP']),'operamini')>0) {
    $mobile_browser++;
    }
if (strpos(strtolower($_SERVER['HTTP_USER_AGENT']),'windows')>0) {
    $mobile_browser=0;
    }

if($mobile_browser>0){
   // Do something if it's a mobile browser

   } else {
   // Do something if it's not a mobile browser

}

?>

Basically, $mobile_browser is set to 0. If any mobile user agent is detected +1 is added. At the end, there is a simple if else statement – if $mobile_browser still equals 0 then it’s a not a mobile browser, else if a user agent has been detected it is a mobile browser.

The Changes

I saved this in mobile-detect.php and included it in every page. Mobile browsers got fed mobile-style.css while normal browsers got the default stylesheet. For extra protection, even if no mobile user agent was detected, a handheld media type was still added – so any mobiles slipping through the net *hopefully* still use the right stylesheet

Does it really matter though, or is it simply personal preference? The answer depends on the amount of content in the stylesheet. However, there are 3 formatting issues that matter more than whether it’s horizontal and vertical.

1) Sectioning

It is crucial to divide your stylesheet up: header, sidebar, content, footer etc. This makes it easy for others to make changes to your stylesheet, and on big projects with thousand of lines of styles with multiple people working on it, clear sectioning is elementary.

I use good old:
/* Header */

Simple, neat, does the trick. When working on big projects, the headings need to stand out a bit more then my everyday style, so I use this:

/* ——————————
Header
——————————- */

Again: nice, simple, does the job. There is no need for excessive size, 10 lines of fancy characters or  ChAnGeDcAsE.

2) Alphabetizing

Imagine: You have to change the links in the header from white to black – which line is easier to edit:

#header a {background:#666;color:#FFF;display:block;padding:5px 10px}

#header a {display:block;background:#666;padding:5px 10px;color:#FFF}

Of course, the first one is easier – especially when there are lots of declarations. There are two ways to alphabetize:

1. As you go – This involves simply writing the styles in order as you type them.
2. After completion – After the whole project is finished, simply run it through a CSS formatter which will not only alphabetize but make it look pretty!

3) Consistency

Honestly, I would not think this needs to be said: Use the same formatting throughout!

There are stylesheets that look like this – I kid you not:

#header {
	background:    #000 ;
     font-family: Arial;
color:#FFF;
	margin: 10px 0    0 0px;
}
#header h1 {  padding:  3px;font-size:1em; display:  inline  ;}

Insane! A CSS formatter comes in handy here; just pop the CSS in and it not only spaces it all the same, it makes it easier to read and look damn nice (presentation, presentation, presentation!)

The 3 Main Formats

Before diving into it, first we’ll go through the main 3 image formats.

GIF (Graphics Interchange Format)

The most common graphics format, it supports a palette of up to 256 distinct colors. It also supports animations and allows a separate palette of 256 colors for each frame. The color limitation makes the GIF format unsuitable for photographs, but it is well-suited for more simple images such as graphics or logos with solid areas of color.

More detailed information on Wikipedia

JPEG (Joint Photographic Experts Group – name of the committee that created the standard)

JPEG is the most commonly used method of compression for photographic images. The degree of compression can be adjusted, allowing a balance between size and quality. JPEG is not recommended for any images other than photographs.

More detailed information on Wikipedia

PNG (Portable Network Graphics)

PNG was created to improve upon and replace GIF’s. PNG’s come in a variety of flavours: 8bit (the same as GIF) up to 48bit. It also supports alpha transparency. One feature of the PNG format is gamma correction. Gamma correction is the ability to correct for color differences between computer systems, allowing consistent color display across platforms. Embedded in every PNG file is a piece of metadata that specifies the gamma setting of the computer on which the image was created. The idea is that when the PNG is displayed on another computer, this gamma value can be extracted and used to compensate for color differences between the two systems, thereby displaying the PNG as the author intended. The problem is that this causes havoc as for instance there will be a #09C background colour, and a png with a solid #09C background. The browser will then “correct” the gamma, which changes it from #09C into whatever it “should” be – meaning the background and the image then become different colours even though they are the same! This is one of the reasons PNG never took off. Nowadays it’s not a problem as most browser ignore the gamma completely, and programs exist to remove the gamma metadata.

More detailed information on Wikipedia

Which is best?

Rule of thumb: Photos make jpeg, the rest make png.

8-bit PNG is smaller than GIF for anything over ~100 bytes. The best way to compare the file size when saving the image is to select GIF format and see the file size, then select PNG format and see what its size is.

But, PNG has a gamma problem as you mentioned before! Thankfully, there is a solution to the PNG Gamma Problem. PNGout not only removes the gamma section fixing the problem, it also compresses the images another 10-30% with no loss of quality! There are a selection of similar programs around, many of which are command line and aren’t as simple.

5 steps to optimising images

Even though some people will be screaming “obvious!”, I will go through the steps to optimise your images in Photoshop for those who don’t know how to optimally save images (You can adapt these for other imaging software).

1. With your selected image, go to “save for web and devices”
2. Select your image format
3. If GIF or PNG, pick the lowest amount of colours without visible loss of clarity. If JPEG, find a good quality/size balance (My personal preference is the 60-65 mark)
4. Repeat this process for all the images
5. Fire up PNGout. Simply drag+drop the all PNG images from Windows Explorer onto PNGout and it will work its magic. Alternatively, you can use the PNGout menu to open the folder containing the images.

All done!

The program has a free 30 day trial, so you can give it a go before deciding whether or not to purchase it (it’s $15 or something cheap like that)

The best way to beat your enemy is to understand how they work. A very detailed explanation can be found here: http://msdn.microsoft.com/en-us/library/bb250481(VS.85).aspx and a great site to bookmark for reference when the time comes is here. That’s the end of this post folks – those articles are so comprehensive I’m not going to reinvent the wheel.

The Theory

Let’s say you have a logo and a menu contained in a div named header. The logo is floated left, and the menu is floated right, and the div has a background image. Due to the way browsers deal with floated objects (great explanation, however poor solution) containers don’t “wrap” the floated elements inside it by default. So what you’ll notice is that in this example, the background image on the header will disappear!

The Bad Solutions

Add a <div style=”clear:both”>, <br clear”all” /> or <hr />

A common solution to this has been to add a “clear:both” whether on a div, br, hr or some other wacky tag which is inserted at the bottom of the header div after all the content. This makes the container wrap it’s floated elements. The problem is an emtpy tag has to be brought into the HTML to deal with a styling issue, which is meant to be taken care of in the CSS.

Add a clearfix class

Let’s avoid adding a non-semantic empty tag by adding a non-semantic class, yay! I’d rate this the worst of the lot as it’s trying to be clever by avoiding non-semantic markup yet it adds non-semantic classes (which is just as bad).

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

Not only that, it doesn’t work in IE6 as it doesn’t support :after, so you have to use a * html hack or a conditional comment to feed it additional rubbish.

The Good Solution

You have an element you want to clear. Firstly, add “overflow:hidden” to the container in the CSS. This generally makes Firefox, Opera and Safari perfect. For IE 6, add a width:100% (or px width if you don’t want 100%) which trips hasLayout, and that does the trick in most cases. Alternatively, you can also float the container (though it’s not my preferred method, why float something if you don’t need to)

#container {float:left;overflow:hidden;width:100%}