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 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
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
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.

With Google made the decision to include the mobile friendliness of a site into the mobile search algorithm we do not see a second option for webmasters other than having a mobile friendly site. Responsive themes not only offers uniform user experience across devices but also save money and effort spent on building a separate mobile site. We highly recommend webmaster using those old non-responsive themes to move on to the latest responsive themes.

Editorial Staff at WebNots are team members who love to build websites and share the learning with webmasters community. Connect with us in Facebook and Twitter.

Recommended Articles:

2 thoughts on “Using Responsive Themes in Weebly”

Leave your response.

  1. This is good information. I was wondering how the HTML5 responsiveness effects the SEO. Specifically, H1, H2, H3, etc. How do I differentiate from these elements? Can I do it on the actual blog post or do I have to go to the back-end and add this? Thanks!

    Reply
    • Responsiveness affects the mobile friendliness of your site in turns SEO. If you are not using any apps then you need to do it either using custom HTML or at the backend.

      Reply

Leave a Comment