Web Design Inspiration Blog | SpicyWebDesigners.com

Just as WordPress is a CMS framework allowing designers and developers to create blogs and CMS websites with greater ease, so too are there many tools on the market to assist in the design of individual WordPress sites.

I have always been interested in the comments and discussions generated by the comparisons of theme frameworks by the design community. I suppose I keep hoping to find an acknowledged “best” framework – but it seems that it isn’t that simple. Just as designers and developers tend to gravitate towards their favourite CMS systems (WordPress, Textpattern,  Expression Engine, ModX, etc.) – everyone seems to try out a few and settle on the tools that seem to work best for them. And sometimes it becomes obvious that certain jobs are just easier to develop from scratch.

I hope to provide an overview of some of the different options currently available to designers and developers – leaning towards my own bias towards desirable aesthetic outcomes and ease of use, over robustness and extensibility.

Of the hundreds of available pre-designed WordPress themes, it is likely you’ll be able to find a few that meet your structural, functional and/or design needs. Using a pre-designed theme can dramatically reduce the time required to bring a site to a finished state. But be aware that every developer has their own little coding quirks, and if you fail to scrutinize the code before committing to a theme you may end up in a frustrating battle against the code – and end up with an increased development time the long run.

Theme Frameworks

This category can be further broken down into CSS-naked themes and frameworks that are essentially design/development tools.
Blank themes essentially provide the HTML and PHP framework upon which a designer can develop a site mainly through CSS. These blank themes come with a variety of functions already embedded, but new ones can be added via regular WordPress PHP tags. Some of the more popular themes  include Starkers , Blank and Whiteboard.

Frameworks are generally more robust systems that use proprietary tags and hooks to add functions to a theme, while styling is done either through CSS, the admin panel or though a WYSIWG feature. These frameworks also support increasingly popular child themes. Some of the more respected free frameworks include Hybrid and Thematic.

There is also a growing commercial market for these frameworks including Genesis, Canvas, Thesis , Headway, and the new kid on the block, Startbox. Each of these tends to be geared towards different markets and levels of skill.

The main benefit of working with a theme framework is that you can generally feel confident that the coding behind the platform has been created by WordPress experts and is up to web standards. Especially so when those frameworks that have been around a little longer and have made improvements based upon community feedback.

Building Aids

Gravy – A fairly basic blank theme geared towards front-end designers that comes with a corresponding set of labeled PSD files to make slicing and converting a Photoshop design into a WordPress theme easier.

Theme Dreamer -  A plugin that allows you to build WordPress themes within Dreamweaver.

Divine -  A program that works in Photoshop to convert PSD files into to WordPress. Full version will be released within the coming months.

Themepress -  An inexpensive way to outsource your xhtml/CSS conversion. For $10 and a little pre-conversion preparation you can submit your code, and test out the conversion before you download the finsihed product.

Plugins

Elastic - An exciting new addition to WordPress’ amazing array of plugins, Elastic is a WYSIWYG drag-and-drop that works in WordPress’ admin area to develop the layout and styling of the site. The plugin is still in development, but judging by the buzz surrounding it, this may be one to watch. And you are able to freely download a test version today.

A Custom DIY Framework

Sometimes developing your own “framework” is the best way to go. WordPress code is made for reusing and recycling. You’ll often find that each project contains about 80% of the same code, so why not make your life a little easier and carry things from one project to the next?

About the Author

Heath Waller is a guest writer for SpicyWebDesigners.com.  She is a web designer based in Calgary, Alberta in Canada and currently you can view her portfolio of design work and her new blog called “Code Alchemy“.

Feel free to read some more about her here:

• “Headfirst: A new designer’s adventures in coding for the web” by Heath Waller
• Featured web designer interview with Heath Waller

Heath Waller is a guest writer and new to SpicyWebDesigners.com.  She is a web designer from Calgary, Alberta in Canada and currently runs a portfolio and her new blog called “Code Alchemy“.  I hope that you enjoy her article about her experience coming from a visual art and design background and taking the leap to learn coding.

A confession: Starting out as a web designer, I was just about as resistant to learning code as humanly possible. I honestly believed my right-braineded-ness rendered me incapable of understanding such abstruse concepts as Javascript and PHP. Code felt to me like the worst possible combination of indecipherable characters and random hieroglyphs – my worst high school calculus nightmares revisited. And, given the multitude of WYSIWYG solutions available, why commit the effort required to learn code?

I was privy to articles by designers discussing how understanding the framework provided by code helped them in conceptualizing their finished designs. While this made sense to me – I comforted myself with the biased notion that most developers were men, who were naturally more adept at abstract thinking.  My hours were spent instead figuring out tricks that would allow me to get around the obvious gaps in my knowledge.

