Intro to Responsive Layouts

Recently, I’ve started to work on creating websites with responsive layouts. Responsive layout design means that the presentation of the website is adjusted to improve the fit at different resolutions. In the past, I have usually targeted 1024 as the minimum horizontal resolution that is needed for an optimal experience. But with phones and tablets being used more to browse the web, it’s becoming more important to give a first-rate experience to visitors using mobile browsers as well as desktop ones.

Unlike desktop browsers, mobile browsers automatically zoom out the page to fit the availability device resolution, so the user doesn’t have to deal with horizontal scrolling (unless zoomed in). The downside is that text gets cramped and hard to read, and clickable buttons and links are hard to tap accurately. Mobile-specific versions of website have been created to solve this problem. This made sense when mobile devices were primarily low-resolution phones. But recent model phones and tablets have much better resolutions that are capable of delivering a better experience than that offered by the low-resolution mobile-specific version of a website. What’s really needed is a modified desktop experience that is optimized to provide better legibility and usability on the reduced resolutions of mobile devices. Enter responsive design.
Continue reading “Intro to Responsive Layouts”