Skip to content

Tameri Guide for Writers Design Update: Tools and Process

We have started a major redesign and content refresh of the Tameri Guide for Writers, the parent domain for this blog and several others we maintain. The new design focuses on the user experience. I want to explain some of the changes that are finally taking shape after years of benign neglect.

The Evolution of Writing for the Web

“Tameri.com,” the Tameri Guide for Writers, has been online since the early 1990s. The World Wide Web was a small space, with most users connecting through dial-up services. The original HTML pages were hand-coded in a text editor. Over the years, we used HotDog, FrontPage, HoTMetaL, Symantec Visual Page, Adobe GoLive, Composer, and Dreamweaver to maintain the static HTML pages. We have stayed with Dreamweaver since 2002, when we migrated the Tameri Guide to Dreamweaver MX.

Most websites today use Content Management System platforms, such as WordPress or Drupal. Coding HTML5/CSS3 and any scripting necessary for websites have become a specialized career track, separate from the generic “webmaster” or “Website writer” of the early 2000s. Content writers use online WYSIWYG editors embedded within the CMS platforms. Some web writers never see markup, stylesheet, or script code.

Dreamweaver 2021 shows its age, sadly. The editor doesn’t recognize CSS variables, for example. Stylesheets with variables generate errors and warning messages in Dreamweaver. The popular Bootstrap JavaScript UI library is a full version behind in Dreamweaver, though I have migrated away from JavaScript whenever possible. The spellcheck isn’t “live” in Dreamweaver, either, which would be helpful when editing content.

If you try to “prettify” or “tidy” the HTML code, Dreamweaver often mangles the code. That’s one feature I’d really like to have updated because consistent indentation helps when debugging code.

It would be great if Adobe would show Dreamweaver some attention… or sell the product to a team that would update the application. I have a long wish list of features (and fixes) for the product. Let me color-code files and folders, so I know which items have been updated. Fix the spelling and grammar tools so they function in realtime. Update the core HTML and CSS editors to recognize current features.

Too bad I don’t foresee Adobe doing much for Dreamweaver users. We’re only slightly less neglected than the FrameMaker community.

Even with Dreamweaver as our primary website editor and management tool, I find other tools essential to my workflow. I use Bare Bones’ BBEdit and Microsoft’s Visual Studio Code for specific tasks.

Because Dreamweaver’s shared workflow tools are minimal and unreliable, I use Microsoft Excel to track website updates. That’s absurd since Dreamweaver’s shared notes and status fields were cutting-edge in 2002. Even if I mark the status of pages, that information doesn’t appear in the file pane; the column heading “Status” is followed by row after row of blank cells. In Excel, I enter the page titles, file names, and other information. I also color-code the status of pages on the Tameri Guide website.

Website Design Updates

What was a good design in 2007 morphed into a monstrosity by 2021. This was mostly the result of Google and Amazon updating their JavaScript widgets to present visitors with pop-up ads and sheets, those annoying animated ads that appear at the tops and bottoms of pages. I wish these companies, supposed experts in design and usability, had never resorted to pop-up ads on affiliate websites.

We know visitors hate intrusive advertisements, so we’ve opted out of most Google and Amazon advertising programs. We will continue participating in the Amazon Associates program,  linking directly to books, movies, and other products when appropriate, since those links are an unobtrusive way to offset a small portion of our costs. We’ve never managed to break even via advertisements on the website or its hosted blogs, so there’s no reason to annoy visitors with pop-ups and sheets.

Stripping away the JavaScript widgets from Google and Amazon led me to consider a complete redesign. Removing the worst “features” from the Tameri Guide wasn’t enough.

I wanted a site that looked current, worked on all devices and met visitor expectations.

The new template uses a simple, modern layout. The color scheme remains high-contrast and we’ve increased the size and weight of typographic elements. Larger text, especially on phones, improves readability significantly.

For the typography, we chose Source Sans Pro as the primary family and Source Serif Pro for accent elements. Type designer Paul D. Hunt crafted Source Sans and designer Frank Grießhammer crafted Source Serif. We might also use Source Code Pro in the future, as these three families complement each other. Moving most to a sans-serif family of typefaces was an overdue admission that screens are not printed pages. Online, sans typefaces often render faster and appear sharper.

Pages load in a third of the time they did with the older design, and often even faster. The new template removes all reliance on JavaScript. HTML5 and CSS have all the capabilities necessary for a modern website. Once the stylesheet was completed, we spent time revising the CSS to eliminate extra baggage.

We’ve come a long way from the Netscape Mosaic days, with tables, image maps, and frames for navigation.

The Tameri Guide now works better on mobile devices and large screens. The old code is gone, and good riddance to it.

New Content and Revisions

Originally, the site was an unstructured dump of lecture notes prepared for writing courses. We never expected many users to find the pages, but they did. The site was mentioned by some major publications and was an early example of edited reference materials online. I still use the pages in the courses I teach. I also want to integrate updates I’ve made to the Word and PowerPoint versions of these notes back into the Tameri Guide site.

Before colleges and universities adopted Learning Management Systems, such as Blackboard and Moodle, the website was a great way to deliver handouts to students. When I began using LMS platforms, I updated the content in Microsoft Office, neglecting the Tameri Guide. The online content has gone stale in some sections of the Tameri Guide. Some pages will be rewritten entirely, while others will be revised. The updates require time; it might be two years or so before we’re satisfied with the core content.

Blogging Update Announcements 

On the Tameri Guide blog, we will announce revisions, major updates, and new content added to the Tameri Guide for Writers. We don’t expect the Tameri website or this blog to instantly return to past glory, with thousands of daily visitors, because there are now many, many writing and editing websites. We might have been one of the first, but we fell behind the times.

If you do follow along, spread the word. The Tameri Guide for Writers is back and its going to get better and better over the coming months.

Published inDesignSoftwareTeachingTechnologyWriting