Style Switchers Contest Results

Advertisement

Three weeks ago we have announced the Style Switchers Design Contest1 where we’ve presented some ideas for style switchers design and encouraged our readers to create a style switcher for their own web-sites. One of the participants was to be awarded with an Apple Cinema 20 Flat Panel Display. Over 60 designers participated and — as in all of our earlier contests — the results are indeed pretty smashing. Now it’s time to review some of the best designs and, of course, announce the winner.

This contest has proved one thing: there are a number of possibilities for creative use of style switchers in your designs. They don’t have to be boring and can combine functionality with a beautiful and engaging design. Style switchers are back now; and we are glad that so many designers have participated in our contest learning how to use them and apply them to their designs.

Apple2

The winner of the contest is Florian Pichler, the designer of the iamBlog3‘s style switcher. Congratulations, Florian, we are happy to smash you with an Apple Cinema 20 Flat Panel Display! We’ll contact you via e-mail over the next 24 hours.

And now let’s take a look at 60 excellent examples of style switcher designs created by the participants of our contest. Please notice that only those designers have participated in the contest who followed exactly the rules we’ve published in our announcement post.

Iamblog

Iamblog.de4 has put a lot of effort in designing an advanced style switcher. Hit the button “Hintergrund ändern” in the upper left of the page to open up the styleswitcher and choose a background you like. 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. Currently 10 different styles are available. The Ajaxified style-switcher can be dragged across the site layout.

Screenshot5

Screenshot6

Screenshot7

Komodo Media

Sometimes style switchers can also be extremely creative. Rogie King8 has designed a sliding foliage-o-meter. Visitors can select the intensity of the foliage in the design (from sparse to dense). The leaves appear not only in the header, but also in navigation options, bullets and headings. Beautiful design, excellent style switcher.

Screenshot9

Screenshot10

pure structure

Nigel O Toole11 offers an advanced and dynamic style switcher. At one, the presentation of items in Nigel’s portfolio can be adapted to user’s needs. Apart from that the background image of the site can be changed as well. The style switcher itself has two levels: the first level takes care of the structure. To access the second level you need to click on the visual at the right.

Screenshot12

Screenshot13

Screenshot14

Engage

On Engage interactive15 you can change the theme via the button in the top right — there are 4 to choose from. All themes are completely different. Each one changes the site holder and also a few bits in the portfolio. Graphics are replaced as well.

Screenshot16

Screenshot17

Screenshot18

Gnomdesign

Gnomdesign19 has three themes with different background images and blog headers.

Screenshot20

Screenshot21

Screenshot22

Schillmania

Schillmania23 has an advanced mood switcher: visitors can adjust the brightness of the displayed header image and add a snow effect

Screenshot24

Screenshot25

Screenshot26

Small Stone

Smallstone27 allows its visitors to “swap out the shelf” — exchange the header, visuals and links. The style switcher is placed right under the header and is also designed in a unique and professional way.

Screenshot28

Screenshot29

Screenshot30

Kulturbanause

Kulturbanause31 has a quite unusual blog design with two artistic themes — Daylight and Sunset. As the designer says, you can “play god” with the themes. The style switcher is placed in the sidebar. When the theme is switched both graphics and visuals are changed.

Screenshot32

Screenshot33

Screenshot34

Nofrks

Nofrks35 has a day and a night style. In both cases only background image is replaced.

Screenshot36

Screenshot37

Luke Larsen

Luke Larsen38 allows visitors to switch between the blue sky view and the goldfish tank view. The site layout is quite wide: when the style is switched, a number of design elements such as background and used images change as well. In the blue sky view dove is used, in the fish tank view a golden fish. The style switcher is placed in the navigation at the top of the page. The site didn’t have the text “Smashing Magazine” which is why it hasn’t been considered when selecting the winner.

Screenshot39

Screenshot40

Planatopija

Planetopija41 enables users to change the color of the header illustration. The style switcher itself is nicely designed (see the image below, the switcher is hidden behind “colour your world, oboji svoj svijet“).

Screenshot42

Screenshot43

Screenshot44

Westin Melbourne Hotel

Westin Melbourne Hotel45 has an advanced mood switcher: visitors can adjust the brightness of the displayed header image and add a snow effect

Screenshot46

Screenshot47

Screenshot48

Olidax

Since Olidax49 has a space theme, it allows its visitors to change the theme using a, well, space switcher. You can switch the styles while choosing a planet (you can find it on top of the right column). Earth, Saturn and Mars themes are currently available.

Screenshot50

Screenshot51

Screenshot52

Lee Munroe

