Table of Contents
Want to design responsive website you can be proud of? This is definitely not an easy feat. Even though your project looks pretty good from design point of view, there are still many things that can break it along the way. Fortunately, I’ve got some useful advice for you to save your time and nerves. So, today we are going to discuss couple (seven) of suggestions and tips you should consider to achieve your goal. Let’s dive in …
#1 – Focus on content
Mobile-first, desktop-first or whatever approach you use or like, the most important thing to keep in mind is content (and then context). The content should always drive the structure and organization of the website. So, the first thing to do is to become familiar with the content of website. This should be done before getting your hands dirty – before creating any wireframes or mockups. The sooner you will take this step, the better. When you omit this part of process, you are only putting yourself at risk of trashing your current work and starting all over again. You certainly don’t want to waste time of your and your client.
#2 – Forget the resolutions
Yes! Remember this, spray this on your wall if you have to because this is (after being content-focused) one of the most important rules of responsive web design. Understand, you are not creating for fixed dimensions. Your creation will have to adapt to various sizes of screens. What’s more, if you are not able to see the future, the range of resolutions in use will only expand. So, if you are still working in resolution-focused approach, you are about to get into big troubles.
Quick way to get out of this dead end is to adopt content-focused approach. What this means is simply testing your website on different resolutions and dimensions to see where the content (layout) starts to break and use this dimension (width or height) as a breakpoint. In case of some websites, this will probably mean adding a bit more breakpoints than you are used to, but don’t worry. It will benefit you (or your client) in the future because, if done right, your website will be ready for device that are about to come. Learn more about this here.
#3 – Think about bandwidth
Another thing to keep on mind is available bandwidth. To make this topic even better, users will have different resource to use according to their devices. All this means is that you have to consider thoroughly what to provide with and to optimize everything you can. We already talked about optimization before, so I just mention here that you should always optimize the CSS and JS files through minification and proper coding style and also optimize assets like images through available tools (PNGoo, JPeGMini, svgo).
#4 – Phones, tablets, desktops and …
Do you also live in the illusion that there are only three types or categories of devices you are designing or developing for? Well, in that case you should finally wake yourself up. In the world, plethora of various devices exist and with time even more will come. Now we have wearables like smartwatches, ebook readers, phones, smartphones, tablets, netbooks, notebooks, ultrabooks, desktops and more. Give it enough time and your t-shirt will be connected to web too.
This all means only one thing. When you create a website, responsiveness means seamless experience on all of these devices that already exist and also that not. Excuses aside. You have to tailor your design in such a way that no device, no matter its resolution or pixel density, will be an issue.
#5 – Typography
Web is about 95% typography. The most of content we consume on a daily basis is in certain way dependent on typography, whenever it is a blog post or infographic. When working with type, plan and test how it should look at different devices. Some article can look amazing (from typographic point of view) on desktop, but when you visit the same article on phone, it looks like a crap. The only way to avoid these situations is to always test different scales of the fonts.
You should always preview the content on as many resolutions as possible. Make sure the content looks great in every case. There is no “perfect” way to achieve this goal. You will have to learn about psychology and laws of typography and then go through trial and error to see what works and what not. If you feel that increasing the font-size will benefit the legibility and readability of text, then go with your gut. Only by doing this, you can bulletproof your website. And please, don’t believe that bullshit about smaller font-size on smaller resolution.
#6 – JavaScript & performance
When it comes to performance, JavaScript can be the major influencer. JavaScript became very popular in last year or two and many sites are starting to overuse it. It is not so hard to find a website with more than seven different script files (not including jQuery source files) linked in. Even though some effect made or managed by JS can be pleasant, the can also have significant impact on the performance and loading time of the website. Keep in mind that good performance and low loading time should be prioritized.
Ask yourself if this or that fancy stuff provided by JS is really necessary or consider using that feature only on certain devices with more available resources and performance like tablets and desktops. You can do this easily by using dedicated commands and event listeners in your scripts.
#7 – Retinas!
The last thing I want to touch are retina displays. These screens have higher pixel-density which means ability to display more pixels and so much better, smoother viewing experience. In a short, you are able to see much more details in high resolution pictures or little flaws in low-res images. It is similar to DVD VS blue-ray. Conclusion? Think about including high resolution versions of images that will be served only for the devices with retina displays.
Summary
Responsive design is not just about making website looking great on smartphones, tablets and desktops. To create truly responsive experience there is much more to keep in mind. I hope that these seven tips will help you in achieving your goals.
If you liked this article, please subscribe so you don't miss any future post.
If you'd like to support me and this blog, you can become a patron, or you can buy me a coffee 🙂
Become a Patron
