Responsive Websites

 

Mobile phones are everywhere and every site in the world is more or less mobile friendly (responsive), so while RWD isn’t a hot topic anymore, as it was ten years ago, it’s worth understanding the complexities that still exist today.

What is a responsive website?

A responsive website is a website whose content automatically rearranges itself and adjusts to the size of the screen it’s in.  Not only should the content fit, it should look good and still be easy to read.

Layouts are adjusted to fit screen sizes from mobiles, to tablets, to desktops and upwards. It’s called responsive because the website layout automatically responds to the screen size, changing the size of images and text so everything is still visible and easy to read.

A mobile friendly site is an alternative way of saying responsive website design.

Is a responsive website suitable for me?

Except for specialist sites that are designed for specific screen sizes, all websites are now made with this technique.

The only other option is mobile-first, which is just another form of responsive web design. So yes, you almost have no choice but to get one.

Reasons to get a responsive website

Google treats websites that aren’t responsive as inferior and therefore ranks you lower.

Your web analytics will tell you how many of your users are viewing your website on desktop vs mobile.

People expect your website to work just as well on both devices. They do not expect an inferior experience.

People will not use your business if your website looks inferior. A website that isn’t optimized to look on all devices (mobile, tablet, desktop) risks losing business.

 

What are my options with regards to responsive websites?

The discussion revolves around how much effort to put into making it look good across each device.

Do you make the design the same? Do you show less text?

Do you take into consideration that the amount of content on a desktop site, looks like a lot on a mobile phone.

Responsiveness vs site complexity

Smaller sized pages are easier to make responsive. There are less elements on the page to shuffle around. Larger, more complex sites might need special navigation, special consideration to the user experience and how they will navigate around a large site. Costs increase substantially, the larger the site.

Responsiveness vs content

Getting the right amount of content across all devices is a matter of balance, tweaking and compromise. Long headlines may look nice on a desktop but look awkward on a small screen. Likewise, long paragraphs of text may be easy to read on a desktop but will seem like a lot larger article on a small device which can fit less words per line.

Consider where people will be looking at your site

Google says that most are now surfing on their mobile phone.

This broad statement can be misleading since it may not apply to business sites but consumer sites. If you think (or have analytical data) that suggests people are going to view your site on a desktop, give them the full experience.

If you think people both desktop and mobile is equally important (like we do) spend the extra time to make the content look great on both devices.

If you think people are mostly going to be viewing your website on mobile, make a smaller site or go for a mobile-first website design. These sites tend to look chunky and sparse on a desktop but that may be okay for small business website or a local business website.

For corporate websites, professional website or industrial websites – you ought to think about the desktop first.

Regardless of which you priotize you won’t be able to consider everyone – leave those things for now and tackle them as part of an ongoing website improvement strategy.

 

Graphic designers and developers like this symbol because they recognize it and know that clicking on it will bring up the menu.

User Experience Designers may tell you that it’s well recognized but not that friendly.

If you have a small site with not too many links, then why hide them on mobile. Maybe because of aesthetics but in terms of creating a quick user journey, why hide your links?

Of course, it depends on the situation but spend a little time thinking about User Experience in relation to hidden menus and how this will affect people using your site and contacting you.

Creating separate designs for my mobile and desktop

On projects with deeper budgets and custom designs that are more unique, we can help you visualize how a website will look on mobile phone and desktop.

This can be important for custom e-commerce designs and custom PHP developed functionalities.

The designs will also help the developers understand how to develop for different devices look and give feedback on how to simplify the design.

Modern technologies used in Responsive Web Design

Technically speaking, there are different way ways to make a website responsive. It’s important to know your options

WordPress / Elementor

A lot of modern websites are now automatically responsive, however may they need adjusting through the content management system to make them appear perfect on all devices.

Even then, the website should be fairly simple and segmented otherwise you’re going to be fiddling around a lot with the settings.

Bootstrap

For custom websites (whether is a custom design or custom code), most of the time we’ll use Bootstrap.

Bootstrap is a code library that speeds up the time it takes to make a website responsive.

It is still coding, so you have a high level of control and it still takes more time than working with a tool like Elementor and WordPress.

We’ve played around with other technologies like Foundation but Bootstrap, superior or otherwise is clearly the market favourite and therefore more cost effective, since there is a larger pool of developers to choose from and does the job perfectly well.

Grid CSS / Flexbox CSS

If you want ultimate control on how your website looks on all screens you need to work directly with the underlying code.

Grid CSS and Flexbox CSS are the new standards in making website layouts and they provide some nifty techniques to make layouts easier to manage for different devices.

Using this technique will give you the highest speed score.

Responsive website conversions

If you have a large site that is custom made, you may still be looking to convert it to a mobile friendly site. Doing so, isn’t an easy endeavour and that’s probably why you still haven’t done it. Never fear, we’ve done this sort of work before and can run you through the process.

You have options on how you tackle it. The main consideration is the time needed to do it properly is large, therefore how to go about this in a strategic way.

Large sites may have data tables and complex navigation structure. They probably have old code and an old design to boot. Nevertheless, it must be tackled. Fortunately, you’ve come to the right place to get it done.