Why You Should Go Responsive
Published on 03/08/16
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.
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.
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.
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.
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.