Category Archives: Dreamweaver

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,

example:
<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:

https://www.google.ca/webmasters/tools/mobile-friendly/

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 www.tinypng.com.

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.

Class=”img-responsive”

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

class=”img-responsive”

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:

Screenshot-re-width-height-better-mobile-design-i3dthemes

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:

http://getbootstrap.com/css/#responsive-utilities

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.

http://getbootstrap.com/css/#tables

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:

https://developers.google.com/webmasters/mobile-sites/get-started

Save

Save

Save

Save

Updating Your Site for Mobile Round 2

You may have heard that Google is stepping up their ‘Mobile’ roll-out, basically completing phase two of their mobile algorithm updates. Meaning if your website isn’t optimized for mobile devices yet now might be a good time to consider it.

So What’s Changed?

A few weeks ago ( April 2016 ) Google announced the following:

“We’ll start rolling out an update to mobile search results that increases the effect of the ranking signal to help our users find even more pages that are relevant and mobile-friendly.

If you’ve already made your site mobile-friendly, you will not be impacted by this update. If you need support with your mobile-friendly site, we recommend checking out the Mobile-Friendly Test and the Webmaster Mobile Guide, both of which provide guidance on how to improve your mobile site.

And remember, the intent of the search query is still a very strong signal — so even if a page with high quality content is not mobile-friendly, it could still rank well if it has great, relevant content.”

According to Google’s John Mueller, these changes are now fully rolled out. The change is supposed to rank mobile friendly pages better on mobile devices.

How Will I Be Affected?

This latest update for the mobile friendly ranking algorithm is targeting page level ‘signals’. It doesn’t affect your entire site but could affect individual pages. If some of your pages haven’t been optimized for mobile they shouldn’t affect pages in your site that have been. In the past many of Google’s algorithm updates affected your entire site, in this case, the update only affects individual pages. Most websites will either be optimized for mobile or not. Not too many websites will have a mixture of both but I’ve seen it happen. Specifically where an old website has been updated but they have certain web pages using tables or catalogs that were too complicated to convert for mobile.

The Good News

For those of you who haven’t embraced the current trends or technologies is that this algorithm update will only affect searches from mobile devices. If you’re website visitors are using a desktop computer, you’re page ranking shouldn’t be affected in the search results.

The Bad News

Mobile is not a trend. It’s here to stay and taking over desktop searches. Google has officially announced that there are now more searches conducted on mobile, than on desktop according to SearchEngineNew ( source ).

Huh and How?

If your a technology Luddite and haven’t yet embraced the future of search, consider this: Searching on mobile devices is SO MUCH EASIER than searching on desktop, why you ask? Just pick up your phone and ask it to search the web for something, most people do now. It’s so much easier to ask Siri to look for something than it is to type it in to a search field, and you can ask a question instead of just using a few words ( if that’s how you’ve been searching ).

So mobile search has surpassed desktop because more and more people are getting on board with mobile and finding better ways to utilized their phones, and it’s much faster and more convenient. Everyone has their phone with them so it’s easier to perform a search. For a desktop search you need to be sitting at a computer, so you’re limited in where and when you can search. With mobile you just whip your phone out, press a button and let Siri do the search for you.

What’s Next?

You can check your web pages right now to see if they pass the Google Mobile-Friendly Test.  Follow this link.

You will need to test each page, but for most of us you’ll be safe testing your home page, and any pages you aren’t too sure about.

If your home page fails, then the rest of your site most likely isn’t mobile friendly.

With this in mind, passing will help your searches from users on mobile devices, and a fail will probably leave you in the dust and only accessible to users on desktop searches.

This doesn’t mean that your site can’t be found or loaded up on a mobile phone or tablet, it just means that when someone is searching for something that your site may have to offer or answer you most likely won’t show up to high in the results, or show up at all.

What if My Site Fails the Mobile-Friendly Test?

It’s time to update. I’ll run you through all the things we do for updating an older site to a mobile friendly version. If you want some help with this we do offer mobile updates ( Site setup and Content Transfer ) of older websites to new mobile friendly sites it’s all part of our Content Transfer Service. What I really wanted to do with this article is share all the things we consider when updating an older website, to something current. And we’ve seen some really out dated sites created over a dozen years ago in FrontPage 2000 using all tables and inline styles, both of which are now considered ‘no-no’s’ for mobility.

So What Do We Do for Updating for Mobile?

Pretty much all mobile updates require the content of your pages be copied into an updated ‘template’ or page or a new ‘template’ applied to your existing web pages if you’re working with a Dynamic Web Template such as Dreamweaver or Expression Web.

There are elements of your old website you’ll want to keep, and elements that will need to be updated. Let’s make a quick list:

