Mobile Web Design: Being Friendly to Every Screen

Mobile Web Design is a Must for all Web Developers.

If you are reading this post right now, there is a high probability you are doing so on a smartphone. Personally, I prefer to browse the web on a desktop, however. As such, it is of paramount importance to format your website for both screen sizes.

In HTML and CSS coding, the magic of mobile formatting is done within media queries – simple little commands that tell content on screen to adjust based on certain variables. For instance, if you are reading this post on a phone, media queries are working in the background and instructing my WordPress theme to adjust accordingly. However, if you request the desktop version of this post, the queries will tell the theme to shift to a larger view.

 

Are my media queries working?

Some differences you may see between different versions of this website are in the menu, which collapses into a selector resembling a hamburger. This smaller menu reserves screen real estate for actual content – something especially important on a small screen. Another difference you may see would be in the images within the site. They should shrink or expand to fit your screen as necessary. Nobody likes scrolling through a website only to stumble upon an oversized image cropped out by a phone bezel.

Clearly, media queries have a big job in website design – especially with such a high percentage of web traffic coming from mobile phones. A website must be able to accommodate for varying screen sizes – even massive screens like the monitor I am working on right now. Media queries assure that a website looks good on any size screen (so long as they are functioning properly). Thankfully, most content management suites (like WordPress) have media queries baked into the service. Thus, you do not always have to put too much effort into making your site mobile-friendly on WordPress.

However, I had to do some work on Challenick.com to fit my headers to mobile sizes (The letter “K” in Challenick kept falling offscreen). Thus, be sure to run tests on your sites to see how they handle mobile screens. You can do this simply by adjusting a browser window to a smaller size, which will force a site to adjust to the window size. If your site does not fit to the window, you may need to do some work in the backend to fix the issue. Be sure to fix any of these issues as they arise – you never know how visitors are viewing your website.

Leave a Reply

Your email address will not be published. Required fields are marked *