There are plenty of things to keep in mind actually. However, I will focus on just a few that will make your life easier when creating a responsive site.
1. Plan first.
In short, a plan is an essential tool for any project. It should not be over looked for responsive websites especially because they are more work than a standard one screen site. A plan will help to guide you and tell you what do to when in doubt. Most in importantly, it will keep everyone in check on who is doing what to complete the project. A plan is important because it also allows the developer to better code the site so he knows how to structure it appropriately. Planning also saves you time as you do not have to figure all of this out as you go and take breaks in your progress.
Plan out your site as you will have to entertain three different types of screens: phone, tablet and desktop. Ideally, you will plan out the layout for all three screen types before even touching the interface design – just like any other design project. It is crucial for you to plan out the phone and tablet screen as well because not everything can be solved my making the sections smaller or stack them on top of one another.
2. Get rid of everything you can.
I am mostly referring to phone screens however keep this advice to heart when dealing with tablets or standard monitors too. On small screens, the information many feel overwhelming – you do not want to do that to a visitor. You also have to keep mind that websites on phones can take forever to load due to crappy service or WiFi connection. This is why you should limit all images, especially images, and text to bare essentials. By keeping the content amount down you will ensure that the site loads fast on any bandwidth, providing your visitor with the information they need.
Also, even though the user may have lighting fast connection, it does not mean they want to sift through all of that content on their phone as a small screen is a small window to look through big amounts of content. On a smaller screen, here is much more to read and there is much more scrolling to be done – if they can not get something on their phone they will move on fast. You have to assume that while using a phone the users are on the move – on the go – and are not willing to stop and pause to search though a difficult site.
3. Progressive enhancement.
Progressive enhancement is a method of creating something that will work across all platforms first, and adding onto it – enhancing it – for the platforms that have higher support. What this means is making a site that looks the same across all major browsers but only then adding the effects or designs for the browsers that support the enhancements. This way there is a fallback for those users who use the older browsers.
In terms of responsive design, this also applies in the same way – make a site that is basic which looks and works the same for majority of the browsers and then enhance it to what you would like to it be. However, in reference to responsive design this also means design a mobile site first then the desktop one. The reason for this is that not all mobile browsers support media queries while most, if not all recent, desktop browsers do. What I mean is create a mobile site and have the media query call in the desktop site. This way mobile browsers will always load the mobile site and the desktop browsers will load the media query because they can. Keep in mind that this will insure that all phones will load the mobile site no matter the browsers or OS making everybody’s life easier.
4. Make sure your images and videos are responsive too.
You do not want to have an image that is three times the size of the width of the screen – in this case I am referring to a phone screen. If you set your images and videos to be fluid you will not be facing this problem. Also, use responsive – fluid – plug-ins. They are a great time saver.
- Blueberry: “a jQuery image slider written specifically for responsive web design.”
- FlexSlider: “An awesome, fully responsive jQuery slider toolkit.”
- UnoSlider: “an advanced image and content slider which is built with responsive design and mobile devices in mind.”
Box-sizing is a CSS trick that allows the border, margins, padding and outlines not to affect the total width or height of the div. Let me explain. If you have a div with a set width of 200px and then you add padding on both sides of 20px then the total with of the div is 240px. In order for the div to stay 200px in total, you now have to go back and change its set width to 160px. When you add box-sizing to the div, the total width will stay 200px – no matter what – and the padding will be incorporated inside the div rather than outside and in addition to it. The diagram below is taken form CSS-Tricks website which explains box-sizing in further detail here.
The reason this is a cool trick is because is saves time in making measurements. Not all designs call for perfectly round numbers like 200px and 20px. Box-sixing also allows you to have greater control of the code. The reason I bring this up is because it also makes things easier when dealing with responsive sites especially with fluid layouts. Give it a shot and see how much time you will save trying to figure out the silliest of calculations.
6. Always test on the appropriate device.
When testing a responsive site, do so on the specific device that matches your criteria. What I mean is that if you are testing your site for a tablet use a tablet to do the test not your computer. I know it is convenient to just resize your browser window but it is not practical. People are going to be using the devices, the table or the phone, to view your site and therefore you should test the site there. I guarantee you that no one with a monitor is going to view website with the browser’s window scrunched to 400px because they want the mobile experience.
Testing on the devices will allow you to gain insight and detect issues that you would not come across a computer’s browser simply because they are superior to their mobile counterparts. In turn, seeing the bugs and issue early enables you to fix them early and this saves you time and headaches in the long run. I suggest looking into Adobe Inspect which eases the pain of cross platform testing.
7. People know.
Compared to any other advice about responsive web design, this one is the most helpful and most motivational in getting the site done and done well. What I mean by “people know” is that the people who use mobile devices may not know how it done but they know that site can be responsive and be executed well. Therefore, do not half ass it. After all, they see other well executed mobile sites all the time. Do not assume people will not notice or, more importantly, that they will blow it off and note care. Trust me, they care. Not having a responsive site and having a crappy responsive site are equally bad. People know mobile site versions can be done and they expect it done and done well for that matter. Keep in mind that the access of the web from mobile platforms is skyrocketing each day.
In regards to all of the listed advice, keep the close your heart when working on your next responsive project. I would love to hear what other things you would advise too.