Things to keep:

  • page names
  • folder names
  • meta title
  • meta keyword
  • meta description
  • google analytics
  • content
    • headings, paragraphs, lists, links, inline images
  • misc scripts being used for content
  • hyperlinks / menus

Basically these are the elements of your web page that make up the content of a web search. If you were to strip everything in your page out that is not important to search engines, this is what you would need to still have a legible web page, a human readable page.

Things to update:

  • convert tables to divs
  • convert table columns and rows to css columns
  • replace JavaScript / flash menu’s with text/css based menu’s
  • remove flash
  • remove inline widths and heights from images
  • resize images to fit page
  • optimize the images for the web
  • update images to be mobile responsive ( add img-responsive class so images will scale )
  • remove inline font styles
  • wrap content in correct HTML tags ( paragraph, heading )
  • add links to phone numbers for mobile users
  • move JavaScript to bottom of page
  • minify JavaScript and CSS files
  • consolidate CSS files

Either way your existing pages will need to be prepped and cleaned. This is the short list. Let’s take a look at the process start to finish to see how and in what order we work with.

Site Update First Steps

First thing we do is pick out a mobile friendly template which we can use / modify to work for the client. We choose a Bootstrap template as Bootstrap is designed for mobile period.

Site Clean Up

Now we take a look at the existing website. Typically what we’ll do is make a copy of the site, then proceed to clean up the code by running each page through an HTML cleaner. This helps to remove any outdated styles, tables or HTML that is no longer valid. My favorite tool is HTML Cleaner.  Simple but effective. You can select which tags to remove, clean or change. We do not want to alter the content, just what’s wrapped around it. Now we have basically stripped away any old HTML, and removed anything that could hinder or harm the mobile view.

We’ll take just the code that is withing the <body> tag. Content within the <head> will not be used unless it’s a meta tag or script that is required such as Google Analytics.

We also remove any flash and JavaScript menu’s ( such as the old FrontPage navigation ).

We’ll remove any heights and widths from images to allow them scale, and ADD the responsive image class of ( class=”img-responsive” ). Sometimes this also requires resizing the images in an image editor IF the image had not been resized for the page already.

And finally we’ll upload any images to TinyPNG. Here we can fully optimize each image for use on the web, and in most cases cut the file sizes of each image by as much as 70% or more.

So now we have a nice clean ‘shell’ that we can work with. Content that can now be used within a mobile website or mobile website template.

Now For the Updates

Now that we have the content ready to go we can create our framework to copy the content into. We’ll take the new template and re-created each page, using the exact same page names. We’ll create a blank template page for each page in the site.

Then we’ll copy in the meta tags, and scripts from the old site.

Once we’ve done that we’ll copy in the content and with each page try to align the content as best suits the new site, and the old site. If you had two columns in the old site, we’ll try to retain that where it makes sense, provided it will also make sense for mobile users to do so. Basically we will copy the clean content into each new template page and arrange the content so it displays the best for both desktop and mobile users. Some old web page layouts and alignments no longer make sense for newer devices so the content needs to be adjusted somewhat in it’s presentation so it makes sense to both audiences.

Proper HTML heading tags, and paragraph tags are applied if applicable, and images aligned to the content.

Once all the content has been copied into the new template we can proceed to update the existing ( template ) components such as logo, sliders, menu bars and footer. Most templates include some type of global components for these elements, with our template we use Library Assets ( or include pages ) to make updating the site a bit faster.

Once the entire process is complete we can take it one step further and optimize the CSS and JavaScript for Google PageSpeed by minifying and consolidating the CSS and scripts. This is not something we recommend doing on the working version of the site, just the finished and published version as once you’ve minified and consolidated your files and scripts, it’s darn near impossible to read the code and make further changes. You can ‘unminify’ then ‘re-minify’ but best to have everything in your site as complete as possible.

Google PageSpeed for Noobs and the clueless Part 1

When I first encounter Google PageSpeed, and tested it out I felt like such  Noob. If you’re one of those folks who’ve heard of this thing called Webmaster tools and you’ve been afraid to commit figuring it’s too complex, you’re not alone! But we’ll see what we can do to help soften the learning curve a bit.

I’ve read many articles on Google Page Speed now, but none have addressed the issues that face those of us that were raised on Web Editors and Web Templates. This article is for anyone who:

  • has built their website using a web template in Dreamweaver, Expression Web, FrontPage or SharePoint Designer
  • relies upon the Design Window of Dreamweaver or Expression web to edit their content
  • finds the information provided by Google’s Page Speed web page to be a bit over their head
  • want’s some help with improving their page speed ranking

So what is Google PageSpeed?

It’s one of Google many tools or metrics that may help to determine the over all placement of your web pages in Google’s search rankings when compared to the other pages displayed for the same search terms .. also known as your competition.

