The Sims Wiki talk:Project Message template standardization/Manual of style: Difference between revisions
imported>Duskey (→Width) |
imported>Duskey m (→Width) |
||
(9 intermediate revisions by 2 users not shown) | |||
Line 6: | Line 6: | ||
===Width=== |
===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: |
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: ''' |
*{{check2}} Full page message at the top before other content: '''65%''' |
||
*Messages used alongside text and images: '''40%''' |
*<s>Messages used alongside text and images: '''40%'''</s> |
||
*Very small info messages: ''' |
*{{check2}} Very small info messages: '''200px''' |
||
'''[[User:Duskey|Duskey]]'''<small>([[User_talk:Duskey|<span style="color:green;">talk</span>]])([[User_blog:Duskey|<span style="color:blue;">blog</span>]])</small> 08:47, July 14, 2010 (UTC) |
'''[[User:Duskey|Duskey]]'''<small>([[User_talk:Duskey|<span style="color:green;">talk</span>]])([[User_blog:Duskey|<span style="color:blue;">blog</span>]])</small> 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. '''[[User:Duskey|Duskey]]'''<small>([[User_talk:Duskey|<span style="color:green;">talk</span>]])</small> 01:09, August 1, 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. '''[[User:Duskey|Duskey]]'''<small>([[User_talk:Duskey|<span style="color:green;">talk</span>]])</small> 01:09, August 1, 2010 (UTC) |
||
:500px will do. It runs a little way into the background at 800x600, but not excessively so. [[User:Dharden|Dharden]] ([[User_talk: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. '''[[User:Duskey|Duskey]]'''<small>([[User_talk:Duskey|<span style="color:green;">talk</span>]])</small> 04:48, August 1, 2010 (UTC) |
|||
::Based on [[Template talk:Delete-clear]], the width of message templates '''NOT''' used inline is '''65%'''. '''[[User:Duskey|Duskey]]'''<small>([[User_talk:Duskey|<span style="color:green;">talk</span>]])</small> 16:44, August 2, 2010 (UTC) |
|||
::<s>Based on Portal-box & Userbox note small ones should be at 200px, any shorter and it doesn't look good. '''[[User:Duskey|Duskey]]'''<small>([[User_talk:Duskey|<span style="color:green;">talk</span>]])</small> 17:13, August 15, 2010 (UTC)</s> |
|||
::Those boxes are no longer in use. '''--[[User:Duskey|<span style="color:#344790;">Duskey</span>]]<sup>[[User_talk:Duskey|<span style="color:green;">talk</span>]]</sup>''' 01:06, September 20, 2010 (UTC) |
|||
====Reference table==== |
|||
Below is a table for <s>personal</s> reference. '''[[User:Duskey|Duskey]]'''<small>([[User_talk:Duskey|<span style="color:green;">talk</span>]])</small> 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. '''[[User:Duskey|Duskey]]'''<small>([[User_talk:Duskey|<span style="color:green;">talk</span>]])</small> 16:44, August 2, 2010 (UTC) |
|||
{|class="wikitable heading-blue" |
|||
!colspan=7|Article space width |
|||
|- |
|||
!Resolution |
|||
!100% |
|||
!90% |
|||
!80% |
|||
!70% |
|||
!60% |
|||
!50% |
|||
|- |
|||
|800x600 |
|||
|660 |
|||
|{{#expr: 660 * 0.9}} |
|||
|{{#expr: 660 * 0.8}} |
|||
|{{#expr: 660 * 0.7}} |
|||
|{{#expr: 660 * 0.6}} |
|||
|{{#expr: 660 * 0.5}} |
|||
|- |
|||
|1024x768 (4:3) |
|||
|784 |
|||
|{{#expr: 784 * 0.9}} |
|||
|{{#expr: 784 * 0.8}} |
|||
|{{#expr: 784 * 0.7}} |
|||
|{{#expr: 784 * 0.6}} |
|||
|{{#expr: 784 * 0.5}} |
|||
|- |
|||
|1280x1024 (5:4) |
|||
|1040 |
|||
|{{#expr: 1040 * 0.9}} |
|||
|{{#expr: 1040 * 0.8}} |
|||
|{{#expr: 1040 * 0.7}} |
|||
|{{#expr: 1040 * 0.6}} |
|||
|{{#expr: 1040 * 0.5}} |
|||
|- |
|||
|1440x900 (16:10) |
|||
|1200 |
|||
|{{#expr: 1200 * 0.9}} |
|||
|{{#expr: 1200 * 0.8}} |
|||
|{{#expr: 1200 * 0.7}} |
|||
|{{#expr: 1200 * 0.6}} |
|||
|{{#expr: 1200 * 0.5}} |
|||
|- |
|||
|1680x1050 (16:10) |
|||
|1440 |
|||
|{{#expr: 1440 * 0.9}} |
|||
|{{#expr: 1440 * 0.8}} |
|||
|{{#expr: 1440 * 0.7}} |
|||
|{{#expr: 1440 * 0.6}} |
|||
|{{#expr: 1440 * 0.5}} |
|||
|- |
|||
|1920x1080 (16:9) |
|||
|1680 |
|||
|{{#expr: 1680 * 0.9}} |
|||
|{{#expr: 1680 * 0.8}} |
|||
|{{#expr: 1680 * 0.7}} |
|||
|{{#expr: 1680 * 0.6}} |
|||
|{{#expr: 1680 * 0.5}} |
|||
|} |
|||
===Image(s)=== |
===Image(s)=== |
||
Line 104: | Line 178: | ||
Feedback appreciated. '''[[User:Duskey|Duskey]]'''<small>([[User_talk:Duskey|<span style="color:green;">talk</span>]])</small> 17:06, July 20, 2010 (UTC) |
Feedback appreciated. '''[[User:Duskey|Duskey]]'''<small>([[User_talk:Duskey|<span style="color:green;">talk</span>]])</small> 17:06, July 20, 2010 (UTC) |
||
It 'won' yay! :p '''[[User:Duskey|Duskey]]'''<small>([[User_talk:Duskey|<span style="color:green;">talk</span>]])</small> 16:45, August 2, 2010 (UTC) |
|||
I'm calling it 'Parthenon'. '''[[User:Duskey|Duskey]]'''<small>([[User_talk:Duskey|<span style="color:green;">talk</span>]])</small> 21:31, August 27, 2010 (UTC) |
Latest revision as of 01:06, 20 September 2010
| ||||||||
---|---|---|---|---|---|---|---|---|
|
Discussion aspects[edit source]
Add aspects of the layout under Heading 3 here eg. width, border etc.
Width[edit source]
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)
Reference table[edit source]
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)[edit source]
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[edit source]
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[edit source]
- 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
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)