Menu Search
Jump to the content X X
Smashing Conf New York

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

Style Switchers Are Back: Ideas, Examples and a Contest

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 Link

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? Link

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 Link

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

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.com6:

Screenshot7

Similar approach is used by Alex King8:

Screenshot9

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

Screenshot11

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

Screenshot12

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

Screenshot13

Screenshot14

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

Screenshot15

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

Screenshot16

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

Screenshot17

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

Screenshot

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

Screenshot18

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.

Screenshot19

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

Screenshot21

2. Let the user choose an optimal typeface Link

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

Screenshot23

Usability.com.au24 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.

Screenshot25

3. Let the user choose an optimal text presentation Link

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

Screenshot27

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

Screenshot

4. Let the user choose an optimal design Link

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.de28 lets users choose a font size and select between a colorful and black-white-design.

Screenshot29

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

Screenshot31

An almost minimalistic, but pretty colorful style switcher is presented by Urbanchip, 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.

Screenshot

Wishtree32 offers 8 background color variations.

Screenshot33

Diego Valobra34 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.

Screenshot35

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

Screenshot37

DSMagic38 with free color variations.

Screenshot39

5. Let the user choose an optimal contrast Link

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 Johansson40 has one.

Screenshot41

Sas-Foto.de42 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.

Screenshot43

Popurls.com44 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.

Screenshot45

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

Screenshot47

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

Screenshot49

6. Let the user choose an optimal layout Link

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

Screenshot51

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

Screenshot53

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

Screenshot55

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

Screenshot57

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

Screenshot59

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

Screenshot60

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

Screenshot61

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

Screenshot62

How do I implement a style switcher? Link

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.

Screenshot63
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 Link

Style Switcher with WordPress Plugins Link

Good luck, folks!

Footnotes Link

  1. 1 https://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://www.clusty.com
  7. 7 http://clusty.com
  8. 8 http://alexking.org/blog/2004/02/03/css-style-switcher-updated
  9. 9 http://alexking.org/blog/2004/02/03/css-style-switcher-updated
  10. 10 http://splitdadiz.com/
  11. 11 http://splitdadiz.com/
  12. 12 http://oink.elrellano.com/index.php
  13. 13 http://www.vladstudio.com
  14. 14 http://monozellen.de/
  15. 15 http://www.daihatsu.com/
  16. 16 http://www.fabrik1design.com/
  17. 17 http://webagentur-meerbusch.de/
  18. 18 http://www.pookerart.de/
  19. 19 http://www.fromustoyou.de
  20. 20 http://webdesign.weisshart.de/
  21. 21 http://webdesign.weisshart.de/
  22. 22 http://www.mikeindustries.com/blog/
  23. 23 http://www.mikeindustries.com/blog/
  24. 24 http://usability.com.au/
  25. 25 http://usability.com.au/
  26. 26 http://whatdoiknow.org/
  27. 27 http://whatdoiknow.org/
  28. 28 http://opencomp.de/
  29. 29 http://opencomp.de/
  30. 30 http://www.mariusroosendaal.com/
  31. 31 http://www.mariusroosendaal.com/
  32. 32 http://www.wishtree.org/
  33. 33 http://www.wishtree.org/
  34. 34 http://www.diegovalobra.com
  35. 35 http://www.diegovalobra.com
  36. 36 http://www.werkbot.com
  37. 37 http://www.werkbot.com
  38. 38 http://dsmagic.com/
  39. 39 http://dsmagic.com/
  40. 40 http://www.456bereastreet.com/
  41. 41 http://www.456bereastreet.com/
  42. 42 http://www.sas-foto.de/index.php?/P1/
  43. 43 http://www.sas-foto.de/index.php?/P1/
  44. 44 http://www.popurls.com/
  45. 45 http://www.popurls.com/
  46. 46 http://www.dustindiaz.com
  47. 47 http://www.dustindiaz.com
  48. 48 http://www.merixstudio.com/
  49. 49 http://www.merixstudio.com/
  50. 50 http://www.excusemeplease.org
  51. 51 http://www.excusemeplease.org
  52. 52 http://phonophunk.com/
  53. 53 http://phonophunk.com/
  54. 54 http://bestwebgallery.com/
  55. 55 http://bestwebgallery.com/
  56. 56 http://www.shopcomposition.com/
  57. 57 http://www.shopcomposition.com/#Projects
  58. 58 http://www.einfach-fuer-alle.de/
  59. 59 http://www.einfach-fuer-alle.de/
  60. 60 http://charlier.de/
  61. 61 http://www.naiz.de/joomla/
  62. 62 http://joom.dezinerfolio.com/
  63. 63 http://opencomp.de/
  64. 64 http://designshack.co.uk/tutorials/css-style-switcher
  65. 65 http://www.456bereastreet.com/archive/200608/build_your_own_php_style_sheet_switcher/
  66. 66 http://www.sitepoint.com/article/css-simple-style-switcher
  67. 67 http://www.fiftyfoureleven.com/weblog/web-development/css/fast-css-style-switching-with-php
  68. 68 http://www.dynamicdrive.com/dynamicindex9/stylesheetswitcher.htm
  69. 69 http://www.mensching.info/program/mootools-styleswitcher-en.html
  70. 70 http://centerkey.com/style/switcher/
  71. 71 http://24ways.org/2005/introducing-udasss
  72. 72 http://juicystudio.com/article/stylesheet-switcher.php
  73. 73 http://www.brothercake.com/site/resources/scripts/iotbs/
  74. 74 http://alterior.net/archives/000021.php
  75. 75 http://www.stichpunkt.de/css/switch.html
  76. 76 http://wordpress.org/extend/plugins/wp-style-switcher/
SmashingConf New York

Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf Barcelona, on October 25–26, with smart design patterns and front-end techniques.

↑ Back to top Tweet itShare on Facebook

Sven is the co-founder and former CEO of Smashing Magazine. He's now writing at his Conterest Blog, where he focuses on blogs, content strategy and publishing — all in German.

  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

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

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

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

    SonicHedgehog

    June 5, 2008 6:42 am

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

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

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

    David Madden

    June 5, 2008 6:51 am

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

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

    0
  11. 11

    daniel.sedlacek

    June 5, 2008 7:18 am

    amazing, smashing rulez ;)

    0
  12. 12

    Roger Willis

    June 5, 2008 7:29 am

    @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

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

    0
  16. 16

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

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

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

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

    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

↑ Back to top