It’s very common knowledge that web development today is far more complicated than ever before. That’s largely attributed to the fact that we’re creating not only websites, but web applications that do far more than communicate information, or entertain.
But there’s something even more basic that’s making web content creation considerably more complex now than in the past. It’s the fact that we have to design for multiple screens.
Website development used to be fairly straightforward. Your only concern was ensuring that everything looked good on your desktop monitor.
Today, you need to also consider for anyone viewing on a mobile device. It’s important for aesthetic and UX reasons, and is also now an important factor for SEO.
How we create websites
For many website developers, this is a typical workflow:
- Create your content so it looks great and functions well in a desktop browser.
- Test the website on mobile and tweak as necessary to make it all work.
The underlying problem here is that we put great effort into fulfilling #1, and assume #2 will come easily with a few styling adjustments here and there.
But much more than likely, the reality is otherwise. It turns out that #2 can consume anywhere from one-third to two-thirds of the effort required to create the desktop site.
Tweaking out a desktop site for mobile is time-consuming. You need to play around with font sizes, margins, padding, line spacing, and something called media queries – which instructs the web browser to render content according to characteristics of the browser or device (most commonly, the pixel width of the viewing area).
The process can be tedious. For each of the above, as well as other considerations, you need to make a change to your CSS code, save it, then test on mobile. Repeat the process over and over, until you’re satisfied.
Oh – and you should check your site on mobile in both portrait and landscape orientations.
Mobile means smartphones and tablets
Generally, when we speak of mobile, we speak of iPhones and Android smartphones. But it’s also important to consider tablets as well, which nowadays basically means iPads.
From experience, I can tell you that optimizing your website for iPads can be challenging in itself, especially in portrait orientation. It just seems that this can be a no man’s land in terms of tweaking the ideal layout – falling somewhere in between a smartphone and full desktop layout. It’s up to you to determine the happy medium between the two.
There are several other considerations I haven’t gone into here, such as images (a completely separate discussion topic in itself), as well as UX design decisions such as whether to use the collapsible "hamburger" menu (in lieu of a menu navigation bar), and defining the proper break points – pixel dimensions that delineate between desktop and tablet, and between tablet and smartphone screens.
The bottom line is simple – always devote sufficient time and attention to mobile, even if you’re primarily designing for the desktop browser.