As the book launch is coming closer, we are working on the final touch-ups in the upcoming Smashing books2, editing the chapters and adjusting the layouts in InDesign. For those of you who have pre-ordered, you should have received an email in which you can finally confirm the name you’d like to have printed in the Smashing Book #3—the deadline is Saturday, the 24th of March, so you better hurry up!
In this issue, we’re also giving away 4 entry tickets to FITC Toronto3—a 3-day festival featuring over 70 renowned digital creators from around the globe, covering everything from HTML5 to making digital art. To win a ticket, please tweet
@smashingmag Take me to the #FITCToronto already! We’ll be announcing the 4 winners by the end of this week on the 23rd of March.
Thanks again to everyone for your support. Have fun exploring, reading and designing!
The Smashing Team
Table of Contents
01. TOC jQuery Plugin: Generate Tables Of Contents Automatically4
02. A Haven For Legal-Documentation-Seekers5
03. Squared Superheroes6
04. Easier Documentation For Your Stylesheets7
05. Shoebox Dwelling8
06. Responsive Wireframes For Responsive Layouts?9
07. Small Bits of Inspiration, Every Day10
08. Attributing Credit In Webspace11
09. Never Ending Canvas12
Do you find yourself often in situations when you need to include a table of contents into a website? Be it lengthy blog posts, an HTML book or perhaps a compact overview for your design briefs or portfolio items? You probably don’t want to spend the time to hand-code it, or have to worry about updating it if you add or remove content, right? Well, then check out TOC jQuery Plugin13.
TOC automatically generates and guides the user through a table of contents on your page. It’s customizable and is able to automatically highlight a current section of the document. The plugin is also very lightweight, can be used multiple times on a page, and even includes a smooth scrolling functionality for the correct section. The plugin is developed by Greg Allen and is currently available in beta. (cc)
Have you ever had to set a sublet agreement for a new roommate? For those of us who aren’t lawyers, that can be a real annoyance. Googling “lease agreement”, then sifting through all the different variations, and studying the bone-chilling legalese can be truly arduous. Wouldn’t it be nice if there was a free and friendly website where you only had to type in the word “lease” and you could come up with all the documents you need?
The hard-working minds behind Docracy16 decided to make it easier for everybody to find the right legal documents — a free database that lets you download and upload documents. If you think there’s something either wrong or right with a form, you can just comment on it or upload your own revised version. The website is an open project for all kind of legal documentation, and if you need something more specific, such as a legal page with Terms and Conditions for your site, make sure to check out Paul Boag’s article Site Content: How to Make Terms and Conditions Useful17. As they are ESIGN Act compliant, you can even safely sign a document on-site without incurring astronomical legal fees. (jc)
How well do you know the characteristics of your favorite superheroes? What kind of weapons do they fight with? How do their masks look like? The graphic designer René Schiffer seems to know all of this very well… at least that is the impression you get when you see his drawing project Squared Superheroes18.
Instead of following the common tendency for drawing small details (e.g. facial expression, hair, shadows, or even special visual effects), René chose to draw them in a rather laconic, minimal style. He gathered the most important characteristics of each superhero and represented them as squared schemes. When placed side-by-side, the superheroes form a great composition. Now, try to figure out if you recognize your childhood idols! (tt)
If you create lengthy stylesheets that are going to be used by other Web developers or are involved in a complex project with many teams, then you’ll certainly need at least some documentation. However, writing the documentation can be tedious, and isn’t exactly what most people would call “fun”. That’s where StyleDocco20 swoops in to save the day.
With StyleDocco, your stylesheet comments will be parsed through Markdown and displayed in a generated HTML document. There are even conventions for writing code examples built in, so you will get HTML and code examples in your documentation. Your document will even be formatted to reflect headings (levels 1 and 2). Only the comments at the beginning of new lines are included (so you just need to put some spaces before any comments you don’t want included). (cc)
Gone are the days in which physical space was an abundant element. Modern life has provoked the growth of population in big cities, and consequently, the rise in square-meter prices. To make it affordable for the majority of their inhabitants, rooms, houses, offices (and even transport packages) have become smaller. But thanks to talented designers, our experiences in small spaces can be very pleasant. Some of rather inventive compositions of bojectscan be seen at Shoebox Dwelling22.
The blog, curated by the design journalist Natalia Repolovsky, presents solutions on how to fill the limited space you have with creative compositions of furniture, architecture, storage and decoration accessories. Each post brings information about who designed the feature, how to use it, and where you can find it around the world. This proves that an uncomfortable situation may also be the starting point for creativity. (tt)
These days, when we create wireframes for our designs, we often use an application like Photoshop or a dedicated wireframing or prototyping app. The wireframes we create are static — and it’s not easy to adjust them in Photoshop to meet the needs and challenges introduced by the responsive design mindset. After all, when we’re creating a responsive website, we will need to create multiple wireframes for different viewports.
The alternative is of course to wireframe and prototype directly in the browser, so that your wireframes resemble the actual responsive website that you’ll be building. Responsive Layouts, Responsively Wireframed25 explores this concept, and serves us a new idea for designing responsive websites. James Mellers introduces an example of a responsive wireframe that adjusts to desktop and mobile views. You could use this approach to present your designs to your clients and make it easier for them to visualize how a design would look like in the actual browser. And if you are interested in the topic, make sure to check out Leigh Howells discussion of responsive wireframes26 as well. (cc)
While some blogs and magazines generously serve dozens of articles per day, sometimes you just want to get a small bit of creativity, close the window and go back to your regular work. Regu.la27 is a network of small blogs that serve the sole purpose of entertaining you with small daily bits of information. Set in a beautiful design (and carefully curated by Kai Brach), this project is worth a click-a-day.
Choose between random quotes, facts, or numbers to be amazed, reminded, or just surprised. There is more to come in the near future — so keep visiting to support this small-scale knowledge project. (sp)
The Internet, through its architecture, delivers many more opportunities to find stream-of-consciousness-like inspiration than classical information media ever could. This of course makes it much harder than with traditional literature to acknowledge author contributions. While it’s considered good form to do so, the tools appropriate for the pace of this specific medium are few and far between. Curator’s Code3129 proposes a small solution to this problem.
With the help of two simple shorthand symbols, Maria Popova, the creator of Curator’s Code3129 argues for a fairer and more open Internet experience to “keep the rabbit hole of the Internet open by honoring discovery”.
They introduce two symbols that assign inspirational input directly and indirectly to another website or source, thus enabling users to research interesting subjects by following the link-chains of inspiration. This idea could start imbuing the Web with academic respectability (so far only attributed to print media), an ambition that is illustrated through the astronomy-inspired design of the website. (jc)
Are you a pixel artist? Glueo32 lets you put your graphics on a never ending canvas (together with others, or just for yourself) to create miles-wide artwork, such as pixel-art, comics, or presentations. You can use any font, graphics, or choice of formatting; just select an area on the artwork, download it, edit it, and then upload it back to Glueo.
It’s simple to participate in, all you have to do is sign-up for a free account and place your artwork on either your own canvas, or on a canvas that other users have created. Any part of the artwork can have its own title or hyperlinked URL — so every canvas behaves like a Web page… not really new, but still a fascinating concept for the Web! (ar)
The authors who have contributed in this newsletter issue are: Iris Ljesnjanin (il), Vitaly Friedman (vf), Stephan Poppe (sp), Andrew Rogerson (ar), Cameron Chapman (cc), Talita Telma (tt), Jan Constantin (jc).
- 1 http://www.smashingmagazine.com/the-smashing-newsletter/
- 2 http://www.smashingmagazine.com/2012/02/15/smashing-book-3-preorder/
- 3 http://www.fitc.ca/events/about/?event=124
- 4 #a1
- 5 #a2
- 6 #a3
- 7 #a4
- 8 #a5
- 9 #a6
- 10 #a7
- 11 #a8
- 12 #a9
- 13 http://projects.jga.me/toc/
- 14 http://projects.jga.me/toc/
- 15 http://www.docracy.com
- 16 http://www.docracy.com
- 17 http://boagworld.com/site-content/how-to-make-terms-and-conditions-useful/
- 18 http://squaredsuperheroes.reneschiffer.de/
- 19 http://squaredsuperheroes.reneschiffer.de/
- 20 http://jacobrask.github.com/styledocco/
- 21 http://jacobrask.github.com/styledocco/
- 22 http://shoeboxdwelling.com/
- 23 http://shoeboxdwelling.com/
- 24 http://www.thismanslife.co.uk/projects/lab/responsivewireframes/#desktop
- 25 http://www.thismanslife.co.uk/projects/lab/responsivewireframes/#desktop
- 26 http://boagworld.com/design/wireframing-for-responsive-design/
- 27 http://regu.la/
- 28 http://regu.la/
- 29 http://curatorscode.org
- 30 http://curatorscode.org
- 31 http://curatorscode.org
- 32 http://www.glueo.com/
- 33 http://www.glueo.com/