One of the biggest advantages to the Vertex Responsive Layout is that we start the layout as if it were designed for a desktop viewer, and then simply reduce, modify, or remove certain sections or font sizes based on the size of the user’s screen. This is all done through css media queries, and is all done automatically for you!
The best way to see this approach, is simply resize your browser to see it all take effect.
Some responsive designs simply use a series of floating divs that re-arrange themselves on the page and add columns as the screen width increases or decreases. The biggest con to this approach is it can become very confusing as to where your content will actually exist on any given screen; making it very hard to create a specific layout and confusing for a client; especially those with specific product and content placement needs.
Our approach is much easier to understand. The site will always keep its core layout shown here. When the screen changes it will adjust as described below. The majority of rows and columns will not change their basic styling or positions until they reach the mobile version. Again, only minor adjustments are made on varying screen sizes so that you always know what your site will look like and where content will be placed!
Below are illustrations of the center columns only in the scenarios described above.
Below you will find a screenshot of the responsive options available in the Vertex framework. Below that you will find documentation for each feature shown.
The general layout options are the ones starting with Enable Font Resizer? and ending with Right Inset Width. These parameters are the core layout options that apply to all templates, whether responsive is enabled or not. Configuring this area is the first step in configuring a responsive layout. You can choose to set the site to either a fixed pixel width or fluid percentage width, the responsive layout will work with either option. If you are using the fluid width option we recommend enabling the Max Body Width option so that that your site does not go above the set pixels; this helps keep your site looking proportionate across very wide screen.
One of the biggest obstacles to overcome when designing a responsive layout site is that not all content, images and extensions were designed to work with responsive layouts. That means that sometimes you need the ability to hide a specific element on only certain sized screens, so that something doesn’t break the site’s layout and everything looks proportionate. We’ve made that all possible and very easy to do for you with hiding classes! There are three main ways to hide content on different size screens, and they are documented here.
If you are designing your site for very wide screens as well as standard desktop screens, then consider enabling this feature. If the body width is set to fluid then the left, left_inset, left_top, left_bottom, right, right_inset, right_top, and right_bottom positions will increase their widths for larger screens to keep everything proportionate. If the body width reaches 1300px this size will increase by 30%. If it reaches 1900px it will increase by 60%. If it reaches 2500px it will increase by 90%. If you are using the max-body width calculations will be based off of this setting instead of screen width. The original widths are calculated in the general layout area.
For smaller screens it is often hard to make all of your content fit in the main center columns. If the screen size reaches 750px you have the option to keep the widths of the center columns how they are, reduce them by 20%, or stack them on top of each other in a single column. This option is meant for 7 inch tablets and effects the main center columns only. At 580px all positions will become a single column for mobile devices.
When the screen size reaches 750px wide (anything smaller than a standard 10 inch tablet), a navigation bar will appear across the top of the site and the bottom. This bar replaces the main menu, login, register, and search, for easier user on mobile devices. In the configuration you can choose what to enable on these bars as well as change the colors and style however you would like.
Even though this is a responsive layout and there is no separate layout page for mobile devices, that does not mean that your site’s viewers will understand this or even know what a responsive layout is. It has become a standard for websites that use a mobile layout to have a link to view the desktop view of the website, and this is what your site viewers will expect to see. This link simply turns off the responsive configuration using a cookie and calls the website like a standard desktop would when viewing in mobile. There is then a link to return back to the mobile view of the site presented.