It’s easy to navigate, brimming with first-class content pieces, and the aesthetics are visually stunning.
But before you pat yourself on the back, here’s one crucial question you should know the answer to:
If you’ve no idea how to answer that question, we’ve simplified the definition of responsive web design for you.
A responsive web design gives an ultimate user experience by making sure your website and all its elements adapt to the user’s device.
It’s now the benchmark in developing customised and coherent experience across various devices, including those that have yet to be released to the market.
Designing for a select device doesn’t cut it anymore. Instead, it’s highly advised to optimise your website and incorporate responsive web design principles to allow it to be flexible enough for the end user and their device.
Mobile web traffic has cornered the market. It currently holds more than 50% of the website traffic. Suffice it to say, it has knocked desktop traffic out from the top spot.
Side note: Apart from the two platforms, you can also expect traffic from tablets. Although they only take up about 3%.
Data Reportal documented 13.55 million mobile connections in the country in January 2020. Since the onset of the pandemic, it has only gone up.
According to Statista, Hong Kong is one of the countries with the highest mobile penetration rates in Asia, with almost 80% of the population using smartphones.
Different elements make up a responsive website. But to be fully effective, these aspects should all be given attention to.
And the list keeps getting longer.
It’s best to use a code that restricts media files from going beyond their containers to accommodate various device capabilities. In this way, no matter what device is used, images can stay within their respective elements.
Additionally, designing portrait and landscape orientation ensures that they readily switch from one to another following page load.
This negatively affects user experience.
By ensuring these components are fluid enough to go with the flow, your websites can maintain uniformity across various devices — even future releases.
A pixel-based layout has the flexibility to adjust their elements, according to the device width.
Fluid designs are easier to handle. You only need to update one version of your website, instead of spending money and time tweaking it multiple times to ensure your website is completely mobile-friendly.
In most cases, substantive changes are in order to support the particular screen size and make sure the elements adjust accordingly.
CSS3 Media queries facilitate shifting styles according to the device’s features, like device width and orientation.
It’s a much better approach and provides a more customised experience than defining HTML/CSS breakpoints.
These three elements are critical players in creating a responsive web design.
To paint a clearer picture, here are four examples of responsive websites from Hong Kong:
% Arabica Coffee’s website is a shining example of responsive images.
The speciality coffee brand gives its web visitors a superb user experience by ensuring the images on their homepage don’t only look good on desktop and tablets.
On smaller screens, such as mobile devices, the photos appear on portrait mode, looking just as enticing.
Localiiz is a content-rich website.
Therefore, a full-column layout is an excellent choice for wider screens (i.e. desktops and laptops) to allow readers to have a look at the variety of real stories, insights, and news available for their consumption.
However, this design is not very mobile-friendly. It makes the screen look congested, which can be distracting and overwhelming to everyone who lays their eyes on it.
Localiiz’ responsive web design adjusts the column layout once it hits a specific breakpoint. Article blocks are arranged in four columns for desktop, merging into two for tablet and shrinking into one when viewed on smartphones.
You can read more about our case study for Localiiz website.
As an advocate of responsive web design, we here at Butter lead by example in the form of responsive menus.
It’s fundamental to change the menu layout to tailor the design to the device in use. If not, the navigation tends to overshadow other elements on your website.
Moreover, most smartphones and tablets only respond to the click of the thumb (and other fingers, of course!). Navigation links should correspond to the size of the fingers, which are bigger and less accurate than a computer mouse.
To carry this out on our website effectively, we reformatted the desktop’s mega menu and unique icons into a more responsive web design. We switched into a hamburger menu with clear and tappable drop-downs for mobile phones.
SCMP is known for being a credible source of news and insights in Hong Kong. There are plenty of different elements on their website, such as an opinion bar, which you won’t normally find on other platforms.
The desktop design is fully maximised, with ads and a few menu buttons on top, navigation on the left side, and an opinion bar on the right. The news articles sit right at the centre, which is very fitting since it’s the heart of the website. All in all, it requires five columns to put everything on display.
This can be too heavy, in terms of image and content, for smaller screens.
To streamline design and make the website more responsive, a completely unique approach was necessary to make it more mobile-friendly and well-suited to other devices.
The design adapts as it shifts into different smaller breakpoints.
As for mobile devices, the news stories were made to dominate the screen, as they are filed into a single column.
The ads formatting was changed, and the opinion preview and a sneak peak to a list of articles are found directly under the pile of news articles.
There’s an additional carousel feature found at the bottom of the page. Each frame covers a particular topic, sorting the content pieces properly and making it easier for readers to locate a specific piece.
Butter understands how transforming your Hong Kong website with a responsive web design can change the game for your business. If you need help figuring out how to make your website mobile-friendly, feel free to send us an enquiry.
Work with us:
Michael leads the Butter team and has had a career within industry leadership roles partnering with clients to drive digital transformation, performance marketing, and building business intelligence practices through marketing analytics. Michael focuses on providing digital & ecommerce consultancy for clients, aiming to improve business and commercial operations. Michael has an MBA from the Hong Kong University of Science and Technology (HKUST) and NYU Stern Business School.