So, what was the turning point that got me to actually start dedicating myself to learning code? While I wish I could say it was due to some grand enlightenment – my conversion ended up coming somewhat more cynically.  I was in need of work and was offered work by a design company who was looking for a coder and it was a done deal!

Let’s face it, learning a new language at a mature age can pose a challenge for the best of us and I was no exception. After all, that is essentially what web code is: a selection of proprietary languages that make stuff behave in certain ways.  Fortunately, I was surprised to discover many of the computer languages are composed mainly of regular English. So when I was starting out with XHTML and CSS allowed for some small sense of comfort in familiarity and kicking and screaming as I was, small consolations mattered.

I took out about a dozen books on XHTML and CSS and with copious mugs of tea at the ready, shut myself in for a week of dedicated cramming. Without the alternative of failure as an option I dove in head-first.  I made all kinds of mistakes in the process which in and of itself was an essential learning tool.  Taking the theory that I’d been reading about in these books and putting it into practice makes everything much more relevant and present to me.

I now possess many of the skills that can transform a designer’s vision into a functional reality.  New situations crop up all the time that force me to learn new techniques and new code languages in order to accommodate the designers’ needs.  Because of this, I feel confident in having tackled learning one type of code in the past, that I’ll be able to tackle other ones in the future.

I am also happy to report the benefits of learning code extend to my own designing. Instead of performing an essential “translation” between Photoshop and the browser, I welcome the interplay between the visual plan and dynamism code introduces. There is a push and pull between the design and the code that allows for happy accidents. To put it in painting terms, I now feel like I do the under painting in Photoshop, and add the nuances and glazing in the browser. The design process feels more organic.  In understanding the limitations and capacities that current codes present to a design, I ultimately feel more creative in my designing abilities.

When I was learning oil painting I first had to learn my materials. The greater understanding I achieved with my stretchers, canvases, paints and mediums, the freer I felt in my ability to focus on my expression.  These days I use Firebug to inspect the element of anything and everything that makes me go “how’d they do that”?!  It makes browsing the web feel more like a trip through an art gallery. To get up close and personal with the works or recognized masters of web design and to take note of the “brushstrokes” that help them achieve their mastery.

I still have much to learn, and given my recent experience, I can only imagine that the more I learn, the better my designs will become.  Learning to code is still one of the most painful challenges I’ve faced in my work; however in retrospect, I feel rather foolish to have done without it for so long. The time and patience required to learn it is far outweighed by the benefits I receive as professional designer.

I now consider myself both a code geek and a vocal advocate for designers understanding the full range of tools at their disposal; and code is just as essential to my work as my graphic tools.

Heath Waller

About the Author:

Judith Kallos is an experienced good-humored Technology Muse who has offered WordPress Consulting and Web Site services since 1995.

*****

Years ago I started using WordPress as a Content Management System to organized the hundreds of pages on my site. Around the same time, several smartie developers began creating professional premium themes for WordPress that were CMS oriented. WordPress was not just for Blogs anymore! Now you could have your entire site run on WordPress with a section dedicated to your Blog.

The primary benefit of moving your static HTML site to the WordPress platform is that you can update, maintenance and add to your site yourself. No code required. No more e-mailing your “webmaster” for simple text changes or additions. This is something I’ve been asked for the ability to do almost on a daily basis by my clients since I started my business 15 years ago.

Today I’ll share with you the benefits of moving your site to the WordPress platform.

Benefits of Using WordPress as a Content Management System

• Customizing your chosen theme is as simple as integrating your logo or header graphic.
• Easy integration of Flash Slide Shows (that are very expensive to have developed and integrated into a static HTML site) without you having to learn a lick of Flash.
• Customizing the color scheme or fonts are simple too. Just modify the global CSS file.
• Adding subscribe chicklets and feed links so visitors can easily add you to their list and get your updates delivered to their inboxes.
• Create logical categories and subcategories to keep your site intuitively organized and positioned for growth.
• Add or modify content by logging in and typing away — no code of FTP knowledge required!
• Easily add videos to your site/Blog.
• Include your promos or AdSense in the sidebar of every page.
• Reflect number of readers or sites linking to your site for site visitors to view.
• Easily add CAPTCHA (a type of challenge-response test used in to ensure that the response is not generated by a computer) to minimize form and comment spam.
• Integrate Social Networking widget(s) so your post can be easily exposed to popular networks.
• Integrate Google Site Map creation.
• Integrate additional SEO tools to enhance your pages and posts with search engines.
• Automatically post your updates to Twitter as a Tweet, Facebook, LinkedIn.
• A wide variety of themes are available to cater to your business personality and culture.

The list goes on… There are literally hundreds of WordPress plugins that can be integrated to enhance and increase the performance and features of your site.