I said “may help to determine” as the only people who really know the exact formula’s are currently working for google and probably buried under a pile of non disclosure agreements, so they’ll never tell. Everything you read in this article will be my opinion.  And my opinion is google changes or updates their algorithm on a regular basis and one of the latest “tools” they have released is PageSpeed Insights.

Insights is a tool that determines how fast your web pages load. And gives suggestions on how you can improve the load time.

Why is this important?

How fast your pages load may have an impact on how well you rank in the search results. There are many factors that go into how google determines where your web pages will rank for a given search query.  If you are relying upon google for search results, as in this is your business and you need good rankings you’ll probably want to hire a reputable SEO firm to help out as Insights is just a tool to help with one of the ‘thousand’ ( according to google ) of ranking factors in their search algorithms. How important a factor is unknown to me, and no one at google is willing to share.

NOTE: Page Speed is not the ONLY factor that affects your search rankings. If you’re in a situation where your search results are falling and you’re looking for every advantage you can find,  hiring a good SEO firm can be very VERY expensive. Some things to consider if this is your business is:

Google Adwords: Advertising is part of doing business, often the most expensive part but Google Adwords is often a less expensive option for getting better listings with Google, and it’s faster.

Get Social: If you’re not interacting with your web visitors via social engagement, good luck. You may as well give up now and see if your competitors are hiring. I mentioned that Page Speed is one of the many factors that help google to determine how well your pages rank for a given search term, another factor is how much chatter there is about your website through social networks. Just as ‘links’ to your website are important the new kid on the block is social media and how it impacts the importance of your website. I’ll be writing an article about this in more detail soon.

Our own experiments and results

When we first learned of Google PageSpeed Insights we did our own experiments on our own website, and our own web templates and thought we’d share.

