New Website Launch – Responsive Design

We just launched our new company website yesterday and I couldn’t be prouder of it!  It was a collaborative process between our graphic artists, developers, myself (as copywriter), and a project manager.  It was a really fun project.  Our team worked extremely well together on it and we all learned a lot in the process.  

My favorite things about the site are the design, the responsive design, and of course, my own copy.  🙂  The copy was really easy and fun to write because I had total freedom and could be a little playful and creative with it since it’s for our own website, we are the client!  

The design is really sleek, modern, and beautiful.  I love the colors, layout, and typography especially.  It has such a fresh and techy-yet-creative vibe that is visually enticing.  Our designer Natalie Kyle is so talented it’s not even funny.  

Another really cool thing about our site (that might not be obvious to visitors) is the responsive design.  Responsive web design is an approach to web design in which a site is crafted to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones). (Wikipedia)  

What this means for you is that if you open our website on your cell phone, tablet, or computer (with any size monitor), it will look really great in all 3.  It will display fully without the need to resize your window, resolution, scroll, or zoom in/out.  Try it!  Pull up mb2x.com on your cell phone and see what it does.  You won’t have to zoom in and scroll around the page to view all of the content like you would on other sites.  We know, we rock.

Our designer/developer Theresa Steele is a wiz at responsive design and does it better than I’ve ever seen it done before.  She loves using all of the new features that can be done with HTML5 and CSS3 and it really shows in her work.

All in all, this has been a really great week at MB2x.  I’m learning a lot and feeling really fulfilled when I see a project come to life.

Advertisements

A Technical Writer’s Bookshelf

Books. Yes, real books.  Black and white ink printed on paper.  I am a purist and one of the last remaining proponents of reading actual books.  No matter how cool, convenient, or affordable the eReaders get, I refuse to ever get one.  I like the experience of physically holding a book, turning the page, and writing notes in the margins.

I take books with me on airplanes and when everyone else has to turn off their electronic devices, I can still keep reading.  The battery on my book will never die, the hard drive will never crash, and water spilled on it will not ruin it. In fact, the older and more wear and tear that a book has makes it more valuable to me because it shows the character of the book.

Call me a curmudgeon, call me old fashioned, I don’t care.  One of my favorite things in life is the smell of an old book.  I love walking into a used bookstore, picking up a first edition, opening it to the middle, and planting my face in between its pages.  The smell of an old book takes me away to a different time when there was a slower pace of life.  You just can’t get that from a kindle.

So naturally at my desk at work, I have a bookshelf that is chock-full of paperback and hardcover books. Below is a list of the books on my shelf at work, which I believe to be a Technical Writer’s bread and butter.  I reference many of these books on a daily basis.

Style Reference Books

  1. Microsoft Manual of Style – Fact. Every technical communicator should have a copy of this book. It is 100% essential to producing quality (and correct) end-user documentation.
  2. Chicago Manual of Style – Goes hand-in-hand with the Microsoft one.
  3. AP StyleBook – If you are doing any sort of journalism or writing articles, you need a copy of this to reference as well.  These two styles are completely different and it is extremely valuable to know the difference.
  4. The Elements of Style By William Strunk, Elwyn Brooks White – The quintessential style reference book. Another must-have for any style of writing.
  5. HTML Manual of Style – Good for anyone who works with HTML.
  6. Merriam-Websters Dictionary and Thesaurus – Even though the internet can rapidly define almost any word, I still use this because it is more accurate.

Web Design/Usability/User Interface Books

  1. Don’t Make Me Think: A Common Sense Approach to Web Usability By Steve Krug  – If you are working in web design in any capacity, this book is a must-have.
  2. How to Design and Write Web Pages Today By Karl Stolley – A really good approach to writing web sites by today’s standards.
  3. User Interface Design for Programmers by Joel Spolsky – a little more technical than the others, but it provides a ton of great information.
  4. The Design of Everyday Things By Donald Norman – A great book that will forever change the way you think about design.
  5. Head First HTML, CSS, & XHTML – This is a phenomenal book that teaches even the most non-tech savvy person how to make websites from scratch.  I love the Head First books because they present the information in such a user-friendly and easy to understand way. I highly, highly recommend.
  6. Head First Javascript By Morrison
  7. Head First jQuery By Benedetti & Cranley
  8. Adobe Classroom in a Book: InDesign – I highly recommend these books if you are going to teach yourself how to use the Adobe Creative Suite.  Their instructions are very good and they come with CDs.
  9. Adobe Classroom in a Book: Illustrator
  10. Adobe Classroom in a Book: Dreamweaver
  11. Writing Effective Use Cases by Cockburn – If you’ve never written a use case before, you will benefit from this book.
  12. Software Engineering: A Practitioner’s Approach by Pressman – This is a good book if you are new to Software Development (as I am).

Marketing & PR Books

  1. Crossing the Chasm by Geoffrey Moore – This book explains the Technology Adoption Curve that I talked about in an earlier post.  It is really interesting and helps you understand how the general public encounters new technology.
  2. Inside the Tornado by Geoffrey Moore – This book explains more about the chasm as well as going into detail about Value Propositions.
  3. The Idea Writers: Copywriting in a New Media and Marketing Era By Theressa Iezzi