The next thing I get asked is how to choose a the best theme for your site. Themes are the outside “skin” of WordPress and come in many designs, colorschemes, layouts and personalities. You want to find a theme that best fits how you want to display your site’s content while presenting your business visually in a professional manner. Ask yourself what do you want to focus on and what information do you want to feature most within your site. Knowing this will help you to spot the right theme for your business.

The neat thing about many premium themes is that they auto-propagate the top page of your site with your most recent updates. That means each time a site visitor returns to your site they have new fresh information available to them from your top page.

What is a premium theme? That my friends is the “get what you pay for” theme. Yes, there a literally thousands of free WordPress themes available online. But free themes can have several areas of concern. Remember, there’s no such thing as a free lunch!

Free WordPress Theme Concerns

• You do not know the developer or their ethics in keeping that free theme up to date when WordPress updates. Premium theme developers back up their themes with support forums and services. When WordPress updates, premium theme developers review their themes and offer new updates or releases if necessary to ensure their themes continue to work with the latest version of WordPress. Good luck with that when it comes to many free themes!
• Quality is a huge issue! I’ve worked with many free themes that weren’t worth the trouble due to messy CSS files and sloppy code. Very few incorporate cross browser compatiblity allowing the theme to dipsly well in all the top browsers which is very important for your new site. With free themes you cannot count on the developer to address those problems and any possible exploits in a timely basis — if at all. Think about it from this perspective; how wise is it to download files to be used for your site when you don’t know who developed them or what their motives for doing so are?Yes, many of these developers are credible and only trying to promote their services by example, but as with anything free online, there will be those with selfish and nefarious intent. If you see a free theme that you just have to use, check out the developer’s site. See if the site is constantly updated with recently dated posts. Review comments on their Blog or that particular theme’s page for other users comments and questions.
• Free themes tend to have links in the Footer, or bottom of the page, that link to the developer’s Web site. That is standard and customary – giving credit where credit is due. But, some developers also include numerous encrypted links that cannot be removed that display their own affiliate sites or sites whose content is not what you would like to see linked to at the bottom of every page of your site.

Being quality premium themes tend to run in the $20 – $79 range there really is no reason to take the risks mentioned above.

Next, you can’t talk about WordPress without discussing the benefits of having a Blog.

Benefits of having a Blog?

• Post daily tips and information for your customers (and those still deciding if they will do business with you).
• Use your Blog as a product or service update center where customers know to check in for status.
• Share your expertise and become a hub for useful posts on your product/service/market.
• Search Engines love Blogs because the content is fresh and constantly updated!
• Bunches of directories catering to Blogs only! And, once you post, you can “Ping” the directories to reflect you just added new content!
• You can have a subscribe option so that interested visitors can get notified when you post.
• Use Revenue Ads to get residual income from PPC targeted advertisers.
• Offer RSS feeds and Podcast feeds of your postings in a few simple steps.
• Easily add links to your Web site’s important information and other sites of value.
• Interactive nature allows visitors to post comments on each post. A great way to get feedback on what your next move should be!

I have worked on sites and Blogs on numerous platforms; Blogger, TypePad, Joomla and WordPress. By far the platform I have found the easiest, most intuitive, user friendly and most versatile for my clients Web sites is WordPress.

With WordPress being inherently search engine friendly and giving site owners the power to run their own sites and be involved in all the Web 2.0 technology that a static HTML site simply cannot embrace adequately, the choice seems clear.

Instead of asking “Why switch my site over to WordPress?” How about coming up with reasons not to? Then, I am sure you will find those very answers are not excuses you would hear from successful online competitive business owners.

Why WordPress? Why Not!

I recently contacted Ilona Filipenkova about her web design resume. I’ve had the chance to interview her in the past and when I asked her about her resume she decided to go ahead and write a post on her blog about my questions. If you haven’t had a chance to check out her resume I’d suggest checking it out because it is very solid and well put together. For those of you out there, whether you are starting in your web design career or you are a veteran with 10 years experience your resume (also known as a “CV”) along with your portfolio can land you that dream web design position or freelance gig.

Some tips that Ilona states in her article that I think are worth looking at are…

1. Make sure you know who you want to appeal to
2. List only related positions and work experience
3. Learn industry keywords and use them
4. Make it easy for your future employer to understand which skills you actually have
5. And finally: The absolute essential ingredient: link to your portfolio!

I also enjoyed reading what Ilona had to say about the web design industry in general…

“The web design industry is an industry of practical skills. No qualifications needed, no years of climbing up the ladder acquiring job titles needed, no suits and ties needed…just the core skill set. And whatever your core skill set is, whatever level it is at, you need to be creative enough to present it in such a way that your future employer can see it, understand what the actual level is and what your potential to grow is.”

Source: Ilona Filipenkova

To read her full article about her experience writing her resume for web design related positions click here. The web design profession is different from other professions because showcasing your work is essential to your ability to get the job, so start showcasing your work today.