When we first loaded up www.i3dthemes.com into Google Page Insights ( https://developers.google.com/speed/pagespeed/insights/ ) .. the tool used to determine how fast your page loads, and gives it a ranking we scored a whopping 23/100 for Desktop or something as abysmal as that, and worse for Mobile. You probably will too on your first attempt. There’s a lot of things that go into Page Speed as you’ll learn about shortly, and a good chunk of that is server side. We tinkered and tweaked until we were able to hit 89/100 for Desktop and in the high 80’s for mobile, in other words we got the green light. And since then, the key pages that we were monitoring, have had 0 effect on search results. Zero effect. We used the search term “Dreamweaver Templates” which averages about 220, 000 search results. So not a lot of competition but enough to test with. And we haven’t budged in the results.

We were position 6 before we optimized the site / pages for Google Page Speed and now we’ve actually dropped to position 10. Many things have changed with Google in the past few months, and I can’t attribute dropping 4 positions to actually trying to improve our page loading speed, but it hasn’t seemed to have had the positive impact we were striving for.

To continue with the experiment, we also tested the 9 websites that were listed above us in the for the search term ( Dreamweaver Templates ). It’s one thing to try to improve your own rankings but lets not forget that we are actually trying to ‘outrank’ those websites above us, We just need to do things better than they are.

We conducted a Page Speed Test using Google Page Speed Insights on each of the websites ranked above us, and for ALL 9 Websites tested, www.i3dthemes.com scored better than 8 of our competitors and tied with the exact same score with another. Some of the scores were as expected, in the low 20’s and 30’s so they were not even close to being optimized. Other sites may have been optimized at one point, but with updates and changes to the site things become ‘un-optimized’ quite quickly.

It’s been suggested by Google that a faster loading web page may help with getting better search rankings. This is just one of the factors and depending on how competitive your keywords and market place are, but it will be different for everyone. In the experiment we were able to conduct on our own website, it would appear that our competitors have not tried to optimize their web pages for Google Page Speed, and still rank better than we do. And even with optimizing our web pages we have not seen an increase in ranking, but actually the opposite. So from my own experience those few milliseconds that we were able to improve the load time by, have not seemed to have an impact on search results or ranking. With that said, there are so many things that go into google ranking algorithm, and MORE IMPORTANTLY, the things that our competitors ARE doing with their websites and business that are helping them get better rankings which we have no control over.

Google Page Speed and You

I’ve read a lot of articles on Google PageSpeed or Google PageSpeed Insights ( the tool used to determine how fast your web pages load ) but none of the articles address some of the issues that arise especially for new web masters ( aka ‘noobs’ ), or developers who have been working with websites for years using web editors such as Adobe Dreamweaver or Microsoft Expression Web. There are some inherent down sides to optimizing your website for Insights  the biggest one being the comfort of working with the Design Window in your editor. Many people rely upon the Design view to help them organize and style the content. Google provides a very helpful script you can use to help load your style sheets more effectively and we’ll show you how to implement this in Part 2. Using a script to load style sheets has a downside in that you can’t see the stylesheet styles to the Design View. We’ll get into this in more detail, with a work around.

I’ve experimented with our own web templates, going through the steps suggested by google on how to improve page loading and a few thoughts struck my right off the bat:

  1. this should only be done when your site is complete AND published
  2. you may need to revisit Insights on a regular basis as every time you add an image to your site, or change the CSS
  3. you’ll want to make regular backups or copies of your website

Insights will suggest that you compress your CSS style sheets and and JS files. It may also suggest that you combine stylesheets or JS files. From Google’s perspective it’s faster to load one BIG file, than serveral smaller files. From a Designers or Webmasters perspective it’s much SIMPLER to work with multiple small files, than one BIG CSS file, and it’s pretty much impossible to work with a Compressed CSS file. So there’s a bit of a conflict as Insights basically wants all your CSS and JavaScript bunched together into one big file each, then compressed so it loads faster. While you are building your website you NEED access to readable and manageable CSS and JavaScript files.

Much of the things that Insights is asking for can not be done until your website is completed, and published up to your server. At that time, you can start to combine or compress files.

Here’s the snag though, if you need to make changes to your CSS or JavaScript you will need to un-compress the files, make your changes, then re-compress them.

This sucks.

And probably the reason why so many web masters have not caught onto google PageSpeed Insights. Or as from my own experiments it looks like there was an attempt to improve page loading, and over time the ranking have fallen as the websites get updated. I noticed that with our own website. Some new images, and change to a CSS file and BANG, you’ve just slipped a few points because those few updates were not ‘optimized’ again, for Insights.

So this is were we come in and you come in. What do we web masters who have been relying upon on Web Editors such as Dreamweaver or Expression Web do, with all the things that Google asks of us, and how do we manage our websites once they’ve been optimized and we need to make changes?

I’ll be covering this in Part 2 of this article, a straight up step by step how to guide to first optimize your web site or web template for Google Insights, then some tips on how to improve your score, as well as how to manage your website once it’s been optimized.

Why isn’t my web template optimized for Google PageSpeed Already?

If you’re working with a web template for Dreamweaver, Expression web or any other editor, the chances of your website already being optimized are none. As we go through the step by step guide in Part 2 of this article you’ll see that we not only need to compress the CSS and java script files but we also need to optimize our images. All images, anything you’ve added to your web template, or any images you’ve replaced in your web template need to be optimized AGAIN. There are several ways of doing this, and some web editors such are Dreamweaver have a built in optimization tool ( one of the reasons I like to recommend working with Dreamweaver as it is kept up to date, and new functions added to the software as the specs are changed by w3.org or even by google ).

Optimizing CSS and Javascript files means compressing them using a CSS and or JS minifier tool which you can find online. The downside to this is you NEED those files to be readable and managable while you are building your website because you may need to make changes to the CSS or JS as you are building your website.

A good example of this in CSS is when you want to change the font color of font size for a Slider, or for a hyperlink, you would make these changes within the CSS file. To find the CSS to change, the style sheet needs to be readable,  a minified style sheet is not readable.

Another example using Javascript would be W3 Validation. Many of our templates were created  at a time when HTML5 was still in it’s experimental stage and the HTML5 validation tool provided by w3.org was still being updated for HTML5.  Some of the JavaScript that past initial verification when the template was first developed and packaged may not pass any longer as some of the verification standards have changed over time, or upon final release of the HTML5 spec by w3.org. To update a JS file to pass w3 verification is usually a quick and simple update you can do yourself. If working with a minified js file, it would be impossible in most cases, so many js file files ( especially js files that are for newer components ) will remain uncompressed when the template is packaged as they are easier to update.

You may be wondering why I haven’t suggested downloading a fresh copy of the template with the update? And copy the updated js file over? Several reasons:

  1. The template package may not be updated yet. We need to know about the issue first before we can make an update. We don’t re-test templates once they’ve been packaged so the only way we’ll know is if someone discovers a issue or a specific file or script fails to pass the w3.org test.
  2. We sell many templates to web developers who in turn use the template to build website for their clients. The client may not know their website was built using one of our templates, and would not know to check for an update.
  3. Your js file may be updated as some point in the build either by yourself, or by someone helping to update or troubleshoot your website or website component. Replacing the file would overwrite any changes that you may have made to that file.
  4. Many of the js files in the templates include variables that you may want to change such as a timing of a slider, or you may want to change the type of animation. It would be difficult to find this information in a minified file.

And finally, something to keep in mind. Most websites and templates were created BEFORE Google Insights was launched, and much of the html and file construction was created or designed to make the updating and management of the website simpler than it would be combining and compressing the files that you may need access to. Now that designers and developers are aware of how Insights works we can take steps to build our templates with this in mind.