4 Critical Steps to Making Your Website Responsive
As of last year, more people are using their smart devices to browse the Web instead of computers. Due to the change in information medium, it's important for businesses to create a responsive website that meets the needs of its consumers through a page that can be displayed fully and comfortably no matter what screen size is accessing it. By making your website responsive, you make your business's information more convenient and therefore more accessible to anyone searching for it.
What Is Responsive?
Responsive means that a website naturally adjusts to fit all of the content into a readable column no matter what the screen size is. For example, Sony.com has a responsive Web page. If you view the page on a laptop and minimize the window to the size of the palm of your hand all of the same information and images that were displayed at full screen are still shown, despite the smaller window size.
The same principle is true for tablets and smartphones. No matter what the screen size or orientation are, the website will adjust automatically, which makes viewing the page much easier for the user and cuts out any extra steps they may have to take to get their content.
1. Choose Your Method: Template or Organic Build
Depending on whether or not your business already has a website, it's advantageous to explore all of your options when thinking about how to make your responsive design. If you don't want to outsource your Web design, take advantage of some responsive website hosting sites like Wordpress.org and Webflow.com. These sites, and many others like them, provide templates that are automatically responsive without the need of inserting any extra code. However, if your business already has a static Web page, you will need CSS3 media queries in order to make the site responsive.
2. Change Your Display With Media Queries
CSS3 media queries gather information about the device being used to view a page and make adjustments accordingly. These media queries can be accessed through either internal or external stylesheets by keying in the appropriate code. In regard to making your Web page responsive, you would call the media attribute @media screen to clarify the screen type. The CSS style would be applied to the width parameters (min and max width attributes). This can sound complicated if you're just starting out, but it becomes much simpler once you know the ideal pixel measurements that your page will be viewed on. For example, if you wanted to allow your page to be fully viewed on a smart phone, your command would be:
@media screen (min-width: 480 px) {
This rule can be applied to a number of common screen sizes, including smartphones (about 480 pixels), as well as tablets (600 px x 768 px) that accommodate viewing your website fully without losing content.
3. Always Make Sure Your Content Is Clear With Fluid Grids
The fluid grid is important to your responsive design because unlike your CSS3 code, specifically designed to fit all of your information on the designated screen size, grids keep everything in proportion on the page. No matter what device is being used to access your page, fluid grids assure that the website will appear the way it was meant to be, with all of the elements purposefully displayed. Fluid grids are more adaptive than traditional liquid layouts, which just expand the page and center the information on the display. Although this type of layout can work, it can also distort the page and make it blurry or low-definition depending on the device it's being displayed on. Considering smart devices are poised to constantly increase pixel count, it's wise to just go with a fluid grid to make your website most visually appealing.
In order to get the right proportions for your fluid grid, first you must create a simulation in the image editor of your choice (Photoshop, Dreamweaver, etc.) then measure the page element and divide it by the page's width. This may appear daunting, but it comes down to simple math. You can get your page element proportions by taking the actual pixel size of the site, divide it by the target pixel size then multiply the result by 100. However, these totals do not always create a round number. When the fraction continues far after the decimal point, resist the urge to round up for convenience. Rounding up can affect the configuration of your design, so it's better to do a little extra math and have a great final product than make your numbers easy at the expense of your design. For example, if your layout is a typical 960 pixels across, and your target element is 200, your equation would look like:
200/960=.20833x100=20.8333%
This total is applied to the target element in your fluid design.
4. Design for Accessibility
You have many options when creating your new responsive website, but always strive to make your site more user friendly. Any website can be artistically crafted, but could be impossible to navigate. During your responsive makeover, there are options to hide your sidebars or headers for certain screen limitations. Prioritize and consider what information is most important to your website and put that at the forefront without sacrificing style or tab options. Always be aware that people are looking at your page from a variety of different devices, so make your links and tabs easily accessed through both mouse and finger clicks. In the past, businesses would create an entirely separate mobile-friendly website in addition to their normal, default computer-viewed website. Those earlier sites were often stripped down, abbreviated versions of their parent sites, and the result was inferior in both content and design. Take the unrestricted road and make your responsive website accessible and convenient for anyone.
The availability of information across many different devices is staggering and will only continue to expand. With the circulation of smaller devices with more features, businesses must adapt to stay relevant and keep in contact with the people who need their services. The examples given are just the beginning for making your business's website responsive as more mobile options increase every year.
Drew Hendricks is an experienced marketing professional and social media strategist with more than five years of experience in creating successful campaigns for clients.
