The most commonly used page sizes to base web design around are 1024, 768 and 320; however, those sizes are very rarely the actual width of any desktops, tablets or mobiles. There is a wide variety outside of these resolutions but when it comes to web design those three are pretty much standard.

How does this work for the other screen sizes?

Many sites use breakpoints for the three sizes with un-adaptable sizes that will use the closest width to your device. This is better than just simply having a one size, desktop-only design as it does provide touch friendly and simplified version for tablet and mobile, but it can still cause issues with the various screen sizes of some devices.

If a user has a PC or laptop with a screen size under 1024 they’ll receive the tablet version, but on a tablet of less than 768 width, the mobile version will be displayed, which will be quite off-putting for the viewers. Here are some recommendations from our Wigan web design team.

Use percentages rather than pixels

To create the most adaptable of designs, use percentages wherever possible. This will cause the layout to change its size dynamically to fit the proportions of the device it is being viewed on. This will also mean the page can fill up as much of the screen as you like, as opposed to potentially only half of the screen if it’s on a pixel size just under the threshold of a breakpoint.

Base the design upon the content

Breakpoints should be based upon where the content of the page naturally breaks and not to various screen widths. Rather than creating a design and changing it to suit a tablet device, instead you should discover at which width the content struggles to display appropriately.

It’s a good idea to start with a large size such as 1500, and then gradually decrease the size until the layout is changed due to content breaking. Even with odd sizes, if the content works then there is no need to modify the layout.

You may end up with seemingly random breakpoints of varying amounts, but the effect of this is that how the content is displayed will be based upon the content itself rather than a screen size.

With so many different devices sizes out there, it would be extremely hard to set all the breakpoints that would be required for an adaptable design. By using percentages and basing upon content, while not necessarily providing a perfect looking page on all devices, it will help to display the design as best as possible.

nexusadmin

Bespoke Website Design

Established in 2010, Nexus Websites are a creative digital agency based in Wigan working with clients all over the UK. With a vast range of experience and a proven track record we have everything you need to take your business to the next level.