Style Switchers Are Back: Ideas, Examples and a Contest

Advertisement

Style switchers are used to provide users with a choice of layouts, fonts, colors and views they can use to adapt the design to their personal needs. Designs with style switchers are more flexbile, more adaptive and more user-friendly as different visitors can quickly modify the design for their personal convenience.

When offering different layouts and design variations your design may better suit the preferences of your visitors. After all, it is almost impossible to make the design look nice and work properly for everybody. Style switchers are also used in web-sites which emphasize the usability and accessibility in their designs.

Style Switchers Contest

Web designers can achieve significant usability-improvements by adding a simple style switcher to their designs. Style switchers are useful and powerful as they give users a better control of site presentation. However, this technique is almost never used and are sometimes considered to be unnecessary and useless which is simply not true. We would like to change it.

Our goal
We want to motivate you to figure out how style switchers work and how you can use them to improve your designs.

Your task
We’d like you to create beautiful, functional and user-friendly style switchers for your own web-sites. We’ll collect the most creative, usable and elegant solutions and review them in one of our next posts.

Award
The award is Apple Cinema 20 Flat Panel Display with 16.7 million colors, 400:1 contrast ratio, 0.258 mm dot pitch, 16 ms response time and 170-degree viewing angles (see the image below). The winner will be chosen randomly among participants of our contest.

Apple1

How do I participate?
To participate, just

  1. design a style switcher for your site,
  2. integrate it and make sure it works,
  3. put the plain text “Smashing Magazine” (without a link) on your site. No matter where: it has to be visible and can be deleted afterwards (we need to identify you as the owner of a web-site),
  4. and post the URL of your site with a style switcher in the comments to this post.

Restrictions
One person may submit at most 3 style switchers. However, the style switchers should be different and should be used on different web-sites.

Rules
The site with a style switcher must be online and work after the deadline. Spam will be blacklisted, so the link will never appear in our posts again.

Beginning
05.06.2008

Deadline
19.06.2008. The comments will be closed at 00:01 on 20.06.2008.

The information provided below is supposed to help you to get started with style switchers.

How does a style switcher work?

When the visitor clicks on style switcher, a script changes the stylesheet on the fly, thus presenting the old content in a new layout. Let’s consider the following, very basic example. Peter Sach2 uses 4 small icons to indicate different versions of the site design. In each of these cases the background image is different. When a visitor clicks on one of the icons, the design changes.

Screenshot3

The site offers four design variations:

Screenshot4

Screenshot5

A style switcher, or design elements which are supposed to stand for the style switcher (buttons, icons, plain text), can appear everywhere, but not in the footer. Style switcher isn’t really useful it it isn’t seen at all or is seen too late. In most cases icons or plain text are used.

So what can you really do with a style switcher?

1. Let the user choose an optimal font size

font size-style-switchers are probably the most popular style switchers in the design landscape. Your designs can enable visitors to choose an optimal font size which best fits to his or her personal preferences. Of course, users can achieve the same via their browser, however a style switcher is more comfortable. In best case, the font size, once selected, should remains the same on all pages of a given site. To achieve this you need to store font size settings via cookies. Style switcher can do that, but no browser is able to achieve it — unless the visitors use some specific extensions such as Userscripts6.

Let’s take a look at some examples of how style switchers for font size adjustment can be integrated in site designs. Often the choice of font size is displayed via a sequence of growing letters, in most cases “a”.

Font size-selection on Clusty.com7:

Screenshot8

Similar approach is used by Alex King9:

Screenshot10

Nice visual design of a style-switcher by Splitdadiz.com11. The first two options decrease and increase the font size; the third and the fourth one stand for color contrast.

Screenshot12

Hand-drawn style-switcher is sometimes also an option worth considering:

Screenshot13

The selection of font size can be done via plain text link, too:

Screenshot14

Screenshot15

Active setting can be highlighted via vibrant colors, e.g. with the red:

Screenshot16

…or via vibrant background color, e.g. with the orange:

Screenshot17

Sometimes the label for style switcher is A+ or A- :

Screenshot18

You can also use visual elements, e.g. icons such as magnifying glass to indicate the font size adjustment:

Screenshot19

Buttons can be used as well to indicate the font size adjustment:

Screenshot20

Another option is to display two letters in different sizes next to each other. This solution, however, should somehow link to settings adjustments as it is not really clear how one can decrease the font size once it was increased. The icon on the left stands for an alternative color contrast.

Screenshot21

Fritz Weisshart22 has integrated a style switcher right into the navigation menu. That’s reasonable and makes it easy for visitors to find the style switcher.

Screenshot23

2. Let the user choose an optimal typeface

Apart from font size settings you can also let the user manually define the typeface he or she would like to use to read your content. Of course, it is necessary to make sure that the settings are stored in cookies, so the visitor doesn’t have to define the setting on every page over and over again.

Unfortunately, only few sites make use of this technique. Mike Davidson24 lets his visitors manually define the font size and the font for his content. Ultimately, own typeface can be specified as well. Simple and user-friendly. Besides, Mike also offers 4 different design layouts as well as a mobile version of the site. If you want to make sure that your visitors feel that the designer has actually though about their needs, this is a style switcher you should integrate in your designs.

Screenshot25

Usability.com.au26 uses an extra-sidebar at the right hand side to let users define accessibility settings. Among other things one can define whether sans-serif-typeface or a serif-typeface should be used.

Screenshot27

3. Let the user choose an optimal text presentation

Font size, font family, what else? Well, when it comes to the presentation of text, one usually has to decide whether the text should be presented left-aligned or justified. One can let the visitors decide it too. One should mention that left-aligned text doesn’t work well in Web, though. Reason: modern browsers don’t have a sophisticated hyphenation algorithm for “parsing” text in a readable manner — the way we know it from print. It may change in the future, though.

Whatdoiknow.org28 knows how to integrate a style-switcher seamless in the site design. The two rectangles at the left stand for left-aligned text and justified text.

Screenshot29

Sometimes one can simply use plain text to provide users with the choice. Visitors from Arabian countries may prefer right-aligned text.

Screenshot30

4. Let the user choose an optimal design

What is possible with fonts is, of course, also possible with designs. Designers often present multiple variations of site designs, usually color scheme variations, dark/bright-schemes and design with low and high color contrast. This is very useful from the accessibility point of view. If your web-site is likely to attract a number of senior users you definitely have to integrate a contrast switcher in your design.

