The Sims Wiki talk:Project Message template standardization/Manual of style

Project Message template standardization
Main page talk Manual of style talk Project Members

Discussion aspects

Add aspects of the layout under Heading 3 here eg. width, border etc.

Width

In order to maintain a sleek design, I think the width of the entire message should be relatively small. It should also be dynamic to scale with the many different user resolutions available. Here's some suggestions:

• Full page message at the top before other content: 65%
• Messages used alongside text and images: 40%
• Very small info messages: 200px

Duskey(talk)(blog) 08:47, July 14, 2010 (UTC)

I'm beginning to lean more towards a dynamic width for header messages since they should be clear of other elements in the article. ~60-80% sounds good to me. Inline messages are trickier since they could have a 235px infobox on one side and a dynamic-width TOC on the other. A dynamic width is no good since it counts the entire article width. I suggest we keep message templates from the TOC area and set the width to 500px, this allows them to still fit beside infoboxes at 1024x768 resolution. Duskey(talk) 01:09, August 1, 2010 (UTC)

500px will do. It runs a little way into the background at 800x600, but not excessively so. Dharden (talk) 01:31, August 1, 2010 (UTC)

Based The Sims Wiki talk:Development Portal#User resolution and browser I'd say we cater to 1024x768 as a minimum. 800x600 is too small a percentage of users and way too restrictive. Duskey(talk) 04:48, August 1, 2010 (UTC)

Based on Template talk:Delete-clear, the width of message templates NOT used inline is 65%. Duskey(talk) 16:44, August 2, 2010 (UTC)

Based on Portal-box & Userbox note small ones should be at 200px, any shorter and it doesn't look good. Duskey(talk) 17:13, August 15, 2010 (UTC)

Those boxes are no longer in use. --Duskey^talk 01:06, September 20, 2010 (UTC)

Reference table

Below is a table for personal reference. Duskey(talk) 04:48, August 1, 2010 (UTC)

Values are based on the Wikia main menu taking up ~120px and the right side margin and browser scrollbar take up ~20px. Duskey(talk) 16:44, August 2, 2010 (UTC)

Article space width
Resolution	100%	90%	80%	70%	60%	50%
800x600	660	594	528	462	396	330
1024x768 (4:3)	784	705.6	627.2	548.8	470.4	392
1280x1024 (5:4)	1040	936	832	728	624	520
1440x900 (16:10)	1200	1080	960	840	720	600
1680x1050 (16:10)	1440	1296	1152	1008	864	720
1920x1080 (16:9)	1680	1512	1344	1176	1008	840

Image(s)

I think we should add one image or icon to all messages. It'll help users identify messages more quickly and adds a level of customization to the wiki. Images should be kept small though as not to draw too much attention to themselves, the user came to the page to look at the content. Images should also, whereever possible, be from The Sims, which keep the messages unique to this wiki. The exception to this should probably be warnings, which often notify of stuff not related to the sims. We shouldn't plaster the message in images of course, which distracts more than it informs. Duskey(talk)(blog) 08:47, July 14, 2010 (UTC)

Using icons from the game would be best, in cases where that's not possible, we should look to Wikipedia for inspiration and use simple icons. Duskey(talk) 00:58, August 1, 2010 (UTC)

Contributions

This is where we post, experiment and discuss the future base template. Any contributions should be under a Heading 3 (===) with your username. Please add some initial comments from yourself as to why you think your contribution is good and how it fulfills the goal of this project. If you're going to post additional contributions in different varieties or as response to feedback, please mark these under a Heading 4, so contributions are listed by User and then varieties. If you have any comments for other contributions, please add them and don't forget to sign your posts. You are fully allowed to copy others contributions, edit them and post them as your own contributions. It's all CC-BY-SA licensing.

I'm hoping for this to be a constructive debate where we can come as close to the goal of this project as possible. Duskey(talk)(blog) 03:07, July 12, 2010 (UTC)

The 'Duskey' template has been chosen, yay! Duskey(talk) 00:57, August 1, 2010 (UTC)

Duskey

Example

Warning: This article, while not grossly sexually explicit, does deal with adult themes. If you have a problem with these themes, this page is perhaps more appropriate to your tastes.

Reasons why I like it

Appearance

