All posts by Colin Fraser

Cinematic Web Template Tutorial

Cinematic Web Template Introduces Cinemagraphs to Template Design

Cinematic is our first website template to introduce the option of a video or animated gif to be used in the header of the page. One of the latest design trends in marketing are Cinemagraphs. Cinemagraphs are basically video’s that include both stationary sections and moving sections. It’s like an image where a small part of the image is animated or moving, while the rest is stationary and not moving.

The Step by Step Guide to Updating Cinematic

The Cinematic template includes 4 different versions of the ‘index’ or home page. The default home page you see in the online demo, and in your template package uses the YouTube video loader as the default option for loading your home page video into the header of the page.

When you first download and open your template package you’ll see there is the basic folder structure for a web template including the default pages in the root, and you’ll also notice there are several index… pages.

Each of these index pages has a different option for displaying the cinemagraph in the header.

Let’s run through the list, then the reason for the different options and where or when you might ‘best’ put them to use.


The index.htm uses the Youtube video loader as it’s default option. The YouTube video loader is probably the best option for most people. It is the fastest loading of all the options, and you only need to upload 1 video file / format to youtube to make it work. Setting up a YouTube account is free, quick and easy, as is uploading a video. You can take you own video ( try for HD 1280×720 or 1920×1080 ), upload to YouTube, copy the video id into your template and you’re done!


This is a bit of a unique page in the package as it’s the only one where we didn’t include a working example of an actual cinemagraph.

This page is designed to load a cinemagraph from an online service such as Flixel or Giphy. Because it’s a template, and we don’t know the final purpose of the website we’re not able to license an actual embedded cinemagraph for demonstration purposes or even a themed cinemagraph. For this you will need to contact the web site providing the cinemagraph and arrange your own licencing.

This template page is provided just as an option, for anyone interested in licensing their own cinemagraph.

Two websites where you can find some really cool cinemagraphs are:



Check the licensing of the images with any website where you are not the owner of the cinemagraph.

Example: Contact Flixel


This page loads the animated gif version of the cinemagraph. This is where the pro’s and con’s differ the most. The pro’s are you don’t need to load from an external source and it’s the easiest to changes and update. The con’s are the file size for animated gif’s are much larger than the mp4 video format used by youtube or other embedded sources, and animated gif’s can’t be compressed, so it can slow the load time of your web page and you may also take a hit on google page speed because gif’s can not be optimized to load faster.

**NOTE** In your template package, we’ve only included a place holder ‘gif’ file for this page, not a themed and animated gif. If you want to use this page you’ll need to replace the included ‘gif’ with your own animated gif.


The last option allows you to load your own video, hosted locally on your own server. The upside is you don’t need to load from an external source, so you don’t need a youtube account, or check licensing for flixel or giphy. The downside is you need to make sure your web server’s MIME type is setup to run video, and you also need to provide the video in 3 formats

  • mp4
  • ogv
  • webm

Not all web browsers support the native mp4 video format, so you’ll need to provide all 3 video formats to support all web browsers.

**NOTE** In your template package, we’ve only included a place holder ( mp4, webm, ogv ) files for this page, these are placeholders files and not themed for your template. If you want to use this page you’ll need to replace the included ( mp4, webm, ogv ) files with your own.

Sourcing Cinemagraphs

You may want to source your own cinemagraph, and most of the websites that license images, also license cinemagraphs. Such websites as or now have large libraries of cinemgraph video’s if you need something new for your template.

Updating your Cinematic Template

Here’s an introduction video that will demonstrate how to update the cinemagraph video in the header of your index pages:

Setup and Installation Instructions

Installation (all packages)

Planning & Preparation (all packages)

Working with Pages (all packages)

Publishing (all packages)


Rasa Dreamweaver Tutorials: Menus and Navigation

In this segment of our continuing series of tutorials, we explore how to modify the menus and navigation of the Rasa website template for Dreamweaver.

Top Menu

Tutorial: Step by Step

The Top Menu is a bootstrap ‘dropdown’ menu component that allows for sub menus. We’ve further modified the bootstrap menu to allow for multiple levels of sub menus. Please consider mobile users when designing your Top Menu, as a large number of menu buttons will be more challenging for mobile users.

We’ve also included the OffCanvasMenu for both mobile and desktop users that way you have an alternate navigation method for sites with large numbers of menu links.

The Top Menu is a styled ‘bullet’ list. Indented items provide the sub menu buttons.

add or remove a menu button
  • open the Library / shared folder
  • open the menu-top Library page
  • edit current links
  • use the hyperlink tool to update