Opencomp.de31 lets users choose a font size and select between a colorful and black-white-design.

Screenshot32

Marius Roosendaal33 has a beautifully designed styleswitcher which is perfectly integrated into the overall site design. Three beautiful themes are available: Sunrise, Night and Day.

Screenshot34

An almost minimalistic, but pretty colorful style switcher is presented by Urbanchip35, a design agency from Argentina. The site lets its visitors select one of 5 stylesheets for the site. The selected theme is stored in users’ cookies.

Screenshot36

Wishtree37 offers 8 background color variations.

Screenshot38

Diego Valobra39 has two antique styles. In both cases only the background image is dynamically changed. Sometimes, it is enough. The style switcher can be arrange vertically as well.

Screenshot40

Werkbot41 offers a tiny style switcher with four themes — winter, spring, summer and autumn.

Screenshot42

DSMagic43 with free color variations.

Screenshot44

5. Let the user choose an optimal contrast

From the usability and accessibility point of view one can present visitors multiple designs, but one should also consider presenting visitors designs with various color contrast. Such switchers are also called contrast switchers.

In most cases, to make sure the content is readable it is enough to have a basic stylesheet with very light text on very dark background. Not every design is optimized for a good color contrast which is where a contrast switcher can help. Roger Johansson45 has one.

Screenshot46

Sas-Foto.de47 has a color switcher at the bottom of the page. It would be better to place the style switcher somewhere at the top of the page to make it more visible for new visitors.

Screenshot48

Popurls.com49 is probably the king (or queen) of style switchers. The site lets its visitors to define a variety of preferences such as whether the links should be opened in new window and how large the fonts should be. Of course, contrast switcher is also offered. Users can also arrange content blocks and select content layout.

Screenshot50

To ensure a high color contrast Dustin Diaz51 uses green text on dark background.

Screenshot52

Merixstudio53 hides the link to a high contrast version at the right upper corner of the design. The “high contrast” version removes all gradients and uses strong and vibrant colors. The design itself changes slightly, but effectively.

Screenshot54

6. Let the user choose an optimal layout

You can also provide your visitors with the option to define the width of the layout and the layout itself. Most used solution is a style switcher between tiny and wide layouts which is supposed to let users with various screen resolutions see the site a way they want to.

Excusemeplease.org55 with a page layout switcher: the sidebar can be placed on the left or on the right of the content area. How the site looks like is now user’s, not designer’s decision.

Screenshot56

Phonophunk57 has a quite distinctive layout-switcher. The used icons may not be clear enough for new visitors. Here the layout is really flexible. The sidebar can be placed to the right or to the left (two icons in the middle), two other icons stand for a tiny and wide layout.

Screenshot58

BestWebGallery59 provides visitors with three views of the content. The settings are stored via cookies.

Screenshot60

ShopComposition61 has a very unusual and extremely adaptive design layout. Visitors can switch between different views and define the width of the blocks. That is not really a style switcher, but the idea is interesting and can definitely be used for an effective style-switcher.

Screenshot62

The layout switcher on Einfach-fuer-alle.de63 can switch between a standard layout and a print layout (links were translated to English for better readability):

Screenshot64

One can also use a <select>-element to let the user make his or her choice:

Screenshot65

Not beautiful, but quite switchy: users can change the font-size and the width of the layout:

Screenshot66

dfTheme67 is one of the few themes which have a sophisticated style switcher integrated in the theme. Users can change the font size and the width of the layout. The theme is available for WordPress, Drupal CMS and Joomla CMS.

Screenshot68

How do I implement a style switcher?

To embed multiple style sheets in your site you simply need to embed each of them using the <link>-tag and the corresponding relation. That’s not a big secret since designers have been doing it for years — e.g. to integrate a print-layout in the design.

Let’s consider the following example:

<link href="css/layout.css" rel="stylesheet" type="text/css" title="Standard Layout" />
<link href="css/alt-layout.css" rel="alternate stylesheet" type="text/css" title="High Contrast Layout" />

By default the style sheet layout.css will be used. A style switcher should now make it possible to switch to alternative style sheet alt-layout.css

Using any modern web-browser users can manually switch between the themes offered on a web-site (see the screenshot below). However, nobody is actually browsing from site to site looking for a style switchers (well, nobody except of us). Hence when simply included in HTML, alternate stylesheets are very likely to be overlooked. To make sure your visitors are aware of them you need to make them visible in your design.

Screenshot69
Style sheets can be chosen with Firefox

And to make a style switcher visible you need to use icons, buttons or at least plain text. And, of course, a switcher script, e.g. JavaScript or PHP. However, you can achieve the same with ASP or Perl. It is also reasonable to consider using a cookie to ensure the setting will be stored and applied to all pages of a given web-site. We present some of the “ready-to-use”-solutions in the reference section, at the end of the post.

Finally, an overview of tutorials, how-tos, style-switcher-scripts and resources you can use to develop your style switcher.

Tutorials and Style-Switcher-Scripts For Free Download

Style Switcher with WordPress Plugins

Good luck, folks!

