Responsive Design

Looking great in all devices

Your website to look good on small mobile devices as well as large desktop screens.  Whatever their screen size, the aim of good web design is to give your visitors the best experience.

Sometimes it might be necessary or desirable to create a different version of a particular page for small and large devices.  On most sites, however, the content of a page is built in rows which contain columns.  When the page gets narrower the columns slide under one another to form one taller column.

Responsiveness and Complex Designs

Not all designs look good in every screen width or device.  One of the reasons it is useful to standardise the height/width ratio of your images before building a web site is so a designer can provide you with a good balance between content, font size and the images used to illustrate that content.

The more complex the design, the more likely it is to need extra time spent on making it look good in various size devices with the result that the site is more expensive to build.

WordPress Responsive Website Design

The frameworks we use to build WordPress sites allow us fine-grained control over how your site will look on devices of various widths.  The combination of devices and browsers that your visitors might use creates a lot of permutations though, so it is possible that issues might arise with how your site looks for a particular visitor.

We also use Sizzy to check your site across a wide range of devices.

Responsive Design for Static Bootstrap Websites

One of the most commonly used responsive frameworks used to build responsive websites is Bootstrap, a mobile-first framework.  For an understanding of how content responds to various screen widths play around with their Grid page.

Navigation

Depending on the size of the site there may need to be different types of navigation to optimise visitor experience depending on the device they’re browsing on.  Although the regular menu will change to a mobile menu automatically, on sites with a lot of pages it can sometimes help to have a different navigation policy for smaller devices.

As this means constructing more than one menu, it can add to the time and cost of the build.

Responsive Header

There are some sites where the logo design means it would be better to design different headers for wide and small screens for cosmetic reasons.

Quoting for Additional Responsive Elements

Where we see that a particular site might benefit from extra responsive elements, we will explain the extra costs and benefits to you along with the pitfalls involved in not doing so.  We will also suggest ways of working around the main design so that additional work is not necessary.