creating a sub dropdown
  • use the indent tool to create a dropmenu link
  • make sure the top level button is linked to a # sign as in:
    <a href=”#”> ../../pagename.htm</a>

**NOTE** Top Level Menu buttons that include a dropdown sub menu should NOT link to a page directly, as this will not work for users with touch screens such as tablets, and mobile phones. Watch the video for details.

Tutorial: Video Demonstration

Off Canvas Menu

Tutorial: Step by Step

The OffCanvasMenu is a simple bullet list with the list items linked to your web pages. Use the hyperlink tool to update the current links, or just add and remove bullet items, then link the bullet item to your new pages.

add or remove links
  • open the Library / shared folder
  • open the offcanvasmenu Library page
  • update, add or remove list items
  • link the list items to your web pages

Tutorial: Video Demonstration

Side Menu

Tutorial: Step by Step

The Side Menu is only used in two pages, and those pages are only included in the Pro Package. The Site Menu is a bullet list, where the main or top level menu item has a class of ( class=”downarrow” ) applied to it. The top level menu item can only link to the # sign, it can not link directly to a page as the top menu it used to trigger the sub menu to open, when clicked. A user on a touch screen would not see the sub menu open if the top menu was linked to a page.

add / remove and update the sidemenu
  • open the Library / shared sidemenu page
  • you can add or remove items from the existing bullet list
  • to add or remove menu items, switch to code view, copy/paste or delete the commented sections for each button

Tutorial: Video Demonstration

How many menu buttons should I have

Tutorial: Step by Step

You can technically include as many top level and dropdown menu buttons as you like, but there is a limit to the amount of space you have to fit those buttons. We’ve included 4 buttons, all using short button names. On a larger monitor resolution you can fit up to 8 menu buttons with short names, however on smaller monitors you can’t, you can only fit about 4 comfortably. This is also why we’ve included the offcanvasmenu, that way you can fit more menu items into a secodary navigation, and save the top menu for your primary links only.

As long as you continue to test and preview your web pages by either resizing the browser, of better yet, use your Google Chrome web browser, and the mobile testing option in the developer tools, and you’ll see how much room there is at different resolutions.

We’ve ‘upped’ the breakpoint for the bootstrap menu to collapse into it’s mobile view from 768px to 992px giving you a bit more room for menu buttons.

Tutorial: Video Demonstration

Change the font size and padding to fit more buttons

Tutorial: Step by Step

One of the tricks to fitting more menu buttons, aside from just reducing the amount of characters in your button names, by using shorter names is to reduce the actual padding or spacing between each button.

There’s about 30 pixels of padding on each side of a button, giving a total of 60 pixels of spacing. You can reduce this by following these steps.

change button padding
  • open the Shared / styles / shared.css
  • search for ( approx line 316 )
    .navbar-default .navbar-nav > li > a
  • locate the padding
    padding: 30px 15px 29px 15px;
  • change the 30px and the 29px to equal but lower numbers
  • save and preview
  • adjust some more if need be
  • repeat preview

Tutorial: Video Demonstration

Framed content for readability and SEO

Framed content is what you’ll find on an easy to read web page. If you’ve looked at any of our web template or WordPress theme designs you’ll probably notice a lack of overly sterile / white options. It’s not that I don’t like or appreciate the clean white look of some websites or templates, I just find them harder to read, as a visitor.

Framed content has been around for years

So now we jump into the crux of the post, what is framed content and how does it play into SEO ( Search Engine Optimization ).

First framed content is not content that is loaded inside an HTML frame or iFrame. Framed content is a combination of headings,  easy to read text, images and video wrapped in a graphical presentation designed to grab your visitors attention, and allow for quick and easy digestion of information.

We see this all the time in print magazines and we’ve been using ‘Call to Actions’ in websites since the beginning. What we are seeing now is the emergence of content and graphic presentation and how it affects SEO.

Here’s an example of a web page that puts content framing to good use. Simple easy to read content on the left and an image on the right. A visitor doesn’t need to tweak their brain skimming through paragraph after paragraph. Here we have a nice easy to read section of page that is highlighted from the content around it making it easily stand out.

i3dthemes example of framed content
i3dthemes example of framed content

How does Framed content affect readability for SEO?

Search engines are at the point now where user experience is playing the most important role. If the user finds the content they are searching for then they have a better experience using that search engine.

If a user can quickly find the information they are looking for they will most likely spend more time on that web page. Time on page is key for search engine optimization. It’s not enough that people can find your website, they need to be interested in what your website says or does and spend some time on page. Search engines will keep this in mind when displaying results for your visitors search terms. Websites that can keep people on their pages longer may achieve better rankings than those pages that don’t.