Fiction

I also have the Hunger Games series on my shelf.  Because, it is one of the best fictional series I have ever read.  Fabulous.  I highly recommend it.  Fiction is my favorite genre of books to read for pleasure.  I usually buy paperback or hardcovers, but I also occasionally will listen to an audio book from Audible on my iPod at the gym or on cd in my car from an audio book I checked out from the library (yes, people still check out books from the library).  I am starting The Girl with the Dragon Tattoo series this week.  What’s on your bookshelf?

Meet us in Memphis @WritersUA Contest

I just entered a contest to be a guest blogger for the Conference for Software User Assistance hosted by Writers UA in Memphis, TN in March!  I’ve never been to a conference like this before and would absolutely love to go.

Just reading the session topics got this #techcomm nerd excited about the possibility of being chosen to go.  Their main topics are: Content Strategy, Tools and Technologies (HTML5, CSS3, HATs, Adobe, DITA, and Mobile help), and Emerging Skills. I feel like I could learn so much from these industry experts.  If picked, I would be interviewing them, attending the sessions, and blogging about it from the road.

I’m glad that tech writers and industry professionals get together like this to share ideas and engage in discussions.  It helps everyone develop and improve their skills.  College was the best time of my life, and I think it was mostly because of the constant learning, community, and engagement in focused subjects of interest.  I thrive on it.  I’m always researching new topics and looking for ways to improve myself both personally and professionally.  Attending conferences like this one is a great way to do so.

I hope I get picked!

 

2/24/12

Follow up: I won!  I’m going to the conference and will be covering it both on this blog and on the Tech Whirl website.  Stay tuned for more info!

Web Design for Tech Writers Part Two

So I realized that there are a couple of other tools and tricks that I didn’t share with you all in my last post on web design for tech writers.  Today, I wrote CSS to go with a page of HTML documentation.  I used the following tools, which some of you might already know about, but if you are just learning web design, they might be helpful to you:

Browser Developer Tools

Each browser has different features in their developer tools which allow you to inspect and edit the source code of a webpage (both HTML and CSS).

  1. In Internet Explorer (IE), you can simply press F12 and the developer tools window will open.  From there you can select the arrow to highlight areas of a webpage to inspect or edit.
  2. In Google Chrome, click on the wrench icon on the right, then tools, then developer tools. There are a lot more features in Chrome’s developer tools than IE such as elements, resources, network, scripts, timeline, profiles, audits, and console.
  3. Mozilla Firefox has probably the best developer tools of all, but you have to download a plugin for Firebug.  Firebug works much the same as Chrome and IE’s developer tools.  It is opened by pressing F12 and it has many of the same features of Chrome, but is also has predictive text and auto-fill capabilities.  This is especially useful to beginning web designers who are still learning the code, but can also speed up the coding of even the most experienced web designer. (This is my preferred method.)

*Note: If you do not already have all three of these browsers installed on your computer, highly recommend doing so.  Webpages look very different on each of them (especially chrome) and it is beneficial to test it on each.  Certain browsers only support certain fonts, graphics, technologies, etc. It is equally important to make sure that your browser is always up-to-date with the latest version. It seems to me like everyone has a different favorite browser. hmm

Viewing the Page Source

On any webpage, you can right click the page and select view source or view page source.  This will open up a notepad document with all of the HTML and CSS source code for a webpage.  Using developer tools mentioned above provide you with the exact same information, but in an editable format.  If you are just looking at the source, or copying and pasting it, this is the best way to do it.

For people learning web design, this is a great way to get familiar with how webpages are put together and what HTML and CSS looks like.  It may seem like a foreign language at first, but the more you read it and break it down, the more it will make sense to you.  Everything is abbreviated and represented by characters.  For instance, paragraphs are marked with the letter <p> and to insert a line break is just <br>. (As I mentioned in my other post, the quickest and best place to learn HTML and CSS is w3schools.)

Notepad++

The best free MS Windows source code editor is notepad++.  I used to code in regular notepad, but once I got notepad++ I will never look back.  It’s name describes it pretty well, it is notepad, but plus, plus.  It makes coding so much easier by doing syntax highlighting, line numbering, and also supporting several programming languages.  Plus, plus, it’s logo is an adorable green gecko and who doesn’t love geckos?  (You can also use Adobe Dreamweaver to edit your source code, but that is an extremely expensive software and not needed to design web pages with HTML and CSS.)

Even if you don’t know what you are doing, try out some of this stuff and play around.  You can make a simple HTML page and add CSS to it and then just mess around with it in the developer tools and notepad++.  You can’t break it, so try different things out.  Go to w3schools and play with their “Try it Yourself” editor.  It’s fun to see how the changes you make to the code impact what happens on the webpage.

If you are an expert web designer and you’ve known all about this stuff for years, then I apologize if this bores you, but I’m a writer and I’m still learning.

Web Design and Technology for Tech Writers

