Responsive Web Design in Quick 'n Easy Web Builder
With the increase in popularity of browsing on mobile phones and tablets it is becoming essential to create web sites that are optimized to the needs of these users. Previously you had to create different versions of the website and use scripts to redirect the visitor to the mobile version of the page.
Quick 'n Easy Web Builder 3 introduces 'Responsive Web Design' which allows you to create a single HTML page containing different variants of the layout, each optimized for specific device widths. Your website will dynamically respond to the screen size of the visitor and display the layout most appropriate to their device. These different variants are called 'breakpoints' and uses CSS3's media queries.
A breakpoint is separate 'view' of the page in Quick 'n Easy Web Builder. A page can have multiple breakpoints, each one optimized for a specific screen width. For example, you can have the standard desktop layout, one for tablets (1024 px) and another one for mobile phones (320 px). Common breakpoints are:
• 320 px, Mobile portrait , 480 px, Mobile landscape
• 768 px, Tablet portrait 1024 px, Tablet landscape/Netbook
• 1280 px and greater, Desktop
Of course you can define your own widths and have as many breakpoints as you like (max 25), although usually you will have no more than 3.
The quickest way to add or edit breakpoints is via the Breakspoints toolbar at the bottom of the page.
You can also switch between breakpoints by using the Responsive Web Design commands in the main menu.
Next we will add a breakpoint.Click Page->Responsive Web Design->Manage Breakpoints then add a breakpoint with a max-width of 320.
Click OK to confirm and OK again to close Manage Breakpoints.
The different variants share the same content (text, images etc) and you can change the position and size of objects for each breakpoint. You can also add unique content for specific screen widths, which makes it possible to hide objects on smaller screens.
Creating a Responsive Web Page in Quick 'n Easy Web Builder
Let's start with a standard template: Click File->New Website from Template and select 'Business Company 22'.
In these steps we will create a mobile version for this page with a breakpoint at 320 pixels, which is a common width for mobile phones.
First make sure the Comptibility property of all text is set to Default. Otherwise the text objects cannot have different sizes in different breakpoints!
Important notes about Responsive Web Design
Objects can have a different size, position and visibility state per breakpoint. However all other properties will be exactly the same! For
example if you change the color of an object then it will be changed in all breakpoints (because the object is shared between all views).
Although objects can have different sizes in breakpoints, there are a few exceptions. For example shapes and other drawing tools will have
the same size in all breakpoints. The reason for this is because only one image will be published and if you change the size of that image in
one breakpoint then it would look distorted in another breakpoint. But you can use multiple shapes, one for each breakpoint and hide the
ones you do not use in other breakpoints.
Note however that if you select 'Publish as CSS3' in the shape's properties, then the shape will be responsive!
If you share text between multiple breakpoints then set the 'output format' in the compatibility option to 'Default', because the other options
optimize the text for a specific width. If you really need to use one of the compatibility options then consider using a separate text object for
each breakpoint, so it can be optimized for that specific width.
Objects can only be part of one Layer (and Form, Carousel, Tabs, Accordion, Dialog). So if you move an object to a layer in one breakpoint
then it will automatically be part of the same layer in other breakpoints!
If you add a new object to a breakpoint then it will initially be hidden on all other breakpoints. You can use the Object Manager to unhide it if
you also want it on other breakpoints. This behavior can be disabled in: Tools->Options->General->Hide new objects on other breakpoints
If you delete an object from a breakpoint then it will be removed from all other views as well. If you want to hide the object then you can use
the Object Manager.
You can test breakpoints in your desktop browser. Resize the browser window to activate breakpoints.
Some browsers also have dedicated tools for testing responsive web sites. For example, FireFox has a Responsive Design View which is
great to test breakpoints. Consult the documentation of the browser for more details.
Browsers that do not support CSS3 media queries, will display the default layout.
You will now see a copy of the default layout. Also notice that the title of the workspace tab has changed to indicate that we are working on a breakpoint.
Activate the breakpoint by selecting '320px' in the Breakpoints toolbar.
The next step is to resize and reposition all objects so they are within the 320 pixel boundary.
Finally we can resize the other objects. Text objects and layers can be resized without affecting other breakpoints, so we do not need copies for that. The final layout may look something like this:
You may also have noticed that the CSS menu is a little bit to wide for the target screen, so we will use a different menu for this breakpoint.
Make a copy 'CssMenu1'. Then use the Object Manager to hide 'CssMenu1', because we do no longer need it in this breakpoint.
Change the Layout mode of the new menu to 'vertical' and set the button size to 'Stretch'.
If you take a closer look at this template you may notice that a large shape has been used behind the 4 headers. It's important to keep in mind that a shape has the same size in all breakpoints. So if you resize the shape in one breakpoint then it will get the same size in other breakpoints too! Therefor in this layout we will make a copy of the shape so we can give it a different sizes.
Make a copy 'shape5'. Then use the Object Manager to hide 'shape5', because we do no longer need it in this breakpoint. For this breakpoint we will use the copy of the shape, so we can resize it without affecting the layout on other breakpoints.
Now let's resize the shape and reposition the text objects to optimize the layout for mobile phones.
Use preview to see the result in the browser. Resize the browser window to activate the breakpoint at 320 pixels.
• Set all rectangular shapes to 'CSS3 output', this will make the shapes responsive.
• Set the output format of all text objects to 'Default' (otherwise they will have a fixed size).
• If you need to duplicate an object, so it can have different properties in another breakpoint then you can quickly clone and hide the original
object with the 'Clone and Hide' option in the object's context menu.
• Also make sure you read the Responsive Web Design FAQ!