Make it easy for your visitors to find your information

If your visitors find the content on your page easy to read, they will stay longer. If the content on your pages is framed, it makes it easier to find and read. This is why I suggest framing your most important content on your page. Most web templates include some sort of design style that allow for such things, and if you’re working with a CSS framework such as Bootstrap there are built in classes for Panels and Wells that help to frame your content.

Many designers my self included will add their own styling to the template and provide different means of presenting content that helps it stand out from the page. We include many options in our templates for framing your content, and in the standard and pro packages you’ll see we have many page examples included.

A key to designing content that is framed is to make it easy to read, and I can’t emphasis that enough “EASY” to read. Long sentences or run on paragraphs are not easy to read. Framed content allows the content to be broken up a bit, so the heading is clearly visible from the body of the text, and images and video’s play an important part of visually showing what that chunk of content is about.

I suggest you keep this for your most important content, so visitors can quickly find what they are looking for by simply scanning the page for headlines and headings.

Our First Iteration AMP Accelerated Mobile Pages

AMP or Accelerated Mobile Pages is a project that endeavors to create faster loading pages. Specifically for mobile devices. Pages that load so fast in fact that the pages seem to load instantaneously.

I’ve been keeping up to ‘speed’ on the AMP project since it’s inception as it comes very close to our own iteration of mobile speed. Something we started working with six or seven years ago with our Gen10 ( Generation 10 ) templates.

The Introduction of Mobile Responsive

When the term mobile responsive started to have an impact on the design community, mostly due to the article posted by ‘A List Apart‘ back in 2010, we realized that ‘mobile’ was a device that we would need to take into consideration when building web templates.

Up to that point in time we only really had desktop computers and resolutions of 1024×768 or 1280×1024 to deal with. Older computers with resolutions of 800×600 were going the way of the dinosaur. And IE8 was starting to take a back seat to Firefox and Chrome.

A few years earlier the first iPhone was released and by 2010 the flip phone was going out of style making way for our current slew of touch devices. More and more people were pulling up websites on their mobile phones and having to pinch and zoom for the most part to read the content.

We were still mostly limited to CSS2 at that point in time, but with the introduction of CSS3 in 2012 and the @media queries it brought to the table, mobile devices quickly took to supporting the latest CSS standards unlike many ( cough, IE ) web browsers of the time.

Mobile Limitations

As mobile became a popular method of accessing the web, service providers started to provide better plans, and more importantly better coverage. But the problem at the time was that most access to the internet was still through your service provider, sucking the ever precious life out of your monthly ‘bandwidth’ allowance every time you accessed the internet. By todays standards, I don’t think you can walk through any populated area without finding some kind of wifi connection you can use. Just 5 or 6 years ago, connecting to wifi wasn’t something that was readily available.

Overcoming the Limitations with our First Iteration of AMP

So back to where we started, our first iteration of AMP. When we first started designing fully mobile responsive websites back in 2012 one of the first considerations we took was ‘bandwidth’. It wasn’t enough to just create a site that would resize or adapt to a mobile device, we didn’t want the end user put into a situation where there would need to download all the bells and whistles that a desktop user on a high speed connection would.

We decided on using a more ‘minimalist’ layout for mobile users, which we could do through the use of the CSS3 media queries. We could target certain parts of the site and display them with minimal styling for mobile users. This saved on the amount of ‘graphics’ and extra CSS used for different components such as sliders. We actually used the media queries to prevent certain elements from being displayed on mobile to really increase the download time. Reducing the amount of bandwidth the end user would need to load the web page.

In a sense, this is a similar approach to what the AMP project is doing. Targeting mobile devices and loading just what they need for a near instantaneous page load, less all the bells and whistles. We attempted to do this through CSS alone, but the AMP project takes it to the next step with some slick AJAX programming and a little help from Google.

Where we are now

Our newest templates use the Twitter Bootstrap CSS framework as it’s designed for mobile on up. Meaning that you start with the mobile layout then built it up to desktop. Bootstrap is the most popular CSS framework available right now. It’s not minimalist to the degree we first started with because bandwidth is becoming less and less of an issue. But it does the allow for mobile only styles to be applied first.

Where we going next

We have our own major projects in the works ( Accelerator ) which goes beyond what AMP is currently doing. This project, I’m excited about. Not only because we’re doing it, but because we need it. There is no solution on the market that will improve your page loads times AND improve your Google Page speed scores. This is something I think every web master should consider as this is one of the key ‘search engine optimization’ criteria that you can now have some control over.

Accelerator is set for launch December 1st, 2016.