Footnotes

  1. 1 http://www.smashingmagazine.com/images/styleswitcher/apple.jpg
  2. 2 http://www.ps-designstudio.de/
  3. 3 http://www.ps-designstudio.de
  4. 4 http://www.ps-designstudio.de
  5. 5 http://www.ps-designstudio.de
  6. 6 http://userscripts.org/
  7. 7 http://www.clusty.com
  8. 8 http://clusty.com
  9. 9 http://alexking.org/blog/2004/02/03/css-style-switcher-updated
  10. 10 http://alexking.org/blog/2004/02/03/css-style-switcher-updated
  11. 11 http://splitdadiz.com/
  12. 12 http://splitdadiz.com/
  13. 13 http://oink.elrellano.com/index.php
  14. 14 http://www.vladstudio.com
  15. 15 http://monozellen.de/
  16. 16 http://www.daihatsu.com/
  17. 17 http://www.fabrik1design.com/
  18. 18 http://webagentur-meerbusch.de/
  19. 19 http://www.typo3advanced.de/
  20. 20 http://www.pookerart.de/
  21. 21 http://www.fromustoyou.de
  22. 22 http://webdesign.weisshart.de/
  23. 23 http://webdesign.weisshart.de/
  24. 24 http://www.mikeindustries.com/blog/
  25. 25 http://www.mikeindustries.com/blog/
  26. 26 http://usability.com.au/
  27. 27 http://usability.com.au/
  28. 28 http://whatdoiknow.org/
  29. 29 http://whatdoiknow.org/
  30. 30 http://www.contentschmiede.de/
  31. 31 http://opencomp.de/
  32. 32 http://opencomp.de/
  33. 33 http://www.mariusroosendaal.com/
  34. 34 http://www.mariusroosendaal.com/
  35. 35 http://www.urbanchip.com.ar/
  36. 36 http://www.urbanchip.com.ar/
  37. 37 http://www.wishtree.org/
  38. 38 http://www.wishtree.org/
  39. 39 http://www.diegovalobra.com
  40. 40 http://www.diegovalobra.com
  41. 41 http://www.werkbot.com
  42. 42 http://www.werkbot.com
  43. 43 http://dsmagic.com/
  44. 44 http://dsmagic.com/
  45. 45 http://www.456bereastreet.com/
  46. 46 http://www.456bereastreet.com/
  47. 47 http://www.sas-foto.de/index.php?/P1/
  48. 48 http://www.sas-foto.de/index.php?/P1/
  49. 49 http://www.popurls.com/
  50. 50 http://www.popurls.com/
  51. 51 http://www.dustindiaz.com
  52. 52 http://www.dustindiaz.com
  53. 53 http://www.merixstudio.com/
  54. 54 http://www.merixstudio.com/
  55. 55 http://www.excusemeplease.org
  56. 56 http://www.excusemeplease.org
  57. 57 http://phonophunk.com/
  58. 58 http://phonophunk.com/
  59. 59 http://bestwebgallery.com/
  60. 60 http://bestwebgallery.com/
  61. 61 http://www.shopcomposition.com/
  62. 62 http://www.shopcomposition.com/#Projects
  63. 63 http://www.einfach-fuer-alle.de/
  64. 64 http://www.einfach-fuer-alle.de/
  65. 65 http://charlier.de/
  66. 66 http://www.naiz.de/joomla/
  67. 67 http://www.dezinerfolio.com/2008/01/23/dftheme-for-joomla/
  68. 68 http://joom.dezinerfolio.com/
  69. 69 http://opencomp.de/
  70. 70 http://www.inetsolution.com/css-style-switcher-how-to.asp
  71. 71 http://designshack.co.uk/tutorials/css-style-switcher
  72. 72 http://www.456bereastreet.com/archive/200608/build_your_own_php_style_sheet_switcher/
  73. 73 http://www.digital-web.com/articles/strategies_for_css_switching/
  74. 74 http://www.alistapart.com/articles/alternate
  75. 75 http://www.sitepoint.com/article/css-simple-style-switcher
  76. 76 http://www.fiftyfoureleven.com/weblog/web-development/css/fast-css-style-switching-with-php
  77. 77 http://www.dynamicdrive.com/dynamicindex9/stylesheetswitcher.htm
  78. 78 http://www.mensching.info/program/mootools-styleswitcher-en.html
  79. 79 http://centerkey.com/style/switcher/
  80. 80 http://24ways.org/2005/introducing-udasss
  81. 81 http://www.alistapart.com/articles/bodyswitchers/
  82. 82 http://blog.e-ss.be/2007/04/25/css-style-theme-switcher/
  83. 83 http://www.alistapart.com/articles/phpswitch
  84. 84 http://www.kelvinluck.com/article/switch-stylesheets-with-jquery
  85. 85 http://juicystudio.com/article/stylesheet-switcher.php
  86. 86 http://www.brothercake.com/site/resources/scripts/iotbs/
  87. 87 http://www.spoono.com/javascript/tutorials/tutorial.php?id=18
  88. 88 http://www.javascriptworkshop.com/2007/06/16/june-meeting-javascript-style-switcher/
  89. 89 http://www.csswoes.com/2008/05/02/css-style-switcher-using-php/
  90. 90 http://alterior.net/archives/000021.php
  91. 91 http://www.sitereboot.com/read_tutorial.php?id=6
  92. 92 http://ppleyard.org.uk/archives/2005/01/01/css-style-switcher-tutorial.html
  93. 93 http://www.contrastsweb.com/switcher/v2/tutorial.php
  94. 94 http://www.excusemeplease.org/computers/perl_stuff/styleswitcher.shtml
  95. 95 http://www.drweb.de/php-scripting/php-styleswitcher.shtml
  96. 96 http://www.stichpunkt.de/css/switch.html
  97. 97 http://wordpress.org/extend/plugins/wp-style-switcher/
  98. 98 http://thecuriousfrog.com/projects/k2-style-switcher/
  99. 99 http://www.christianmontoya.com/2007/02/04/how-i-implemented-my-cookie-based-switcher/

↑ Back to topShare on Twitter

Co-Founder of Smashing Magazine. Former writer, web designer, freelancer and webworker. Sven is now writing Science Fiction Stories.

