By Joseph Stark
Last week, we provided an introduction to responsive web design that included information on why it’s important to understand as a small business owner. This week, we’re going to dig in a little deeper, covering some of the more technical aspects of responsive design.
Webmasters and publishers constantly need to adapt to new standards and rules that pertain to their website properties. Responsive web design, a solution for making your website render correctly on any device, is the newest trend they need to master in order to stay relevant.
To any website owner, this concept would immediately bring interest, however what most don’t understand is there is no simple button or switch to enable responsive design. Making a website responsive consists of designing and modifying your website to be viewed as a different variation based on the users screen size.
This process can be a bit overwhelming for the team working on it, especially the first time around, but these tips should make things a little easier.
Consider Your Audience and Their Devices
All websites are created with a different goal in mind, and these goals need to be evaluated before you start responsive design. Stop to consider which device a user is using when they land on your website, and make sure your features will work for them.
For example, an online store has an end goal selling a product and making a transaction. So on a mobile device, being able to easily search the store and save or share products for later from a small screen is an important element to consider for your design. Your social media presence is important too. According to Hughesnet’s blog, options like Pinterest, Twitter and Facebook buttons on content is one of the best ways to gain visibility for your customer’s brand. Be sure to make those options easily accessible from the mobile site.
Always stop to consider all of the different types of devices that are out there. You should think about how people use phones, tablets, laptops, and make sure the main elements of your site are easily accessible on each of these different devices.
Choose Your Sizes and Design
Before this the developer starts to work, they should outline a few suggested sizes based on the site’s structure layout. Since all websites have a different layout structure, there are no standards when choosing media sizes. You need to select which will work best for your site. For more information on this, Smashing Magazine has an excellent resource on defining logical breakpoint for your designs.
With each media size selected, it will be up to the designer to start modifying the original website to fit that area. To some, this might be a little difficult, however, over time a designer will learn the common adjustments and best practices. A few of these include:
- Modifying container sizes
- Shrinking text
- Removing or combining sidebars
- Modifying menus
Depending on the timeline of a website becoming responsive, as well as the team who is working on the project, the designs can be done all at once or completed from largest to smallest while waiting for each variation to be done before defining the next logical breakpoint.
Develop and Test
The development process behind a basic responsive design is done entirely within CSS and possibly some HTML, which is a perfect job for a front end developer.
The styling for each media query is typically done at the bottom of the regular stylesheet, and would start to look something like:
<link rel="stylesheet" href="m.css" media="only screen and (max-device-width: 1200px)"
This means if a user is looking at a website on a screen resolution of less than 1200px, everything wrapped within the above code would be used. If you did not address something within this wrapper, the main stylesheet would still be used and the overall feel of the website stays the same. At this point, it should be like second nature for a front-end developer, as the only difference between this stage and the original website is the selected media size.
Once you have added a few lines of code, you can start testing live by simply shrinking your browser size down to that resolution. There are a handful of developer tools found online to help with this and make your job easy without having to try it out on multiple devices.
Responsive design is no harder to effectively build than a normal website, however it is more work. Website owners who are new to responsive design, as well as developers and designers, all need to understand the process that will go into getting your website fluid on a variety of devices.
