Chapter of the new "Plone 3 Theming" book
Graphic design tools
Any serious skinner needs a graphic design tool with certain capabilities in order to take the design files and assemble them into a finished web site. In particular, layers and the ability to slice pieces of a design and export those pieces are essential. Layers allow a themer to hide pieces not needed in a finished CSS theme, such as text that will eventually become real HTML on a page. Slices, meanwhile, are the pieces of an overall design that are exported during the layer manipulation process. They are the images the end user eventually sees on the rendered page. This is different from cropping, which actually alters the size of the canvas; slices are just pieces of the overall design, cut with precision, exported, and then manipulated with CSS.
The most commonly used graphic design tools used for web design are Adobe® Photoshop®, Adobe® Fireworks® (formerly Macromedia) tool, and open source tools such as GIMP. It is not generally recommended to use tools such as Adobe® Illustrator®, Corel Draw and other vector-based packages. Web designs primarily use raster-based media, meaning that raster images are based on pixels and thus scale with loss of clarity. Conversely, vector-based images can be scaled infinitely without degrading, but are typically not appropriate for web design.
The most popular tool for processing image files is Adobe Photoshop. The files generated for designs are PSD, or Photoshop Document files. Adobe Photoshop meets the basic requirements of being able to manipulate the vector and raster images, layers, and slices, and offers a lot of additional functionality. The ability to control anti-aliasing and the quality and size of an exported image is essential in web design, and Adobe Photoshop (also, Adobe Fireworks) is quite powerful in this respect.
A quick look at the Layers panel illustrates how sections can be grouped together, moved, or be shown or hidden via the "eyeball" icon.
This show/hide functionality is very important. One situation where this becomes valuable is when you have a PSD file that indicates graphical buttons with text over them. For accessibility reasons, you may want to render the text as real HTML-rendered text, and not as an image. You need to be able to export the buttons in both their on and off states in order to get a proper rollover effect, and you need to hide the graphical text in order to do this.
One site that illustrates this concept is http://greenforall.org. Using Adobe Photoshop, the layers where the text appears on the top navigation were hidden, and just the background on/off images were imported. On the finished web site, the top menu used the background images and real rendered text.
The other core functionality that Adobe Photoshop offers is the ability to slice images and export them. The Copper River Watershed Project web site (http://www.copperriver.org) illustrates how slices might be used. The original Adobe Photoshop document is here:
If you look closely, you can see a few key slices: the "Go" button next to the search field has been sliced, as has the Tour Our Watershed map and the gradation on the top navigation, which will be tiled horizontally. Below the orange navigation is a long slice that spans from the left-hand shadow over to the right-hand shadow. This image can be used to tile the length of the page. Additionally, the entire Information For... box has been sliced; in this case, for the final implementation, the text overlaying this slice was hidden and replaced with rendered text. If you look at the finished web site, you can see how these slices were applied.
Photoshop provides a great deal of power, but in general, you may only use about 20% of the power it offers. You can visit http://adobe.com to see the tutorials on how to use the Adobe Photoshop effectively. Additionally, you may want to investigate Photoshop Elements; it doesn't allow you to slice images for the Web, but for the current price of $139.99, it's still a great tool for many web design activities: http://www.adobe.com/products/photoshopelwin.
At the time Macromedia was purchased by Adobe in 2005, the interface a little clumsy at times, but it did have a basic implementation of layers and slices. Over the past few years, based on the demos available, it appears that the interface has seen some great improvements, though it does not have the same power or market share as Adobe Photoshop has. However, at nearly $400 less than Adobe Photoshop, it's a great option.
According to the Adobe web site, "Adobe Fireworks CS4 software is used to rapidly prototype web sites and application interfaces and to create and optimize images for the Web more quickly and accurately. It is ideal for web designers, web developers, and visual designers." It differs from Photoshop in that "Adobe Photoshop software is the industry standard for digital imaging, with a broad array of features and functionality used by photographers, graphic designers, web designers, and many other creative professionals. Fireworks is a much more focused tool, with the features for prototyping vectors and bitmaps for the web and application interfaces." The real selling point here, though, is integration with Adobe Photoshop, as a design may be shared between multiple people, each using different graphical programs.
The ability to manipulate the vector and raster images is also important. Additionally, like Adobe Photoshop, Adobe Fireworks provides the ability to work with layers and slices, and preserves many of the settings in an Adobe Photoshop PSD file. It's not as good at compositing and photo manipulation as Photoshop, but is a lot stronger with text, shapes, and final optimization. Selective JPEG optimization is also very handy, and allows you to heavily compress the portions of a JPEG while keeping text legible. Additionally, it's great for generating image maps (not often used in Plone), rollovers, and other common tricks. Finally, it allows you to view your work with either Windows or Mac gamma. Gamma correction basically refers to the ability to correct for differences in how computers (and especially computer monitors) interpret color values. There are two factors here: the ability to predict what an image, say a photograph, will look like on another monitor and the ability to match the colors from different sources on a single pageAdobe Fireworks excels at both.
While Adobe Fireworks is not as feature-rich as Adobe Photoshop, it is still an extremely competent tool for slicing and exporting design elements at implementation time, not to mention more affordable.
GIMP, also known as the GNU Image Manipulation Program, can be downloaded for free from http://www.gimp.org. It is a freely distributed program for such tasks as photo retouching, image composition and image authoring, and is covered by the GNU GPL license. According to the GIMP's web site, it can be used as a simple paint program, an expert quality photo retouching program, an online batch processing system, a mass production image renderer, an image format converter, and more.
From the perspective of how it compares to the key aspects of Adobe Photoshop® and Adobe Fireworks®, it has full support of layers and channels, plug-ins that allow for the easy addition of new file formats (that is, it can read Adobe Photoshop or Adobe Fireworks files), and best of all, it is open source.
You can visit http://www.gimp.org/docs to download the user manual for the current release. GIMP also lists several user groups and resources at http://www.gimp.org/links that may be helpful. Even so, the latest releases are still quite recent, so development is still happening
For a free solution to the image processing needs, GIMP is an excellent choice, but weak in terms of the user interface and layer compatibility with Adobe Photoshop.
Browser add-ons and important notes
Now that you have sense of the tools that are available for manipulating design files and exporting the necessary images for building your web site, let's look at how browsers affect the web site building process, either through add-on tools or through sheer bugginess.
It's also worth mentioning that users should reference the A-List of popular browsers to see which browsers are still considered to be supported by web developers: http://developer.yahoo.com/yui/articles/gbs/index.html. This can help to ease the quality assurance load during web site testing.
Many of these A-List browsers come with browser-specific tools that allow you to inspect your web site to descry the CSS (Cascading Style Sheets) ID and class selectors, manipulate your CSS on-the-fly, optimize your site, explore color options, and more. We'll look at the available options for three major browsers: Internet Explorer, Firefox, and Safari, but you should always be conscious of general browser penetration statistics so that you know which browsers are still in popular use: http://en.wikipedia.org/wiki/Usage_share_of_web_browsers.
Now, let's get back to our key browsers.
From a themer's perspective, Internet Explorer is the most finicky browser against which to implement, as older versions of Internet Explorer followed the W3C's (World Wide Web Consortium's) standards differently than many other popular browsers.
According to http://positioniseverything.net, a leading collector of browser fixes, "All browsers have CSS bugs, and IE leads the pack in this area, but that is not the end of the story. Microsoft has seen fit to engineer their browser to deliberately violate the standards in several critical ways. It might just be a misguided attempt to 'make it simple' for newbie coders, or it might be a cynical ploy to crush the competition, but in any case it creates huge headaches for those of us who desire to employ CSS positioning on our pages." While this may be true, many fixes for Internet Explorer have been identified, and thankfully, IE6, one of the more problematic browsers in recent years, is finally becoming obsolete. It was replaced by IE7, which was a vast improvement, but still did not implement the W3C conventions for CSS faithfully. As of this writing, Internet Explorer 8 was released and showing signs of having finally made strides toward real compliance to W3C standards.
What this equates to is that web developers tend do their initial browser testing in browsers that are more compliant; that means doing most upfront testing in Firebug and Safari, and then rounding out the testing at the end against IE6, IE7, and IE8. Where possible, it's also important to test against other major browsers and handheld media.
For testing against Internet Explorer, IE provides a tool called the Web Developer Toolbar for debugging. It is available for both IE6 and IE7 as an add-on and can be downloaded here: http://www.microsoft.com/downloads/details.aspx?FamilyId=E59C3964-672D-4511-BB3E-2D5E1DB91038&displaylang=en. Web Developer Toolbar will no longer be the tool of choice for IE8, however, instead use the developer tools included with IE8.
To use the developer tools in IE8, press Shift+F12 or click the "Developer Tools" icon in the command bar to begin using the tool.
For IE6 and IE7, Web Developer Toolbar provides several features for exploring and understanding web pages. These features enable you to:
- Explore and modify the document object model (DOM) of a web page.
- Locate and select the specific elements on a web page.
- Selectively disable the Internet Explorer settings.
- View HTML object class names, IDs, and details such as link paths, tab index values, and access keys.
- Outline tables, table cells, images, or selected tags.
- Validate HTML, CSS, WAI, and RSS web feed links.
- Display image dimensions, file sizes, path information, and alternate (ALT) text.
- Immediately resize the browser window to a new resolution.
- Selectively clear the browser cache and saved cookies. Choose from all objects or those associated with a given domain.
- Display a fully-featured design ruler to help accurately align and measure objects on your pages.
- Find the style rules used to set specific style values on an element. Right clicking on a style rule will allow you to trace the rules to a specific CSS file, if one is found.
- View the formatted and syntax colored source of HTML and CSS.
The Developer Toolbar can be popped up within the Internet Explorer browser window or opened as a separate window.
If you are using a PC to test your sites, VMware, parallels, or a Windows emulator, you should download the Toolbar from http://go.microsoft.com/fwlink/?LinkId=125120, install it, and restart IE. You can then click the Developer Toolbar icon in the command bar to display or hide the Developer Toolbar. Alternately, you can open the View menu and then use the Explorer Bar menu. In Internet Explorer 7, open the Tools menu and then use Toolbars/Explorer Bars to display or hide the Developer Toolbar.
There are a few caveats here:
- The Developer Toolbar icon may not be visible by default. If you do not see it after restarting Internet Explorer, click the right-facing arrows at the end of the IE7 command bar to view all the available Toolbar buttons.
- Some menu items are unavailable (grayed out) when running Internet Explorer in Protected Mode on Windows Vista. To use those options, temporarily turn off Protected Mode or right-click the Internet Explorer icon in the Programs menu and choose Run as administrator.
- In IE6 or in IE7 with tabbed browsing off, using the validation links will navigate the current window to the validation page. To launch the validation links in a new window, open the Tools menu, click Internet Options, and uncheck Reuse windows for launching shortcuts in the Advanced tab, or use IE7 with tabbed browsing enabled.
Generally, you can use this tool by expanding the left side of the panel displayed to navigate through your site's structure. It displays CSS IDs and classes in a hierarchical fashion. On the right-hand side, it displays the properties assigned to each of those IDs or classes. You can modify those by using the + icon in the center Attributes section to add a new property and using that to add to or alter the existing CSS.
As stated before, the left-hand pane allows you to expand and walk through the structure of your web site. When you refresh, unfortunately, the entire tree closes. To continue troubleshooting a specific element on the page, you must drill down to it again or use the "selector" tool. It's somewhat clumsy, but it works and is invaluable when debugging web pages in Internet Explorer.
As of this writing, Firefox 2 and Firefox 3 browsers are both in use, and from a general perspective, both should be used during debugging, as there are very slight differences between them (particularly around the sizing of elements on the page). However, the versions seem to be pretty similar overall, and they both follow the W3C's web standards quite well.
In addition, Firefox also offers several excellent tools that are helpful to themers. The first plug-in is the Firefox Web Developer Extension, which is similar to the IE Toolbar, but a little more robust. We'll also cover Firebug, the coolest kid on the block for CSS debugging.
Firefox Web Developer extension
This open source toolbar can be downloaded from Mozilla's site https://addons.mozilla.org/en-US/firefox/addons/versions/60, or the developer's personal web site, chrispederick.com. For installation information and support, visit Chris Pederick's web site. Note that all the work on chrispederick.com is distributed for free under the terms of the GNU General Public License.
This extension adds a menu and a toolbar to the browser with various web developer tools. It is designed for Firefox, Flock, and Seamonkey, and will run on any platform that these browsers support, including Windows, Mac OS X, and Linux. The downside of this toolbar is that it doesn't come with instructions, so to use it requires some exploration.
After installation, the toolbar displays at the top, where you see the options Disable, Cookies, CSS, and so on. Choosing Edit CSS from the CSS drop-down menu opens up a panel that allows you to examine each individual stylesheet.
Key features of this toolbar include:
- Disable Cache: This can be done using the Disable drop-down list. It may slow down your web browser's performance, but you will get more realistic results. This is probably the most valuable feature of this add-on tool, as it allows you to make sure that your cache is always clear, and it can be used selectively from site to site.
- Images | Display Image Dimensions: This setting can help to diagnose the minor pixel errors where an image might be pushing against a padding setting elsewhere in your site.
- Information | Display ID and Class Details: This setting is extremely important, as it can help to quickly illustrate the name of the object you are trying to style. It can be hard to identify the object you want to work with, though, as this screenshot indicates:
- Display Element Information: This setting is another important setting. Enabling it allows you to click on any element on your page and gather details about that element. This is significantly more powerful than the basic Display ID and Class Details option. All of these details can help to determine if a current attribute on a tag is causing issues, or if an attribute assigned to an ancestor might be responsible.
- Validate CSS/Validate HTML: When you are working with local Plone instance standard, Validate HTML and Validate CSS will not work, since the validators are not able to get to your localhost. Deploying to a test server allows you to validate against your code prior to going live with your web site, or you can (and should) use the Validate Local CSS and Validate Local HTML options.
The Web Developer Extension is a powerful tool, worth using for many tasks (such as disabling stylesheets to check accessibility), and it's not uncommon to use it in tandem with the next excellent tool, Firebug.
Firebug is another open source extension for Firefox that can be downloaded from Mozilla's web site https://addons.mozilla.org/en-US/firefox/addon/1843, or http://getfirebug.com/. There is a dedicated team of developers that maintains the extension, and the documentation is plentiful, so this is a tool that themers can hopefully count on in the future.
Firebug can be used for both Firefox 2 and Firefox 3, but different versions are required for each, so pay attention to the installation instructions.
It's worth mentioning that there is a bug in Firebug for Firefox 3 that causes Firebug to crash if you attempt to edit user stylesheets. For this reason alone, many individuals choose to do their initial debugging on Firefox 2. It's hoped that this bug gets fixed soon.
The interface for Firebug looks like this:
The bug icon in the bottom corner of your browser allows you to expand or minimize the Firebug pane. You can also enable it via the Tools | Firebug | Open Firebug option in your menu.
Th e HTML view of this tool is extremely helpful. The left-hand pane allows you to expand and walk through the structure of your web site, or you can use the Inspect option. The right-hand pane displays the available CSS, listed in order of precedence.
One great feature of this tool is that you can select an ID or class, and Firebug will highlight the item you wish to inspect, which can help to diagnose padding or sizing issues. It also offers a graphical representation of its box model rendering via the Layout tab.
In this case, we are inspecting the image on the home page, known here by the ID features-slot. When we click on this item, the right pane immediately shows the CSS that is used by that piece of content. In this case, the wec.css file has direct references to the features-slot, but after that, the nearest closest ancestor is .documentContent.
While an element is selected, you can click in the right side of the pane and change the CSS that is active (for example, change the position to absolute), or you can right-click to add a new property to that page element and type in the details. Right-clicking also gives you the option to add a new style in the right pane by choosing New property. The changes you insert will be immediately rendered on your page, but for these changes to make it into your skin product, you must either make the changes through the Web or in your filesystem product; Firebug will not add them to your site's CSS files for you.
Another great feature is that if you refresh your browser while you have selected an element on the page to clear out your on-the-fly CSS changes, when the page refreshes, Firebug will reopen to that exact ID or class.
Finally, Firebug provides excellent error reporting, DOM explorer, and lots more.
Generally speaking, Firebug plus Web Developer Toolbar for Firefox are two tools that are essential for Plone web site development, and it's recommended that these two tools be in the toolkit of every Plone themer.
Another essential add-on for Firefox is the wonderful YSlow. YSlow analyzes web pages and tells you why they're slow based on the rules for high performance web sites, and gives you the information you need to optimize your sites further. YSlow analyzes any web page and generates a grade for each rule and an overall grade. If a page can be improved, YSlow lists the specific changes to be made.
To activate it, click on the YSlow icon at the bottom of your browser.
YSlow will then grade your web site based on its performance against several components. Clicking on any rule will take you to the page that contains suggestions on how to improve in that area. A lower grade on something like "Make fewer HTTP requests" could possibly be solved by using sprites instead of multiple images on a page, for example.
Clicking on the expand arrow next to any rule will give you more specific information about your web site, such as here, where we clicked on "Add an Expires Header":
It's interesting to note that the rules are listed in order of priority, and so rules at the top of the list are weighted more heavily than rules at the bottom of the list when calculating the overall Performance Grade.
Clicking on the Stats button gives you an overall look at the statistics of the page; for example:
The tool can crawl the entire DOM stack and give you an idea of what a user visiting the site for the very first time would have to download. In this case, we're loading a lot of images, and those images are primarily responsible for slowing down this site on the first uncached visit to it.
Clicking on the Components tab shows us all of the items that are loaded when the page is requested, listed by type.
Another handy add-on for Firefox is an advanced color picker named ColorZilla, found at https://addons.mozilla.org/en-US/firefox/addon/271. After installation, ColorZilla displays in the lower-left Firefox status bar. Clicking on the color picker icon will allow you to mouse over any pixel in your Firefox window and display the RGB and Hexadecimal value for that pixel.
You can then take those values and use them in your stylesheets, as necessary. If it is awkward to select the specific pixel you want, ColorZilla also provides the ability to zoom into a selection in your window. Right-click on the color picker to access the Zoom menu and the contents of your browser will enlarge or shrink based on your selection.
You can automate copying the selected color in either RGB or Hexadecimal format by turning on the Auto Copy option under the Options menu.
Additionally, you can capture the entire color palette of that site and save it for future reference. This can be especially helpful if you are creating a new web site based on a specific existing color palette. To capture the palette, right-click and select the Webpage Dom Color Analyzer option. The inspector will display the full palette, and choosing the Save as colorzilla palette option will save it for future reference.
To access t he palette again, right-click to pull up the menu and choosePalette Browser.
Selecting the palette will allow you to click on the individual colors in the palette and get the color values for each of the colors.
For more information on how to use this tool, reference the online help available via the Help menu option.
Safari doesn't have nearly the kinds of CSS debugging tools that Firefox and IE have, but running Firefox in tandem with Safari allows skinners to simultaneously do browser testing while still making use of Firefox's debugging tools.
Safari's greatest strength is that it has a solid, extremely fast rendering engine that can point to problems with your CSS. For example, you may be able to look at a site in Firefox and in IE, and both may display beautifully, but in Safari, the result might look like half-rendered garbage. The offending code? A missing semi-colon. Other browsers might swallow such minor errors, but Safari is diligent enough to render your code exactly as it is written.
There is, however, a tool that may allow you to do debugging with Safari: Safari Web Inspector/WebKit.
Safari Web Inspector
Without going into too much detail here, Safari WebKit is a nightly build of Safari that has a web inspector enabled by default. Safari 4 has the web inspector built in, but for Safari 3, it must be enabled via a command in terminal and a restart of Safari:
defaults write com.apple.Safari WebKitDeveloperExtras -bool true
If you choose to run the nightly build, you can get that here: http://nightly.webkit.org/, but for most themers, it's not necessary. Enabling the WebKitDeveloperExtras, as explained above, should be sufficient. For more information, you can read here: http://www.usingmac.com/2007/12/2/web-inspector-for-safari.
Activate the inspector by right-clicking on any object on a page. You will see an inspect element option that can open a web inspector window.
The left pane displays the code for your web site, while the pane on the right side displays the CSS applied to that particular selection, plus the styles applied to the ancestors of that item. What's also helpful is the bottom status bar that allows you to click from one element and upwards through each of the ancestors to inspect their styles. The inspector gives you all of the relevant CSS information, including your current place in the markup hierarchy, the final computed style, and a listing of the other cascading styles.
While it is not possible to modify the computed styles in the right-hand pane, it is possible to modify the styles in the hierarchy. Making a change and hitting Enter will automatically make the change in your browser. This is similar to when you make a change using Firebug works instantly. To reload and undo the changes, reload the browser (not the inspector window).
Overall, it has a clean, stripped-down interface that is a pleasure to use. The only apparent downside is that it pops the inspector up in a separate window, which means it requires slightly more real estate.
Having a good graphical editor and a solid set of CSS browser add-ons is a step in the right direction, but as with any project, the proof is in the finished product.
At the end of every project, any good CSS themer needs to check his/her CSS and his/her HTML for cleanliness and adherence to the W3C standard. The best resource here is the official W3C validation web site, known as Jigsaw, which is used by the Validate Local CSS and Validate Local HTML options available with Firefox's Web Developer Toolbar.
Plone gives us approximately 20 stylesheets out of the box that you can extend and override by using a stylesheet named mytheme.css or similar
This means that when using the Jigsaw service, it's important to fix the inconsistencies located in mytheme.css, but there isn't much need to worry about issues in the original Plone stylesheets, which are fairly clean already and the errors Jigsaw points out are not that significant.
The only real downside of Jigsaw's validator (and pretty much every other validator) is that it only works on live web sites, and not on web sites being run on localhost. Hence, be sure to use the "Validate Local" options prior to deployment.
In this article, we have learned:
- What graphic design tools are appropriate for theming a web site and why
- How to validate your CSS against W3C conventions
In the next part we will cover <a href="http://www.packtpub.com/article/skinners-toolkit-for-plone-3-theming-part2" target="_blank">text editors</a>.
If you have read this article you may be interested to view :
About the Author
Veda Williams has worked in software development for more than eighteen years, and as a Plone themer for three of those years. She currently works for ONE/Northwest in Seattle, Washington. Veda is an editor for the documentation section for plone.org, and was an author and the managing editor forPractical Plone 3.