How to Make a Website Responsive
What method you choose is going to depend on the time you’re willing to invest and amount of money you want to spend.
Here are a couple of options you can consider…
Get a Responsive WordPress Theme
This is the easiest solution for most people and since more and more people use WordPress to create websites, it’s becoming a more popular choice.
A responsive theme already has the code in place out of the box. So as soon as you install it, you’re done!
So if you created your site with WordPress, just search for a theme that is already responsive.
We use several themes because, not only do you need to install the theme, you need to then reconfigure it to look like the original site did! If you don’t want to buy a theme, you can use a plugin such as “WP Touch”. It works for some themes and uses a standard layout/design for all sites.
The downside to using a plugin is it usually will not work with all WordPress themes.
Using Media Queries (CSS3)
If you don’t have a responsive theme or you have an HTML / static website, you can add media queries to your existing design.
Sounds complicated, but that just means you have code in a stylesheet that tells the browser how to display your website in different resolutions.
Below is an example of a media query you could add to your stylesheet.
The above query simply tells the browser not to display the sidebar on devices with a maximum width of 480 pixels.
Where did the #sidebar syntax come from, you ask? You would use the name of the ID that is used on your stylesheet (css file).
If you use WordPress, you can often find your stylesheet under Appearance >> Editor, though more and more modern theme require you to login via ftp to access these files.
Your site may call it #leftnav. Or maybe your header is labeled #header.
So hopefully you get a basic idea of how this all works.
Dealing With Image-Based Headers
One downside to responsive design is if your site has an image header, it may not display optimally on all devices. Sometimes part of the image will be cut off, depending on the mobile device.
The Responsive Images WordPress plugin will allow you to create different sized headers that will load depending on the size of the mobile device. If less capable mobile devices are being used, this will allow them to download smaller image files.
Whatever you do…
Avoid the urge to save money in development, since you don’t usually get more than what you paid for.
Good developers are worth the prices they charge. Be open to working together with them, and be ready to discuss any details they may have to show you.
Things to Avoid With Responsive Designs
1. Slow loading websites.
If you want to deliver a full-size experience even on mobile devices, you’ll want to make sure that mobile users will actually wait for the page to load.
Many mobile users actually leave after waiting only five seconds for a page to be loaded.
2. Hiding important content
Responsive designs have the ability to hide any element of the website. For example, you can opt to hide your sidebar on very small devices.
Make sure this makes sense for your website. The goal is not to penalize mobile users for the devices they have chosen. Make sure that the most important functions of your website can still be accessed.
3. Thinking that one-size-fits-all will work
Mobile devices mean more than just smaller screen sizes. There needs to be more effective use of responsive design than on the site layout alone.
Smartphones can be used for calls and to obtain the location of users, and the browsers should be able to access more API’s, which allows for more of the web to be accessible anywhere.
4. Ignoring context
Each device has its own interfaces, opportunities and constraints. Keep all those variables in mind when you strive to create a user experience that will feel natural.
Think about the icons that people use, and how they orient their devices. Responsive sites should go outside the browser box and reach out to the user.
5. Relying on the dimensions of devices
You have no control over the size of your visitors’ browsers. Each manufacturer makes their devices with the dimensions that they believe are most appropriate. Actual page height does not take into account variables like toolbars or bookmark bars.
Visiting links through Twitter and Facebook apps, along with others, means being forced to use their custom chrome for the containment of web views. Your designs need to hold together, regardless of the specific dimensions you might be dealing with.
Additional Things to Consider for Your Mobile Website Design
How are menus handled?
Not all navigations look great “as is” when sites become responsive.
If you don’t handle this properly, the nav can break in unusual places on mobile screens. Think about the small screens when you are working on designing your site.
Take note of the hierarchy of your content.
If content won’t fit on smaller screens, you can drop it from the site. Widgets and sidebars might be hidden when scaled to fit mobile devices. You need to determine what you will allow to be unseen and what will remain.
Does your design handle video?
If you use video a lot on your site, embedding itself can cause problems when you create responsive designs for your web pages. You’ll need to use specialized HTML so that your video content will be properly resized.
If you use YouTube, you are in luck. The embed code is already responsive (iFrame) so there is nothing extra you need to do!
Use different devices to preview your design.
When you’re checking to see how well your designs work, use different browsers, like an iPhone and a tablet. Use differing sizes, and if you’re working for a client, show then the different ways the site will behave.
In-house at Total Webz, we have iPhones, Android Phones and iPads on which we test in both landscape and portrait to make sure that your visitors get the best experience possible.
Here’s a great tool to test your site’s design on multiple devices.
Test, test and retest
Development is critically important in the process of mobile website design. Test your site on every different platform you can find, and give accurate feedback to your developers. Be exact about the way you’d like interaction to work.
Responsive design can be tricky. Take your time on the project and make sure you get the outcome you desire.
Ready to Start Your Site?
If you haven’t created your site yet, you can start at the main page of our site and we’ll walk you through the entire build process.