1. The Basics

What is a responsive design? What does "Responsive" mean? Why is it important?

If a website is "responsive" it means that the layout and functionality of the site changes and adapts to optimize functionality across a wide range of devices (Desktop, Laptop, Tablet, Smartphone).  It will automatically adjust itself to look and function well on mobile devices. In other words, your site design will adapt to the size of the device that is viewing it to maximize user experience. With a responsive design, you'll no longer need a mobile section of your website. 

These days, it is virtually assumed that all leading sites will be responsive. Responsiveness and Mobile-Friendliness are especially important now as Google has changed the way it ranks mobile searches. If your site is not responsive, users will not only have a difficult time viewing it on a mobile device, they will also have a harder time finding it in a search.

Elexio's Responsive Design Breakpoints

Our responsive designs have the following breakpoints:

  • Desktop view: 800 px wide and above

  • Portrait view (for tablets): 800 px wide

  • Smartphone view: 600 px wide

How do I know if my design is responsive?

First, make sure you are logged out of your website. Then, on a full size monitor, grab the corner of your browser window and make the window width narrower. If the page content rearranges to display in a narrower width, the design is responsive. If you just get a scroll bar across the bottom of the window and content gets cut off, it's a fixed-width design (not responsive). You can also test your site using Google's Mobile Friendly Test (remember to test more than just your home page)

How can I purchase a responsive design and how much will it cost?

We have some great responsive design options. Let us know you are interested and our Sales team will be glad to get you the specifics. You can contact them at 888-997-9947x1 or sales@elexio.com



2. How to Transition Designs

Design Transition Options

There are primarily two ways to transition to a new design - a Site Copy or a Manual (DIY) Transition.

Site Copy: 

A site copy is the most seamless and stress-free way to transition designs. It allows you to make changes at your own pace. Since transitioning designs, especially to a responsive design, is a great time to optimize or redo your website structure and content presentation, this is our suggested method of transition.

For $240, Elexio will create a copied version of your site at a URL that is not available to the public. Literally everything will be copied: pages, files, users, etc. On this copied site, apply your new design and make any other necessary changes. Once the site is ready to go live, let Elexio know in a Support Request and we'll overwrite your former site with your copied version. To purchase a Site Copy, please contact Elexio in a Support Request.

(Note: Since a copied website is totally distinct from your live website, we recommend not taking more than 30 days to transition. This saves you manually entering updated content on two sites).

Manual Transition (DIY):

Manually Transitioning your design means you apply your new design to your existing live website - usually in a behind the scenes fashion initially. This option is best for simple websites or when you're more concerned with overall presentation rather than detailed specifics on each pages. 

While a manual transition requires a bit more work than a site copy, it's really not hard with a little savvy. There's a lot of flexibility in how you can perform this transition. We've outlined the different methods below:

(Note: These directions assume you have already installed a new Dynamic Design to use (see Site Design - the Design Manager) or Elexio has applied a new custom design to your site. Keep in mind that you can have more than one design installed on your site).

Here’s a suggested path to follow for your transition...  

First, create “dummy” pages to set up your design blocks.

  1. To keep these pages from showing on the main menu, put them all under a page that is not set to display on the menu.

  2. Create one page for each page option in your design and apply the appropriate design to each page. (If Elexio created a custom design for you, we may have created sample pages that you can use for this purpose.) 

  3. On each dummy page, edit the content in design blocks (ex: logo, footer, slideshows, etc.) so that it looks the way you want for your new site pages.

Your site transition

Now that you have your design blocks set up, you can apply the design to the rest of your site pages. For this step you have a few options. (Note: depending on the option you chose and how your site is used, you may want to make this conversion at a time when fewer users will be on the site.)

  1. Page-by-page/Group-by-Group – in the Pages area, go to each page and apply the new design (To see how watch this video). When you select the new design from the list, you will be prompted to "apply the design to this page only" or to "all pages using the old design". 

  2. Parallel site – create a whole set of new pages that duplicate your existing site, and apply the design to these pages.

    • This is more work, but may be helpful if you want to make a lot of major changes to the site.

    • You control what shows as your “live” site home page in the Pages area; the site will open to the first page that shows in the Pages area (starting from the upper left).

  3. “Under Construction” page – If you are concerned about what people will see during the transition, you can create a temporary page and set it as the page site visitors will see.

    • As mentioned above, you control what shows as your “live” site home page in the Pages area; the site will open to the first page that shows in the Pages area (starting from the upper left).

    • You can remove or limit the navigation available on this page.

    • Once your transition work is done, just go to the Pages area and move the “Under Construction” page from the first place, so your new site home page is what people will see when they arrive at your site.

Wrap up

As you work through your transition, here are a few items you’ll want to check.

  1. Design blocks set to specific sections or pages. These will need to be changed separately from site-wide design blocks (see "Changing a Design Block's Scope" in Design Blocks). This can particularly affect menus used on the side of sub pages (see Working with Sub-Menus).

  2. Page links. If you changed the structure or names of your pages, check to make sure that your links to that page still function: particularly the links in content areas, slide shows, or static menus.

  3. Set a default page design that will be automatically selected each time you create a new page. Go to Site Settings and choose a Default Design.. 



3. Responsive Design Content Best Practices

It is important to understand that your content is going to appear differently on different devices. In general, check your site on your various devices to make sure it is displays well, and make adjustments accordingly. For best results, follow our suggestions and tips below...

