Skip to content ↓

e
4
education

Why You Should Go Responsive

Published on 03/08/16

These days a responsive website isn't just an extra - it's a necessity. This isn't only in terms of user experience but also with SEO. As mobile search and internet usage has surpassed that of desktop's, Google have introduced algorithms to rank responsive websites, higher in the search engine results pages. This means if you're site isn't responsive you will immediately be placed lower in the pecking order, straight off the mark.

Responsive design is the perfect solution to the multi-screen problem. It's the difference between having to fling your audience from one side of a page to another just to read and navigate any mobile website as you would on desktop... We're sure you're more than familiar with the sites we're referencing; where you have to relentlessly swipe from left to right back to left again in order to read a paragraph. Or having to continually pinch and zoom into every aspect of the page, simply to find the information you are looking for.

But fear no more. The responsive rule is in place to make every internet user's life a user-friendly, easily-navigable and readily-digestible dream! There are a few more things that will be helpful for you to know whilst considering responsive website design.

 

Responsive vs Adaptive Web Design

Although they appear to be very similar, these two variations can drastically alter the overall perception of your website. That being said, either way is perfectly acceptable - it purely depends on deciding which is the best way for the content to be displayed.

 

The Flow

Moving from various screen sizes on different sized smartphones and tablets, your content may begin to take up more vertical space - forcing anything below further down the page. This is called the flow.

 

Relative Units

Depending on the devices used, the pixel density will vary, so as opposed to working in pixels or points, it's better to work in flexible units such as percentages. So if you make something 50% wide, no matter what size the screen of the device, it will always take up half of the screen.

 

Nested Objects

When you have loads of different elements or content blocks on a webpage, it can become messy and unorganised. If you wrap elements into a container this keeps things more understandable. This is where you would use static units; on logos, CTA buttons or specific content blocks.

 

Min & Max Values

On smaller devices ou will find the majority of the webpages take up the whole width of the screen. This is because the screen sizes are small to work with and designers have to fit in the same amount of information in less than half the space. But, if you have the same rules for a desktop it can look stretched and make content blocks wider and less digestible.

 

Bitmap Images vs Vectors

If you are using a detailed image or photograph, you will have to use a bitmap image such as jpg, png or gif. These images must be of high quality to avoid looking pixelated and blurred. When using high quality photography you will also have to compress the image so the file size isn't too large - as this will affect the load speed of your page. If you are working within our content management system, all of the images used will automatically be compressed to ensure it doesn't have a negative impact on your website.

 

Breakpoints

When resizing a desktop window, you may notice a specific point where the content moves into a different layout. These predefined points are intended to make content easier to read across all devices and screen sizes. If you have three columns across on a desktop webpage, this is usually altered to one column on a mobile device.

 

Mobile or Desktop First

Our designers always design our client's websites mobile first. There isn't particularly any great deal of difference in regards to the outcome of the overall design - it's usually down to personal preference. Designing mobile first just ensures that all of the information fits onto a smaller screen. Having the limitations of screen size when producing the initial wireframes, allows for our designers to think creatively about how the website will work best in terms of responsiveness.

 

Webfonts vs System Fonts

The fonts you use on your website can have a huge impact on the overall load time of each page. If you use system fonts the page will load quicker, however if you decide to use a fancy font like Futura or Bebas that aren't typically on all devices, they will have to be downloaded - subsequently increasing the load time of the page.

 

What Is Responsive Design And Why Is It Important?

Find out all about responsive design and why it's so important.

Tagged Websites SEO 

Laura Sutton

Hi there,

My name is Laura and I'm the Marketing Co-ordinator here at e4education.

My background is in digital marketing, specialising specifically in marketing strategies. I hope to provide you with helpful, interesting and insightful content that will enable you to market yourselves effectively and with confidence.

Please let me know if my posts spark up any questions that you might like answering - I'd be happy to help. 

Drop us an email at hello@e4education.co.uk or call us on 0345 319 1039.