How do I choose the best template for me?

When you're trying to find the perfect template for your website, you want to make sure that you have the look, feel, and functionality that is right for you. Many people browse through template catalogs looking for a specific type of template with a specific color and navigation structure. For example, a plumber might want a purple template with drop-down navigation. How many template designers would have what that plumber wanted? Not many! Here are some ways to help you focus on a template choice that will be right for you and your business.

1. Web Editing Programs

Your first choice is to make the decision whether to use a generic html template that can be edited in any web editor (or even Notepad) or to chose a template that is made specifically for particular web editors. The most common web editors are Expression Web or SharePoint Designer (Microsoft Products) or Dreamweaver (Adobe Product). I know many of you may say that FrontPage is your program of choice, however; Microsoft stopped supporting FrontPage a few years ago and many of its proprietary functions won't view correctly in today's browsers.

2. Color

So, now that you've chosen your editing program, let's pick out a template! The first thing you want to look for is the color you want your web. I use css to control color in my designs, so changing color is not hard. Go through the template choices, picking out a couple that are a pleasing color to you. If you can open your choices in different windows, then you'll be able to see the templates side-to-side to compare colors. If you absolutely must have your specific color, let me know. I can certainly help you with the hex values to change the template colors.

3. Layout

Layout consists of many different options, which include: the number of columns on the page, how wide/narrow is the page, location of navigation on the page and the header section consisting of a main image or no image at all. Let's break the layout down.

Columns: Do you want only one column on your pages or do you want two or three columns? Most of my templates come with a couple of different layouts, but some are made so there is only one choice of layout.

Width: The latest templates are designed at a width of 1200 pixels, some may be even larger. A 1200 pixel template will fit easily into view with the new monitors, leaving a bit of room on the side for the scroll bar and a bit of the background. Older templates, made for smaller monitors, were 750 pixels wide or even smaller. They now get lost on the larger monitors. You'll recognize the smaller width templates immediately. They look like a note card in the middle of your screen! I might be embellishing a bit, but they do look very small!

Navigation: Where do you want your main navigation structure? Remember, people don't want to have to look for it! Your viewers want the navigation to be in a consistent place throughout your web. Navigation is usually in the header area and/or in the side area (sidebar) of a web.

Choose where you want your navigation located.
Do you want a drop-down menu, a button, or a background color? Pick a template that fits your needs.
If you only have a few links, you don't need a drop-down menu.
If you have many links, you might just want a drop-down menu or few global links at the top with most of your links down the sidebar.

Header Image: Image or no image in the header: That's just personal preference!

4. Images

Now is the time to pick out the main image you want to use in your template! Does it match the color of the template you chose? If not, choose another image or choose another template color! Will your image "fit" in the main image area of the template? Look at the image you like. Is it in "landscape" (wider than tall), is it in portrait (taller than wide) or is it square? You can't fit a square image into a rectangle without cutting off parts of it.

Don't have an image you like? There are a number of places to get images at a very reasonable price, such as Big Stock Photo or iStockPhoto. Image pricing varies among vendors.

Did you take your own pictures for your web? That's great! Just make sure they're clear and optimized for web viewing. Your main image is your introduction to your web. It should be crisp, clear, and interesting.

5. Movement

JavaScript slide shows, Carousels or WOW are your choices with my templates. To move or not to move, which will you choose? Choose what works for your "look." The worst thing you can do is put a bunch of movement in your site that distracts from your content and takes too much load time. We use JavaScript to give movement in quite a few of our templates.

Java Script Slide Shows

The Java Script slide show that is included in many of our templates, is easy to work with. You have four things to do: Pick out images you like for your web. Size them to the size indicated in the template. Name the images the same as ours... usually; mainimage1.jpg, mainimage2.jpg, mainimage3.jpg Save them in the images folder, overwriting our files. If you don't have an image sizing program, you can go webresizer.com Remember, it's better to resize them than to just grab the corners and pull them down to size. The browser will load the full sized image and show it smaller, which increases the load time.

Carousel Slide Shows

