Ever since I started using Adobe Dreamweaver, when it was Dreamweaver CS3, I have been excited to see what each new version of the tool has to offer. Throughout the years, Dreamweaver has evolved to adapt to my needs as a designer and developer. Today’s Dreamweaver CC incorporates even more features to streamline my workflow when building WordPress sites for my customers.
I'm a freelance web designer and developer, and owner of Janel T Designs — a business I founded in 2006. I started out designing music promotion sites because my first gig was working for Universal Music Group. I build online experiences for my clients and work as a freelance consultant on larger web projects.
Whenever I approach a new project, whether it is a logo design or an ecommerce web portal, I begin by sketching out my ideas on paper (see Figure 1) before completing the final design (see Figure 2).
I specialize in building WordPress sites. I started using WordPress because most of my clients require the ability to update their own content. I teach clients how to use a browser to log into the administration interface and maintain their sites. This system has worked out really well so far, because my clients say it's easy to use and they haven't had any issues updating pages.
I was first introduced to Dreamweaver and Adobe Photoshop while taking digital media classes at the Art Institute of California-Hollywood where I graduated with a B.S. in Web Design and Interactive Media. At the time, I learned to use Dreamweaver CS3 to build my first websites. I picked it up right away and it has been my primary production tool ever since.
Over the years, I've noticed that Dreamweaver has changed in several ways. To start, there's much more integration with image editing tools I use often: Photoshop, Adobe Illustrator, and Adobe Fireworks. These changes have made it faster to switch between products as I edit site assets and optimize files for the web.
After Dreamweaver CS6, the interface became cleaner and easier to navigate. I really like being able to breeze through tasks with fewer dialog boxes.
I recently started exploring the CSS Designer in Dreamweaver CC and how I could use it to update CSS properties on the fly (see Figure 3).
I also use the code Inspect feature. I like it because it is an intuitive tool for tweaking sites. In the past, I have used browser-based code inspection features, but having this capability built into Dreamweaver really saves me time.
Some of my clients are fairly tech-savvy and know what they want. If they are unsure, I send them a detailed questionnaire (PDF, 82 KB) to help them identify site priorities and solidify their design choices.
After meeting with clients and defining their site requirements, my first step involves sketching out the basic design using paper and a pencil. I like to draw basic shapes to develop the first pass of the layout and organize the site content (see Figure 4).
I use Photoshop to design the home page of the site. I always begin by designing the desktop version of the site. I find it is easier to start with the largest screen, and then pare down the content for the tablet before creating the design that will be displayed on smartphones.
When I'm happy with the design, I export JPEG files from Photoshop and send a copy to my client for approval (see Figure 5).
Once the design is final, I slice up and export the optimized web assets using Photoshop. Photoshop is my primary image-editing tool, but I also use Illustrator to create logos and vector graphics.
I have MAMP installed on my machine as a local web server environment, which allows me to run a WordPress site locally to tweak some of the server-based functionality (e.g., modifying PHP files and creating databases) and configure settings associated with a WordPress site. Here is a great video in which Kristin Long demonstrates configuring MAMP for WordPress development. I use Twitter Bootstrap and I develop sites using WordPress with Foundation. Foundation works with WordPress to speed the development of responsive designs. It includes media queries that I hand-code to fit each project.
In Dreamweaver, I usually work in Split view to see both the code and the design. I make most of the changes in Code view. I really like using the code hints because they help me author more efficiently. When I need to see how pages look, I enable both Live view and Live Code view to preview the site's look and feel. Dreamweaver’s Inspect feature gives me a closer look at how well my HTML elements are associated with the CSS. Figures 6–9 show samples of how I used the Live Code and Inspect features in Dreamweaver.
Next, I download and install any needed WordPress plugins to add site features based on the site requirements. There are literally thousands of WordPress plugins available, so I do some research to find the best solutions, and then I install and configure the plugins to flesh out the site's functionality.
When things are looking good, I use the Files panel in Dreamweaver to upload the live site to the host server. I visit the site to see how it looks online (see Figure 10).
After I push the first iteration live, I send the link to the client for review. And I always save backups of the local site in several places, including Adobe Creative Cloud, Dropbox, and on an external drive.
I've found Dreamweaver to be the best web tool for previewing dynamic site content as I'm building it. Live view in Dreamweaver CC renders the content accurately, and testing it there is much faster than using Coda 2 and Sublime Text. They don't offer the same easy way to test my sites without leaving the coding environment. I test sites on a Nexus 4 and an iPad and I use emulators for other devices I do not own.
I use Google Analytics to add SEO tracking to pages. I also recently started using an SEO WordPress plugin from Yoast named WordPress SEO to track performance, page views, and other detailed information about how visitors are interacting with the site (Figures 11–16 show a sample configuration of WordPress SEO). This helps me make more informed decisions about how to update a site after it has launched. If a client wants me to handle their SEO on a monthly basis, I will set up a plan for the additional service once the site is complete. Otherwise, I offload the SEO for them to handle it further.
I find inspiration for my projects by checking out web designs online. Sites I visit frequently include Smashing Magazine, Dribbble, Awwwards, Pinterest, and Behance. I like to stay up-to-date with current trends, so I spend time surfing the web to see what's new. Sometimes a client will provide stock photography which may be their own library of photos or artwork which can really help my creation process and save time.
In the future, I plan on experimenting with building interactive mobile applications for Android and iOS. I've heard a great deal about the Adobe PhoneGap Build service (integrated with Dreamweaver) and I'm going to explore making native applications. I can still use Twitter Bootstap and Foundation and build my mobile projects with Dreamweaver, so that process seems pretty easy to get started.
As Dreamweaver continues to adapt to the latest technologies, I'm looking forward to visually editing CSS (using CSS Designer and CSS Transitions) to build more interactive sites. I'd love to see Dreamweaver partner with other open source projects. It would streamline my WordPress workflow if Dreamweaver added new support for MAMP. And I can envision other new features that would make it easier to collaborate on group projects with GitHub integration.
Dreamweaver CC enables me to design and modify WordPress sites more quickly and brings the development of CMS sites to a broader range of developers. For more information about creating WordPress sites with Dreamweaver, check out these resources:
I also recommend this series by Brian Wood on editing a WordPress theme with Dreamweaver. (Although it's based on the earlier CS5 version, it applies to the latest version, Dreamweaver CC.)
Janel Thomas is the owner and lead developer for Janel T Designs based in Los Angeles, California. She specializes in designing WordPress websites and has more than seven years' experience using Adobe Dreamweaver to develop online experiences for clients such as Sony, Guthy-Renker, and Universal Music Group.