Home › Updates

Updates

Creating responsive, fixed-width page layouts

 June 22, 2017
by Flavio Mester

Although our latest framework uses a fluid layout by default – one in which the navigation bar at the top as well as any header and footer blocks extend the full width of the browser window – you can now create fixed width layouts which will be responsive on small devices as well.

Here is an example of a website using the fluid (default) layout. Notice how the blue header content block extends the full width of the browser window:

Default layout width

Fluid (default) layout width

 

To modify this bahvaiour, change the Layout width setting in Design > Advanced layout settings to either Fixed, 1000px or Fixed, 960px. The header block then becomes constrained to the specified width:

Fixed width

Fixed width option

Fixed width scrolling

The navigation bar retains its static behaviour i.e. as you scroll down, the content “slides” underneath, making it easy to navigate through the website:

Fixed width scrolling

Fixed width scrolling

 

Although the system will automatically add some internal padding to the content area and the page bottom, you may also want to create some visual differentiation between the content and its surroundings. One way to accomplish that is by setting a background colour for the whole window (a light grey in this example) and the content area (white). Easy to do in Design > Layout > Background & borders:

background colour settings

Setting up background colours

 

Finally, since the fixed width only affects the maximum width, the mobile appearance remains the same, whether you’re using a fluid or fixed width layout:

Mobile preview

Mobile preview

 


Flavio Mester

Flavio Mester is a graphic designer as well as a systems analyst (in a distant life he was an architect). A founding partner of Your Web Department, he's responsible for the design and development of all the YWD website management platform interfaces.
Google+ | Twitter | LinkedIn

 


  

 

 
Top of page