Share

Building WordPress Sites with Adobe Dreamweaver CC

By Janel Thomas

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.

Whenever I approach a new project, whether it’s a logo design or an ecommerce portal, I begin by sketching out my ideas on paper before completing the final design.

I specialize in building WordPress sites. I started using WordPress because many 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.

This sketch on graph paper was the prototype for my final Janel T Designs logo.

HOW DREAMWEAVER HAS EVOLVED

I was first introduced to Dreamweaver and Adobe Photoshop while taking digital media classes at the Art Institute of California-Hollywood—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 the image-editing tools I use often, such as Adobe Photoshop CC and Adobe Illustrator CC. These changes have made it easier 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. Using the CSS Designer in Dreamweaver CC, I can update CSS properties on the fly. I also often use the Code Inspect feature, which I like because it’s an intuitive tool for tweaking sites. Having this capability built into Dreamweaver really saves me time.

CSS Designer helps me visually edit CSS properties, such as border-radius values.

MY WORKFLOW FOR DESIGNING WORDPRESS SITES

Sketching the Design  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. Some of my clients are fairly tech-savvy and know what they want. If they are unsure, I send them a detailed questionnaire to help them identify site priorities and solidify their design choices.

This prototype sketch conveys the design direction for a client’s site.

Designing in Photoshop CC  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.

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.

The composition is exported from Photoshop and sent to the client for review.

Developing in Dreamweaver CC  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 (for instance, 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 develop sites using WordPress with Foundation and Twitter Bootstrap. These two frameworks speed the development of responsive designs. Foundation 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. Here are samples of how I used the Live Code and Inspect features in Dreamweaver.

Live view helps me preview how the site will look once it’s live in a web browser.

Live Code view helps me easily look at code relevant to a highlighted element or property on a page.

I use Live Code view to preview different elements on the page.

Inspect mode enables me to examine and tweak HTML elements and CSS properties within Dreamweaver CC.

Next, I download and install any needed WordPress plugins to add site features based on the site requirements. There are 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.

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.

The live site displayed in Chrome.

Evaluating Pages  I’ve found Dreamweaver to be the best 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 use 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. 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.

WordPress SEO general settings.

Defining the keyword, SEO title, and meta description for the page.

The Page Analysis tab provides suggestions of how to improve a page’s SEO.

LOOKING AHEAD

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.

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.

For more information about creating WordPress sites with Dreamweaver, check out these resources: