Responsive Layouts for Websites

Share this post


As we zing around our daily lives living on mobile devices, what we expect to see on websites is changing. That 1,440 pixel-wide website your company built a few years ago with the elaborate background imagery and flash intro doesn’t do anyone any good when they’re on a 3G network with one bar. Need that phone number or that company’s business hours right now but wind up having to navigate the dreaded mini-site? What tiny font size is that menu, anyway, and whose fingers could possibly be that pointy?

While information will always be king, the content needs to be presented clearly on today’s smaller screens. Designers, and more importantly, their clients, are aware of this and want their sites to look good on a large monitor all the way down to smaller screens on tablets and phones. Enter the Responsive Layout. Thanks to media queries, responsive grid CSS and flexible images, a site made 980 pixels wide will look great on any smaller screen. Check out this nice example.

Responsive design is easy to dive into. WordPress makes it pretty foolproof, and selecting a “responsive” theme is the logical place to start. Depending on how custom you want to get with your design, you may have to adjust the specific media queries, but it’s not terribly difficult.

If your site was built with hand-coded HTML and CSS, retrofitting responsiveness could prove to be more difficult. But look at the bright side! This could be a good opportunity to redesign the site using a theme that is responsive and ready for content. No need to reinvent the wheel. Just make the wheel look better, work better and be more useful.

When it comes down to it, even the most Spartan of websites can still look good. After all, these days “less is more,” right?

Recent Posts