10 Tips for Better Mobile Design

10 Tips for Better Mobile Design

With a few million online articles regarding mobile web design, and a plethora of tools and other resources, have you ever asked yourself why your website still looks ugly when you view it on your mobile phone? I wanted to share with you the 10 best tips I’ve collected, for better mobile design.

Even with a mobile friendly template or CSS framework like Bootstrap it’s possible to end up with an ugly looking mobile site.

 Avoiding the Mugly

As much of my day job is providing support for folks wondering why their websites don’t look great on mobile I wanted to share some of the common issues that I see and how to fix them or better yet avoid them altogether. I’m really hoping to help folks who have already built their websites and are now finding that things just don’t fit, or line up well and want to know what to do.

Better Mobile Design Groundwork

There’s a BIG difference between being mobile friendly and visitor friendly. Mobile friendly means your site will scale for mobile devices. Visitor friendly means your website will provide a good user experience when viewing your site on their mobile devices. A huge difference as mobile friendly is more of a technical term and requires coding to be successful while visitor friendly or UX ( user experience ) is much more design oriented.

Before I share my list of simple tips I just want to make sure the groundwork has been laid. For a better mobile design, or a mobile friendly site you’ll need to first make sure that your website meets the basic requirements. Your web pages will need to include an HTML meta viewport tag,

<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

and a CSS framework of some sort. If you don’t have a meta-viewport tag in your site it will not scale correctly for smaller devices. You can test your web pages for better mobile design or friendliness via Googles Mobile-Friendly Test page:

Load your website URL into the URL field, and press ANALYZE.

This test will review your site and make sure it includes the meta viewport tag. It will also analyze other parts of the site, but it won’t tell you how well your site displays for users.

Responsive Design Framework

If you’re not already running on a mobile friendly CSS framework such as Bootstrap, it’s probably time to upgrade your website. CSS frameworks take much of the hard work out of running the back end of the site and more importantly provide a good deal of mobile and tablet resources.

Now that you’ve checked to see if your site if mobile friendly or at least passes the test we can take a look at some of the tips and tools for improving your website and not only making it work for mobile, but also looks good on mobile.

Onto the first 3 of 10 Tips for Better Mobile Design!

1. Optimize Your Images for Mobile Design

A faster loading web page provides a better user experience and will help keep visitors on your web page. One of the keys to improving the speed of your web page is to reduce the file size of your images. One of the problems of reducing file size is that your images can look pixelated or grainy and it’s also a pain in the neck or used to be until

Screenshot re smart PNG and JPEG compression i3dThemes

Simply drag and drop your images directly onto the Tinypng web page and let the compression begin. Once each image has been optimized you can download individually or download all images as a zip file. Copy the images back into your website, and upload to your server. You’ll be amazed by the file compression, often reducing the file size of your images by up to 80%.

2. Make Your Images Mobile Responsive

Responsive means your image will resize ( scale ) for different devices. Not all images need to be responsive, just the images that need to change their size when the screen gets smaller or bigger. As a rule of thumb I like to suggest any image that is larger than the width of a mobile phone, should be responsive, meaning if your image is wider than 300 pixels or your image is within a container that will be resized you should make is responsive.


Providing you are running the Bootstrap Framework you can make an image responsive by adding a class to the <img.. .> tag of


as in

<img class=”img-responsive” scr=”” … alt=””>

If you are not running Bootstrap you can still make an image responsive you just need to include a CSS class that tells the image to scale to a specific width, usually 100%. Add this style to your style sheet.

