Table of Contents
Welcome back in the third part of the UI design series. In this series you are about to learn how to create great user interfaces through thoughtful design. In the previous parts you understood how the importance of creating a story in UI design and how to do it. Then, in part 2 you learned about how to streamline navigation in your designs and make it more user-friendly. This part will be all about making UI design responsive. Let’s start.
Why responsive UI design
Let’s begin with my favorite question “Why?”. Why should you even think about responsive UI design? The numbers will give us the best answer. The Smart Insights data say that 80% of Internet users own and use smartphone on a daily basis. What’s more, according to Search Engine Watch in January 2014 Internet usage on mobile devices exceeded usage on desktop devices. With the introduction of various wearables like smartwatches and smart wristbands, this trend is only to increase and probably accelerate.
You had better make your UI design responsive because you cannot predict how it will be accessed.
However, these devices are not the only one used to access content either through web browsers or via apps. Close behind are tablets and game consoles. Oh, and don’t forget the first line of smart TV’s and also cars. All of these devices can access the web at least through internet, some like tablets, game consoles, smartphones and smart watches are capable of using apps. This all sends pretty clear message to designers. You had better make your UI design responsive because you cannot predict how it will be accessed.
One more reason why you should approach UI design with responsiveness on mind. Do you want to spend long hours creating dozens of different iterations for hundreds devices on the market? Instead, you can make your design responsive by listening and watching for the reactions of the content and use the saved time to do something you want.
No.3: Make it responsive
Now, I hope, you understand why the responsive UI design is the way to go, let’s begin with the first necessary step. In short, use columns! Implementing a grid system into your project is something you cannot afford to skip. Don’t worry you don’t need to go through the whole history of grid in design to be able to use it (it’s short post). All you need is to decide on how many columns do you want the grid to have. You can also consider various options of “supported” widths of these grid systems.
For example, Bootstrap uses 1170px while Foundation by ZURB 1000px. Another very popular, if not the most, is 960px grid system that is used in the majority of other grid systems. What you should keep on mind is that every grid system will require investing some of your time learning it because different system also means different syntax. So, take a look at couple examples, pick one you like and learn it properly. If you like Bootstrap, you can start here.
With grid system implemented in your design, it will be much easier for you to manage content as the screen size and proportions will change. Huge benefit of using grids, columns and content-first design is that your project will smoothly adapt to any resolution and device, already existing or not. In other words, you will not have to check the tech news to know what new media query or UI design version should you add. Remember, use columns!
I guess it approximately two years ago when parallax scrolling became the next big trend in web design. In a second everyone was implementing it into his website and showing it to the world. The main point of parallax is the alteration or the difference in the apparent position of an object viewed along two different lines of sight (parallaxis in greek). In other words, the background of the website moves at a different speed as the rest of the page.
Many people consider it cool and innovative.
Using parallax scrolling gives you couple benefits. First and foremost it surprises the viewers and creates the wow effect with page depth and animation. It can also use story-telling to guide visitors through the site. Users might also stay longer on the website because parallax scrolling provoke their curiosity and encouraging them to scroll until the end. You can use it to direct user’s attention to calls to action. Last, many people consider it cool and innovative.
We already touched this in the columns part. You should implement fluid grid in every UI design you work on if you want it to work on multiple devices without additional effort. The main benefit of fluid grid systems is that they change the appearance of content according to width of the screen (device resolution). As a result, the UI will look different on mobile device, tablet and also on desktop. This is nothing you should try to avoid. It will help you make your UI design more natural and user-friendly.
From various interfaces, most of us are used to drop-down menus. We recognize them when we see them and know how to use them. However, why we should be using them? I will give you five reasons. First, they allow us to make all options clearly visible all the time. Second, when using drop-down menu, we can chunk information into logical and meaningful groups. Third, drop-down menus allow us to use icons and other symbols in UI design.
With drop-down menu, the navigation can be longer than Bible and your nerves will still be OK.
Fourth, we are no longer limited by the size of the screen. Do you know the situation when you need to squeeze every pixel to fit in just one more link or icon? With drop-down menu, the navigation can be longer than Bible and your nerves will still be OK. Fifth, it helps you remove the clutter from design and give more space to the content. All that said, don’t overdo it. Remember the users and keep the interface usable.
One good reason to keep your designs responsive is that big brother is watching. Yes, I’m talking about Google. This part is more about focused on web, but it is still important to keep in mind and follow the Google’s standards in order avoid problems. These standards include avoiding software like Flash, using text that is readable without zooming, adapt the content to the screen so users don’t have zoom or scroll and last placing links far enough apart so the user can easily tap the one he wants without activating another one.
The last advice for creating responsive UI design it to make sure it scales to any width. Forget about searching for various breakpoints and screen resolutions to create media queries and design versions. Just focus on the content and work with it. Content will show you when exactly will you need to create a breakpoint or create new version of your design. With this more mindful approach you will also be prepared for devices and other ways user will access and consume the content in the future. Remember, content is still the king.
Final words
Well, this is all for this third part of UI design – 10 steps for great user interfaces series. Today you’ve learned about using columns in your design, what benefits can bring parallax scrolling, that you should use fluid grids, how drop-down menus can improve the interfaces, what you should pay attention to avoid penalties from Google and to make sure that the design will always fluidly scale to any width. Thank you very much for your time.
What are your thoughts and suggestion for responsive UI design?
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
