…And adapting existing sites to conform to the new screen sizes and resolutions.
The latest version of the Apple hypePhone has been announced, which means developers need to prepare new sites and existing sites to work with the new screen sizes and pixel densities.
Mobile First
The iPhone 6 further highlights developers should be developing their sites mobile first. A mobile first strategy will all but ensure your site functions on any mobile or handheld device, regardless of how big it is.
A non-mobile first strategy in 2014 is plain ignorant unless you have a good reason to build desktop first or have a separate mobile site and in my opinion, there aren’t many reasons to not assume that users are on mobile and work your way up from there.
The number one rule of mobile-first is to not use fixed width containers, use a max-width instead and combination of gradual enhancement using media queries.
High Resolution Images
Not too long ago (just a few years) we were using the aged old @2x trick where you would take an image, double its size and then downsize it so that it looked beautiful on high resolution smartphones (like the iPhone). Those days are dead and gone for things like icons and logos, you shouldn’t be doubling the size of those assets because you should be using vector graphics a la SVG’s.
According to Can I Use, SVG’s have been supported since IE9 and all relevant mobile browsers have supported them for a long time, and yet, I still see instances of images being used where SVG’s should be used.
For icons, you should no longer be using actual images for icons. Once upon a time we used the tried and tested sprite map trick for icons, but ran into trouble when we wanted retina icons. Nowadays you should be using icon fonts, scalable and retina ready icons in the form of a font. There are a lot of free ones (my personal favourite is FontAwesome) as well as some great paid ones. Stop using images for icons (unless they’re custom) and even then, there are tools for easily creating icon fonts.
What about the size and resolution of the iPhone 6?
The whole point of mobile-first development in combination with use of vector graphics is that screen size, pixel density and resolution shouldn’t matter. Once upon a time needing to know the size and pixel density of a device mattered, but there are thousands of phones out there (thanks Android) which means we can’t assume a standard resolution or screen size.
Stop worrying about sizes and resolutions, start worrying about whether or not your site has been developed mobile-first and if not, investigate and implement a strategy for doing so.
iPhone 6 and iPhone 6 Plus CSS Media Query Breakpoints
Provided you are using the meta viewport device-width directive, you will be using actual device widths in your media queries.
The physical device width of the iPhone 6 is 375px and the physical device width of the iPhone 6 Plus is 414px. So change out min-width for max-width or whatever you are using to make your sites responsive. The below assumes a mobile-first strategy.
iPhone 5 and below Breakpoint:
@media (min-width: 320px) { … }
iPhone 6 Breakpoint:
@media (min-width: 375px) { … }
iPhone 6 Breakpoint:
@media (min-width: 414px) { … }
