Blog. Web & Graphic Design updates from Novus Cambridge.
Website design for iPhone 5
And so another iPhone hits the market. Yet again us web designers are kept on our toes as the iPhone 5 is the first of the iOS devices launched to date that changes the aspect ratio of the screen.
Taller in portrait mode and wider in landscape, the new screen size allows for more content to be displayed. Great right? Well, not really.
As with all good website designs, you need to cater for the majority of visitors whether they are on a desktop, tablet or smartphone, so although the iPhone 5 has a larger screen, most existing sites won't get to use the larger canvas to full effect.
However, the days of creating static, unscaleable websites are almost over as we shift towards a world of re-sizeable and adaptable designs that work across the full spectrum of devices. We call this Responsive Web Design or RWD for short.
Although responsive websites require a totally different approach to their design and architecture, the results can be spectacular and allows a single website to serve every device size, from smartphones to the largest desktops, with a tailored user interface for each size. Large or small, landscape or portrait, responsive web design is the way to go.
The wonders of CSS3 @media queries allow us to target individual devices to trigger a different stylesheet for specific devices.
The only change required for the iPhone 5 being the revised device width when in landscape mode, so where the previous iPhones and smartphones work perfectly with:
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Your styles here */
}
the new iPhone and iPod touch share the same screen size with the differing factor being the device height, so we can simply use the following query to trigger bespoke styles for these devices:
/* Your styles here */
}
the added line for the pixel ratio forces the css to check whether the device has a retina display so as not to trigger the stylesheet on physically larger mobile devices and tablets.
