Here at Pumpkin Web Design Manchester, we are Manchester’s leading web design experts, and we provide high quality, effective, web design solutions for a range of local companies and businesses across Manchester, and the surrounding area. This includes Blackburn and Stockport. As a result, we have produced this guide to everything you should know about how web pages change depending on page orientation.
So, how does page orientation effect website features?
The orientation of the website page is determined by the orientation of the screen, whether this is portrait or landscape. Generally speaking, website users accessing the website with a mobile device are going to see a vertical webpage, while those using a tablet, laptop or desktop are more likely to see a portrait webpage. But how does this impact on the website features and visual design layout? Well, this can have a number of effects including:
- Text layout
- Image orientation
- Button size and shape
How does page orientation change text layout?
The orientation of the website page has a big impact on the layout of the text. This is because a landscape website page will have more space for text to be displayed across the page from left to right. Not only does this help to draw the eye across the screen, allowing the website content to be acknowledged, but it also means that text can be larger in size too. However, when this website is viewed in a vertical landscape, the text will stack with words being positioned one on top of the other. This allows the content to be viewed on the vertical screen without the website user needing to scroll. However, this will take some planning to ensure that all of the words are on display, and that words aren’t broken in half when stacking them. You will also need to make sure that each letter and word is still easy to read, even when stacked. Letters and font styles with descenders for example can interfere with the text on the line below. As a result, sans-serif fonts are usually more effective, as long as you also consider the spacing between each letter and word.
How does image orientation change with the page orientation?
Horizontal images that are rectangular can be effected by page orientation as these are likely to not fit on a vertical screen. This will mean that your potential customers or clients will not see the entire image, and may be frustrated and try to scroll across. Alternatively, the content around the image may not load correctly. As a result, it can be important to choose images that can look great on both vertical and horizontal screens, to enhance your responsive web design. It can also be a good idea to use vertical images for pages like the product page, as you can be sure of the quality and clarity of these on all screen orientations and devices.
How does page orientation change button shape and size?
The shape and design of your call to action buttons can change depending on the page orientation and layout. This is especially true for rectangular buttons and can mean it becomes more difficult to press the buttons on a vertical screen. This is something that should be planned for when designing your website and when considering functionality as part of your responsive web design.
For more information or advice, or for high quality, professional web design solutions, get in touch with the experts today, here at Pumpkin Web Design Manchester.