Content Layout Tips:

  • Avoid tables. Tables have a set width and height that will not stretch or shrink correctly, especially on mobile devices. Instead, use layouts to arrange your content. 

  • Obsess about clarity & brevity. In a smartphone layout, short paragraphs become long, dissuading a reader from staying on the page.

  • Rely on images to convey a message. Ensure text on images is readable at small resolution.

  • Clear calls to action. A text link is often not enough. Use our button tool to create buttons or image links. Bright colors.

  • Brief Video is key, especially for your visitor section. Take advantage of Vimeo & YouTube. Link to how to embed video (HTML block article).

  • The fold is still important! What’s visible on the page encourages us to scroll.

  • Check your design on various devices. Mention again to logout and try resizing browser to check how things might appear. Browser Plugins like Chrome “Window Resizer” make that easy. (https://chrome.google.com/webstore/detail/window-resizer/kkelicaakdanhinjdeammmilcgefonfh?hl=en)

  • Notes on Non-Responsive HTML elements:

    • Non-Responsive HTML elements are iframes, images, embeds, videos, and tables (to a point). There are ways to overcome some of the issues posed by these elements. Here is a helpful article describing some of these methods- http://www.smashingmagazine.com/2014/02/27/making-embedded-content-work-in-responsive-design
    • When dealing with Images, the easiest to overcome the issues is to create a div as a frame, similar to an image frame in Photoshop or InDesign, and load the image as a background for the div. The image loads correctly, and if the div has a dynamic width applied in CSS, it will automatically scale down. But note that there is a downside: SEO. You cannot add an image alt tag which Google uses as an SEO boost, and will turn into a text-to-speech element for someone using a screen reader.

Understanding how Elexio websites "respond" 

  • Layouts stack vertically as device width narrows. For example, at desktop view, if you have an arrangement of three images in a three column layout, these three images will stack vertically into one column in the smartphone view.

    • Note: (if a layout that you need doesn't exist, ask Elexio; we may consider adding it for you).

  • Text wraps around images differently depending on device width. Text wrapping around an image will change as device width narrows. Therefore, try to keep your images moderately sized and avoid trying to perfectly align paragraphs that wrap around images. The position will change with the viewport (device).

  • Images maintain size until you reach smartphone view. Images in Rich Content Blocks stay the size you set until site width is decreased to 600 px - smartphone view. At this point, they are set to be 100% of the width of the content area. In light of this, try to avoid very small images (ex: icons) because they will then fill the whole content area and may look pixelated.

  • Text on images shrinks proportionally. When adding text to an image, be aware that it will appear smaller and may be hard to read on a smartphone. Consider making the text larger to account for smartphone view.

If you have a mobile page or section set up, turn it off. 

Since your design is now responsive, there's no further need for a mobile page or section. To turn this off, open Site Settings, then simply delete all the text found in the Mobile Home Page text box.

Some of my blocks don't look right on my design. What's up with that?

We have adjusted most Website blocks to conform to responsive mobile and tablet layouts. However, If you notice inconsistencies in the blocks when you view your website on mobile and tablet devices, we welcome your feedback and comments. Please email us at support@elexio.com



4. Search Engine Optimization (SEO) Tips

A design transition is a great time to review your page content to ensure your site is set up well for search engine ranking. The topic of SEO is robust and covered extensively by many resources on the Web.  Rather than attempt to duplicate those here, we've summarized a few basic concepts that make sense to review while making your transition. Links to further help on SEO can be found at the end of this section. 

Define your Search Terms and Keywords:

It's crucial to clearly identify the search terms, or keywords, you would expect people to use when searching for your site. These might include geographic location, services offered, or other items that set your church apart. Make a list and be consistent in using these terms throughout all your site elements.

Use your Search Terms and Keywords in...

  • Page titles and descriptions: Page titles and descriptions can be accessed in your website Pages area under the Advanced Properties tab. These are what display in a Google search result. Meaningfully include keywords in the title of each page.  Make sure the title and description communicates all that the page is about. 

    NOTE: Page descriptions should be 156 characters or less. 

  • Page Names (URLs) - A page name is a great place for a keyword or search term. With an Elexio website, the page name makes up the address for each page (URL). These should be meaningful. (Ex: mychurch.com/about-us/mens-ministry). In your website Pages area, give your page a name under the Properties tab. To keep your menu item short but the URL longer and more meaningful, you can create a custom URL in the text box under the Page Name field. (The wide box with the Go button at the far right).

  • Headings - Search engines recognize properly identified headings. If something is important on your page, make a heading that effectively summarizes it. Our website tools make it easy to apply headings. When editing a Rich Content Block, simply select your text and use the styling drop down box to apply a Heading 1, 2, or 3 style to your content. 

    • You should use just one Heading 1 style per page. This usually appears right at the top of your content. You can use multiple Heading 2 & 3 styles throughout your page.

    • If you don't like the look of our pre-styled headings, please let us know in a Support Request. We can change the styling for little or no cost. 

  • Page content - Make sure the text on your pages is well-written and includes your keywords.  Consider what your text communicates independent of your images.

  • Link text - Use clear text for your links. In other words, stay away from adding and linking the text "click here." Instead link actual text that describes what you're linking to. 

  • Image filenames and alt attribute - The names of your images files should communicate what they display.  The "alt" property is important for visitor accessibility, but it can also communicate to search engines what your images are about. Elexio's Add Image screen provides a text box for image alt text.

After you're about finished transitioning your design, it will be important that Google re-spiders your website and gets old records out of it's database. Submit your Sitemap to Google.


Other SEO Resources:

Google and other search engines provide a wealth of tips on helping optimize your site for search engines. A simple search of "Search Engine Optimization" or "Google SEO Tips" will return multiple good results. Additionally, below are a few resources that may be useful to you.

  1. Elexio Tools and Tips for SEO

  2. Google SEO Getting Started Guide

  3. Steps for a Google Friendly Site

  4. 40 Step SEO Checklist

  5. Bing SEO Analyzer (requires an account)