A Guide to Mobile-Friendly Web Design with Dawid Tkocz of Brand24
Mobile matters.
The shift to mobile devices, we are both witnesses and the main driving force of, produces a huge social, political and cultural change in our lives, not to mention the e-commerce itself!
The number of mobile users has already exceeded the number of desktop users. Goldman Sachs predicts, that by 2018 mobile-commerce will represent nearly half of e-commerce with nothing less than $626 billion being spent shopping on smartphone and tablet devices. In 2015, Google announced creating a mobile-friendly algorithm designed to favour mobile-friendly pages in Google’s mobile search results. It is Wendy Clark, Senior VP of Integrated Marketing for Coca-Cola Companies, who is said to famously declare: “If your plans don’t include mobile, your plans are not finished!”.
Well, even my two-and-a-half-year niece knows how to how to swipe right and this, I hope, dispel the rest of doubts you might have in regards.
In short, not optimizing your website for mobile traffic translates into losing traffic.
Following the trend, I have invited our expert Dawid Tkocz, UX/UI Designer and Front End Developer here at Brand24, to give us a little guide into creating a mobile-friendly web design. You will find out what a mobile design is, what the most popular strategies to create a mobile-friendly website are as well as what qualities you need to develop to work as a UX/UI Designer.
A Guide to Mobile-Friendly Web Design with Dawid Tkocz, UX/UI Designer, Front End Developer at Brand24
1. What does it mean that your content is mobile-friendly? How to test your site for mobile-friendliness?
Basically, everything about creating a mobile-friendly design can be summed up with just one sentence – to create your website as easy as possible to be used on mobile devices.
If “Jack” uses a smartphone to visit your website and he ends up having absolutely no problem with navigation, he finds your products and he goes through the whole process finding exactly what he is looking for, this means your “mobile – friendliness” test is pretty much passed.
When it comes to mobile-friendly web design, the most essential thing I would say is to give people what they want from you and from your website.
It is important to remember, that content on the website must be flexible. We have thousands of types of different mobile devices right now, what is more, we have different operating systems, browsers etc. This makes things even more difficult when it comes to building and using a website. Additionally, we need to remember about Google’s rules that require each website to be mobile-friendly. Otherwise, they will move you down from the top SERPs (top search results) leaving your place for another competitor that will eagerly take your position there. So for anyone who has not built a responsive website yet, I would give one key advice – focus your web structure plan on mobile devices first. It is much more difficult to fit your design into a 375px than a 1920px wide desktop screen.
2. I have read that there are a few strategies to create a mobile-friendly website, and a “responsive” design is one of them. What exactly a “responsive” design is? What are other strategies for creating a mobile-friendly design?
The responsive design is the most popular and the cheapest method of creating mobile-friendly websites. What it means, basically, is that when we change the size of a screen, the web content adjusts to match that size.
When it comes to other strategies, we can split them into responsive design, adaptive design, native apps or experience mobile design.
Which one you choose, depends on your needs and budget of course, because if your website structure is not advanced, it doesn’t make sense to build an app. Development time and cost of this process will be 10x bigger than for responsive or even an adaptive design.
3. What are the most popular techniques to create a mobile-friendly website for a for small and mid-size business?
The most popular techniques for small and mid-size businesses are responsive and adaptive design.
Responsive design can be really easy to build if you use CSS frameworks (pre-prepared styles frameworks) which give you quite a simple way to reorder the blocks of websites and make them more flexible and easier to match the device screen size. Everything here will work automatically even when you resize a browser’s window on the computer. This method is the most popular and the cheapest like I said before. It’s good enough to be used for really small businesses with simple websites as well as for big e-commerce sites with thousand of subpages.
Adaptive design works better for large portals where we have a lot of widgets and some of them don’t work well on such a small screen as mobile. It is particularly popular for example for tourist industry companies to build adaptive design websites that fit thousands of offers and widgets such as weather forests, tourist attractions etc. It is just much easier to make an awesome design when you tailor it from the very beginning for a specific type of device rather than reorder and hide some website’s elements later on.
4. What is the hardest part in creating a mobile friendly web design?
The hardest part is to fit some kind of advanced extensions to small screens. Sometimes it is really painful. The best example I can give here is how to present a wide table with a lot of information on a 370px screen! It is not possible to squeeze the table, so every time we need to use a horizontal scroll. Again here, we can see that an adaptive design may be a really good solution for some kind of projects.
5. What would you suggest anyone who seeks to get qualified as a UX/UI Designer?
It won’t be something unique but just be patient and train all the time. If you practice constantly, your graphics skills become better and better. Things get a bit harder for UX Designers. UXers need more formal education, loads of theory and afterwards they can TRY to solve a problem on client’s website, but… at the beginning of their career nobody really trusts them.
It’s really a big problem there, because most of the companies that need UX tests and hire people to do that, they don’t really want beginners. It’s similar when we want to fix a problem with our car. We don’t want to give our precious toy to a beginner. It must be done perfectly and handled by experts. The same happens here…but with one difference. Car mechanic may be cheap and offers you some extra services, a UX Designer is not.
To sum up this, I would like to say: start doing your job by “copying” your mentors. Do exactly the same things until you feel more comfortable. Meanwhile, do invest time in building some social network. This will help you to sell your skills afterwards. Share loads of interesting articles and projects on Twitter, LinkedIn etc. Use social listening platforms to generate leads and do what you love!
You can follow David on LinkedIn. If you have any questions or results to share, we are happy to hear from you in the comments section below.
![9 Steps to Solid Brand Awareness Strategy [2023]](https://brand24.com/blog/wp-content/uploads/2020/12/15-The-ultimate-guide-to-brand-awareness-1400x660x2-640x300.png)
They are talking about your company