Software optimize

Template resources for web design

Templates let you develop web sites that share a similar structure and graphic identity, quickly and without having to worry about accidentally deleting or changing elements. Ryan Boudreaux provides template resources and tips for using them.

There are many sources for preset templates and themes, many are free, some are shareware, try then buy, and some are affordably priced. Some are tools that manipulate code and are utilized by advanced language developers. Can't find a theme or create the website design you like? Maybe you or your customer is tired of the same old look and feel of the current site!

Start with a template. Templates let you develop web sites that share a similar structure and graphic identity, quickly and without having to worry about accidentally deleting or changing elements. If anything, it gives you an established outline, like the blank canvas an artist uses when getting ready to paint, the template is a perfect way to get a jump on the new web design look and feel. But you have to be careful; some free templates have been known to harbor nasty code, and you always want to make sure to validate.

Highlighted below are several resources for web design templates and themes and what to look out for.

WordPress template resources

Probably one of the most popular CMS and blog platforms today, there are thousands of freeware, shareware, and for purchase themes that offer up templates for a vast array of business, personal, and social networking types. Built and powered on the PHP coding language with a MySQL database backend, WordPress and the available themes are growing in numbers every day.

Is a free WordPress template really free? If you go the free route, you have to be extra careful when downloading them, because some are known to harbor malicious code. The best way to test a WordPress theme is to download it to your PC, then run a test on your desktop. Using XAMPP, displayed in Figure A below, the free and open source package allows you to install a Web server on your PC, then using the TAC (Theme Authenticity Checker) plugin, among a few other tools, you can scan all your theme files for potentially malicious or unwanted code.

Free Theme Directory, as displayed in Figure B below is the first place to look is in the WordPress dot org where you can find over 1,300 themes. Some of the most popular themes include Atahulapa, LightWord, Platform, and 2010 Weaver.

Elegant Themes by Nick Roach requires an annual fee of $39.00 for the personal level and unlimited access to 52 designs, and he continues to add two to three new themes every month. One of Nick's latest themes is called Anticipate, which is actually a plugin theme that supports a preview mode for sites that are under development.

What I like about Nick's themes is that he features what are called ePanel options, providing tools to update general and layout settings, element colorization, integration tabs, navigation management, advertising management, SEO, and support documentation.

The shortcodes collection greatly improves the functionality and variety of your content and includes button varieties, toggled content, content boxes, slideshows, tabbed content, social media, password protected content, image slider, and author info.

Page templates include image gallery, sitemap, full width page, contact form, advanced search, and member login.

Localization feature allows your theme to be translated easily into any language. Included with each theme are sets of .mo and .po files that can be used to translate the theme, which means you won't have to spend hours searching through PHP files for English words. Elegant Themes preview gallery is displayed in Figure C below:

DIY Themes - The powering force behind the Thesis Theme Framework is Chris Pearson, who started creating WordPress themes in 2005 with his early notable Cutline Theme. While Chris's early work and themes were free downloads as with the original Cutline, his current Thesis Theme is a premium template system for WordPress that is designed to serve as a rock-solid foundation powering any website, and is displayed in Figure D below. The Developer's Option has a one-time fee of $164 for unlimited use of all the themes, while the Personal Option for $87 is good for one theme, with an option to upgrade to the Developer Option for an additional $77. Several examples of web sites that utilize the Thesis Theme Framework are eBay Motors Blog, John Gerzema, Letter Cult, Matt Bites, and Network Solutions Blog.

WordPress Themes - This site boasts its formula WTSI, or WordPress Theme Sparkling Index. The formula takes into account that new themes are added every day, and they deserve the same shot at making it to the top 10 list as any established themes. Themes can be test driven, viewed, and downloaded, and with the theme search tool, filtering specific categories, and theme properties can be ordered by most downloads, most targeted, most view, or by the WTSI. Again, I cannot vouch for every theme's authenticity, security or code content, a little work upfront checking for any malicious code will save you a lot of headache down the road.

Theme Review - Maybe you are ready to code your own WordPress themes? Make sure they pass the team review at the WordPress Codex Theme Review as shown in Figure F.

Adobe / Dreamweaver

While not as popular in the mainstream for template offerings, don't overlook Dreamweaver; out of the box, it offers up a good set of resources for creating blank pages, blank templates, pages from templates, pages from samples and others. Included in the types are HTML, CSS, ASP.NET for C# and VB, JavaScript, XML, ColdFusion, JSP, and PHP, to name a few. Within each type there are up to several dozen layout selections ranging from one column, static or elastic, to three columns with headers, footers, and sidebars. It also offers up starter page themes including entertainment, health & nutrition, lodging, personal training, restaurant, spa, and travel designs, and you can also select the DocType as well.

Marketplace and Exchange - Adobe's offering as shown in Figure G, has many resources for supplementing your Adobe products, including Dreamweaver Exchange for the developer and Photoshop Exchange for the Web graphics designer. The extensions and plug-ins are available to update the existing respective application with specific functionality.

In the Dreamweaver Exchange section you can filter by license type, including Shareware, Open Source, Freeware, Commercial, Open Distribution, and Try/Buy. You can also browse by category, including Accessibility, Browsers, Commerce, CSS Layouts, DHTML/Layers, Flash Media, Navigation, Rich Media, Scripting, and Web Analysis to name a few.

For example, would you like the ability to publish your sites directly to iPad, iPhone, and iPod over a Wi-Fi connection? iDreamPublisher extension will do this for you as displayed in Figure H. Available in Windows format only and at a price of $39.99 with twelve months of free upgrades, this might be the tool you need to leap your site into mobile devices.

Buyer beware! Remember, with any template comes a set of pre-loaded code, and you still want to check it for any malicious content and validate it with your development and testing phases.

Other notable tools

There are many other templating tools out there as well, some are geared toward coding languages for advanced users, others for platforms, and here is a short list of those resources.

MASON is the 100% free and open source Perl-based website development and delivery engine that provides templating among many other featured tools. Mason's Welcome document is shown in Figure I below:

Apache::ASP -provides an Active Server Pages port to Apache Web Server with Perl scripting, with the mod_perl module enabled, the introduction is displayed in Figure J.

Template Attribute Language, TAL, is an attribute language used to generate dynamic tag-structured markup in HTML and XML coded pages, thus simplifying the collaboration between programmers and designers using embedded TAL statements. I'm not sure how up-to-date this resource might be as the last edit on the site was six years ago, but it's worth the effort for those using TAL statements. The TAL self-titled "FrontPage" is displayed in Figure K.

DoJo Toolkit is an open source tool for creating and utilizing JavaScript and is a great resource for creating grids and charts, widgets, desktop, mobile, and embedded apps, and API's for webs. Actually, all you have to do is add one line of JavaScript code to your HTML and get access to the full Dojo Toolkit, along with the Dojo base .js file. Documentation includes a quick start guide, reference guide, and API documentation. See Figure L below:

TemplateMonster.com - Website, flash, CMS, and SWiSH templates, among others, as shown in Figure M.

From art to wedding themes, WebsiteTemplates.org includes templates for platforms such as WordPress, Drupal, Joomla, SWiSH, and Flash, as seen in Figure N.

Do you have any template resources or tools that you use and would like to share? Please tell us about them here.

About

Ryan has performed in a broad range of technology support roles for electric-generation utilities, including nuclear power plants, and for the telecommunications industry. He has worked in web development for the restaurant industry and the Federal g...

3 comments
Flvplayer
Flvplayer

All the themes are superb, Good post............... i like all of them especially, dojo!

dcromey
dcromey

OSWD.org Sure, it's "just" HTML and CSS, but not every new business needs a content management system.