Lee Munroe53 has a style switcher that changes depending on the time of day. Visitors can also pick their desired style if they prefer. The style switcher is placed at the upper right corner of the content area. The shadows in the footer change with the changed theme as well.

Screenshot54

Screenshot55

Screenshot56

Sam Gerdt

Sam Gerdt57 allows visitors to select one of three background patterns for the header. The styleswitcher appears when the button at the right upper corner is clicked.

Screenshot58

Screenshot59

Screenshot60

Diego Valobra

Diego Valobra61 has two different antique designs. The background image is replaced. The style switcher is placed in the right bar of the layout.

Screenshot62

Screenshot63

Screenshot64

Maikel Neris

Maikel Neris65 replaces background images: the style switcher provides visitors with an access to three blog themes.

Screenshot66

Screenshot67

Screenshot68

John Scott

John Scott69 has a style switcher with 4 available skins. In each case the background image and the header are changed.

Screenshot70

Screenshot71

Screenshot72

Thomas J Bradley

Thomas J. Bradley73 has a style switcher which 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. As designer says, he wanted to have a fun hidden aspect so he provided this easter egg to slide through all the time periods / styles. 5 styles are available. However, the style switcher is not really easy to find.

Screenshot74

GBot

Gbot75 has four different background images: earth, paper, tree and sky. Created using Mootools 1.2 Beta 2. The style switcher is placed in the footer of the layout.

Screenshot76

Screenshot77

Screenshot78

Sitesquared

Sitesquared79 with a day- and night-theme of the design. The designers of the site love Smashing Magazine, we love your designs too!

Screenshot80

Screenshot81

Further solutions

Pegd82‘s style switcher is very minimalistic; it uses transparent png’s and background-color to save on loading different logos for each selected color. When the style is changed logo color and link color are changed. The style switcher is placed in the sidebar and is represented by colorful rectangles.

Screenshot83

Peter Bucher84 has five style sheets, a styleshow which automatically changes the style and a font-size switcher. The style switcher itself is quite wide.

Screenshot85

Timbix Media86 uses three color variations as well as a font size switcher in the left sidebar. Since the layout is elastic, not only text size is increased, but the layout increases as well.

Screenshot87

Roy Quilor88 allows his visitors to switch from default text style to Serif fonts and to a “creme colour” design.

Screenshot89

This switcher allows its visitors to change the width of the layout to fit an 800×600 or 1024×768 screen. It also has a font-increase functionality that also changes the size of the home and print icons on the side. The style switcher is placed in the sidebar. The icons are simple and easy to understand.

Screenshot90

Viatrax91 has an automatic style switcher. The user can’t do anything here; instead WordPress loads a random style automatically when the page is loaded.

Screenshot92

Lucia Vega93 has four color styles for his headers and the layout.

Screenshot94

Minimal.ca95 present three versions for your best color contrast. The style switcher is placed in the sidebar.

Screenshot96

Ledger pad97 has a sticky style switcher which has a fixed position at the right corner at the bottom of the page and remains there even when the page is being scrolled. Blue and black-white-styles are available.

Screenshot98

On 2ndzenith.com99 three style themes re hidden behind the “Customize” button. When the button is clicked, the theme picker is sliding. With a changed style links, background and text colors are changed.

Screenshot100

Flanisoft101 can switch between a dark and a light background.

Screenshot102

Jimmyweb103 offers some color variations of the layout color and link colors.

Screenshot104

VMP-Finanz105 offers a basic font-size style switcher in the sidebar.

Screenshot106

Weiqi.nl107 with a dynamic style switcher which offers 5 different themes. When the theme is changed, links, header and background image are replaced.

Screenshot108

Da Scritch109 has a black toolbar in the header of the page with font-size switcher (”dézoomer” and “zoomer”) and dark/light-switcher (”éclairer”). The visitors can also activate/deactivate fancy animations (”sans anim” and “déplier”).

Screenshot110

Freeneedle111 offers 7 color variations for the site design, background images and link colors.

Screenshot112

MSDevstudio113 offers 3 different stylesheets with a dfiferent color variations of the layout.

Screenshot114

Color and background variations

Ganato Design

Screenshot115

Spaksu

Screenshot116

Firex-bg

Screenshot117

Cnow Designs

Screenshot118

deam0n

Screenshot119

Chris Taulborg

Chris Taulborg120 has a weather-based style switcher — there are a clear, cloudy, snowy, stormy and night themes available.

Screenshot121

Visual 28

Visual28122 goes smashing. The site offers a Smashing-style design layout as alternative style.

Screenshot123

rex

rex124 offers 5 themes — color and design variations — with font-size-switchers.

Screenshot125

