“Oh, it should look good on mobile!”
It was the end of a meeting with a new client, and we’re just about to wrap up our video call. We spent close to 2 hours just to outline exactly what he requires for his site and some funnels for lead generation.
Some components we covered include a Twitter feed, Pinterest to showcase his company’s work, and even a feature to allow potential clients to book his services conveniently.
At the end of our call, he brought up that bit about responsive mobile site design.
It’s not the first time that’s happened. Plenty of times, an awesome responsive mobile site design for a new website is implicit and an afterthought.
And here we are in 2020, where we expect sites to look impressively on all devices – on phones, tablets, smart tv screens, etc. and that makes sense.
But when we think about our website or web applications, we imagine them appearing first on desktop monitors and laptops and secondly on mobile devices, instead of the other way round.
Did you know that there are nearly 3.5 billion smartphone users worldwide? This means 45.15% of the world’s population owns a smartphone. This figure is growing exponentially considering from 2016 when there was only 2.5 billion users, 33.56% of that year’s global population.
That is why an outstanding mobile design is not just a priority but a necessity today. A web application or site that is designed to adapt both the size and connection speed of smaller devices.
Let’s dive into what is responsive design and what are the elements that are essential for designing an effective responsive mobile-first website, along with the best tools to implement them.
What is responsive mobile site design?
Responsive design, or mobile-friendly design, ensures that visitors to your site have an amazing experience, and it’s device agnostic.
That means whether they use a desktop computer, laptop, smart TV, a smartphone, or a tablet, your site will look and act the same way.
If you visit a site on your smartphone and it has the following characteristics, it’s probably not responsive:
- Text is so small, it’s almost unreadable
- If you try to fill out a form, it stays small, and you must zoom in to fill it out
- Media files – images and videos appear out of alignment
- It’s difficult to click on navigation bar elements
You must scroll from left to right on your smartphone screen to see the entire home page. That said, this site would be considered unresponsive.
In order for a web design to be considered “responsive,” it needs to have three key features. Web designer/developer Ethan Marcotte — the author who conceptualized responsive web design — describes these features as:
- The site must be built with a flexible grid foundation.
- Images that are incorporated into the design must be flexible themselves.
- Different views must be enabled in different contexts via media queries.
Eventually the web is a fluid design medium. There’s never been anything quite like it—not really. We’re designing interfaces that are effectively edgeless: they can be accessed on any kind of device, on screens of any size.
As soon as a page is published online, we can’t predict how someone experiences it, yeah we do have heat-mapping, behavioural-monitoring tools, but how an user experienced your website signals to them your brand. Their screen might be wildly smaller or larger than ours, sure.
However, numerous uncontrollable factors will influence a user’s experience: their network might be punishingly slow; their data plan could be stringently capped; they may use their voice to connect with your design; they may not see the screen like you do.
Lack of design control
In other words, we’ve never had any kind of control on the Web. And that lack of control can feel scary, sure—but if we approach it properly, it can be incredibly powerful.
If there’s a wish for responsive design for the next decade, it’d be for us to forgo the idea of control – within a page. But our industry is still learning to move beyond that.
Till date, most businesses structure their responsive web design workflow according to 3 key concepts: “mobile,” “tablet,” and “desktop.” And the definition of these words are subjective, certainly.
If you ask a group of users who ain’t familiar with web development, you probably get a handful of different definitions.
In the current web development industry, when it comes time to design or building a responsive mobile site interface, companies are still using these terms in three clear, tactical ways:
- Each term’s assigned a pixel value, which usually corresponds to popular screen widths.
- Those widths are used to generate mockups for a page’s primary breakpoints.
- Once those designs are handed off to engineers, their widths are turned into media queries.
It’s about time – the next evolution of web development
If you’re a seasoned web developer or designer, sooner or later you’ll realize the term ‘device-agnostic’ will resonate with you – more than ever.
Many developers would still think it is merely dealt with basing responsive breakpoints on content rather than device specs or functionality – there are more to devices than the screen size.
A device-agnostic approach also takes into consolidation the combination of screen resolution, input method, input latency, browser capability and connection speed, etc.
With so many variables at stake, the sensible thing to do is to build from scratch from the point of the harshest conditions (or functional but toughest items to deliver).
Just like how our automotive vehicles are designed to perform in extreme weather conditions – heat or on icy roads, off-terrains landscapes – websites or mobile apps should be build to face the reality of the web’s intrinsic variability.
Some “harshest” scenarios at the top of the list are: hostile browsers, tiny screens, connection speed, site “first contentful paint”, input latency, “time to interactive”, etc.
5 tips to design a responsive mobile site
1. Standardize the ‘look’ and ‘feel’ of your site
Inconsistency of an user’s browsing experience across different platforms is a dead-knell to your site – it would frustrate visitors that led to higher bounce rates and page abandonment, and would impact your SEO negatively.
Use your site map as a guide and create easily accessible and usable functions within your mobile or website design. An extra emphasis on navigation menu, contact info, key content, and button sizes (especially on mobile) – all should be a breeze to find and go about.
How do we know a mobile site or website is consistent?
Look at their code, layout, spacing, alignment, height, width, conditional rendering, conditional scroll, readability of text, horizontal scroll, icon-positioning.
Recommended tool: Bootstrap is lauded by many as a highly effective tool for creating mobile-first responsive designs that adapt consistently to devices of all shapes and sizes.
2. Technical compatibility on different browsers and platform
Any meticulous web developer will place a high priority in design responsiveness where it is accessible on any platform.
After all, in today’s digital world, it’s mobile-first. Compatibility is the ultimate criteria of great web design and you’ll have to evaluate across all relevant platforms as part of your design process.
Recommend tools: W3c mobileOK Checker, iPhoney, Google Mobilizer, Gomez, Opera Mini Simulator and dotMobi Emulator.
3. Know your ‘Whitespace’
Did you notice even social platforms like Facebook, Instagram has plenty of whitespace on your desktop computer or laptop. Whitespace is an “amplifier” to help readers focus on your content.
With the design of responsive websites, in particular for wider screens, starting from tablet, PCs, laptop, all the way to your smart TV, providing the reader with a comfortable experience is a top priority.
Practically speaking, you need to ensure that padding and margins do not disappear on smaller screens. Font sizes and line spacing should adjust to the relative amount of whitespace on screen.
Recommended tool: Your eyes. There is no commonly agreed ratio that determines the amount of whitespace on a Web page, so browse your Web site with your visitor hat on and trust your instincts on what feels comfortable.
4. Scrolls, clicks, menu – Intuitive navigation
The navigation elements of a responsive Web site are of vital importance, because the quality of the user experience is largely dependent on them.
Users want to intuitively be able to find what they are looking for without hassle.
Menus are essential in defining the navigability of your site – and how it’ll be viewed on different mobile devices. You can use Mobiletest to test your site out.
In terms of effective responsive design on mobile, the hamburger menu (aka 3 lines) is the most important. Our suggestion is to have a menu that drills down up to four levels, and use arrows that look like buttons so that the user can tap on the menu item or tap on the arrow button to expand (if needed).
Keeping it clean and minimal is key. Colour and indenting text is also suggested to be used to distinguish the level of navigation in the hamburger menu.
5. Speed matters – Optimized images
Your site is probably on a Content Delivery Network (CDN) to enhance your page load speed, but let’s not take it for granted especially if your media files are not optimized.
You’ll be surprised, un-optimized images will cost your site significant speed damage. Despite improvements in Internet speed worldwide, image optimization is still a vital consideration when it comes to responsive design.
A huge percentage of Internet users will access your Web site via mobile connections and not superfast broadband.
There is simply one factor to consider when it comes to optimizing images: time.
Loading time has a huge influence on both the user’s patience and page abandonment.
Hence, start optimizing images if you have not – ensuring your site to load in less than 5 secs.
Recommend tools: TinyPNG is a free web application that can reduce the file size of JPEGs and PNGs with no noticeable decrease in quality.
Top responsive mobile site design examples
The call-to-action and the Dropbox hero sections adjust very well with varying screen sizes. You’ll notice that there’s an arrow below the hero area and it gets displayed only on larger screens, it won’t appear on smaller devices.
This is simply because of the fact that users would scroll down naturally to move to the next section of content.
This is a great example of amazing intuitive navigation and responsiveness.
Their site design adapts well with an user’s screen size. As the screen size becomes smaller and smaller, the number of columns in the design grid keeps decreasing to ensure compatibility with the screen-size.
In summary – responsive mobile site
Your responsive website should display consistently across all major devices, be a pleasing seamless experience for users to navigate and read, and load in a snap.
If it fails on any of these fronts, you have some work to do.
Fortunately, with the tools and resources mentioned above, you’ve got what it takes to start making tweaks and optimizing your site.
Well, if your website design is not currently supported on all devices, you have two options. You could retrofit responsiveness into an older design. But for what is worth, starting from scratch is a more viable next course of action.
Whichever action you take, there’s one thing you sure can’t do – do nothing, ignoring responsive design.
It is no longer an option – it is an essential necessity for forward-thinking businesses especially conversion-oriented mobile sites or websites.
Bonus resources
How to check your mobile site responsiveness?
How to check your mobile sites page speed?
Enjoyed reading the above? do share with us your thoughts in the comment section below.
If you are looking to explore web development and programming as part of your career growth and build market-ready applications like Grab or Lazada, do check out our Full Stack 360 certification course to help you achieve this goal.
What is responsiveness mean to you in web development? Leave them in the comment section below.
Don’t forget to visit us on Facebook and subscribe to our YouTube channel for more interesting content too.
0 Comments