Press enter to see results or esc to cancel.

Increase Your Web Page Views with Responsive Design

responsive web designUp until recently, web design for devices was non-existent. You designed for the most popular browser resolution (800×600 or 1024×768) on a standard laptop or desktop PC. The most complicated thing you had to do for a device-specific design was making sure you were developing cross-browser, and that everything displayed as closely as possible on the different major browsers. Now, however, the landscape has changed and your web page could be viewed on any number of different devices- all at different resolutions. Obviously, you want all viewers to have the best experience possible, so what do you do? Responsive web design to the rescue. By keeping a few simple things in mind, and learning about the beauty of media queries, you can design the perfect experience for visitors no matter if they are viewing on a desktop, laptop, phone or tablet.

Make your site uniform on any browser or display

Responsive web design works via a couple of different methods. First of all get rid of pixels for width and font size. Now you will be using percentages and ems. Basically, you will be changing all widths to a percentage, based on the intended max width of your page. Say you have a container div that holds all of your content and is designed at 950px wide. You will first want to change that to width:100%; and max-width:950px. We will still use pixels, but only as hard and fast stops so we can control how big things get. Now, any dive we put inside that container will now be a percentage of 950px. For instance, if you have a left-content div that you have designed at 600px you will take that and divide it by 950, giving you 63.1%. That will make your CSS style for that div width: 63.1%; however, you still want it to stop at 600px so you will be utilizing max-width: 600px;. Now, this is fine on a laptop/desktop for viewing. Whatever size browser your visitor uses, they will get a similar view and maintain your design without having to horizontally scroll. When it comes to mobile and tablets, you will need to utilize a different tool to design the optimal experience.

Media Queries will set you free

This is where things get interesting. Media queries are an exciting new development in CSS that allows you to specify exactly how a div or element will look on a specific or general pixel width- or even device. However, we will stick to device widths. It works like this:

@media screen and (max-width: 300px) {
    body {
 background-color: lightblue;
}

    .left-content {
 width: 100%;
}
}

Now, any time your browser is under 300px wide (a width on many phone browsers) the body of your page will have a blue background. You can go on to add as many divs and elements as you like withing the brackets of that query- it will only show once the browser triggers it. So you can see our previous example of left-content has been altered for our mobile audience. We don’t want that section to only take 63.1% of a mobile screen because it will be such a tiny space, everything will look cramped. So now, that section will be 100% of that holding container- taking up the entire width of the browser (save for any padding or margins). Keep in mind, you can have as many media queries as you like and can get as specific as possible, even designing for how a page looks in landscape versus portrait mode.

What if I am using WordPress? (i.e. I don’t want to code)

wordpressThere are several WordPress plugins that make this happen automatically without touching code, which can be very handy for those using WordPress because they don’t have that much development experience. Plugins like Jetpack, WPtouch 3, and WP Mobile Detector all do the heavy lifting for you. And there are solutions in both free and paid versions. This is especially handy for designing navigation for mobile, and can let you get super fancy and high-tech with how your menu displays.

Test Liberally

Of course, you will want to test this thoroughly on multiple browsers at different sizes, and it helps to have several devices to test on at different widths. Keep in mind there are emulators that simulate the experience of a site on a mobile device that you can use online, however, those are finicky at best and often do not trigger media queries correctly. For best results, always test on a device.

Responsive web design is the future, as well as the present, and adopting these practices is not an option. Not only does it make for a better experience, Google will actually penalize you in site ranking if your site isn’t mobile friendly. So, give yourself the best chance for success and make sure you are designing with flexibility and mobility in mind.

Comments

Comments are disabled for this post