Screenshot126

Liverpool Youth Service

Liverpool Youth Service127 with a text size switcher, high contrast version, text only version and a reset button.

Screenshot128

Chimou

Screenshot129

Ryan Harris

Ryan Harris’s styleswitcher is a little bit too complex: to activate the theme switcher users need to click on “change background” link: after that the theme of the design can be selected.

Screenshot

Salt Solutions

Screenshot130

Web Gallery Plus

Screenshot131

Anni 80

Screenshot132

90seven Design

90Seven133 offers its visitors two different designs.

Screenshot134

Card Pac

Card Pac135 with a style switcher placed right in the content. Such style switcher is hard to find and hard to use as the color is selected via a not-so-user-friendly pop-up.

Screenshot136

Now-Streaming

now-streaming137 with a tiny four colours-box under the logo — each of the colors stands for the corresponding design layout.

Screenshot138

Hans Engel

Hans Engel139 has a tiny icon that allows users to expand the layout. The style switcher is placed at the top left corner of the layout.

Screenshot140

Codesignville

Codesignville141 has 2 styles switchers, one for Text Size and other to change the theme (Day, Afternoon and Night).

Screenshot142

due chiacchiere

due chiacchiere143 has a style switcher aimed at accessibility. Visitors can increase/decrease the font size, text alignment, layout and remove/add details.

Screenshot144

Your site is valid

Your site is valid145 can switch from a dark layout to a light one.

Screenshot146

Your Web Pro Template Gallery

How about a site that has fifty style sheets to choose from? YourWebPro147 offers 50 color schemes (authoritative, dependable, enchanting, energetic and unique) — the changes affect both the layout and the color of the links. Hint: energetic color schemes not only look energetic. Don’t try this at home.

Screenshot148

Yuyu

A tiny layout switcher on Yutheme.cn149 changes the position of sidebar in the layout. The style switcher may be hard to find, though.

Screenshot150

DinPattern

DinPattern151 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.

Screenshot152

We express sincere gratitude to all participants for a number of creative, beautiful and truly smashing style switchers. We hope to see you next time!

