South African Website Design Company

// Giving the Internet a make-over since 2006

Web Design Articles Get a website that works on wide-screens, tablets and smart phones...

Get a website that works on wide-screens, tablets and smart phones

Ordinary websites are designed with fixed widths, usually 990 pixels wide which ensures that the website looks good on the majority of PC screens and tablets (in landscape mode). A responsive website is one that dynamically changes width (and sometimes layout) to fit the device that the website is being viewed on.

Why our Responsive Website Design is superior

Most responsive website designers just throw the design into a liquid framework like bootstrap or similar and expect the framework to do all the work for them. There are several glaring problems with this method, namely:

  • A framework isn't intelligent enough to realize when elements in a website are poorly spaced, which they often are in most views when a website uses a liquid (percentage based, instead of pixel based) layout.
  • Your content is the most important thing on your site, so it makes sense to have the design compliment the content. Using frameworks and boilerplates means that you need to fit the content into the design instead of designing around the content. This violates one of the fundamental rules of design: form follows function.
  • Images are not optimized for each view. Why should someone viewing a site on their Smart phone with a poor WiFi connection have to load the same size images as someone using a pc monitor at 1080p?
  • Most frameworks ignore the users on the opposite end of the scale that use wide-screen monitors and want to make the most of their screen real estate, instead focussing on 'mobile first design'. This is where we see unuserfriendly design choices like hamburger menus (those 3 lines you often see to denote a menu on a mobile) on widescreens.

The Solution

Our responsive websites use an adaptive static layout which means that we design the website in several different standard sizes:

  • Your website will work on old 'square' computer screens, including wide screens. We design a wider version of your website to maximize screen real estate that would ordinarily be wasted.
  • Your website will work on tablets in both landscape and portrait mode. We ensure that menus work properly using touch technology. For example: we don't rely on mouse-over only technology for drop-downs because that doesn't work on touch screen.
  • Your website will work on smart phones in both landscape and portrait mode. Menus work properly using touch technology, as above, and, where appropriate, lower resolution images are served to the user to increase browsing speed. Additionally we take into account that touch screen devices require the user to use their finger (which isn't necessarily skinny), and not all smart phones are jumbo size, so hit areas need to be around 40 pixels².

This ensures that spacing is pixel-perfect and optimized to suit each view (instead of leaving it up to chance).

In order to compliment the growing array of screen sizes, in 2017, we further improved the adaptive static layout to use liquid widths between these set sizes. This ensures that you're making the most of your screen real estate even in odd-sized smart phones and tablets. We've also started implementing other small but useful changes. For example: we link telephone numbers so that they can be clicked to use Skype on PC, while click to dial on mobiles.

Responsive Website Cost

Responsive websites entail approximately 5 times more work than ordinary websites, and are therefore more expensive - though thankfully not 5 times more expensive. You can get a rough idea for budgeting purposes from our latest price list, but feel free to contact us for an accurate quote.

Responsive Web Design Process

The length of time it takes to design and build a responsive website depends on the scope of work - it could take as little as 3 weeks or longer than 3 months. If you can tell us exactly what you need done, we can give a more accurate timeline.

Making an existing Website Responsive

Ordinarily, if we take on a job, we will give it a complete overhaul. We design and build it from scratch. We do have exceptions to the rule (for example a Clicks Health Conference website we did), where if the existing website design is satisfactory, we won't redesign, but will still rebuild the website from scratch to ensure proper coding practice and easier maintenance.

Is Responsive Web Design Necessary?

Prior to April 2015, the answer was: It really depends on your target market and your budget. If your website is aimed at less tech-savvy individuals who are unlikely to view your website on a mobile phone, then a responsive site is probably not necessary. Without responsive technology, users should still be able to view your site on a mobile phone, but they will have to pinch and zoom in order for the text to be legible. So, if you simply don't have the budget, then don't go and get yourself into debt. Rather stick with your standard website until you can afford it.

However another factor has entered the equation. Since April 2015, mobile-friendliness has been declared by Google as a factor in the search engine algorithm - this means if your site is not responsive, it probably has already started to slip down in the search results pages.

So if you want to stay ahead of the game, avoid any kind of search rank penalization and offer your customers a user friendly experience, regardless of what device they are using, then responsive web design is something you should invest in. Considering the growing number of individuals who surf the web using their smart phones, as soon as you can afford it, we would recommend spending the extra cash and getting yourself a responsive website.

  • Check if your site is Mobile Friendly »

This web design article is the intellectual property of Coza Web Design.
Please do not copy this in part or whole to pass this off as your own. Be original.