In today’s “digital age,” it is essential for a Tech Writer to have a working knowledge of web design concepts and emerging technologies.  This field, like many others, moved to the web about 10+ years ago when almost all other written content went electronic.  The entire field has radically changed in that time.  Everything has gone digital.  Yes, some companies still publish printed manuals, but most of the documentation is now digital and web-based. That’s why tech writing isn’t for everyone, because not only do you have to be a skilled writer, but you have to understand technology because you will be engaged with it on a daily basis. 

This comes relatively easy for me, because I grew up with technology as part of my everyday life.  I knew the importance of learning new technologies for success in today’s workplace and made sure to keep my skills current.  Most people fall in the early or late majority of the Technology Adoption Curve (below). Innovators are the people who wait in line to get the latest iphone, early adopters quickly buy and use the latest technology in their daily lives, the early majority is risk adverse and somewhat skeptical, they will wait for the next release when all the bugs are worked out or when the have read enough positive reviews, the late majority are the people who refuse to use a smart phone or use facebook, and the laggers are the people who refuse to own a home pc or a cell phone.  There is a chasm between the early adopters and the early majority where a lot of new technology falls.  Tech writers need to be early adopters to be on the cutting-edge of the field.

When most people start using a product for the first time, they generally just want a Quick Reference Guide or Quick Start Guide; just something that tells them the basics of how to get started.  No one wants to read a 200 page manual.  The most people will do is go through the online help, but only after they have run into a problem or are trying to do something that isn’t obvious.  So, writers have to find creative ways to make information stand out and be accessible to readers.   

For most products, the entirety of the user documentation is housed online.  Therefore, tech writers need to understand web design and how to author web-based materials.  There are many different help-authoring tools on the market right now that provide the writer with a relatively simple way of publishing online content (Flare by MadCap, RoboHelp and Framemaker by Adobe, and Doc-to-Help by ComponentOne for example).  Often HTML and CSS are necessary to style the output and make sure that it displays correctly on a number of different outputs.  For instance, some of these programs allow you to design output for internet browsing on PCs, iPads, and mobile devices.

In my role, at a software development company, my web design knowledge-base spans past authoring web-based documentation and help content.  I assist in the QA process, update the website, and create documents using the Adobe Creative Suite (InDesign, PhotoShop, Illustrator, etc).  All of these things require a working knowledge of web design, user interface design, and programming languages. 

I have developed a list of the basic concepts, skills, or programs that every tech writer should know.

  1. Be able to read and write in HTML, CSS, and XML.  Knowledge of  XHTML, Java, and Javascript is beneficial as well.  HTML (hypertext markup language) is the backbone of any webpage. CSS (cascading style sheets) is the style of the webpage; colors, borders – how it looks.  If you do not know these programming languages already, I highly recommend picking up any of the Head First books and using http://w3schools.com to learn.  That’s how I learned.  All the web designers I know are self-taught.  You can easily teach yourself how to do all of this without taking an expensive college course.  It’s not as daunting as it seems.  These books walk you through it step-by-step in a very simple, and easy to understand way.  They also have the “answer” on their website so you can see how it is supposed to look as you are developing. 
  2. Use Content Management Systems (CMS) (WordPress, Joomla, Drupal, Dreamweaver, or others).  Almost every website was built using a CMS because hand-coding is tedious and time consuming.  Besides, these systems do most of the work for you (who doesn’t love that?) because they have built-in designs and themes.  They have two different ways of letting you write, edit, and design the content, either in a visual pane – meaning that you can you can see the content as it would appear on the web and click on icons to insert hyperlinks, make headings, etc, or HTML pane – which has the entire web page displayed in code for manual editing.  You can toggle between the two different views, as I often do.  Knowing html and css can help you make adjustments to formatting that might not be available in the visual pane. 
  3. Use File Transfer Protocol (FTP) – Used for creating and maintaining web pages.  FTP such as WinSCP and Filezilla, (which are both open-source programs -meaning free, non-proprietary), allow you to transfer your web design files (HTML and CSS code files, image files, etc) to the web host.  You can easily move files back and forth across two panes (one for your computer and one for the web host).  You use FTP in conjunction with CMS.
  4. Know the different image formats and when to use them.  Images can be displayed in a number of different formats on the web.  The five most common are .JPG (or .JPEG), .GIF, .BMP, .TIFF, and .PNG.  .JPEG is best for photographs.  .GIF is best for line art, logos or other simple images without gradients or varying color.  .GIF can use transparency and animation.  .PNG does not support animation, but does support transparency.  It creates smoother graphics than .GIF.  .TIFF files are very large files but they produce a very high quality image.  .BMP files cannot be resized and are not compatable with all platforms. The ideal image file size is about 20KB.  Any larger than 1MB will take a very long time to load.
  5. Study User Interface (UI) design as well as Web Design.  Every program or system has a user interface – where the user interacts with the machine.  Learning design principles will help you understand the inter-workings of programs and will make you a better writer.  UI will also help you write readable online content.  Some of the design principles that I live by include: keeping the column widths around 75 characters, font no smaller than 12 point, and line height around 20px to 26px, and having paragraphs contain no more than 3-4 sentences with frequent subheadings. 

The list grows as technology changes, but knowing these basics will ensure that you are on the cutting-edge and capable of handling almost any project that comes your way.