@media (max-width: 767px) {

.img-responsive { width: 100%; max-width: 100%; }


Remove width and height properties for better mobile display

When you add an image to a page some html or web editors ( such as Expression Web ) will add the image width and height properties directly to the image tag, making is a bit more difficult for the image to scale. You’ll want to remove this for any image, just switch to code view and as you’ll see in the example, remove the width and height tags:


3. Typography that fits

Quick Tips!

  1. Clean uncluttered headings and content
  2. Keep it simple
  3. Use bold to highlight important words or phrases only
  4. Use @media queries for larger headings
  5. Make your typography fit ( 320px or so )

One of the biggest barriers to a good mobile experience is including too much information in the head of the page. Too much content in the slider ( titles and descriptions ), too much content in the website tagline or too many words in the logo or website name.  With the website name you many not have much control over that, depending on your company or organization’s name.

What I see happening though is a very nice presentation for desktop users, but a very cramped experience for mobile users. This can happen when the website is developed without testing on mobile along site desktop. The best way to do this now is with the latest version of Chrome, you can quickly switch from a mobile view to desktop view. This will show you what you site looks like on both devices and you can adjust accordingly.

I try to think of it as moving from a 4000 square foot family home, into a small cramped apartment. You would have a very difficult time fitting all the furniture from your old home into that small apartment and the same goes for desktop to mobile, you need to make sure the content fits onto both devices. And more importantly you need to consider the attention span of a mobile user, think about what they are looking for on your website and consider whether the information you have on your page is something they would actually read. At least where the user first looks ( the header of the page ) make sure your content is short and to the point, making it easy to read and quick to digest.

4. Bootstrap Mobile Responsive Utilities

One of the best things about using a CSS Framework such as Bootstrap are the built in mobile responsive utilities. CSS classes that allow you to alter the display of your content depending on which device the user is viewing your web page with.

Not only can you switch from 3 columns for desktop to 1 column for mobile users ( the infamous css grid ) you can also choose to display certain content for desktop users, but not mobile users, and visa versa.

If you are using Bootstrap ( and I hope you are ) and you’re not familiar with the responsive utility classes here’s a direct link you can bookmark, as you can copy the classes directly:

5. Mobile Users Can’t Hover

One thing we often forget when building our websites is that mobile users can’t ‘hover’ over a button, then can only ‘touch’. With desktop we can hover over a menu button to show a submenu, then we can click that button to go to a web page. With mobile, the user can only ‘touch’ which is the same as a ‘click’. The option to hover isn’t there so any actions that you might apply to an item that requires a hover, then a different action when clicked will not work for mobile users. You must make the hover and click actions the same, or none at all.

6. Click to Call Links for Phone Numbers

If your website is targeting mobile users that might be inclined to phone you ( such as a take our restaurant ) you may want to consider including your phone number at the very top of your webpage and making that phone number a ‘Click to Call‘ link.

By adding the ‘tel’ attribute to your link tag you can make your link clickable, and this will also work for desktop users that have telephone applications such as Skype installed.

<a href="tel:1-408-555-5555">1-408-555-5555</a>

7. Use the Hamburger Menu for Responsive

If your website includes a Hamburger Menu or Offcanvas menu put that to good use as this is what most mobile users expect to see and it’s much easier to use on mobile devices. Many of our templates include a Hamburger Menu button that loads an Offcanvas type menu. Basically, a menu  that overlays the entire web page when clicked making it extremely easy for mobile users to navigate with one thumb or finger ( also known as the ‘One Thumb Rule’ ).

8. Remove the Sub Subs, a mobile no no.

I see some flack coming for this one, but it needs to be said. Get rid of the Sub Sub links in your drop down menu’s if you can. They are not mobile user-friendly. In all of our templates, we have included this option in our Bootstrap menu’s even though Bootstrap has dropped support for them stating they do not provide the best user experience. But many of our customers have asked for this feature so we’ve kept it alive. With our newer template releases we have included the regular Bootstrap Drop Down Navigation AND the super mobile friendly Offcanvas menu. This way you can have the best of both worlds, and for the more adventurous you can hide the Offcanvas for desktop and display for mobile only if you want to keep your navigation options simpler.

9. Menu Bar Widths best for Mobile Design

Another issue I see creep up is the number of menu buttons in the navigation bars, or the total number of characters in the button names making the buttons or menu bar pretty wide, Great for large desktop users but don’t forget about your tablet users. Try to keep the width of your menu bar to less than 992 pixels.

10. Tables

Something that would best be avoided as tables are just not mobile friendly, but there are times when it can’t be avoided, and this is where it’s almost essential to use a CSS Framework such as Bootstrap to help get you out of this ‘table jam’ . Bootstrap does provide some table utilities that will ‘help’ improve how tables are displayed in your page, and it will also allow the user to ‘scroll’ the table to view the full contents as with many tables it’s just not conducive to re-structure the table headers or column headings to be single column as the table wouldn’t make sense any longer. Tables are there for tabular data, allowing you to read information in an up and down back and forth directly. Mobile tends to take information like this and put it all into a single column so it’s easier to read on a mobile device which is fine and dandy until your left to right content no longer lines up with your up and down content and the information your are reading make absolutely no sense. Along comes the table class in Bootstrap that allows the user to view the tabular information in it’s correct format, and scroll left to right to read the entire width of the table.

You will need to make sure your tables and cells do not include any fixed widths, you can use percentages, but not fixed widths.

Then you will need to wrap your tables in a <div> container and apply some classes, but let’s go to the Bootstrap website where this information is kept up to date as it can change from version to version.

And finally if you’re not familiar with mobile friendly and what it means to google, here’s some detailed information that may help to understand why the big fuss for mobile friendly: