Your First EverWeb Responsive Website 1: Getting Started!

This post is also available in: Français (French)

The just released EverWeb 2.8 brings with it possibly the most exciting and requested feature ever: Responsive Web Design. For those familiar with EverWeb, you’ll quickly realise that EverWeb still looks and works the same as it always has done. So how do you build a responsive website with EverWeb? This series of blog posts will guide you from start to finish. To begin with, though, we first need explore the concepts of responsive design and traditional design before creating out first responsive website…

What is Responsive Web Design?
Simply put, Responsive Web Design allows website builders to create scalable web pages that will automatically adjust to whatever device the page is being viewed upon. This means that you only create one responsive web page which can then be used on either desktop, tablet or mobile devices.

So What is Traditional Web Design?
At the start of the Internet age, website design was based on fixed width pages for desktop devices. This was fine until the advent of smartphones led to the need for web pages that were specifically tailored mobile device page widths and form factor. The boom in smartphones has also led to search engines, such as Google, ranking mobile pages higher than desktop pages in search engine results page rankings.

The ‘traditional’ approach to building websites, therefore, means that you have to create a web page for desktop/tablet devices and corresponding web page for mobile devices. When the website is published, code is added to make sure that he mobile page is displayed on mobile devices and the desktop page is displayed on desktop/tablet devices.

So Why Not Just Use Responsive Design?
Whist Responsive Web Design appears to have numerous advantages, there are actually pros and cons to both design methodologies. To begin with, there will be a learning curve as you get familiar with responsive design concepts and how these are applied in EverWeb. You may also need rethink how you design your websites in future e.g. if you want to redesign an existing website and make it responsive, there will inevitably be some design compromises and choices to make along the way. Responsive design’s one page ‘scalable’ solution is also structured getting the design right may take more time. What you see on a desktop device may look great but how will it look a mobile device? Inevitably, testing your site and correcting any design issues to make sure it works correctly in all scenarios will probably take more time than it used to.

These are the kind of considerations you will need to think about when considering using responsive design over traditional design. When it comes to building your first website, it’s worth weighing up you choices before you start.

How Responsive Web Design Works in EverWeb
In many ways using EverWeb will be just as easy as it always have been. However, creating a Responsive website will take a different approach as Responsive Web Design requires structure. Your content is placed inside full width ‘containers’ (also known as ‘Sections’) that make a row on the page rather than free form as you have been used to. You can add as many full width rows as you want to the page. Each row sits one under the other, starting from the top of the page. As you resize the page, the contents inside the row scales automatically to the current width of the page. The height of the row also adjusts automatically so that everything in the row remains in the row.

Many of EverWeb’s object types such as text, images, shapes and widgets can either be their normal width or made full width. Some widgets, such as the Responsive Row widget, can only be full width, whilst other widgets can never be made full width such as the PayPal and Facebook Like widgets. In responsive design, widgets and objects that are not set to ‘Full Width’ need to be placed within the Responsive Row widget in order to work correctly. We will look at this in more detail in a future blog…

The concept of full width containers is key to understanding Responsive Design in EverWeb. For the rest, EverWeb works in the same way as you have been used to.

Creating A Responsive Design Website in EverWeb
So with the quick overview of Responsive Web Design in EverWeb covered, let’s start to create a responsive website! It’s best to start out with a test project so you can experiment before plunging in on a full blown project.

1. Launch EverWeb and select ‘Create a new website’ from the Projects Window.
2. You will now see the Theme Template Chooser. If you have upgraded from a previous version you’ll notice that there is now a filter dropdown menu in the top left hand corner. This let’s you select either All Themes, Fixed Width Themes, Responsive Themes or New Themes. For now, leave it at ‘All’.
3. In the left hand column, you will see at the top of the list the ‘Blank’ Theme Template which now includes a ‘Responsive’ page. There’s also a new ‘Blank Responsive’ Theme Template which includes a blank Responsive ‘Home’, ‘Video’, ‘Image’ and ‘Blog’ pages. Click on the ‘Home’ page and then click on ‘Select’.
4. The responsive page has been added to the website project. You can check that the page is responsive by checking the Page Layout section of the Page Settings tab in the Inspector Window. You should see ‘Responsive’ next to the words ‘Page Layout’.
5. Whilst looking at the Page Layout section, you’ll also notice that the ‘Content Width’ and ‘Header Height’ values are greyed out as these are not used in responsive web design as Full Width containers are used instead.
6. Scroll down to the bottom of the page. You will see the Footer. This has, by default, a Responsive Row widget placed in it. Inside the widget is the ‘Made with Love with EverWeb’ image which is hyperlinked to the everwebapp.com website. As the image is not set to ‘Full Width’, it has to be placed within a Responsive Row widget.

The page is now ready to have objects added to it to create a responsive Page. In the next post in this series we’ll look at the tools that you will need to create a great responsive page experience!

If you have a question or comment about this Getting Started blog please let us know in the Comments section below. We’re happy to help!

This post is also available in: Français (French)