There are millions of things to consider when building a website for someone. Color scheme, images, content, navigation… the list is truly never-ending. Once we have finally gotten everything in order, the most important part is making sure that our work looks good not just on desktops and laptops, but across all devices.
“Responsive web design is an approach to web design which makes web pages render well on a variety of devices and window or screen sizes.”
According to an article from marketingland.com on the subject, people spent nearly 70% of their online-retail time on mobile devices in 2016.
As you can see, it’s important for your business to look good on people’s phones because, according to this study, that’s where people spend most of their online shopping time. Often times your website is a consumer’s first impression. Nearly as often, it is the ONLY impression as people rarely visit the same site twice. You may only get one shot, and if they’re accessing it through a mobile device, it had better look impressive.
That is why everything we do, we test across ALL devices.
But what are some ways that we make things mobile-friendly? It’s all in the code.
There are many ways to make things mobile friendly. Some things that are more commonplace that most developers use, but we have our own set of tricks in our stylesheets.
Twitter Bootstrap
Twitter Bootstrap is maybe my favorite thing to use as a coder. It is a separate .css file that you can link to your own stylesheet (directions here) that is filled with it’s own long list of classes that you can call anywhere in your html.
Bootstrap a system of rows split into a 12 column system. Most well-designed websites you see today use Bootstrap as a template tool, filling the responsive columns with content.
Read more about Twitter Bootstrap »
Special Classes
Even though Twitter Bootstrap dramatically helps your site’s responsiveness, some things do not fit nicely on mobile such as larger words or long lines of text that cannot wrap to the next line nicely. For this I create my own custom CSS classes and attach them to things that I want to show up either only on mobile or only on desktop depending on what they are.
Today, most people only use mobile devices for their internet surfing and, as a result, mobile-friendly design isn’t just imperative – it is a requirement for an excellent website. Monitor Media Group tests everything on mobile to the complete-satisfaction of our customer because we know it may be the only impression you get.