We love the new Carousel Slide Shows! In fact, you can see one at the beginning of this page. If you purchase a template with the carousel included, make sure that you make your images the same size as ours. If you name them the same name as ours, you won't even have to mess with any coding! We usually name them: mainimage1.jpg, mainimage2.jpg, etc.

WOW!

Do you like the movement of words, images or both in our templates? We use WOW to achieve that movement. You can easily add more or delete the coding if you don't like it. We used WOW on the homepage of our site along with the Carousel slide show.

Hopefully this will give you a start on choosing a web template that is right for you or your business! You can always give me a call or email me as well!

More information about HTML Web Editing Programs

Expression Web 4

All of our templates are Mobile Optimized for Expression Web! Our Expression Web templates are all uniquely designed with plenty of extras for you to play with! All of them have dwt's and most of our templates have three or more layouts. The choices in layouts give you a variety of looks to have for your web pages. Our Expression Web templates are made to be used in Expression Web 4. They can also be edited with SharePoint Designer, but they do not have the "SharePoint" functionality included.

I just heard that Expression Web is no longer going to be supported by Microsoft. What does that mean for me?

You will still be able to use Expression Web for a VERY, VERY long time (2020). HTML is HTML. We will still continue to sell and support our Expression Web templates. In fact, Microsoft is GIVING away Expression Web 4! Go get it now!!! You can download it from the Microsoft site here.

What about Expression Web 1-3?

HTML5 works on all versions of Expression Web BUT it does not layout correctly in "Design" view in Expression Web 1-3. It works perfectly in the browser, but it just looks strange in "Design" view.

Can you use it? Absolutely! Just add your content and then preview in browser as you are working.

Dreamweaver

All of our Expression Web templates and our Generic HTML templates work perfectly in Dreamweaver. You will see "vti" files in the Expression Web version. You can delete them, ignore them (as Dreamweaver will) or you can ask us to remove them for you after purchase.

Defining Your Site:

Defining Your Site You MUST define your site. If you don't define the site, Dreamweaver "thinks" that you have a bunch of files in a folder that are NOT connected.

In order to define your new site, go to "Site >New Site." A box will open for you to define the site. Choose the "Advanced" tab. Name your site in the "Site Name" box, then navigate to your new web folder. Click on open, then okay. Then choose the "Default images folder" (that's the one inside the web template) and click okay. After you've done those two steps, you can click okay. You can always come back and add the http:// address. You'll see all of your files ready to be edited.

Go to your "Templates" folder (it has the dwt's in it) and open each file. Change the footer information, "Your Name Here" (if it is text, not an image) and other non-editable regions to match your website. When you save each dwt, it automatically updates the pages connected to it. If it does not update, your site is NOT defined.

Generic HTML

Want a new look for your web, but don't have Dreamweaver or Expression Web. No worries, our html5 generic website templates are cross-browser friendly and can be used in any html web editor, such as Coffee Cup. You can also choose to edit them with notepad or a similar program.

What is a generic html website template?

Html is the markup language or coding used to have content displayed on the web. The html coding tells the web, "this is a div (kinda' like a dividing box) and this is the content that goes in that div" or "this is a table and this is the content that goes into that table." It also tells the web what kind of document or "doc type" the web is. In other words, html is the guide for how things are rendered on the web.

CSS, the cascading style sheet, is the look of the web. It controls fonts, colors, location of divs. It calls in backgrounds and images. It has more to do with "style" than functionality.

Although all of our templates use html and css, our HTML5 templates use only those codes. They do not contain the proprietary functions of WYSIWYG (what you see is what you get) programs such as Dreamweaver or Expression Web. Those functions might include dwts (dynamic web templates), includes, and library items.

Google Fonts

This is a fun little extra to play with. If you don't like the fonts we chose, just go to: Google Fonts and select the font you like. Follow the easy coding directions. You'll replace the font name in the css file under the heading (h1, h2, h3, h4 tags) and change the name in the dwt file.

Light Boxes

The light boxes are easy to use and you can have your page really pop for your visitors. All you need to do is follow the simple directions that are on the page. You'll size each image into a small thumbnail image and a larger, viewable image. Then you just slip their names right into the code. Your light box will look professionally coded and no one will know you did it so easily!