Digital design and other shiny toys

iPad testing

Posted on by Paul

I did some work to make sure the site works on iPads. The large display means these devices can show the full page layout, rather than the mobile version I currently provide for iPhone, Android, Palm etc. Other than some tweaks to the spacing and fonts, the layout is much the same as the one for desktop browsers.

All my testing was done with the simulator so if anyone’s lucky enough to have a real iPad let me know how it looks. Checking things on a virtual device is never the same, so I’m sure I’ve missed something. Bug reports and comments are welcome.

Website on the iPad

Techy details for anyone who’s interested:

When viewing the site iPad users will be served a custom CSS file. The stylesheet link uses the following media attribute:

media="only screen and (max-device-width: 1024px)"

I detect mobile devices by querying the browser agent string, deciding if it’s an iPhone, iPad, Android, BlackBerry etc. As well as serving the correct CSS I can use this information to toggle Javascript functions used throughout the site. For example, BlackBerry phones take a very long time to render pages containing Javascript and often crash, so I simply disable it on these devices.

Next up will be a re-working of the illustration gallery. The tricks I learn here can be incorporated into my client work.

Comments are closed.

Read the comments policy