How to manage white space in mobile responsive layouts?
White space plays a very crucial role in designing your website having a creative WordPress theme. Most of the elements present in the web design are adjusted till they impart a great look which automatically balances out the white space. The things go a little trickier when you plan to apply for responsive designs. You need to adjust the white spaces at different breakpoints in order to mark a seamless experience for your users.
In this topic I will be covering some very easy techniques which will enable you to handle white spaces in a responsive format.
Rearranging the navigation
Rearrangement of the navigation menu is the first thing which is considered by the designer. If you website is having a lot of links and CTA buttons then you are majorly left with any options. For this the best way is to use a hidden menu or select input field with a three bar icon often known as hamburger icon.
For example: The navigation system used in Dorigati website is simple awesome. Here it uses a full-width menu especially designed for responsive navigation. This menu eventually breaks down just like a grid system. Around at 960px breakpoint, top header menu gets shifted to a new sidebar.
Shift from horizontal to vertical
We all know that the white space we see over a desktop tend to move across as well as down the page. But when we talk about the creative WordPress theme over smaller devices such as Smartphones, the designer has to be more particular about the vertical space.
Well, this actually defines the pace of the content and helps in achieving a natural flow for the devices such as tabs, Smartphones etc.
For example: Jisc is one such website supporting multiple horizontal oriented page and sections. On resizing the page, all the small block elements get dropped beneath each other.
Font Sizes & Spacing
Managing white spaces is not applicable to all the websites. Infact some web designs can go ahead with the same traditional designs and fonts and do not need any extra effort to manage the white spaces across the mobile devices.
You need to adjust the white spaces only if your website is having oversized headers or tiny font size for your paragraph. Here you will have to adjust your website at various break points. Apart from using responsive typography you can also make adjustments regarding letter spacing, margins, color and height of the fonts.
For example: You can see the effect on Cartoon Network page. Here they use a navigation menu which is full of icons. After a certain breakpoint, you will see that the logo of Cartoon Network (CN) shrinks and lose all the icons. You have to be very judicious while managing the white spaces.
Restyling Images
All the websites today prefer wider images than taller ones for their headers. This will help to save the vertical space in the designs on the mobile interfaces. Here they just need to shrink the image to fit properly.
For example: you must have seen the header in UPP broadgate park. Here the header image is automatically resized to fit the vertical screen. This actually adds a good amount of vertical space for any page of the website.
Some final Words
White space is a key aspect of the web design as it plays a very important role in content flow for any creative WordPress theme. Many just designer understand by just having a glance over the website but if you are not able to understand, follow these techniques to manage your white space.