We’re moving into the mobile world. If you aren’t thinking of your site’s compatibility with different screen sizes, you’d better think again.
So what’s the answer? How do we keep up with the times? What do I have to do to provide a warm welcome to the growing percentage of mobile customers?
You might hear the term “responsive” thrown around. If a site is “responsive” it means that it “responds” to different screen sizes. So Joe on his PC, Kate on her tablet and Mark on his smartphone all visiting the same url will view content that fits nicely on their screen without scrolling horizontally for miles.
How is this achieved? Here are a few tips for re-arranging your content for smaller screen sizes.
- Stack away. Where on a large screen you might have several columns across, or content laid out across your screen, on smaller screens content gets stacked vertically. By using a framework like bootstrap from the get-go to lay out your page, this stacking will be achieved with little or no additional effort.
- Scale down the content. Every piece of content from your website might not be necessary for your mobile site. Smaller screen size = cut to the chase. No one wants to scroll down for 2 minutes to find what they are looking for. Analyze your content and images to determine if each piece really adds value to your mobile clientele. Where a small image on your site might be a nice compliment to your content, on your mobile device it might take over and get in the way. Bottom line is that only the essentials should remain.
- Kill the menu bar. The menu is an important part of your mobile site, but to display it in the same way you would on your full-screen version would be a waste of valuable real estate. The mobile menu icon has conventionally become the “3-bar”. There are many options for how the actual menu can look and function but the idea is that all options are not visible all the time.
This has been an intro to building responsive sites. Stay tuned for the next steps with responsive design…
