Responsive Web Design Techniques and Tips

Your customers are coming to your website over a myriad of devices, from smartphones to tablets to desktops, and the range will likely grow as smaller devices and different sizes of screens come onto the market. To ensure that all of these devices can get full functionality from your site and that your team isn't wasting time creating multiple versions of your main site to accommodate each device, you need to integrate responsive design techniques into your web design.

Responsive web design is an approach for architecting websites to enable them to automatically serve up content in the most appropriate layout for the customer's device. It's a better approach than creating individual versions for each device, as it doesn't require updating multiple versions of content. This saves time that can be better spent creating high-quality content.

Responsive design works on a grid principle, with each page element sized according to units on a grid rather than specific measurements, thus producing a display that is proportional regardless of the size of the display. The web architect creates different grid-based templates showing how the pages should be displayed for different devices. The site can then automatically recognize the screen size of the device accessing it and serve up the appropriate layout of the page.

The over-arching concept for responsive design is simplicity; simple layouts and graphics are more easily reduced and re-constructed without ruining their appearances. Visually-rich designs with complex layouts look great on laptops but need to be simplified on smaller screens.

In addition to simple design, here are some other tips for creating responsive websites:

1. Minimize Navigational Aids on Smaller Screens

If you have just two or three navigational items on a page, list them at the top. But if you've got four or five, instead use a navigational icon at the top and use JQuery to create a simple dropdown menu with navigational choices. This leaves more space for focusing on the content of the page.

2. Design for Screen Size Not Brand Name

Determine the different screen sizes you want to target in your CSS files. CSS doesn't recognize names of specific mobile devices but, rather, is programmed with screen widths.

Determine the most common screen sizes viewing your site then specify their measurements in the CSS media query. Also, include whether you want a portrait or landscape screen orientation. Below is an example of what that code would look like:

  1. @media screen and (max-width: 1024px) {
  2. /* Tablet styles */
  3. }
  4. @media screen and (max-width: 700px) {
  5. /* mobile phone styles */
  6. }
  1. @media screen and (max-width: 1024px) and (orientation : landscape) {
  2. /* Tablets in landscape orientation */
  3. }
  4. @media screen and (max-width: 768px) and (orientation : portrait) {
  5. /* Tablets in landscape orientation */
  6. }

Remember tablets are becoming the new desktop. More and more users are working off of their tablets, forgoing laptops and desktops altogether. Generally, tablets do well with desktop layouts when in landscape mode, but may require a different template for portrait mode, depending on the number of components and the functionality to be included. Designing with tablets in mind can help ensure that the overall organization is simple and thus able to be designed responsively.

3. Organize Based on Importance

Organization and structure of page elements is different for mobile phones vs. desktops. To create a mobile device template, reorder the sections from your desktop version into full-width sections, like stacking blocks, based on their importance.

  • Header, Logo, and Navigational Elements. These normally go on top, to identify the page and make it easy to find the navigational menu.
  • Body and Main Content. The next component should be the article or other unique element that comprises the body of the layout.
  • Sidebars and Advertising. At the bottom comes the advertising or other sidebar content. Sidebar content is the least important content on a page because it's usually boilerplate. It shouldn't infringe on the main content of the page.

Whatever your layout strategy, do include all of the content and functionality available on the main site. People get frustrated when they can't do the same things on a mobile site that they can on the main one. If customers can update their account preferences or view videos on the main site, they should also be able to view those on the mobile versions as well. There are some exceptions, of course, such as data-heavy elements that may be too much for mobile connections.

4. Test!

The best way to see how your website responds to different device sizes is to try it out. You can do this by resizing your browser to test media queries. Also be sure to test it on actual mobile devices to see what your visitors are experiencing. You may want to add more breakpoints (screen sizes) including device-specific ones to get the best appearance for the most commonly-used devices.

The goal is to make your website as attractive and functional as possible for all of the devices your customers use to access it, while also remaining easy to maintain. Following a responsive web design strategy is important for achieving both goals.

LightCMS Enables Responsive Design for Everyone

LightCMS offers many responsive design templates to choose from for creating fully responsive websites that adapt to fit in any browser across all devices. If you are a current LightCMS customer, check out the many different responsive templates by logging in to your website and selecting "Design" on the top toolbar. Then select "Gallery" to view a list of featured designs. It only takes a click to preview the design, apply it to your website, or even download the source code to modify on your own. Plus, as always, you can customize the design in the LightCMS Design Editor as well.