Footnotes

  1. 1 http://www.smashingmagazine.com/2008/06/05/style-switchers-are-back-ideas-examples-and-a-contest/
  2. 2 http://www.smashingmagazine.com/images/styleswitcher/apple.jpg
  3. 3 http://iamblog.de/
  4. 4 http://iamblog.de/
  5. 5 http://iamblog.de/
  6. 6 http://iamblog.de/
  7. 7 http://iamblog.de/
  8. 8 http://www.komodomedia.com/
  9. 9 http://www.komodomedia.com/
  10. 10 http://www.komodomedia.com/
  11. 11 http://www.purestructure.com/
  12. 12 http://www.purestructure.com/
  13. 13 http://www.purestructure.com/
  14. 14 http://www.purestructure.com/
  15. 15 http://www.engageinteractive.co.uk/
  16. 16 http://www.engageinteractive.co.uk/
  17. 17 http://www.engageinteractive.co.uk/
  18. 18 http://www.engageinteractive.co.uk/
  19. 19 http://blog.gnomdesign.de
  20. 20 http://blog.gnomdesign.de
  21. 21 http://blog.gnomdesign.de
  22. 22 http://blog.gnomdesign.de
  23. 23 http://www.schillmania.com
  24. 24 http://www.schillmania.com
  25. 25 http://www.schillmania.com
  26. 26 http://www.schillmania.com
  27. 27 http://www.smallstone.com
  28. 28 http://www.smallstone.com
  29. 29 http://www.smallstone.com
  30. 30 http://www.smallstone.com
  31. 31 http://www.kulturbanause.de/
  32. 32 http://www.kulturbanause.de/
  33. 33 http://www.kulturbanause.de/
  34. 34 http://www.kulturbanause.de/
  35. 35 http://www.nofrks.com/
  36. 36 http://www.nofrks.com/
  37. 37 http://www.nofrks.com/
  38. 38 http://lukelarsen.com/
  39. 39 http://lukelarsen.com/
  40. 40 http://lukelarsen.com/
  41. 41 http://www.planetopija.hr/
  42. 42 http://www.planetopija.hr/
  43. 43 http://www.planetopija.hr/
  44. 44 http://www.planetopija.hr/
  45. 45 http://www.westin.com.au/melbourne/
  46. 46 http://www.westin.com.au/melbourne/
  47. 47 http://www.westin.com.au/melbourne/
  48. 48 http://www.westin.com.au/melbourne/
  49. 49 http://www.olidax.com
  50. 50 http://www.olidax.com
  51. 51 http://www.olidax.com
  52. 52 http://www.olidax.com
  53. 53 http://www.leemunroe.com/
  54. 54 http://www.leemunroe.com/
  55. 55 http://www.leemunroe.com/
  56. 56 http://www.leemunroe.com/
  57. 57 http://samgerdt.com
  58. 58 http://samgerdt.com
  59. 59 http://samgerdt.com/
  60. 60 http://samgerdt.com
  61. 61 http://www.diegovalobra.com/
  62. 62 http://www.diegovalobra.com/
  63. 63 http://www.diegovalobra.com/
  64. 64 http://www.diegovalobra.com/
  65. 65 http://www.maikelneris.com.br/
  66. 66 http://www.maikelneris.com.br/
  67. 67 http://www.maikelneris.com.br/
  68. 68 http://www.maikelneris.com.br/
  69. 69 http://www.johnscott.se/
  70. 70 http://www.johnscott.se/
  71. 71 http://www.johnscott.se/
  72. 72 http://www.johnscott.se/
  73. 73 http://thomasjbradley.ca/
  74. 74 http://thomasjbradley.ca/
  75. 75 http://gbot.info/
  76. 76 http://gbot.info/
  77. 77 http://gbot.info/
  78. 78 http://gbot.info/
  79. 79 http://sitesquared.com/
  80. 80 http://sitesquared.com/
  81. 81 http://sitesquared.com/
  82. 82 http://pegd.org/
  83. 83 http://pegd.org/
  84. 84 http://peterbucher.ch/
  85. 85 http://peterbucher.ch/
  86. 86 http://www.timbixmedia.de/
  87. 87 http://www.timbixmedia.de/
  88. 88 http://www.quilor.com/
  89. 89 http://www.quilor.com/
  90. 90 http://www.websitesforaccountants.net/choosing_web_designer.php
  91. 91 http://www.viatrax.net/index.php
  92. 92 http://www.viatrax.net/index.php
  93. 93 http://www.luciavega-design.com/
  94. 94 http://www.luciavega-design.com/
  95. 95 http://minimal.ca/
  96. 96 http://minimal.ca/
  97. 97 http://ledgerpad.ath.cx
  98. 98 http://ledgerpad.ath.cx
  99. 99 http://www.2ndzenith.com/
  100. 100 http://www.2ndzenith.com/
  101. 101 http://photoblog.flanisoft.at
  102. 102 http://photoblog.flanisoft.at
  103. 103 http://www.jimmyweb.net/
  104. 104 http://www.jimmyweb.net/
  105. 105 http://www.vmp-finanz.de/
  106. 106 http://www.vmp-finanz.de/
  107. 107 http://www.weiqi.nl/blog/
  108. 108 http://www.weiqi.nl/blog/
  109. 109 http://dascritch.net/
  110. 110 http://dascritch.net/
  111. 111 http://www.freeneedle.com/
  112. 112 http://www.freeneedle.com/
  113. 113 http://msdevstudio.com/blog/
  114. 114 http://msdevstudio.com/blog/
  115. 115 http://www.ganato.com/
  116. 116 http://www.spaksu.com/
  117. 117 http://www.firex-bg.com/new/
  118. 118 http://www.cnowdesigns.com/
  119. 119 http://code900.net
  120. 120 http://chris.taulb.org/
  121. 121 http://chris.taulb.org/
  122. 122 http://visual28.com/
  123. 123 http://visual28.com/
  124. 124 http://soyrex.com/
  125. 125 http://soyrex.com/
  126. 126 http://soyrex.com/
  127. 127 http://lys.org.uk
  128. 128 http://lys.org.uk
  129. 129 http://chimou.com/
  130. 130 http://www.saltsolutions.com/
  131. 131 http://webgalleryplusplus.com/
  132. 132 http://www.anni80.info/
  133. 133 http://90seven.com/
  134. 134 http://90seven.com/
  135. 135 http://www.thecardpac.com/
  136. 136 http://www.thecardpac.com/
  137. 137 http://www.now-streaming.com/default.aspx
  138. 138 http://www.now-streaming.com/default.aspx
  139. 139 http://engel.uk.to/
  140. 140 http://engel.uk.to/
  141. 141 http://www.codesignville.com/
  142. 142 http://www.codesignville.com/
  143. 143 http://www.duechiacchiere.it/
  144. 144 http://www.duechiacchiere.it/
  145. 145 http://www.yoursiteisvalid.com/
  146. 146 http://www.yoursiteisvalid.com/
  147. 147 http://www.yourwebpro.com.au/templates/
  148. 148 http://www.yourwebpro.com.au/templates/
  149. 149 http://www.yutheme.cn/website/
  150. 150 http://www.yutheme.cn/website/
  151. 151 http://www.dinpattern.com/index.php
  152. 152 http://www.dinpattern.com/index.php

