Some might argue that developing applications and brochures for the web is easier than writing a native application for devices based on their respective operating systems. But if we scratch just a little deeper in to web development we start to realise the same issues exist, but maybe the web is designed with a few more of these problems in mind.
Variances in screen resolution is probably the most difficult problem facing any web developer. Mobile app developers moan about fragmentation in Android and iPhone screen sizes, but web developers rule the roost when it comes to developing for any size screens. The key issue facing any designers and developers is screen aspect ratio. Screen ratio is the relationship between the height and the width of the screen. Old school square TVs aren’t quite square, they have a screen ratio of 4:3 (for every 4cm wide they’re 3cm tall). Widescreen took things to 16:9, and then there’s computers that often are around 16:10, except super wide screen which changes the ratio to 7:3 (or 21:9 if that’s easier to compare). Mobiles usually vary somewhat between all the same ratios above, but in the opposite direction. iPads and tablets are often more square than widescreen. So your project needs to accommodate squares, rectangles and rectangles going the other way. This also needs to accommodate stubby fingers pressing, and accurate mouse pointing. Then you remember that not every user runs web applications full screen on their computer, so it needs to fit the between sizes. Then you remember that iPads allow for multi tasking with narrower portions of the screen. Finally you remember that your project allows for user generated content of different sizes and eventually you come to the realisation that your web application needs to work at any screen size and any aspect ratio with any content size.
Working with different Aspect Ratios
So once you’ve had that breakdown and decided that web development is maybe not as easy as you first thought it’s time to discuss solutions. And with all problems, there’s never just one solution that works.
By all means not the only solution, but arguably one of the best is responsive design. Web technologies are developed with web developers in mind, so it’s only natural that additions to CSS and HTML over the past decade make it easier than ever to accommodate all shapes and sizes. Mobile devices turned the industry on its head, and we’ve finally caught up. Browser support is pretty much all there, with only IE11 being a browser you really need to consider for compatibility unless your doing something very detailed. CSS functions
grid are making layouts easier for developers by allowing elements to grow, shrink and reshape to suit the screen they’re on, and
object-fit make it easier to make elements that aren’t responsive try and play ball (though explaining object-fit to clients isn’t easy!). Making your life easier, there are whole frameworks such as Twitter’s Bootstrap which have been built to make it simple for developers to create designs that truly respond with far less effort than writing all the media queries and flex rules to make it happen.
Distinct Mobile and Desktop Designs
Whilst offering a mobile version of a site is very much being replaced by responsive design, there’s still a small place in my heart for dedicated mobile versions of websites. This is how it all began, back when responsive design meant alternating between two entire layouts depending on the user’s device. My favourites were those sites that tried desperately to mimic native apps (remember when iPhone didn’t have an App Store?). Depending on the project it can still be an effective way of offering the best user experience, and looking at some big name players (GitHub and Twitter immediately jump to mind) it’s easy to see opportunities where it’s best to offer a dedicated experience that makes the best use of the available screen size. It’s a more costly way of developing, but if budget isn’t really an issue you can really focus on offering the best to everyone. Search engines don’t really work well with this but if you’re Twitter or GitHub I’m sure you’re not struggling for search rankings.
Forcing (or strongly encouraging) a mobile app
This is one I’m really not a fan of, but sometimes it truly is the best solution. Running a native app on the platform can offer a better experience than what can be developed on the web, but so often I feel like apps that are almost trying to force a mobile app are doing it for the wrong reason. As a great example is Reddit, who offer a great mobile web interface, yet clutter it with trying to push their mobile app every time I visit. I think their mobile app is worse than the mobile website, but no matter how many times I dismiss the pop up it’s always back within a couple of days. Other developers can do it better, like Google’s suite of productivity apps where their mobile app counterparts may not be as full featured as the desktop equivalent, it’s a sacrifice worth it for the better user experience. Thanks to development frameworks like Facebook’s React it’s now easy to often reuse code from web in your applications and share a common code base.
Just don’t bother
There’s still sites out there that take the “it doesn’t matter” approach and either showing a message saying that the site is only available on desktop, or allowing an awful design to be presented to mobile users. Given that by almost all metrics mobile users are making up at least half of web all web traffic it’s definitely something that does matter and it’s easier than ever to accommodate all sorts of screens. Don’t fall into the trap of assuming mobile users aren’t worth investing your time in.
However all the best designs in the world can’t accommodate every possible screen size, so there’s always one that will end up looking not quite right. The only way around this is to test, test, test and be prepared to accommodate making changes down the line to your site should you need to. Responsive design is all about compromise, dedicated designs is all about budget, and mobile apps are often just overkill. Just promise me you won’t fall in with the “don’t bother” crowd.