Why an Editorial Style Guide?
One website, many editors. And, as we like to say, ‘digital ink is never dry.’ As content is created and updated, this guide will serve as a quick reference tool for how to maintain a style that is consistent across the website.
A familiar voice is a consistent voice. You know that expression, “it’s not what you say, it’s how you say it”? That’s true for writing website copy, too. An editorial style guide is simply a set of guidelines for writing in the character of your brand. It’s the summation of word choices, punctuation usage, and other writing conventions that make-up a recognizable voice. Go ahead and embrace consistency.
This guide will cover:
- The Core: Your Brand
- The Style: Voice & Tone
- In Action: Using Content Across the Site
- The Pieces: Page Blocks & More
- SEO: Meta & Such
1 The Core Foundation: Your Brand
1.1 Your Business
Orbit Media is a Chicago-based web design and development company. Orbit Media provides expertise and practical advice on web design and content marketing for business owners, creatives, and digital marketers.
1.1.1 Brand Values
The brand story gives us the foundation of the content. Whether or not it is explicitly stated anywhere on the website, the brand story—the reason Orbit came to be, what motivates Orbiteers to come to work everyday, and why clients find value in working with Orbit—informs the voice and tone much like how character development is rooted in a backstory. The overarching principles we garner from the brand story are distilled into the value or mission statement and reflected in the business goals:
Brand Mission Statement
“Deliver better results from the web.”
Other OPTIONS UNDER CONSIDERATION:
- Drive better results for our clients…
- Generate demand for our clients…
- Grow our clients’ businesses…
- Grow visibility and demand for our clients…
- Crush the competitors of our clients…through web design and development and content marketing education.
- Generate convertible leads and brand awareness through on-going content marketing and relationship building.
- Continue to foster positive company culture and inclusiveness.
1.1.2 Brand Naming Conventions
This section documents the use of the company name and how services are described.
Orbit Media Studios started out as a multimedia comic company in 1997. The company evolved into a web development and video production company. However, in 2011 the video production unit spun off into a separate company and Orbit focused on website design and development; however, retaining the ‘media studios’ in the name, the company no longer does video production.
- The company is formally known as Orbit Media Studios, Inc or Orbit Media Studios (with the “Inc” left off). Example: On the website, the domain is “orbitmediastudios.com” and “Orbit Media Studios” is used on the header.
- Orbit is for conventional use across the website and blog.
- Orbit team members are called “Orbiteers“, as in this example: “The Orbiteers continue to develop personally and as a team.”
- Internally, the acronym “OMS” is used; however, “OMS” is not for public use.
- Across social media:
Products & Services
Orbit is a web design and development company. The following is a list of commonly used terms to describe the services:
- Web Design. Refers to general services.
- Marketing Websites. Refers to brochure websites or websites that do not have e-commerce or custom integrations. Also sometimes referred to as “Content Marketing Sites”.
- Ecommerce Websites. Any website that has a shopping cart feature; this is limited to Drupal and Mighty-Site. Sometimes appears “ecommerce” for SEO purposes, without the hyphenation, but this use is being phased out of top-level navigation.
- Custom Web Solutions. May refer to website development that involves third-party integration or may simply refer to custom web-design in general.
- Responsive Web Design. Projects using Twitter Bootstrap (or simply referred to as “Bootstrap”) to create fluid grid-based layouts.
- Mobile Web Design. Same as above, previously used to distinguish between desktop and mobile domains (outdated use). Bootstrap or Responsive is preferred.
- Mighty-Site. Orbit’s proprietary content management system (CMS).
- Web Strategist. Used to refer to the account manager.
- Keyword Research (keyphrase research). Although Orbit does not do digital marketing or SEO, the clients are provided a list of recommended keywords.
- Support. Minor modifications to existing functions and features.
- Enhancements. This is often defined by “Service Agreements” if there are on-going enhancements. Enhancements are new features added to an existing website; this generally doesn’t include general maintenance, which would be covered by Support.
- Hosting. Orbit offers hosting packages, which Orbit manages through third-party vendors.
Although Orbit gives advice on content marketing and SEO, these services are not officially offered. Blogs and articles on these topics are for educational purposes and reinforce Orbit’s ethos as a helpful resource for clients.
1.2 Brand Messaging
1.2.2 Value Propositions & Proof
Orbit has four key strategic value messages aligning with the company’s mission and goals:
- Service-oriented Specialists. Orbit believes in providing top-notch and consistent service by becoming specialist, instead of generalist, in one area of expertise. The proof:
- Deliberately focuses on one core service, web design and development; developed a proprietary CMS, Mighty-Site.
- Continues to win awards for website design.
- Testimonials from clients raving about high-quality service.
- Helpful. Orbit shares expertise whenever possible. The proof:
- Wine & Web, a monthly lecture series teaching strategy.
- Content Jam, annual one day event teaching content marketing.
- Company blog, continually publishes educational and insightful articles on content marketing and web strategy.
- Positive Culture. Orbit’s team is personable and friendly; clients value the collaborative teamwork and open communication. The proof:
- Orbit has a flexible working environment and is committed to a work-life balance.
- Orbit holds a quarterly all-company meeting, SOTO (State Of The Orbit), to discuss financial health of the company with all of the employees.
- Company profiles and Inside Orbit blog series shows that Orbiteers are passionate and experienced people who love where they work and what they do.
- Gives Back. As a Certified B Corporation, Orbit is proud to be a local Chicago company and believes in making a positive difference in the community. The proof:
- Orbit heads up Chicago Cause, a philanthropic partnership with five other Chicago companies. Orbit donates a free website worth over $20,000.
- Holds an annual food drive for the Chicago Food Depository.
- Ongoing collaboration with B-Corp community and the local digital marketing scene.
1.2.2 Messaging Priorities
The brand mission statement, to “deliver better results from the web”, is driven by the following messages:
- Search Engine Optimization. Value of keyword phrases, information architecture, blogging and cross-channel content marketing.
- Project Management. Process-oriented approach that includes rigorous requirements gathering.
- User-centered Design. Based on principles of user experience, design is informed by research and strategy.
- Accountability. Provides on-going support, maintenance, and hosting for all web projects.
2 The Style: Voice & Tone
2.1 Voice & Tone
2.1.1 Personality of Who’s Talking
Orbit’s voice is neighborly, the friendly expert next door. Orbit is smart and practical, but not necessarily “geeky”—Orbit is relatable to the general public and is the “Dear Abby” voice of website marketing etiquette. Orbit is less the stodgy scientist isolated in the lab and more the enthusiastic backyard astronomer that invites the neighbors over to see Mercury in retrograde.
Orbit’s tone is the master of the obvious, steady and in control, laying out distinctive steps: methodical, precise, familiar, comforting, and yet conversational. Orbit also has those ‘a-ha! Eureka!’ moments, a tone clippy and energized. The tone adapts the voice to a particular context or purpose.
2.1.2 Descriptive Adjectives
- Intelligent but not aloof or a smart-alecky
- Professional but not corporate or bossy
- Experienced but not commonplace or cantankerous
- Helpful but not condescending or pushy
- Smart but humble and approachable
- Experts but not elitists or know-it-alls
- Helpful but not free
- Flexible but not willing to abandon proven processes
- Friendly but not too chummy or inappropriate
- Creative but not unorthodox or unusual
- Quirky but not weird or strange
- Casual but results-focused and not aloof
2.1.3 Audience & Appeals
Now we know who Orbit is but who is Orbit talking to?
The ideal customers are established Chicago companies who want to work with Orbit because of our expertise in web design and development. Second to our knowledge of web development, the customer also trusts that Orbit has a a solid understanding of implementing integrated processes for e-commerce, fulfillment, product catalogs, and web marketing related content. The customer is often a small- to medium-sized business that is looking for a full-service company to take on the project from discovery through launch.
The customer comes to Orbit already understanding of the value of a website to their business, but they aren’t necessarily web- or tech-savvy—they rely on Orbit for web technology recommendations. The key decision makers are often the in-house marketing director, technology officer, or, in some cases, the owner or CEO. They are often personally (emotionally) invested in the creative process and they want to be involved throughout the project cycle.
The final ingredient is understanding what appeals to the target audience, your customer. Knowing the customer is in need of web development, but they themselves are outsiders to the tech world, they are making judgments based primarily on the perceived credibility of the vendor. But establishing credibility in the online space can be tricky. Orbit’s content achieves this by communicating the following:
Friendly & Helpful.
Speaks directly to the audience in simple and clear language. Explanatory but not condescending. Industry jargon okay when defined in context. Personable and friendly but direct and concise. Conversational and helpful.
- Achieves credibility through proof (ie, testimonials, statistics, links to deeper learning)
- Establishes trust by acknowledging challenges, addressing fears and providing solutions
- Okay to start sentences with conjunctions to keep conversational rhythm
- Headlines are descriptive, informative and clear or post questions
- Favors 1st person point of view and pronouns for informational and about us pages
- Favors 2nd person point of view and pronouns for services and products pages
You’ll get more than a website
You’ll get a relationship. With Orbit as your preferred web partner, you’ll never have to worry about the future of your website again. From planning and design to development and beyond, you’ll be covered. Because you’ll be taken care of years after we’ve built your website.
3 In Action: Using Content Across the Site
3.1 User Interactions
3.1.1 Buttons, Common CTAs and Linking Usage
Red buttons buttons are used throughout the site for both calls to action and navigational directions (e.g., “Learn More”).
Buttons are used on white (#ffffff), red (#C8543B) or grey (#333333) backgrounds.
184.108.40.206 Calls To Actions (CTAs)
The CTAs are direct and very personable. Generally, CTAs have a sense of urgency. The following are examples of common CTAs that are used on the site:
Start a Project
Meet Our Team
View Our Work
220.127.116.11 Navigational Cues
Buttons are also used for navigation linking. We use inviting phrasing like “Contact Sarah” and “Meet Our Team”. We typically don’t use punctuation on buttons unless it is a question or with the exception of an exclamation point add for extra emphasis.
3.2 Content Types
Content types are defined in the Content Management System (CMS) and are a way to create reusable structures with predefined fields for the various bits of information presented on the website. It’s a way of categorically managing information and knowing the available content types will help the writer know what attributes they need to include. Orbit’s site has the following content types:
- Page – The most basic and flexible of content types, a page is simply a page title and one HTML field; there are no restrictions or minimal requirements for what goes in the HTML field. Refer to “Content Styles” for the available styles that can be used on a page. Page content is created inline in a standard WYSWIG editor. Page blocks and sidebars can joined to a page, but are not editable within the page’s WYSWIG editor.
- Page Block – A snippet of content type that can be reused across the website. The page block can have a two column or three column structure and may include video or an image. Typically page blocks work best for 100 words or less whereas there is no word count limitations for pages. See the section on “Page Blocks” for a list of the page block styles used on the Orbit website.
- Portfolio – In addition to the HTML field, a portfolio item needs to be associated with one or more Tag IDs (E-commerce, Integration, Marketing, Responsive), and a related Portfolio ID. This content type also has separate image fields for the thumbnail and full image. There is one HTML field.
- Sidebar – Basic HTML field that can be customized to include an image or URL field. Sidebars can be reused on multiple pages. Unlike a page, sidebars do not have “Titles”.
- Team – This content type is used for employee bios. There are two main HTML fields for bio and quote and two right-side fields that use list styles for employee likes and favorites. Additional data fields include Twitter handle, employee name, phone number, and title, and image fields include thumbnail and main image.
- Calendar – This is a unique content type that has additional data fields for start and end time and a field for event description in addition to the main content area.
- Video – This content type includes attributes defining the height and width of the video, a description of the video, and a thumbnail image.
3.3 Common Word List
This section is a compilation of brand vocabulary for inspiration. Some basic guidelines for word choices:
- Orbit relies on convential everyday words.
- Orbit avoids technical jargon.
- Orbit will occasionally sprinkle in science-y words, playing on concepts from astronomy, physics and chemistry.
Service Core Values
- Atomize Content
- DNA (discovery n analysis)
- Positive Charge
Blacklist (Don’t use)
- Click here
- Sales language
- Technical jargon without context
- call to action (no hyphens)
- Domain Authority (always capitalized)
- e words in general (lower case, no hyphen)
- ecommerce (lower case, no hyphen)
- thank you page (no hyphen)
- internet (lower case)
- homepage (one word, no hyphen)
- sign up (verb, no hyphen)
- signup (noun, no hyphen, one word)
- signup (adjective, no hyphen, one word)
- log in/log out (verb, no hyphen)
- login/logout (noun, no hyphen, one word)
- login/logout (adjective, no hyphen, one word)
- sign in (verb, no hyphen)
- signin (noun, no hyphen, one word)
- signin (adjective, no hyphen, one word)
- keyphrase (one word, no space)
- website (one word, no space)
- web page (two words)
- web (lower case)
3.5 Grammar Rules and Conventions
Orbit doesn’t split atoms over grammar, but if a question comes up, we generally defer to The Chicago Manual of Style (the other CMS we use) for general grammar and style useage.
Overall, Orbit’s voice and tone is very conversational and we’re pretty flexible with the rules. However, there are a couple of practices we keep standard:
- Dashes & Hypens – A hyphen (-) is use in the following ways: to connect related words that function together as a single concept (e.g., word-class); in lists the hypen is used with a space on either side to separate a list item from the description; and sometimes a hypen is used in headers or titles to join two related fragments. The em dash (—) is used in sentences—like this—to break apart an idea or thought and also to set off the source of quote.
- A hyphen is NEVER used for any e- words (like ecommerce or email) unless explicitly expressed.
- Commas – Serial commas (the Oxford comma) are not preferred for lists unless it will help to prevent ambiguity.
- For example:
- Orbit’s portfolio includes examples of marketing, e-commerce and responsive web development projects.
- Orbit’s portfolio includes examples of travel and hospitality projects, healthcare and dental projects, and hotel and travel projects.
- Block Quotes – Testimonials and quotes are formatted using a block quote style. Author’s name is all capitalized and set apart by an em dash.
- Numbers – For inline copy, spell out one through nine. Numerals can be used in blog titles and graphics, depending on author’s preference and intent.
- Capitalization – Page titles should appear in title case (Web Content Writing); page blocks and H2-H4 prefer sentence case (Web design made easy); articles and conjunctions should not be capitalized unless it improves visual aesthetic.
- Ampersands (&) – Ampersands are used in titles, headers, CTAs and other places where visual aesthetic is improved.
Because we invite guest authors to write for our blog we don’t typically enforce the Orbit website standards on articles or posts. Authors of blogs and articles have creative license when it comes obeying or breaking grammar rules.
4 The Pieces: Page Blocks & More
4.1 Page Elements
Pages are assembled by putting together reusable elements. Although the CMS allows for a great deal of flexibility in what goes on a page, there are some suggested word counts to ensure that the content fits within the parameters of the design elements. In those cases, we will identify word counts for body text <p>, headers <H1>, lists <ul>, and other things like captions, etc.
Headings and subheadings break articles into smaller, more specific sections. They give readers avenues into your content and make it more scannable. Be generous and descriptive with headings.
Capitalize important words (everything but articles, conjunctions, and prepositions) in headings, and capitalize the first word only in subheadings.
Style Tip: Refer to Content Styles for examples of header and title styles.
4.1.1 Navigation & Titles
Top-level navigation items should be restricted to 1-2 descriptive words and should avoid using articles (e.g., “the” or “a”). The navigation comes from the page name. Typically, the page name will also appear as the title of the page (Header 1). However, there is an option in the CMS to override the page name if a more longer page title is preferred, beyond the 1-2 words that appear in the navigation. This is override is used, for example, on the “About” page.
4.1.2 Single Pages
Home Page & Top Level Pages
These pages generally have some welcome text and then are assembled using page blocks. The Home page and the “Web Design” and “About” pages follow these conventions. The “Portfolio”, “Blog”, and “Contact” landing pages use a different content type.
Body Text: 40-60 words, centered
Interior page templates are one HTML field—there are no word or character limits on pages, but the following are recommendations to improve the readability of the content:
- Think headers, short paragraphs and bullet points. Keep paragraphs to less than 4 sentences (40-60 words).
- Use headers and sub-headers to target key phrases and break up your content. Headers and sub-headers are very important to SEO and usability. Use your key phrase once in the title.
- Write from the user’s perspective and be considerate of their time. Give specifics immediately—make it easy to find contact information, prices, and detailed information. It should be immediately clear what the page is and what information will be found here.
Sidebars, page blocks, and slideshows can be added to any page. Some of these elements will have more restrictions.
4.1.3 Page Blocks
Page blocks are reusable elements that help construct pages.
Intro Blocks: About & Web Services
The page block uses a 50/50 layout, one side is for an image and the other for text. The images alternate left to right on the desktop layout. These page blocks are used on top-level landing pages and are used to introduce the child pages within the section.
- Text Columns: One
- H2 Text: 2-3 words
- Body Text: 40-50 words
- Optional CTA: 2-3 words, recommended using link instead of red button (only used on “About” page blocks)
- Background: Tan
Home page teasers – The Haps
This is a 33/33/33 layout used only on the home page and can be changed up to draw attention to content that changes overtime, like awards or upcoming events.
- Text Columns: Three
- H2 Text: 1-5 words
- Body Text: 20-25 words
- CTA: 2-3 words, red button
- Background: White
This is a full layout uses block quote formatting against a white background (block quotes use a red background when used on a page).
- Text Columns: One
- Block Quote Text: 40-60 words
- Background: White
Sidebars are used on interior pages, primarily the Web Design Services section, to introduce related content. Often a related blog post or case study will be included in the sidebar of a services page. The following sidebars are defined for the Orbit site:
- Blog – pulls snippet from a blog post.
- Text box – used for custom sidebars and can include an image and a CTA.
- Events – from the “Event” content-type.
- Location – Google map of Orbit Media Studio’s location.
- Image – providesa ability to make image round.
- Twitter – recent Tweets at Orbit.
For sidebars that have content that is not dynamically pulled from other locations, like the blog or Twitter feed, text is usually no more than 10-12 words and there is usually a strong call to action. For example, the text box sidebar is used for a “Contact Support”.
Note: Portfolio thumbnails can be added to the sidebar, but this is not a unique sidebar content type.
4.1.5 Images & Media
Large images that are scaled down in HTML require more time to download than images that are cropped an resized (optimized for the web) in photo-editing software (such as Adobe Photoshop, Photoshop Express, Pixemator or Preview). JPEG compression of 60% is sufficient.
- Crop and resize your images before uploading them.
- Use image captions (eye-tracking studies show that people read image captions).
5 SEO: Meta & Such
For an in-depth look at on-page search engine optimization, read our On-Page SEO Checklist: SEO Best Practices.
The title that appears at the very top of the browser page and in search engine results.
- Primary key phrase + secondary key phrase. Note: Mighty-Site automatically appends your company name to the end of the title tag.
- Every page should have its own unique title tag.
- 70 characters or less.
Title tag examples
- Home page: Chicago Web Design Company – Professional Website Designers
- Interior page: Custom Websites – Custom Web Design
The short description of your page that appears in search engine results.
- A compelling, readable sentence that is 160 characters or less.
- Should contain your targeted key phrase(s).
- Every page should have its own unique meta description.
Meta description examples
- Home page: Orbit Media is Chicago’s premier web design & development firm, creating custom, clean and effective websites since 2001.
- Portfolio page: Take a sneak peek at all of the great websites that Orbit’s team has created over the years.