↑ 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

Note: Our rating-system has caused errors, so it's disabled at the moment. It will be back the moment the problem has been resolved. We're very sorry. Happy Holidays!

  1. 1

    congrats to iamblog!

  2. 2

    Great inspiration you have here

  3. 3

    Now seriously…how you can run all over the internet to find stuff like this?

  4. 4

    The komomedia Styleswitcher is just awesome!

  5. 5

    Komodo Media’s is crazy! Great work.

  6. 6

    Thanks for feature my website. I’m sad because i don’t win the Apple Cinema Display… who knows in the next?

    Oh! My name you wrote wrong. Is not “Naris”, is “Neris”.

    Thanks again!

  7. 7

    Nguyen Trung Kien

    June 25, 2008 4:14 pm

    Great inspiration you have here

  8. 8

    Awesome! The Komodo one is my favourite – simply amazing.

  9. 9

    very nice!!!!

  10. 10

    How is the movement done on this website featured here: http://www.nofrks.com/ ?

    Is it flash – it does not seem to be. But flows like flash when you click on a button it flies off in another direction.

    Would really like to learn how to do this – maybe a tutorial exists out there?

  11. 11

    Very nice piece. The Komodo Media switcher is by far the best in my opinion though…

  12. 12

    Love the Komodo media design – one of my favorite site designs ever! :)

  13. 13

    gg Scott Schiller!

  14. 14

    Congratulations to Florian Pichler. Nice work! Site’s a little slow no doubt to traffic from this post, but killer job. Of course, my favorite is the super mario theme. :)

  15. 15

    I like how much work people have put into some of those. Hopefully more site will adapt alternative styles for people with needs.

  16. 16

    Tnx for feature my work.
    iam blog & komodo media, really hard to decide, they r both amazing, congratulation to the winner, enjoy your new Apple Cinema :)
    This has been a great contest.

    Diego

  17. 17

    Nice job guys. Everything looks great!

  18. 18

    A lot of great things… Keep smashing…

    Komodo Media should be the winner I think. My vote for Komodo Media…

  19. 19

    I am impressed with the quality of some of the websites featured. No doubt this contest has improved the design of many participating websites – I only wished I had learned about the contest earlier!

    Komodo Media is my personal pick :)

  20. 20

    Congrats winner………

  21. 21

    This was a great contest and I am happy I got chosen. I just did want to mention that I did place the words “Smashing Magazine” in the site. I wrote an article about it in the articles section of the website. Click on articles in the nav and scroll down. When submitted it was the first article on the page.

    Thanks for a great contest though!

  22. 22

    Why? Seems like a way to do 3 times as much work to me.

    Do potential guests of the Westin Hotel really care if their site comes in pinkish, bluish or brownish hues? I don’t think so…

    Smashing article though, food for thought.

  23. 23

    Congratulations iamblog.de owner! :)

  24. 24

    Congrats winners! Awesome work!

  25. 25

    Congratulations.. and thanks for SM to nice contest..

  26. 26

    great post. thanks SM!

  27. 27

    Good to see Lee Munroe get a mention :) nice work!

  28. 28

    Oh damn, didn’t realise there was a contest on this. I would given you something very nifty. I’m writing a tutorial on this later today, i’ll update here for you all to see.

  29. 29

    Florian Pichler

    June 26, 2008 12:29 am

    Wow. Never thought this would be possible. Thanks a lot. I’m totally stunned.
    and yeah, the traffic makes my server slow, upgrade is on the way.

  30. 30

    Cool stuff guys! I just recently had my first go at adding a style switcher (5 background options) to my new site design… cameronqueen.com

  31. 31

    komodo is beautiful, man is a freak :), iamblog is technical and beutiful, thx smashmag

  32. 32

    I haven’t viewed the winner yet as the site is really slow loading, must be the extra traffic this is bringing it!

    I have to say though the Komodo Media switcher is a work of art, absolutely stunning work.

  33. 33

    Florian Pichler

    June 26, 2008 1:01 am

    iamblog.de should be accessible again. hopefully.

  34. 34

    congratulations!!! tolle Arbeit!

    really good styleswichters are shown here! amazing!

  35. 35

    In my opinion Komodo Media has the most creative style switcher. Impressive!!

  36. 36

    Rajaie AlKorani

    June 26, 2008 1:46 am

    And I thought my blog had a good design! Thanks again SM for boosting my creativity!

  37. 37

    Hahaha! grat’s Flo!
    I knew you would win!
    :)

  38. 38

    Nout - Blog 3.14

    June 26, 2008 2:58 am

    Noutweb
    Another very cool styleswitcher here!!!:
    http://www.noutweb.com/blog

    Nout van Deijck
    Blog 3.14

  39. 39

    ohhhh i dig the first one!

    Niki Brown

  40. 40

    It’s simply amazing how many of the switchers that rely completely on JavaScript. What if the browser you’re currently using doesn’t allow it, or perhaps the owner of the computer (for instance, a boss at work) don’t trust you enough to let you use the browser freely?

    If you’re concerned about web security, JavaScript might be blocked completely off, or at least alot of executable functions.

    All style switching should be server-side, not client side, since you (the web designer etc…) won’t know (all) the visitors. Sure, statistics might show some results, but it’s not 100% reliable.

  41. 41

    Very worthy winner and some great runners up too.

  42. 42

    Thank you for including me in your article

  43. 43

    I think Komodo Media should get an award for being the people’s choice, definitely the most creative use of a style switcher among the competition.

  44. 44

    HOLLA!

  45. 45

    Well, i’m back with my article / tutorial to show you on an improved stylesheet switcher. You can see it here.

    Hope you all like it.

  46. 46

    The winner’s style switcher seems to be not compatible with FF3, It does nothing but hides itself(the button) when clicked.

  47. 47

    Well I don’t know, I tried to see the iamblog’s style switcher in IE 7 and the whole page didn’t work…in Firefox it worked though…:)

  48. 48

    Cool stuff another great contest Congrats to the winner iamblog

  49. 49

    I am impressed with the quality of some websites… I have to say though the Komodo Media switcher is amazing! Thank you for giving us this chance to be seen and to share our knowledge. I’m sad I didn’t win, but I’m happy I discovered a lot of new websites… Keep it up, guys.

  50. 50

    Thomas J Bradley

    June 26, 2008 6:15 am

    Congratulations Florian Pichler!

    And thanks for featuring my style-switcher in the article.

  51. 51

    This was a great contest! Great work Florian! I did have the words “Smashing Magazine” on my site in the articles section. I thought that would be enough but I guess not. Oh well though! it was fun to enter. Thanks Smashing Magazine!

  52. 52

    Thanks Smashing for this inspiring colection. Being posted beside all this beautiful and amazing colections just makes me wanna go further with my own designs too!
    Smashing Komodo design style switcher!!!

  53. 53

    Jakob N. @iamblog.de

    June 26, 2008 7:46 am

    I have to say i am also stunned by the positive response, we earned for our little iamblog.de, which was only set up for a few people (especially for java problems *g*) :) thanks guys for the visits we hope some of you will visit us again. we will keep up our work and i will spend the style switcher some new designs i think… have a nice day

  54. 54

    Impressive stuff, but your winner http://iamblog.de/ doesnt work in IE6. Is compatibility not important anymore?

  55. 55

    Exhaustive list. Thanks. :)

  56. 56

    Curt Simon Harlinghausen

    June 26, 2008 1:25 pm

    FANTASTIC work. Thanks.

  57. 57

    Interesting comment – I believe javascript style switchers “add” the new style. I tried javascript for my style switcher Your Web Prowhich I entered in the comp, but as mine has 50 styles, the javascript failed in IE7 after 30. Still worked in Firefox.. Yes, 50 is overkill for a comp like this, but I wanted to be able to let my clients view lots of colour schemes. It did make for a very simple site design, it was challenging to build a banner that wouldn’t clash with so many variations.

  58. 58

    Thank you for Sam Gerdt. His design give me a inspiration for web construction.
    Thanks again

  59. 59

    Once again at the right time @ the great moment, so good to read digged articles!!!!
    (do i have a french accent? :))

  60. 60

    Thanks for this inspiring contest. And special thanks to those who made to this page.

  61. 61

    Dado - NOFRKS.design

    June 27, 2008 10:16 am

    Hi, nice to see my site on this list: http://www.nofrks.com

    The winner site doesn’t work in Opera either :( Too bad but this is such a good idea and the guy surely put a lot of effort into it, it is 10% to perfection. Just to make it work in IE6 and Opera. Another idea is to style, beside the header, the rest of the page according to the background, but then again this isn’t zengarden :)

    To Comment nr. 10. Ben – It is done using the Mootools framework http://www.mootools.net

  62. 62

    Florian Pichler

    June 28, 2008 4:39 am

    @Dado – NOFRKS.design (June 27th, 2008, 10:16 am) (#61)
    Works for me in Opera, but it’s true it has a little bug in that browser. I have no clue why opera calculates the height of the whole page instead of the browserwindow. If you miss the switcher-box, just scroll down to the middle of the page-height, it should be there. If you drag it to top it saves it’s position.

    I will NOT make it work with IE6, this browser is WAY beyond ANY EXISTING standard in this world. I’ll try to make it work with IE7, but don’t expect this very soon, I have a lot of work at university at the moment.

    IF anyone can help me out with a fix for the opera-mis-calculation, just drop me a line.

  63. 63

    Ryan Harris’s switcher isn’t “a little bit too complex” — it’s unobtrusive, which is what a style switcher should be.

  64. 64

    What a great list!

    I think should be the winner Komodo Media!.. My vote for Komodo Media…

    IF anyone can help out with a fix for styling, Just drop Komodo a line. :-)

  65. 65

    Very nice list of sites, i did not visit all of them… yet.
    I dont want to be meticulous, but did anyone look at the http://iamblog.de/ with IE 6.
    css is not loaded at all…

  66. 66

    Hi, thanks for listing my site!

    I’ve now updated my code so the switcher works in IE6: http://gbot.info.

  67. 67

    gbot I like the way u using moo effect ;)
    very nice.

  68. 68

    SimpleDesignNerd

    June 30, 2008 9:00 pm

    Thanks for this contest Smashing. I think it proves the limited (and even negative) value of most current uses of style switchers. They don’t help – and often hurt – the building of a brand via web design. They do not give visitors what they really want: options to organize information in different ways. Instead style switchers are often used for simply eye-candy goofiness that, if used at all by a visitor, will never be used twice. It also proves the worthlessness of text-size switchers as most people know how to use the more flexible and quicker text-size changer within their browsers.

    I also think you all chose the wrong winner: Iamblog simply swaps out a header. So what? Like most other style switchers on this list: it hurts the building of iamblog’s brand rather than helps it. The rest of the blog has to be a generic gray/white scheme to accommodate the different header styles. A not so very strong brand is created by iamblog.

    In my humble opinion Komodo should win because it helps build the seaside, tropical brand of the design and because it rightly recognizes what most style swicthers are good for: silly, fun eye candy that won’t be used more than once.

    The runner up in my opinion would be the “Pure Structure” site, not because of the background switcher which is not helpful, nor is the design very good – but most importantly: unlike the others it offers options for actual structurally different layouts: allowing people to view either fewer, larger thumbnails or more, smaller thumbnails. That’s a real choice that real people can find helpful.

    Visual28 also goes beyond the basic, superficial, color/background image/header image switching solution with an option for handheld devices and other apps who want a more basic, single column, flexible layout. And yutheme lets folks move side column to left or right for the few folks who care about how secondary info is placed. Not major stuff but their solutions should be duly noted as providing more than color/bg changes.

  69. 69

    SimpleDesignNerd

    June 30, 2008 10:02 pm

    Btw, I just revisited this site today after not visiting fir awhile and thought I’d share it: uses style and info switchers somewhat well: http://popurls.com/

  70. 70

    Congratulation to the lucky winner of the Cinema Display – lucky guy ;-)

  71. 71

    I’m a bit disappointed that iamblog won with a non style enabled IE blog. Bold move on the creator, but that’s what blogs are for, to be personal. If he wants to make it not work in IE, that’s fine, at least he disables it so it won’t bug out. Granted syncing IE with firefox takes a bit of effort but it can be done.

  72. 72

    got here a bit late with this one but for what it’s worth, here’s my two cents…

    this is all just eye candy. Style switchers, I believe, only serve a purpose when making sites more accessible, so increasing font size, possibly changing font colour. Anything else just isn’t really necessary. I do really like komodo media’s idea though, utterly pointless but quite engaging for the user on a site that is beautifully designed.

    We designers seem very quick to forget what it actually means to design something. Designing is solving & responding to a problem. Not copying the latest ‘web2.0′ fad or anything like that. Or utilising the latest in javascript or someother technology for the hell of it. Most web designers nowadays are nothing more than glorified stylists, as this list proves.

  73. 73

    IamBlog does not work on Ubuntu 8.04 with Opera 9.5. Most of the rest work just fine…

  74. 74

    I’m not sure how some of the other readers in this post got to try out the designs; however, I found the designs showcased were very invigorating.

  75. 75

    Completely agree with Johnson – the real added value from a style switcher comes when you use it to give users an opportunity to enhance the experience of using a site, through improving it’s accessibility or by allowing users to change the structure/organisation of the content. Allowing users to fart around swapping background images, changing between day and night modes, having green leaves or brown leaves in the background etc. etc. (yawn) might look great, but serves no real purpose to users.

    @Florain Pilcher: ‘I will NOT make it work with IE6, this browser is WAY beyond ANY EXISTING standard in this world. I’ll try to make it work with IE7, but don’t expect this very soon’

    That’s the spirit! Keep shouting and eventually people might stop using IE altogether. Meanwhile, in the real world here on planet earth, IE has the largest share of the browser market. You don’t have to like IE, but at least have the common sense and courtesy to develop something that works on the browser most people in the world are using.

  76. 76

    Totally agree with Andy B.
    I feel style switchers are nice and nerdy, but there really really really is no purpose…
    Try to find the button if you have any accessibility problem for the current selection.
    It’s an excuse not to make accessible sites.

  77. 77

    Andy B makes a valid point about IE – it’s a shame but we really do have to take IE 6 & 7 into account when designing web pages. IE6 still has a larger share of the browser market which is depressing. This tells me IE 8 will take about 4 years to catch on and replace IE 6 & 7…

    I usually build my sites for IE7. A few small changes usually gets them working in compliant browsers and then I add a few hacks on a seperate style sheet for IE 6. I hate working this way, but it means I get it right on all platforms which I feel is pretty important, inspite of my hatred for IE…

    Happy coding everyone!

  78. 78

    What about web 2.0 applications which allow users to switch styles – Meebo, Netvibes.com? They’re great…

  79. 79

    A great review, and excellent entries from everyone. Definitely gives motivation to improve. Thanks for featuring my site.

  80. 80

    Florian Pichler

    July 3, 2008 12:23 pm

    just for those people who do not begrudge me my win (at least that’s what it sounds like): i have no problem if your not happy with the decision of the authors of this blog, I still can’t believe that this happend. BUT: I did my very best to make this private blog working and interesting for it’s writers and it’s readers, which where (before this win) (at least nearly) only students from the Hochschule Augsburg.
    I don’t see why I have to follow my typical working-scheme and hack all that IE-stuff inside, just because 5% of my readers (AFTER the win) still don’t use a good and secure browser yet.
    IF this would be a big website for a company or something more offical, I would have created a template and switcher which works on every IE6&7 and on all other browsers, too. As this is not the case, disabling the stylesheet and the javascript for IE was the best solution for now.
    As some commenters already said, styleswitchers are not really “usefull” in most cases, which is also true for my switcher. It’s just a fancy thing and nice to play around, that’s exactly why I build it.

    regarding opera: I still can’t get the window-height-calculation right for the latest opera (testet on win, mac and linux). scroll down to to middle of the page, it will be there. (opera uses the body-height instead of the window-height for some weird reason)

    As I can understand those who are somewhat angry with me (= those who are forced to use IE and think that I’m a guilty cruel person who locks them out of something interesting) so I decided to take this as a personal competition and recode the whole switcher using mootools 1.2 and making it compatible with IE7 (and maybe IE6)

    but for now: the blog works I planned it, I spend several weeks on it’s sourcecode and those for whom I and the other authors write can read it and are happy about new posts, which are far more important than any design-feature you can implement. Content matters.

    I’m writing this post sitting in front of my ACD, thanks again, it made my life and coding much easier.

    and just before I forget: I absolute love those leafs on Komodo Media.

  81. 81

    Designing is solving & responding to a problem. Not copying the latest ‘web2.0′ fad or anything like that. Thanks

  82. 82

    Pretty, but largely pointless. Changing background images is frivolous. Changing font sizes is better achieved in the browser, using standard controls.

    How many of these entries actually made something worthwhile to users? Anyway, here are some potentially useful style switchers:

    — Low-glare colours
    — Single-column layout to maximise reading space for low resolutions or large font sizes
    — Customised content (for example, left-handed vs. right-handed)

    That’s all I can think of. The rest just seem to be fluff.

  83. 83
  84. 84

    ow many of these entries actually made something worthwhile to users? Anyway, here are some potentially useful style switchers

  85. 85

    How many of these entries actually made something worthwhile to users? Anyway, here are some potentially useful style switchers:

  86. 86

    devlet hastanesi randevu

    March 2, 2011 11:45 pm

    appear not only in the header, but also in navigation options, bullets and headings. Beautiful design, excellent style switcher.

    devlethastanelerirandevu.com

  87. 87

    Apple Cinema 20 Flat Panel Display. Over 60 designers participated ll of our earlier contests — the results are indeed pretty smashing. Now it’s time to review some of the best designs and, of course, announce the winner.

  88. 88

    ustomizable as well. Some of theme provide even a panel interface in the admin area.

↑ Back to top