In today’s technology scene, mobile devices are becoming an ever more popular way to browse the web, and why wouldn’t they be? Being able to browse the internet at any time and from anywhere without having to worry about a full-sized computer is incredibly convenient. However, there are still many websites out there today that are not optimized for mobile visitors. This can be a lost opportunity.
When a mobile user visits a site that has not taken mobile devices into account, they can run into all kinds of problems. Users might have to scroll horizontally to see the entire page, or images and words can get crushed together, get cutoff, or be completely inaccessible. In essence, the non-mobile friendly user experience can make a website aesthetically displeasing and difficult to work with. Non-optimization can even knock a website down in SEO rankings like on the Google search platform. What has been proven effective time after time is a clean design and a clear delivery of information for all screen sizes. So how do websites and web developers plan for mobile interactions? They put additional effort into styling for different use cases. 

At Midnet Media, for example, we often use Drupal 8 as the foundation for our websites along with a theme called UIkit which helps to simplify many common web building functions including those which help with responsive web design. Using UIkit’s library of classes, Midnet can simply add these terms into the code to create certain behaviors. 

For example, uk-visible and uk-hidden are two classes we often use together in responsifying a web page for different sizes. When we add the class uk-visible@m to a section, this means that the section will disappear when a browsing window is under 50% width but will reappear when the window width is over 50%. Using this method, we can add uk-hidden@m on a separate section, so that one disappears at the same time as the other section appears. This allows us a great range of functionality to optimize for different screen sizes independently from other screen sizes. However, knowing that UI Kit is not the norm, site builders can achieve similar results as uk-hidden/visible by setting up media queries in their site’s CSS file. Setting the display attribute to “none” or “block” dependent on the width of the screen makes it really easy to optimize sections for different screen sizes.
Similarly, you can also use media queries to generate dynamic widths for your elements. One of the key reasons websites aren’t responsive is because they don’t use widths that are a percentage of the section size and instead use static widths that will always take up the same number of pixels.
However, in UIkit, we have a way of quickly creating dynamic widths through the uk-width class where we can write “uk-width-1-2” as the class to make our section render at 50% width of the section it is in. Using the CSS property, flex, in the parent element allows us to create side-by-side sections that we can easily size. Say we have an image gallery, and we want the images to be 3 wide when the screen is large, 2 wide when it is under half width, and a single stacked column when the screen size is at the smallest quartile. We would add uk-flex to the section along with uk-child-width-1-3@m, uk-child-width-1-2@s, and uk-child-width-1-1. This means that every child of this section will be 1/3 the width at medium, 1/2 over small but under medium, and full width when at the smallest size. This allows sections to be efficiently stacked so that images, words, and sections are always the proper size for visibility and functionality.
Ultimately, swapping out sections and making your widths dynamic are the two most effective ways to get your website ready for any device. You’ll need both for best results. Having just percentages can be effective, but sometimes this will force side by side sections to squish together horizontally forcing text to overflow or images to shrink beyond optimal visibility. Using the section swapping allows you to go a step further and amend any weirdness that might only occur at one size. 

Consider what it will take to get your website mobile-friendly. What needs to stack, and what needs to be changed or removed entirely at smaller sizes? A little responsification can go a long way to improving your site’s feel and functionality for all users while making sure your website gives off the best impression possible.