Web development has been a side hobby of mine since college. I’ve played with a lot of different web development tools from souped up text editors for working with HTML and CSS to Graphical User Interface (GUI) tools that allow a more click and drag type interface. I consider myself a layman’s web designer. I have skills and the ability to learn the tools to do more complex, code-based web design, but also enjoy the simplicity of a good GUI interface that allows designers to focus more on the design and less on the code.
That bridge of experiences and interests led to my breakdown of web development tools into three main categories: highly structured “what you see is what you get” (WSYWIG) tools, flexible WSYWIG tools with access to coding, and full coding tools. I’d like to talk about each of these categories and how you can use them to build your own web portfolio.
These types of web development tools do all the technical work for you. They tend to have a limited set of designs or ways to layout your web portfolio, but will take you through the process of putting your portfolio together step by step. These tools can be great to get your portfolio out there quickly and without having to worry about the technical aspects. And many of these programs will give you a highly professional, albeit not always unique, look.
Weebly is quickly becoming a popular tool for website creation. It’s a completely online tool, so will work with Mac, Windows, or any system with a web browser. When you sign up to create a site on Weebly, you are walked through the creation process step-by-step. I used this with my own high school English students, and they were surprised and excited by how easy and fun website creation became when they used this tool. There is also a developer version of Weebly which allows more sophisticated web designers to build a site and put it into the Weebly Content Management System (CMS). I’ll talk more about what a CMS can do later.
There is also software in this field that is designed to install on your computer. WebPlus (for Windows) and Sandvox (for Mac) are two great examples of fully WSYWIG tools that install on your computer. These tools offer slightly more flexibility that Weebly because they can be exported and installed to your own domain or to a disk to be viewed locally. However, the convenience of a web-based tool—preventing the need to deal with loading your site to a server and having access wherever you go—are quickly replacing locally installed software in this category.
Some of fully WSYWIG portfolio tools, like Behance, will also give you direct connection to social networking. Such tools often fit into even more rigid design structures, but offer you the opportunity to network and integrate them more fully with your online presence. I use my Behance portfolio to link some of my work samples directly to my LinkedIn profile page. When people visit my profile on LinkedIn, they are immediately confronted with engaging portfolio samples.
WSYWIG with a Side of Coding
The second category of tools is becoming increasingly more popular. The goal of these tools is to create the Microsoft Office of web development: allowing you the benefits of WSYWIG while also giving you access to customized code and more advanced plugins and themes. As we quickly approach what may be the golden age of web development, such tools are becoming increasingly powerful, increasingly popular, and increasingly easy to use.
WordPress is perhaps the herald of the golden age of web development. WordPress began its life as a blogging platform and has grown well beyond that. It is now considered by many as a full-blown CMS. Although it doesn’t have quite the same openness of Joomla, even advanced users will be able to do much the same with both thanks to the open source nature of WordPress and the ability to develop your own themes for it.
There are three ways you can create a WordPress site:
- You can download the current installation of WordPress from WordPress.org and install it on whatever web server you use.
- Most web host services will have a simplescript for WordPress. When you sign up for a web hosting service, you can go to your control panel and click to install WordPress on your site—much like installing software on your computer.
- WordPress.com offers both free and paid WordPress hosting services. You can have your site up and running in under a minute.
To learn more about WordPress and how to set up a web portfolio using it, stay tuned for Wednesday’s article.
Like the more structured WSYWIG category, there are also computer installable tools in this category. Rapidweaver and Flux (Mac only) and Adobe Muse (Windows and Mac) are powerful examples of this. Both allow you to combine the power of WSYWIG and Code to create a site that is easy to update and maintain while still having the flexibility to add powerful features and custom design.
The blog you are reading right now has a WordPress backend to manage the content, and is linked through a plugin to the rest of my portfolio site which was built using RapidWeaver. The WordPress framework was installed using a simplescript from my webhost, and the rest of the site is uploaded through an FTP tool built into RapidWeaver. There are some complex design traits of my current site that I’m not quite sure how I would accomplish in WordPress at the moment, so RapidWeaver remains a better tool for me.
The last category is often thought of as only for more advanced users, however, HTML and CSS are not as scary as they may seem. I know many people who would not consider themselves “techies,” but were able to learn how to develop basic websites using HTML and CSS based tools.
Perhaps the most powerful tools in this category are the Adobe Dreamweaver (Mac and PC), Microsoft Expression Web (Windows only), and Kompozer (free, open source; Mac, Windows, and Linux) type programs. These software programs include powerful features that even have some WSYWIG-like functionality, though not nearly to the same degree as products in the other two categories. Their foundation is grounded in HTML and CSS code, but have some advanced quick previewing tools that allow you to quickly see how changes in the code affect the site.
For some, these programs are a great tool. For others, the complications put too many constraints on their work. Those are the developers who prefer to dig into code their own way. There are many advanced text editors that have been designed specifically to help make coding easier with features like smart coloring and powerful find and replace.
BBEdit and its free counterpart, TextWrangler, are well-known HTML editors for the Mac. Their advanced features make seeing the code easier and help when organizing multiple files. Coda, another Mac-based piece of software, combines several tools into one easy application: text editing, advanced coding tools, CSS editing, file management, and live previewing. NotePad++ and Komodo are Windows-based advanced text editors.
Content Management Systems
If you are using HTML and CSS to develop a webpage, a powerful tool you’ll want to consider using is a Content Management System (referred to as a CMS). The purpose of a CMS is to separate the content of your site from the design. What this means is that when you want to change your navbar, you don’t have to change it on every single page. The CMS will separate that aspect of your design and separate it from the content of the site, so that you can change it in one place and each page on your site will draw the navbar information from that one place. The same is true for the colors, designs, styles, and layout of your site.
If you are serious about building a website, you want to be able to update it without a hassle. WSYWIG tools like WordPress and Weebly have their own built-in CMS that separates the content from the design, allowing you to build a site quickly and update it quickly. If you are not planning on using one of those tools, you’re going to want to investigate CMS tools that you can put your site into.
You can easily find themes designed specifically for Joomla to make setting up your site a breeze. There are also plenty of other paid CMS’s.
- Joomla is a free, open source CMS that has become very popular. You can easily find themes for free and purchase to make building your website a breeze.
- Drupal is another open source and very popular CMS with as large a following as WordPress.
- Magento is popular among ecommerce developers
- pHpBB is extremely popular amongst online community developers.
- vBulletin is a very popular bulletin board-based CMS.
- DocuWiki is a popular Wiki CMS.
Whatever tools you choose, be sure that you create a system that is reasonable for you. Often, the biggest barriers to web design involve a fear of the time and skill required to develop a good website. Don’t hold off assuming that your web portfolio has to be built from scratch to be worth anything. That simply is not the reality anymore. Get your website started now, and know that you can always go back and redesign it later. A good website adjusts to technology, design trends, and changing needs.