Advertising
  1. 1

    excellent article, thanks for the link

    0
  2. 2

    i’ve no idea how to do the CSS thingy yet :( but I cannOT wait to see the entries for this one!! I’m sure the designers will astound us :D. wishing all the best to the ppl who enter :}!!!

    0
  3. 3

    ProfessorWeb.de

    June 5, 2008 6:33 am

    Too much customizations are for simple presentations of informations too overloaded. I don’t like such websites, except some start-websites like iGoogle.

    0
  4. 4

    What a juicy prize. Wish I had my site up and running now. I can see how designers may overlook the use of style switchers under premises like “if it isn’t broke, don’t fix it” and “a good design needs no plan B”. I myself am between these and those for style switchers. Contest should turn out interesting results, and help clear that up.

    nice work Smashing!

    Yaco Roca

    0
  5. 5

    I have one question: Do I have to put the style switcher on a real website with users/visitors and more or can it be a (test) site only for this contest (so there will be content and all this, but the site is not made for any special topic or something)?

    0
  6. 6

    Hmmm… I guess we’ll see 2 types of style-switchers:
    1) Server-based and very different types of styles (complete rebuild of HTML + CSS).
    2) Client-based (css or js), but bit very limited variations in the styles them selfs.

    What I would like to see is some great designs by different CSS stylesheets while still using the same HTML. I’ll try to post something like this :D

    0
  7. 7

    Vitaly Friedman & Sven Lennartz

    June 5, 2008 6:49 am

    @SonicHedgehog: the style switcher should be put on a real web-site with users/visitors, and not on a test-page.

    0
  8. 8

    Am I the only person that has a problem with the changing text size switch facility that you find on loads of sites. Last time a looked my browser did that for me so why do numerous sites implement countless different ways to do the same thing?

    0
  9. 9

    that screen would match great with my new laptop ;) im in.

    0
  10. 10

    daniel.sedlacek

    June 5, 2008 7:18 am

    amazing, smashing rulez ;)

    0
  11. 11

    Good thing I already have one in Are You Design This is Kelvin Luck’s jQuery based stylesheet switcher. With multiple stylesheets and the “position” and “visibility” css properties, I can switch content without changing the html.

    0
  12. 12

    @ProfessorWeb.de – I whole heartedly agree!

    0
  13. 13

    I have one question too: is it mandatory to have one and only one template dressed with several styles or is it possible to have a “template switcher”. Example: Template switcher.

    0
  14. 14

    ProfessorWeb.de — Agreed for a simple blogs these sorts of customizations are just too much. No one coming to your blog is going to change every one of these things. You can’t switch around the page layout of a magazine article – why would you choose to do so on a web article? I think all these options may complicate and clutter what could be a beautiful design. The only thing these types of customizations are good for are for a user to customize their profile pages on community sites, or start pages (like igoogle, netvibes, etc).

    0
  15. 15

    Chris Papadopoulos

    June 5, 2008 8:15 am

    The job of the designer is to choose the optimal way of displaying content.

    Making sites more complicated by having the user have an array of typeface and other options is bad practice in my opinion.

    How about this radical concept?

    * use 1em text size so that your text is by default legible to people

    http://informationrain.com/2008/04/22/text-size-philosophy/

    * use text color that has a high contrast with the background so users can read it just fine without having to choose another option
    * get rid of distracting backgrounds that increase loading times

    PS: When did SM get rid of allowing commenters to post their website url on here? I’ve found many neat sites through the comments here. Seems like not allowing that goes against the spirt of the web.

    0
  16. 16

    All the Peter Sach site does is change backgrounds. 0_o

    0
  17. 17

    http://www.nofrks.com/ is a good site that allows you to switch the style of the web design from “day” to “night”. Very clever and beautiful use of web design.

    0
  18. 18

    I just saw that it has to be placed on a live site, this will probly give me the push that i needed to my new blog design online o.o

    *back to codingboard*

    0
  19. 19

    Pretty basic switch, changes according to the time of day, but counts a ‘theme’ change really. Not too drastic, but a nice change for visitors when they come at different times :)

    0
  20. 20

    Karine Delvare

    June 5, 2008 9:09 am

    My weblog has a style switcher: the style changes itself every month, but you can ask for another month’s style if you wish, in the “Styles” menu on the left, where I added (Smashing Magazine). This is a french website, I hope I am still allowed to participate :)

    0
  21. 21

    Please, you think users care. They don’t want to mess around trying to make your site viewable. You should just create one design with a good balance of aesthetics and usability. The first example is pretty naive, 4 designs which are basically the same with a different background graphics. Seriously…

    A user who can’t see the text isn’t going to be searching for some magic button to make it more accessible they will just leave.

    0
  22. 22

    Vitaly Friedman & Sven Lennartz

    June 5, 2008 10:01 am

    @Mihen: take any web-site and conduct basic usability tests, for instance among senior web users. You’ll quicky find out that they usually prefer high contrast content and large font size which may be hard to combine with “balanced” and “aesthetic” design which would please everybody. Besides, many users simply don’t know how to increase the font size. Giving them an opportunity to do so easily and intuitively doesn’t necessarily mean that you clutter your design. Take a look at the examples above, there are many clean solutions which you ca use to literally improve the user experience of your visitors.

    0
  23. 23

    nice! i wish i had time for this kind of contest.

    0
  24. 24

    I use a styleswitcher for the “preview” feature at my pattern site; DinPattern.

    When the user clicks preview, the tiled pattern paints the page to get a better idea of how it will look before downloading.

    “Smashing Magazine” added in the footer.

    0
  25. 25

    amazing!

    0
  26. 26

    With this article you’re pratically letting an unexperienced user design the site he is viewing. Unexperienced web users make mistakes. You’re practically eliminating the services of WEB AGIENCIES. NOT GOOD !

    0
  27. 27

    Vitaly Friedman & Sven Lennartz

    June 5, 2008 11:30 am

    @stfalx: we are letting designers let inexperienced users adapt a site to their needs. Yes, inexperienced users make mistakes, but not if the designer has taken care of alternative presentations which perfectly consider users’ needs.

    0
  28. 28

    Hello all

    I`ll provide my Site for this Contest.

    My StyleSwitcher is implemented as an ASP.NET ServerControl for easier implementation in exising Project and reusiabilty Reasons.
    This implementation uses a combination of client- and serverside logic to switch and persists the style.
    Both (server and client) uses the same cookie to save the state.
    It works with- oder without Javascript, Javascript is an option here.

    This is because of the behaviour from the GET-Links and the Javascript Code in there.
    (The DropDownList) will only run with Javascript, except there where pushed somewhere a Button that posts to the server.

    Somewhat can implemented with ease also with other serverside architecture like PHP, …..

    http://peterbucher.ch/ (StyleSwitcher)
    http://peterbucher.ch/projekte/styleswitcher.aspx (Implementation in a existing ASP.NET Project and some Infos about)

    Regards, Peter Bucher

    0
  29. 29

    For Completeness:

    I also included a Feature that uses client callbacks where invokes a browser-side download of another stylesheet (Nothing new),
    but the server-part is only sending a part of the whole style – all x seconds (Or another interval) more and more.

    So, you can see how a style slowly appling to your Html, somewhat interessting, i think :-)

    0
  30. 30

    Question… is there a vector file you can give us for incorporating the Smashing logo into our site? ;)

    0
  31. 31

    I heart style switchers. I’ve been a big fan of this since they were at their pick of popularity when they were first introduced years ago. Cool to see Smashing taking up this topic, and a contest will certainly promote it. Thanks.

    0
  32. 32

    My pattern site; DinPattern.com uses a style switcher to display the tiled pattern to the user when the “preview” link is clicked below any pattern.

    It simply changes the body class to display the correct pattern tile.

    DinPattern.com

    I’ve added Smashing Magazine in the footer to verify.

    0
  33. 33

    First of all, thanx Smashing Magazine for all your awesome posts!! much respect!

    Then I don’t feel at ease with this one, and I totally disagree with the debate on design… We (I’m from the profession) are expected to be “designers”, as to say, to create something in a way led by our expertise. The principle of design is to create form, aestethics in order to fulfill a function, an idea, an image, etc…

    I think this style-switcher approach deserves badly our work, and goes straight in the way of sites like;” choose your own logo from customisable templates”…
    >> “pseudo user friendly adaptable code or graphics called …design”…

    Yes, seniors may prefer high contrast and large typefaces, but then a site aimed at seniors should be designed that way, and a site aimed at youngsters should not. Would you ask Diesel Jeans to make smooth velvet pants cause seniors prefer them? Edbanger Records to do smooth loung jazzy beats?

    Then, Netvibes or google startpage are fully customisable BECAUSE it’s the very true purpose of these pages to be like that, so the design fulfills these goals

    form equals function, and function can be a “brand value”

    that’s my opinion :)

    0
  34. 34

    Pedro Assumpção

    June 5, 2008 1:37 pm

    Hi, great contest.
    My blog, Codesignville.com, has 2 styles switchers, one for Text Size and other to change the theme (Day, Afternoon and Night).

    See you there.
    Thanks.
    Pedro.

    0
  35. 35

    Here is my entry: Link [www.fointypinger.co.uk]

    The stylesheet changer is at the top right of the page. I’ve had this on my site for a number of years now, just for a bit of fun more than anything…
    Bonus points for anyone who can recognise the theme(s) ;)

    0
  36. 36

    Any style switcher there that can also change the path of the images – not a background. For example, I have a green.gif image for green style and another blue.gif image for the blue style. Now, if I switch to blue style, is is possible that I can also change the image to blue.gif. Take note that the image is on the xHTML code, not in the CSS because it’s not a background.

    0
  37. 37

    hmmmmmm, wish we have more time for this, anyway I’m in, for my new monitor :)

    0
  38. 38

    I’m definitely getting in on this.

    I just implemented a style switcher in my site for this contest – click the bottom icon (layout icon) in the list of icons, which is near the top left of the page. It adjusts the width of the page – this way it supports 800×600 by default but 1024×768 users and higher can still enjoy it :P

    my site

    0
  39. 39

    Michael Wilson

    June 5, 2008 5:46 pm

    http://www.efolio.me.uk/home.php

    sign in as a test user:

    username mike

    password: mike

    0
  40. 40

    Another question about the policy on the liveness of the site. I have a social type site currently in beta. It is live and deployed on a server, however the only people currently registering on the site are from within the company. If I implement my style switcher here, will it be allowed?

    Thanks,
    Nick

    0
  41. 41

    Just a slight typo, should be “fourth one” instead of “thourth one”

    0
  42. 42

    First of all, people u don’t have to enter this contest. If u don’t like it. Don’t enter. SM isnt forcing u to change your site, its your OWN decision.

    I think this is a great idea to bring a great technique back in to the web. U don’t have to like it.. But since when do u build websites that only u visit? Stop thinking about your self and give the users the option to change the site to thier needs. Your allready using big font? Maby people dont like / hate to read it if u provide them with an option to change it. They will…

    So everbody stop wining and bitching at SM… -_-

    0
  43. 43

    @baz

    I fully agree.

    Changing font size is a browser function, people who need a larger font know they can use the browser to accomplish that.

    Arno

    0
  44. 44

    Great contest!

    We recently completed the new Westin Asia Pacific website with a ‘Mood Selector’ as a primary feature. Users can choose from 4 different moods – personalising the look of the site to feel more ‘Energized’, ‘Empowered’
    and ‘Unconstrained’ as they view each hotel.

    An example can be seen on one of the hotels – The Westin Melbourne

    The link for Smashing Magazine is at the bottom of the Sitemap.

    0
  45. 45

    I just can’t wrap my mind around the idea of style switchers on a page that change the design.. The only instance of this that makes any sense to me is inside of web applications that are meant for daily use.. and when articles allow you to change the text size…

    for the most part style switchers are not something I think most users know how to make good use of. There are almost no conventions regarding this in other media (you can not change the style of your newspapers layout.. you just expect the designer at the newspaper to do a good job…. because he is the expert)

    Sharing information with the public, and letting the public make decisions is good… its web 2.0 after all.. BUT sharing design and usability decisions with the user when its trivial (like a background color) is just a silly waste of everyones time.

    0
  46. 46

    There are no style switchers in other media simply because other media cannot support it! A newspaper style cannot be changed due to the fact that it is…… PAPER!

    That’s the beauty of web – it is a medium which is designed to be interactive, and therefore should engage the user by the most creative means necessary.

    0
  47. 47

    You might forget to include http://schillmania.com/ really cool mood switcher.

    0
  48. 48

    My site pHome.us utilizes this concept to its core. It’s a homepage manager that is customizable through a template system, but I think that isn’t exactly the point of the article.

    Users can, however, set the site’s background gradient to any color they want on their settings page. This is only available once they are registered, but is sort of more along the lines of the techniques discussed in the article. Not sure if it counts, but I wanted to share nonetheless.

    (Proof.)

    (My apologies if this was sent more than once. I keep getting timed out when I submit it.)

    0
  49. 49

    Agree with the two previous posters – a bespoke text size adjuster is totally redundant. Any new web user with poor vision quickly learns that the browser allows for text size increases, and the idea of having to learn to look for a text adjuster that could be in any one of a myriad of forms is counter-accessible.

    As for changing the style of a page – I can see the point of this if you are measuring the results and implementing a new style based on the popularity / feedback. If it just to supply alternative versions and the site is not an application / start page then it seems like the worst kind of designer self-indulgence since the dreaded flash intro – ‘we’re doing it because we can’. It might impress fellow developers but does it add any value to your site?

    Re the point of style switchers in other media – actually some of the british broadsheet newspapers offered differing versions for sale when they were migrating from broadsheet format to tabloid or berliner.

    Can’t believe there is no mention of CSS zen garden, surely the grandaddy of style switchers?

    0
  50. 50

    Now-Streaming (I put the smashing magazine text in the forums)

    0
  51. 51

    Accessites uses a font switcher too.

    0
  52. 52

    I’m sure it’s been done before, but last year I incorporated a weather-based style switcher into my personal website:

    Chris.Taulb.org

    0
  53. 53

    I’ve already used this technique for my other competition website, but it is hosted on another server. Maybe I’ll change the website a little and host it on a server that I can reach to meet the rules :)

    Hope my website can somewhat be rewarded :D

    0
  54. 54

    Wow, Great Prize!
    I may enter this one if I can find the time.

    Jason
    Designerbay.com
    Designerbay.com

    0
  55. 55

    deam0n – code900.net [ http://code900.net/index.php ]

    I put the smashing magazine text in “За този сайт” box.

    0
  56. 56

    The best use is for those cases where there isn’t a specific media available through CSS (print, screen, projector etc.) The most obvious one is for people who are visually impaired in some way (perhaps due to the ageing process). Larger text sizes, higher contrast, less columns would predominate – although websites should be aiming for these things anyway. Is the prize being judged on pretiness or accessibility?

    0
  57. 57

    Great contest… Looking forward to seeing some entries!

    0
  58. 58

    Link [http://www.thecardpac.com/]

    the style switcher is in the get a grip section

    I put the smashing text in the copyright info on the bottom

    0
  59. 59

    Mike the pcrobot

    June 6, 2008 7:59 am

    Good luck to all of the contestants!

    0
  60. 60

    Switch Styling content and printing mode also :

    0
  61. 61

    -=]RELAX[=- (Qing Sheng)

    June 6, 2008 11:09 pm

    TQ Toolkit
    http://www.dhs.sg:8080/sites/tq/2007/tqtoolkit/
    An educational website for students.

    The site features 6 different skins to suit your preference. The javascript-powered style switcher can be found in toolbox’s Skin Chooser. Enjoy!

    0
  62. 62

    My 10cents here:

    I’ve been to some of your sites, and when i click to switch a style, it seems like the whole page refreshes again. I think this isn’t supposed to happen. Style-switching should only reload the CSS style sheet, without a refresh in the content.

    Also there was one comment that javascript style switcher is limited. Not really, it’s how you build the site that matters. I can completely change the design by targeting the background image of elements and their positioning.

    Cheers!

    0
  63. 63

    Spaksu Blog – This is my blog and style switcher..

    0
  64. 64

    Vitaly Friedman & Sven Lennartz

    June 7, 2008 1:19 am

    @Leon P: the winner will be chosen randomly.

    0
  65. 65

    Hi,

    i my styleswitcher, switches the whole style and theme of my site… im very proud of every theme…
    And so its my favorite entry for this contest, hope u like it too…

    [url=http://blog.gnomdesign.de/]Gnomblog Switch Contestentry[/url]

    The plaintext is in the linksection.

    0
  66. 66

    Could someone fix the link? I cant edit it :)

    0
  67. 67

    Link – My portfolio website uses a form of style switcher. (FF1.5+, Safari 3+ or IE6+)

    0
  68. 68

    Let the user design our website :)

    0
  69. 69

    Check my style switchers :-)
    Ganato.com
    Thanks!

    0
  70. 70

    Can’t say I am a fan of these sorts of website but to each there own. I don’t mean to sound picky but the 400:1 contrast ratio on the prize monitor is a killer…ouch.

    0
  71. 71

    This is lame. Users don’t give a crap about changing the text layout of a site. This is all just for developers because it won’t get used at all by any end users.

    lame

    0
  72. 72

    We have added one to one of our sites – lys.org.uk

    Smashing text can be viewed at the bottom of lys.org.uk/help/index.asp

    0
  73. 73

    Check my entry for contest:

    MaikelNeris

    0
  74. 74

    Hey everyone… my entry is here.
    Alex’s Entry

    @smashing: i added a link back in my footer to Smashing Magazine.. the text is in there.

    0
  75. 75

    My Entry:Alex’s Entry

    I implemented it slightly differently. The CSS is attached using JS (IF and only IF their browser supports Js). Also, due to a couple of problems with earlier IE’s i don’t use on the fly switching for font size in those IE versions.

    @smashing: i added a link back in my footer to Smashing Magazine.. the text is in there.

    0
  76. 76
  77. 77

    I added a Smashing Magazine Rip off theme to my site haha. Don’t sue me please :) It’s on the homepage only. My site now has a low visibility version thanks to this contest. Something I have been meaning to do for a few weeks now.

    http://visual28.com

    0
  78. 78

    Vitaly Friedman & Sven Lennartz

    June 9, 2008 12:00 am

    @yuri
    nice work. but as laid out before we only accept style switcher on live sites. no test pages oder specials.

    0
  79. 79

    First of all thanks for having mentioned my site
    Diego Valobra in this post (brought me alot visits),
    i added smashingmagazine in the footer,

    Ciao

    Diego

    0
  80. 80

    First of all thanks for having mentioned my site
    Diego Valobra in this post (brought me alot visits),
    i added smashingmagazine in the footer,

    Ciao

    Diego

    0
  81. 81

    i forgot the link ,sorry :)
    Diego Valobra
    Diego

    0
  82. 82

    Here is mine:
    link [cnowdesigns.com]

    0
  83. 83

    And here’s mine:
    90seven.com
    The content’s pretty out of date now, but wanted to demonstrate the possibilities of having completely different layouts, not just different colors to potential clients as one of the advantages of CSS.

    0
  84. 84

    Count me in!

    due chiacchiere

    Actually, I don’t agree with who said that this level of customization is “too much” for a blog. The website I’m enrolling in this contest is a personal weblog. People with disabilities have the right to browse my blog just like every “normal” visitor. I don’t think all these options may complicate and clutter what could be a beautiful design, because you can do both a nice and simple design, and include some level of customization at the same time.

    0
  85. 85

    Here’s my link, I used the JavaScript file found on the second link through DesignShack
    Link>

    Smashing Magazine is on the footer of the index page, let me know if you want it on all footers. Switcher is in top right corner to change colors.

    0
  86. 86

    Here is one:
    Link

    0
  87. 87
  88. 88

    I think I will put this to good use. Thanks.

    0
  89. 89

    Link [chimou.com]
    thanks! :)

    0
  90. 90

    Here is one header style switcher that we did for a small bookstore – you can change colour of the illustration under the moto “colour your world (oboji svoj svijet)”

    0
  91. 91

    my style switcher:
    http://www.anni80.info
    it changes bgcolor/image, footer color/image, and other minor stuff in the pages.

    0
  92. 92

    @Smashing Magazine: do you check also if the switcher is working with javascript disabled? Because my script is designed to work with or without javascript :P

    0
  93. 93

    @Smashing Magazine: do you check also if the switcher is working with javascript disabled? Because my script is designed to work without javascript :P But many of these links are not.

    0
  94. 94

    Vitaly Friedman & Sven Lennartz

    June 10, 2008 4:26 am

    @camu: the winner will be chosen randomly, but we’ll definitely will take a close look at all style switchers.

    0
  95. 95

    I am part of those who believe that you have to design for the visitors 1st, and am therefore not convinced that EVERY and each one of these examples are first to serve the visitors but to rank a notch higher in the geek hall-of-fame… One basic rule of accessibility is that you shouldn’t try to emulate with your page a functionality that the browser does best (like text re-sizing for expl.) Furthermore, people who REALLY need (and use) this functionality know exactly where to go and how to do it, they were not waiting for your site … unless your site is really badly designed (text too small etc.).

    0
  96. 96

    Jonathan Concepcion

    June 10, 2008 5:31 am

    Link to my Web Gallery Plus Plus is my website has also style switcher. I hope I can win this promo. Because my using Celeron 850 MHZ :(

    0
  97. 97

    My site has a style switcher that isn’t user activated but changes depending on the position of the sun. It calculates Sunset and the diffrent twilight zones minute accurate and changes the style of the website accordingly. You can change the style by waiting a long time or adjusting the time of you PC :P. Don’t know if this counts as an actual Style Switcher :P, but i thought, can’t hurt to give it a try.

    Probably user friendly aswell. It prevents user from having to look at overly bright white screens at night and overly dark screens at day time.

    link

    0
  98. 98

    Since the winner is chosen randomly, I’m not going to enter.

    Still, if anyone is interested, I have a rather unusual style switcher on my badminton site — a useful one, no less! It adjusts the content of some pages, depending on skill level and handedness.

    A good example is on this page: . Switch to the intermediate skill level and some of the more advanced coaching is hidden; switch to the left-handed view, and all the photos flip.

    0
  99. 99

    My site uses an interactive stylesheet switcher, found at the bottom of each page. Right now it lets you choose from 4 completely different themes.

    You can see the site at: http://www.theloop.org.uk

    0
  100. 100

    What about screen size switchers? As the browser window becomes larger or smaller the layout changes to accommodate more or less horizontal space. From 3 column down to 1 and so on. No buttons or choices, most users never know. Would that count for this contest?

    0
  101. 101

    Let me say again, nice contest and great iniciative.

    So… my blog is actually wordpress powered, and it was a little dificult to implement the theme switcher without direct requests to the server via GET/POST, so, i’ve worked in 2 different stylesheets with a completly diferent grafical layout, changed by php session arguments.

    The Theme Switcher is on top-left over the logo banner, take a look!

    Thanks for the inspiration Smashing Magazine, actually the BLUE version is better than the default one (RED).

    The link is Here.

    Thanks for the oportunity to participate!
    Good luck to everyone!

    Best regards.
    Mário Santos.

    0
  102. 102

    R.J.

    That website has an extremely good style switcher! I was just thinking about that the other day. Looks like you use JavaScript to calculate the users date and time. Very handy, I want to do some research and figure out what all you did.

    0
  103. 103

    I built http://www.freeneedle.com for the wife and despite my fears that her chosen orange colour scheme might be a little rich on the retina, she insisted on orange.

    A week after launching she got an email congratulating her on the site but saying the colour scheme was too bright. I was then told to immediately change the colour scheme to something less bright, so in a childish fit of pique, I added a simple colour switcher to avoid her coming back a week later for something more bright.

    Women! Can’t live with ‘em, can’t kill ‘em! ‘Smashing Magazine’ text in ‘About Us’ page footer.

    0
  104. 104

    I did a design reboot of my personnal website a year ago, asking me more than 18 monthes of work.
    I wanted some switches for the visitor. So i did a black tooolbar in the upper screen of my page :
    – sizeable text (“dézoomer” and “zoomer”)
    -background lighteable (“éclairer”)
    – unactivable fancy animations (“sans anim” and “déplier”)
    Choices are stored by cookies, can be erased (“RAZ”), and are NOT displayed if javascript is not activated (since it can’t work without it). In fact, personnal styles are applied after loading, so pages may “move” after display.

    And sorry, text is in french.

    0
  105. 105

    I just did a redesign of my personal homepage and as I was reading your article about the style switcher I had the idea to make one for my homepage too. As everything is in a space theme, you can switch the styles while choosing a planet (find it on top of the right column).
    Link [olidax.com]

    0
  106. 106

    Great idea, and with the excellent wordpress theme by Jai Nischal Verma I created:

    Taijiquan & Daoyin

    which has a styleswitcher based on the Chinese Five Elements theory.

    0
  107. 107

    Here is mine Link

    Outline rules!

    0
  108. 108

    just curious, why will the winners be chosen at random?

    0
  109. 109

    My site for the competition is: http://www.vmp-finanz.de.

    I have put the “Smashing Magazine” text in the footer of the first page.
    For this client I’ve implemented a font size switcher.

    All the best from Salzburg, Austria

    0
  110. 110

    great great article!

    and the design in http://www.ps-designstudio.de/ is one of the most beautiful i ever saw!

    i supose is not free…aint it?

    0
  111. 111

    Looks like fun … I love all these style switchers that everyone has made.

    Link [www.jimmyweb.net]

    0
  112. 112

    http://photoblog.flanisoft.at/index.php?x=smashing

    I put “smashing magazine” into several locations – not hard to find :)

    0
  113. 113

    Added my site to your contest. It’s great to give visitors different ways to view your site. Mine allows user to change overall color theme of site. http://www.2ndzenith.com Good luck to all.

    0
  114. 114

    Florian Pichler

    June 13, 2008 8:59 am

    I coded a totally custom styleswitcher for http://iamblog.de/ (only for FF/Safari for now)
    Previews, backgrounds and the switcher itself are loaded with ajax, the list of available backgrounds is generated dynamically so every writer of the blog can easily add their own background.

    Hit the button “Hintergrund ändern” in the upper left of the page to open up the styleswitcher and choose a background you like.

    0
  115. 115

    I’ve set up multiple themes on my site that the visitors can switch between: Ledger Pad.

    0
  116. 116

    Another great contest!

    My site / style switcher: Link
    http://minimal.ca

    0
  117. 117

    This was fun! Link [sitesquared.com]

    0
  118. 118

    @SchattenMann: do you really think that design is one of the best around? It is not even tableless, come on…

    0
  119. 119

    Hi everyone!
    How about a site that has fifty style sheets to choose from?

    Thank you Smashing Magazine for the motivation compelling me to get busy and create a template page with the design idea I’ve had in my head for a short time.
    I wanted to allow my webdesign clients to see lots of colour schemes and layouts.

    I hope you like the result, I had lots of fun creating it!
    My LInk

    0
  120. 120

    Hi,
    this is my site for the contest, I hope you like it.
    RHcreativity.de

    Greetz, great site, great content.

    0
  121. 121

    Finally!

    Here is my site with style switchers:
    http://www.luciavega-design.com

    THanks Smashing Magazine!

    0
  122. 122

    that doesnt mean the design is not good to your eyes…i think is very very preaty

    0
  123. 123

    Here’s my entry.

    http://www.websitesforaccountants.net/

    OK, it may not be the most innovative or funky website or style switcher around, but it’s my own, built with my own little hands and I am very proud of it ;). You can change the width of the website to fit an 800 by 600 screen or 1024 by 768. I also have a font-increase functionality that also change the size of the home and print icons on the side.

    0
  124. 124

    I totally forgot that my out-dated, old online blog uses a style switcher when the page refreshes. There are 4 separate styles that change colors, links (background images), and other elements on the pages. It’s a bit jarring to go from page to page, but that was completely intended.

    The site is http://www.viatrax.net

    Smashing Magazine is at the very bottom.

    0
  125. 125

    I’ve added a style switcher to my blog. Just have a look! I like it very much.
    Now you’re able to change the position of the sun between daylight and sunset. after this contest my site will get 4 styles: sunrise, day, sunset, night and change them automatically. I’ve kept this in mind fo a long time, but after your post I thought: “okay. you have to do this NOW” :D

    I hope you like it.
    http://www.kulturbanause.de

    ah .. you will find the smashing magazine “info” inside my header (code). But there’s a link to you in my portfolio sidebar. It’s always there ;)

    0
  126. 126

    I have often wondered how to switch styles. It seemed like it would be complex, and time consuming. Now that I see it can done with CSS I might just give it a try on my next site.

    Thanks for this

    0
  127. 127

    Thomas J Bradley

    June 18, 2008 6:37 am

    The style switcher on my website is controlled by the flash banner at the top of the page.
    When you click on the pink star you will be presented with a slider to glide through the different styles for the site.

    Each of the styles correspond to a time of day, and are displayed during that time period. But I wanted to have a fun hidden aspect so I provided this easter egg to slide through all the time periods / styles.

    Check it out

    Thanks Smashing Magazine!

    0
  128. 128

    Here is my entry.

    This is my new online resume website, it has a simple switcher for changing the background image. It’s all done with Mootools 1.2 Beta 2.

    http://gbot.info

    Thanks.

    0
  129. 129

    Hello. Another entry here.

    http://www.smallstone.com/home.php

    Smashing Magazine at the very bottom.

    Thank you.

    0
  130. 130

    We’ve been having a play with this today and have uploaded the fruits of our labours for entry :)

    http://www.engageinteractive.co.uk/

    Change the theme via the button in the top right – 4 to choose from. Each one changes the site holder and also a few bits in the portfolio. Smashing mag text in the footer.

    Hope you like it!

    Alex

    0
  131. 131

    My entry is Spaksu Blog

    Thank you SM

    0
  132. 132

    My portfolio of website design, pure structure is my entry.

    0
  133. 133

    The full design is not ready yet.. but i think the switcher is more important in that contest ;) You’ll see Smashing text on the bottom of the page when you click on /root.. ;)

    Link

    0
  134. 134

    Here is my entry. I had to rush this one. I wasn’t planning on going live for another month. Smashing is in the footer.

    Link

    0
  135. 135

    My site has a style switcher that changes depending on the time of day.
    The user can also pick their desired style if they prefer.
    http://www.leemunroe.com

    0
  136. 136

    Here is my website entry. I used PHP sessions to easily make a “low vision mode” for users with bad eyesight. The alternate stylesheet has increased font sizes. The text “Smashing Magazine” is at the very bottom of the page. Thank you!

    0
  137. 137

    Hi there,

    Another entry here.

    Link [www.quilor.com]

    I love Smashing Magazine at the bottom.

    Thank you and good luck everyone!

    0
  138. 138

    This styleswitcher is very clean – just changes the main color. I love the clean style :-)
    Additionaly I build in a resizer, which not only scales the font size but the whole site because it’s all based on ems.

    Link

    smashinmagazine is in the bottom left

    Best regards, nicole

    0
  139. 139

    It just so happens that I was already planning a color-switcher for my personal site. It’s very minimalistic but uses transparent png.s and background-color to save on loading different logos for each selected color: Link

    0
  140. 140

    The style switcher is in the navigation on the home page and the Smashing Magazine is on the articles page.lukelarsen.com

    The style gets picked randomly and gets put in a cookie. The cookie gets deleted after an hour so when the user comes back the look is different. The Smashing Magazine is in the bottom right. beta.gradefix.com

    I submitted earlier but it was on a wifi connection and really slow so I just wanted to make sure it went through.

    0
  141. 141

    The style switcher is in the navigation on the home page and the Smashing Magazine is on the articles page.lukelarsen.com

    The style gets picked randomly and gets put in a cookie. The cookie gets deleted after an hour so when the user comes back the look is different. The Smashing Magazine is in the bottom right. beta.gradefix.com

    I submitted earlier but it was on a wifi connection and really slow so I just wanted to make sure it went through.

    Comment entered for Luke Larsen

    0
  142. 142

    Ok, this bad-boy was made exclusively for Smashing Magazine using transparent PNGs and jQuery. Check out the all-powerful Foliage-O-Meter!

    http://www.komodomedia.com/

    Look for it on the right sidebar above the text “Smashing Magazine” and enjoy.

    P.S. Break out the machetes.

    0
  143. 143

    Vitaly Friedman & Sven Lennartz

    June 19, 2008 11:25 pm

    Comments are closed now. Thank you for participation. We’ll publish the results next week.

    0

↑ Back to top