Transmogrified! And notes on the style overhaul.

[aveleh]

We're still going through old comments to add bugs into the ticket tracker, but there will be some top-level posts in between working on replies. I promise someone will get to everyone :)

With the last code push, a new style "Transmogrified" is now live. This layout was designed by absolut for the LiveJournal Style Contest in 2005. Most of the legwork on getting it to work with core2 was done by dani_the_girl and draigwen, who have been working with afuna, av8rmike, jadelennox, liv and rich. This style has really gentle default colours, and is a great option to have. You can see it in action at dw_styles or Select it as your Journal Style.

With beta opening up, now's the ideal time to talk about more about "the styles overhaul." In order to ensure that Dreamwidth styles are more accessible, easier to write, and easier to update, a number of volunteers have been working together over the last few months to complete a significant overhaul of various styles and the core code that powers them. Until open-beta, our priority is working to ensure that core and individual styles are working as expected, and then after that, we'll be able to start adding new features. And, wow, are there ever a lot of features we're going to be able to add!

One of our goals is that users will never have to choose a style because of the functionality it offers. Instead, you can choose a style because you prefer the way that it lays out items on your journal. So, options like "put icons on the left side of each entry" would be a per-style option. But we think that options like "only display the mini-calendar on the Recent Items page" should be available on all styles, and style designers should never have to write new code to implement it.

The way we're accomplishing this is to remove these options from each individual style, make sure that the basics are working in each style, and then start adding awesome new features to core2. I know this means that things are a little sparse and frustrating during the beta process. But this is really going to help the long-term growth of the style-system and make it easier to update old styles and write new styles.

I also wanted to add a reminder that if you're moving S2 styles over from other LiveJournal-based sites, you probably want to use core1, because that version of core is (almost) the same and is more likely to produce expected results :)

Visual Design for Styles

[nova]

Here are some things to keep in mind when designing styles, especially for others who may be using their journals differently than you.

1) Size and Positions Matter

There are many different elements that can either be empty and/or vary drastically in size:

• Icons can be non-existent or anywhere between 1-100px on either side. Also remember that they're not always square.
  
• Usernames can be anywhere between 2-25 characters.
  
• Journal titles and entry titles can be empty, short, long.
  
• Entries themselves can take up a single line or a whole screen or more.
  
• Sidebars and modules will vary depending on the ordering the user chooses and the content displayed (how many tags, how many current entries displayed that are visible to the viewer, etc.).
  Modules can be moved around by the user. It wont necessarily always be in a sidebar; something could be in the header or footer of the style.
  
• Text like "Leave a comment" can be changed by the user to their liking, so that could potentially also be really short or really long. Text strings can also be translated into other languages; something like "Links List" might end up being three times as long in Russian or Icelandic.
  
• Comment subject lines and comment subject icons are sometimes forgotten, but they are there, and do appear when used.
  
• Website link, user's display name, and probably many other things I'm forgetting, but you get the idea.
  

2) When It's Too Big (or Too Small)

A couple of things to consider based on how things change in size as mentioned above:

How will that specific part of your design stretch and/or repeat if there's a long string of text or a large image? Not just horizontally, but vertically too. Whether your style is fixed-width or flexible-width, there will be parts of it that need to tile. Make sure these pieces connect seamlessly to look good in all cases.
( Examples using a title banner )

What happens when something exceeds the width you've set to an area? For example, an image wider than the entry space, or a username that is too wide to fit into your sidebar. Should scrollbars appear in that section to keep the content viewable? Should the rest of that image/text be hidden? Should it show in full and overlap or underlap whatever is to the right of it? Should it show in full and push everything else down as needed?

3) Text and Typography

Refrain from using graphical elements in type; they need to be text rather than images so they can be translated into other languages or by user-input such as "My Friends" in place of "Links List". Having a graphical element behind or around type, however, is okay.



Use web-safe fonts to ensure that text is rendered as close to the same as possible for anyone viewing your style. Below is a table of web-safe fonts, and the font type they fall under. They're not very exciting, so if you must use a font that is only available on Mac or only available on Windows, pick a web-safe backup.

Serif	Sans-Serif	Monospace	Cursive
Times New Roman	Arial	Andale Mono	Comic Sans MS
Georgia	Impact	Courier New
	Lucida Sans
	Trebuchet MS
	Verdana

4) Other Views

Don't forget that you're not just designing for the Recent Entries page! There's also the Entry/Read Comments page, the Leave a Comment Page, Read Page, Archive, Year View, Month View, Day View, and Tag pages.

Also keep in mind that your style will be used for more than just journals. In addition to communities, a user can choose to view any page (other journals, communities, feeds) in the journal style they have set.



And that's it for now; hope you found this helpful! If you'd like to see more posts like this, feel free to comment with suggestions. Other posts about S2 and CSS are forthcoming.