Mobile first development and IE8 support

What is 'Mobile first development'?

When coding a responsive website, there's two approaches one can take:

1. First built the full webpage suitable for large screen devices and then add styles to essentially scale back that design for smaller screens, often choosing to hide elements unsuitable for small screens.
2. First build your webpage for a small screen device, and then add more styles for how this content appears on larger screens, again added styles to handle new elements you may wish to introduce for larger screen users.

note: you'll notice I don't refer to designs as 'mobile' but prefer 'small screen'. This is because a responsive design should be suitable for the screen size it's being displayed on and not trying to identify the device as mobile, tablet, notebook etc...

The second approach is Mobile first development. The advantages of designing for mobile first is that it forces you to focus on the content of the webpage and it's purpose without getting carried away with fancy page layouts and design. It also encourages you to honour your small screen users and write design that it's suitable for them. They're not getting a limited experience, they're now getting the primary experience.

The problem with IE8

So the issue with IE8 is that it won't read anything inside a css media query - it just ignores the rules entirely. Using Shiv enables Html5 support, but not CSS3. 

So if you write all your core CSS for mobile and put your large screen rules in media queries, you'll find that IE8 will essentially load the mobile version every time.

The fix

The fix is in how you format your CSS. Whilst writing your 'mobile first' CSS you need to be conscious of any rules that apply specifically to the small screen device. These 'small screen specific' rules need to go inside their own media query (eg: max-width: 799px). Better yet, write your CSS as normal, when you come to adding rules for larger screens don't duplicate the small-screen rule, but instead move the small screen rule into its own responsive media query and let your new rule replace your core CSS.

example:

.hero-banner{
    display: none;}
@media screen and (min-width: 800px) {
    .hero-banner{ 
        display: block;    }
}

would now become:

@media screen and (max-width: 799px) {
    .hero-banner{
        display: none;    }
}

Summary - TL;DR

So it's possible to still develop for mobile first however the mobile specific rules need to go in a media query to stop IE8 loading them - that's if you care about supporting IE8 and Windows XP users ;)

Sandboarding

Found an old cd with some photos and a video clip of a Cornish adventure... One of my friends had built a prototype sandboard, which in theory 'should work'. We climbed the biggest sand-dune we could find and started practicing our new sport...

Boxee media center on an Acer Revo 3700

It's amazing that you can get a full HD 1080p home media center for under £200. The Acer Revo 3700 is a prefect piece of hardware for running Boxee's free media center software. If you're thinking of gettin something like this for your home, it's definately worth checking out Boxee's own hardware - the Boxee box by Dlink, which is an acquired taste in design, but also comes with the Boxee remote with a full keyboard on the back. I decided to go with the Acer Revo instead, as it left more options for updating or switching to other software down the line. Note Boxee is built on xbmc and if you're not keen on the social sharing side of Boxee, it's well worth checking out! So here follows a brief guide to setting up your Acer Revo 3700 as a home media center.

1) Assemble your kit, hook up your Revo to your TV for audio or sound, i use the VGA and standard audio out, but there's HDMI there too, either way you'll get the full 1080p presuming your TV can handle the resolution.

2) Install Ubuntu. The cheaper Revo comes with Linux Linpus installed, I created a Live USB of Ubuntu 10.10 and booted to usb. To do this press f12 when you turn it on at the initial Acer screen and select the USB stick from the menu. Then once the desktop loads, use the icon on the desktop to install Ubuntu, let it use the entire disk and replace Linpus on your Revo.

3) Once instaled there's some tweeking to be done, first is to fix the wireless card. Open the terminal and type:

sudo gedit /etc/modprobe.d/blacklist.conf

then add the following line to the end of the file:

blacklist rt2800pci

press 'Ctrl + O' to write the file, then 'Ctrl + X' to close it. That's it! the first time you shutdown the machine it'll freeze, when this happens, hold the power button in for 6 seconds and it'll power down suddenly. Press it again to power it on and it shouldn't freeze again now the fix has been applied.

Then apply the updates. Go to System -> Administration -> Update Manager install all updates. It'll take a while. Then go System -> Administration -> Additional Drivers and enable the nvidia driver (recommended). This will require a restart to take effect.

4) next install Boxee. Go to www.boxee.tv and download the version for Ubuntu Linux. Once downloaded install the software.

That's essentially it. You're now ready to go, launch Boxee and add your videos to the library and enjoy watching some videos!

From Wordpress to Blogger

As a PHP web developer, i often use my blog as my testing ground for new stuff. I've always used Wordpress for small sites and blogs and Drupal for my larger sites, but always wondered how well Google's Blogger works...

Seeing as they use it for their own Google blogs (webmaster, analytics, etc..) i thought it can't be bad, and obviously you don't have to worry about SEO, as i'm sure they pretty much have it covered, so I decided to move my blog and give it a try for a while.

Moving was pretty easy. First I created a new blog using my Gmail account and chose a theme. Second i exported my blog from Wordpress and used http://wordpress2blogger.appspot.com/ to convert the xml backup file onlline. Third I imported the new backup file into Blogger and tweeked some of the themes widget settings to get my 'Labels' displaying as links - done.

Hope this new platform will inspire me to blog more often. I'm still busy running the Xbox gaming blog: theLostnFound but I have lots of other stuff i want to blog about, which'll end up here.

Mac Tip: How to launch applications - Fast!

Here's a little tip of how to launch Applications really quickly on your Mac. This makes use of the Spotlight feature to search for the application you want to launch, which saves you all the work of going through the finder and searching for the launch icon.

Tip: Hold the 'apple key' and press 'Space' this is really easy as they're next to each other and can easily be done with your left index finger and thumb. This opens the spotlight searchbox, now start typing the applications name. Within a couple of letters it should have selected the app you're after, so just hit Enter to open the app.

eg: 'Apple key' 'Space' 'i' 't' (searches and selects itunes and enter opens it straight away!

Seventh Day - Skate Video

This video was made circa 2006 and reminds me of the time I spent living in Cornwall and riding long boards for the Christian Skate clothing label - BelieveClothing.

Particularly happy with capturing my 360 on film (at 17:21 mins)

A video about Skate-boarding in Cornwall. With a focus on long-boarding and downhill sliding.

The video documents a group of Christian Skaters as they reach out to young people of Falmouth Cornwall. I am both in this video as well as helping film for it. This video was edited and produced by David Renyard - davidjdesigns.me.uk

WD500 External Hard Drive Stopped Working

Recently my Western Digital 500GB external drive stopped working. Fine one day, then no power the next.

Symptoms: No Power at all, no noise or spinning. The power unit itself will light green when not connected to the drive, but as soon as it's attached the green light goes out. If connected the power light will stay light for 1 second, then no power.

This seems to be a common fault with this drive and it would seem obvious that the power supply has failed. However following through the problems these guys had, it would seem it's not the power supply, but the external casing that's causing the drive to fail.

Solution: Rest assured your data is probably still safe, as the hard-drive itself is likely to be fine. You have a couple of options:

1. Buy a new external hard drive casing/enclosure, this costs around £20-30


2. Fit the drive in you Desktop PC as an internal drive.

Seeing as you can buy a new 500GB for under £50, I didn't want to spend £30 on a case. So went with the internal drive method. It's easy to do and if your PC's not too old it'll probably have everything you need inside the case!

First take your external drive to peices, just strip off the outer case until you've freed the drive. It's a standard 3.5" SATA HDD. It has two connectors on the back, the smallest is the SATA DATA connection that connects it to the motherboard, and the longer connector is for power.

In your desktop you'll probably have a spare power socket on a ribbon cable behind your existing drive, you can also use the small SATA cable to connect it to the motherboard.

Boot up your PC and your away! The drive will be recognised in the My Computer window. If your PC's a bit older it may only have IDE connectors, but all is not lost, you can pick up an IDE to SATA converter that'll allow you to connect it up.

I bought a SATA and Power connector from Maplin for just under £4.

Good Luck!