What is mobile responsive design?
When a website is responsive, the layout and/or content adapts or responds based on the size of the screen it’s presented on. A responsive website automatically changes to fit the device you’re reading it on. The content is both resized and adjusted in order to work well with different devices. Typically, there have been four general screen sizes that responsive design has been aimed at: the widescreen desktop monitor, the smaller desktop (or laptop), the tablet, and the mobile phone. If you look at the mock-up I made above, you’ll see how the various elements are rearranged as the screen size gets smaller, adapting to fit the screen and allowing for a more comfortable viewing experience. Just imagine if you had to read that post with the full-width layout (sidebar and all) on the smartphone.
What’s the difference between mobile templates and responsive design?
There are two typical methods for creating mobile sites: responsive design and mobile templates. With a responsive design, you only have one website that is coded to adapt to all screen sizes automatically. A mobile template is a completely separate entity, requiring you to have a subdomain specific to your mobile site. It is designed separately, and does not adjust to the size of the device. You will therefore have to maintain several separate sites. As you can see, a responsive design is so much better, in many ways.
Some minor things you might want to ask.
What happens to all those sidebar widgets? They get transferred to the bottom, right before your footer. Which is also why, if you take a look at forward-thinking blogs, you will see that they’ve totally ditched their sidebars. If you’re not ready for that yet, it’s ok. But I think the trend seems to be going that way. Rethink your ad placements, if that’s important to you. Rethink what’s on your sidebar and see which ones are absolutely essential. But just think about this – in case you don’t have a mobile responsive design, and your viewers are zooming in to view elements on your site, what do you think they’re zooming in to view, your content, or your sidebar widgets? What about placing things “above the fold”? Well, that’s not as important anymore. People in 2014 know how to scroll. And on mobile devices, it’s so much easier to scroll than to wait for a new page to load.
Why is it important for your blog or website to be mobile responsive?
Mobile use is exploding. More and more people are browsing the web using mobile devices, and the data shows that this is not going to slow down any time soon. In fact, it’s going to pick up speed. What device do people have majority of the time? What device do they use when they’re on social media? I’d say it’s going to be a mobile device. Make it easy for people to read your blog wherever they are. Give them the content they want, in the context that they’re viewing it.
