SitePoint Sponsor

User Tag List

Results 1 to 18 of 18
  1. #1
    SitePoint Member
    Join Date
    Jul 2003
    Location
    CA
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    web style guides

    I've been asked to create a web style guide for our website. I have some general ideas about what to include...colors, fonts, h1 styles etc.

    What all do you put in a style guide and does anyone have a nice format/layout for such a beast?

    Rachel

  2. #2
    Word Painter silver trophy Shyflower's Avatar
    Join Date
    Oct 2003
    Location
    Winona, MN USA
    Posts
    10,053
    Mentioned
    142 Post(s)
    Tagged
    2 Thread(s)
    I think you are talking about a stylesheet.
    Try this site and see if it helps:

    http://www.htmlhelp.org/reference/cs...heets-now.html
    Linda Jenkinson
    "Say what you mean. Mean what you say. But don't say it mean." ~Unknown

  3. #3
    SitePoint Member
    Join Date
    Jul 2003
    Location
    CA
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No I mean a style guide.
    A style guide is typically an internal document that defines specifications/guidelines for a project. It can be general and just touch on the colors and fonts used or it can very detailed (e.g. every time this word is used it will be written like....).

    Here is a sitepoint article:http://www.sitepoint.com/article/784/1

    I'm curious what others put in their style guide and how they do layout for it.

    Rachel

  4. #4
    Ensure you finish what you sta bronze trophy John Colby's Avatar
    Join Date
    Aug 2003
    Location
    University of Central England, U.K.
    Posts
    487
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    New York Public Libraries do this - http://www.nypl.org/styleguide/
    John
    No electrons were harmed during the creation, transmission
    or reading of this posting. However, many were excited and
    some may have enjoyed the experience.

  5. #5
    SitePoint Member
    Join Date
    Jul 2003
    Location
    CA
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks [img]images/smilies/smile.gif[/img] I'm sure to get some ideas from that.

    A bit technical I think. Seems like you need to also include things like font, primary colors, buttons/widgets used etc. At least for what I'm doing. I'm supposed to hand this document off to the production team prior to them starting on it. Wouldn't want them making design decisions [img]images/smilies/smile.gif[/img]

    Rachel

  6. #6
    Ensure you finish what you sta bronze trophy John Colby's Avatar
    Join Date
    Aug 2003
    Location
    University of Central England, U.K.
    Posts
    487
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Rachel

    You know your website and the functionality it contains. How about making a style guide and asking for anything that falls uotside the style guide to be discussed and decided how its going to be achieved so that it can then go in the style guide.

    I refer people to NYPL because they're probably the ones with the most public face to actually publish such a guide. I have yet to find one in the U.K.
    John
    No electrons were harmed during the creation, transmission
    or reading of this posting. However, many were excited and
    some may have enjoyed the experience.

  7. #7
    SitePoint Member
    Join Date
    Jul 2003
    Location
    CA
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah, I guess that most sites/design firms would prefer not to publish their style guides.

    Will definitely need some meetings to decide all that goes into it. I was hoping to see how others did their layout as a start for ours. The only model I've seen that is the type of thing we would use, is in the book "web redesign|workflow that works".

  8. #8
    SitePoint Addict Scud's Avatar
    Join Date
    Jan 2002
    Location
    Los Angeles
    Posts
    222
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you are having trouble understanding what the team needs from you, ask them for a past example you can draw from? When I was working with a team I would do lots of sketches of my ideas as well as a creative brief describing the type of fonts and color schemes, button styles and functionality of the site.

  9. #9
    SitePoint Member
    Join Date
    Jul 2003
    Location
    CA
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I wish they had some past examples. Previously they went from the design concept stage (psd file) to the production team. Now they want to have a style guide created before handing anything off to the production team.

    This is what I have now...pretty standard stuff I'm sure.

    Coding guidlines- XHTML 1.0 trans, css, DHTML
    Specs - target browers, platforms, page size
    meta data- keywords, description
    palette- all colors used
    global nav- font styles, size etc
    content area type - font styles for body txt, h1 etc
    photo treatment-
    embellishments - button styles, logos etc

    Anyone have any more ideas about what should go into it?

    Rachel

  10. #10
    SitePoint Addict xDev's Avatar
    Join Date
    Jul 2003
    Location
    Moncton, New Brunswick, Canada
    Posts
    247
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    They may have been talking about a site colophon but just couldn't remember the correct name for it. Search for "website colophon" to see examples. Here's one I came across that seems to be a good example:
    http://www.websitetips.com/colophon/

    -xDev

  11. #11
    SitePoint Addict Scud's Avatar
    Join Date
    Jan 2002
    Location
    Los Angeles
    Posts
    222
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm thinking the idea of a creative brief with:
    description of the product or service
    target audience and their needs.
    theme for the site

    on top of all the items you had there. This should help give the team a much better idea of what type of design will be needed.

  12. #12
    SitePoint Enthusiast agentolivia's Avatar
    Join Date
    Jul 2003
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Our style guide basically contains guidelines for:
    • file naming conventions
    • hosting location parameters
    • standard header and footer specs
    • lines of authority regarding approval of content before posting
    • non-discriminatory language/content
    • acquiring copyright for non-organization owned images, etc.
    • handling and coding pages that shouldn't be indexed by robots
    • screen resolution
    • accessibility
    • javascript (that it should be error-free and content accessible to non-javascript enabled browsers)
    • creating white space (i.e. CSS, not spacer.gif)
    • testing standards
    • validation
    • minimum DOCTYPE compliance
    • guidelines regarding use of frames
    • guildelines regarding use of blockquotes, horizontal rules, tables, images and color usage
    • guidelines regarding use of multimedia, plug-ins, and PDF
    • current server configuration

  13. #13
    SitePoint Member
    Join Date
    Jul 2003
    Location
    CA
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Scud/Agentolivia,

    Thanks! That's what I'm looking for.

    Agentolivia - could I get you post one of your old style guides?? Pretty please

    If not could you tell me more about layout of your style guide document and any specifics you can give me on the sections would be super. I realize a lot of it will change slightly on a per project basis but I'm guessing most of it is standardized copy.

    Thanks!!
    Rachel

  14. #14
    SitePoint Enthusiast agentolivia's Avatar
    Join Date
    Jul 2003
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'll check with the Webmaster and post it if I can. (It's currently posted on our Intranet).

  15. #15
    SitePoint Member
    Join Date
    Jul 2003
    Location
    CA
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks

  16. #16
    SitePoint Enthusiast agentolivia's Avatar
    Join Date
    Jul 2003
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    While I'm not able to post our organization's style guide, my colleague (the webmaster of our organization) helped write a "best practices for web documents" as part of an assignment she had in library school. (It was part of a rationale for a library school web site redesign assignment.) She actually has plans to incorporate more of this document into our current style guide, so I think you may find this equally, if not more helpful.

    It's online here:
    http://leep.lis.uiuc.edu/publish/HOTHE/bestprac.html

  17. #17
    SitePoint Member
    Join Date
    Jul 2003
    Location
    CA
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    great stuff, thanks!!

  18. #18
    SitePoint Member
    Join Date
    Oct 2003
    Location
    Miami Beach
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    While I can not show you the entire document, you can check out the links below.

    Style Guide TOC: This is very extensive, as this was created for Web Enterprise Applciations, but everything you need should be within.
    http://www.markohurstdesigns.com/dev...leGuideTOC.pdf

    A sample of the Style Guide: Excerpt of one section
    http://www.markohurstdesigns.com/dev...uideSample.pdf

    Any questions regarding them, let me know.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •