Using Responsive Themes in Weebly

The whole world is moving towards mobile and handheld devices like iPhone, iPad, etc. and it is important for the webmasters building site with Weebly to understand what Weebly offers in that context. In this article we will discuss the basics of responsive sites and the features you will get when you choose a responsive theme.

Responsive Vs Non-responsive Themes in Weebly

The term responsive or liquid layout indicates the flexibility of the site to fit into the width of the device on which it is viewed. Weebly offers two types of themes – responsive and non-responsive based on the adjustment needed for a mobile site. Unfortunately we do not see anywhere Weebly mention a particular theme is responsive or non-responsive unless you choose and test it yourself.

Basically all new themes are responsive in nature where most of the old themes are non-responsive. You can resize your browser window and see whether the elements are auto aligned to confirm the theme is responsive.

Features You will Get / Miss with Responsive Themes

Responsive themes provide uniform look of the site on all devices and offer better user experience. At the same time there will be lot of change in features inside Weebly editor when you use a responsive theme.

Mobile Editor

Since a responsive theme does not require separate mobile editing features, you will not see the mobile editor option in Weebly editor.

Mobile Option in Weebly Responsive Themes

Mobile Site Option

Similarly you will also not see the option to enable mobile site under “Settings > General > Mobile”. Below is the example from a non-responsive theme:

Weebly Mobile Settings Option

Features in Header Section

One of the issues with most of the responsive Weebly themes is that the header section does not have features of adding social icons phone text and search box under “Design” tab. Learn here how to bring these features back on your header but we hope Weebly to add these features uniform across all themes.

Adding Additional Features

With mobile responsive themes, it is easy to add additional features by modifying the CSS / HTML. For example, if you hide the free footer it will automatically be hidden on mobile devices as well whereas on non-responsive themes it is difficult to achieve this since you will not have access to the source files of your mobile site.

Page Layouts

Most of the non-responsive themes do not have additional page layouts like splash.html and title.html.

Weebly Non-Responsive Theme Features

Buttons

Responsive themes have complete CSS buttons fully responsive on all devices whereas non-responsive themes have buttons made of images.

Element Styles

Elements like block quotes will have a modern look in latest responsive themes whereas they are looking traditional in older themes.