EverWeb: Make Responsive Websites just by Dragging and Dropping!
http://www,everwebapp.com
In the early days of the internet, desktop computers were the only way to surf the web.
Web page design was simple using fixed width page layouts, typically about 1000 pixels wide.
This meant that the layout of the web page did not change, no matter how large or small the screen was.
Smartphones, however, have radically changed how we browse the Internet.
Web pages made for desktop computers are just not suited to the small size of mobile devices and their use of touch, rather than a mouse.
Website developers started to make web pages specifically for mobile devices with fixed page widths of about 320 pixels.
The mobile page equivalent of a desktop page could then be linked using HTML code to the desktop page so that on desktop computers you would only see the desktop version of the page, and on a mobile phone you would only see the mobile page equivalent.
This ‘Traditional’ approach is usually fine for most situations, however, the device you are browsing on may not be always have the same page width as the page that it’s being shown.
This can become a problem due to the growth of different mobile devices, browsers and screen sizes that can now browse your website.
A new design approach was created to solve this problem…
Responsive Web Design.
Responsive Web Design lets you design a website that adapts, or responds, to the width of the web browser making sure that all the content displays on any device including mobile phones, tablets and desktop computers with one design.
‘Traditional’ web design, in contrast, requires the creation of separate desktop and mobile pages which may not necessarily fit perfectly on all the devices that they are displayed on.
In contrast to using pixels to define the page width, Responsive Website Design treats the page width as full width no matter on which device you are viewing the webpage.
Your web page content is resized based on the size of the web browser. Therefore, you do not need to develop separate pages for mobile and desktop devices.
To make sure that objects on a Responsive page always display correctly on any device, responsive web design uses “Sections” to design web pages.
Sections are full width objects that adapt to the browser width and adjust their width and height to fit perfectly in any browser size.
In EverWeb, there is a new Page Layout mode called “Responsive”.
When adding objects to a “Responsive” page in EverWeb they are added as full width objects.
Sections are stacked from top to bottom and can only be arranged horizontally.
If you add a shape or text object they are automatically made full width.
You can easily drag and drop each section object to re-arrange their order.
Previously, you have used EverWeb to place objects anywhere on your website.
However, using this approach it is impossible for a web browser to know what to do with all the objects on your page when the width of the browser changes.
For example, in Responsive Page Layout mode,
if you add a text object with lots of text, you can see how the height of the text object resizes to fit all of its content.
As you resize the window, the content below the text object moves down to fit all of your text.
The real power and flexibility of EverWeb’s Responsive Page Layout comes with the new “Responsive Row” Widget.
This widget lets you create a section object that contains other objects such as text, contact forms, Google Maps, or anything else you see in the Assets and Widgets tab.
Notice how when you add objects within a Responsive Row, they adjust themselves to fit within the browser width, moving underneath or stacking vertically when the browser is really small, and horizontally when the browser width is very wide.
Like all section objects you can re-arrange the Responsive Row and place it anywhere you like on the page.
In the next videos, we will go deeper into Responsive design and walk you through the steps of creating a Responsive website, using the new section objects and the Responsive Row Widget.
You will notice that a Responsive website is more structured in its design and places a few restrictions in where you can place objects.
However, EverWeb’s Responsive Design mode still gives you the best mix of design freedom with ease of use in creating a fully responsive website.
Both the traditional and Responsive website design approaches have advantages and disadvantages which we will also go over in the following videos.