• Easy on the eye: It is slim with smooth edges which makes it appear more plesant than standard brightly colored messages and square edges.
• The image has a 1:1 size ratio and is set at a 32px width which is the double of a file icon in older Windows versions. This also promotes being easy on the eye.
• Uses the wikipedia standard of a very light grey background color (#EEEEEE) which helps users to identify this as a wiki message.
• Uses small text so it can easily be dismissed by users who are already aware of the notification.
• Has a dynamic 60% width to accomodate most user screen resolutions.
• The image and the color of the border states the nature of the warning even for users who have not read the text.
• Retains individuality to The Sims Wiki by using an icon from the sims games and by using a unique shaped and colored border, which is different than standard wiki format.
• The seperation of the image, the text and the boldness of the title, caused by the table, helps the user to quickly identify the nature of the message.

Practicality

• The light background color can hide some residual pixels from turning an image with a colored background into a gif or png with a transparent background.
• The relatively small (32px) width of the image helps not to distort ingame icons from the sims games, which can sometimes be hard to find in bigger resolutions.
• Easy customizeable features include the color of the border & background, the image and the title of the message, making this an easy-to-use template for a standardized collection of messages.

Notes

• My intent is that the background color should be kept at the very light grey #EEEEEE unless it's specifically an important warning or fits very nicely with the theme of the page.

More examples

2 | Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?}}{{subst:#ifeq: {{{1}}}| 3 | Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.}}

Under development: This article is about a title, or contains information about a feature or character from a title, that is either under development or yet to be released. It may contain spoilers and features that are mentioned here may be radically different in the finished product, or excluded altogether.

File:Fair use logo copyright.svg

Fair Use: This file is copyrighted. The individual who uploaded this work and first used it in an article, and subsequent persons who place it into articles, assert that this qualifies as fair use of the material under United States copyright law.

Questions and Comments

• I like the style - however I have a couple questions.
  • Will the decreased font size make it more difficult for some users to read (either because of screen resolution or because of vision issues)?
  • Will the universal template be too difficult for inexperienced users to use correctly?

-- Patrick (LostInRiverview) (talk)(blog) 16:41, July 14, 2010 (UTC)

I'm using a 16:9 1920x1080 resolution and the <small> is still readable. I do have a huge screen though and I see your point. Perhaps <small> should be kept to minor additional notes in messages, such as 'see also' or a url to a site.

About difficulty in implementing. My idea was that we just decide on the look here. The template won't be some 1-template-wonder. It'll be split up in multiple templates, each with their own image and text. The woohoo example above would be one template. The fair use another. Putting them on a page wouuldn't require more than a {{woohoo}} or {{fair use}} for instance. It is only when a new template is created it gets abit tricky, but still very doable even by template beginners. Source code for the woohoo one is

{|style="border: 1px solid #9900FF; background: #EEEEEE; -moz-border-radius:10px; border-left: 5px solid #9900FF; border-right: 5px solid #9900FF;" width="60%" align="center"
|width="35px"|[[File:The_sims_2_woohoo_purple_heart.png|32px]]
|<small>'''Warning:'''<br />This article, while not grossly sexually explicit, does deal with adult themes. If you have a problem with these themes, [[Mrs. Crumplebottom{{!}}this page]] is perhaps more appropriate to your tastes.</small>
|}

Again I must point out that these message templates won't refer back to some all powerful master template, they are just similar in appearance, but have different names and functions. This gives us a high level of customizeability aswell. Duskey(talk)(blog) 12:45, July 15, 2010 (UTC)

Updated licensing examples

File:Fair use logo copyright.svg

Fair Use: This file is Copyrighted. The individual who uploaded this work and first used it in an article, and subsequent persons who place it into articles, assert that this qualifies as fair use of the material under United States copyright law.

File:Flag united states america.svg

File:Licensing copyright question.svg

Unknown license: This file does not have information on its copyright status. Unless the copyright status is provided, it may be deleted.

File:Green Copyleft.svg

Copyleft: This work of art is free; you can redistribute it and/or modify it according to terms of the Free Art License. You will find a specimen of this license on the site Copyleft Attitude http://artlibre.org/licence/lal/en/ as well as on other sites.

Feedback appreciated. Duskey(talk) 17:06, July 20, 2010 (UTC)

It 'won' yay! :p Duskey(talk) 16:45, August 2, 2010 (UTC)

I'm calling it 'Parthenon'. Duskey(talk) 21:31, August 27, 2010 (UTC)