Issue #55, Tuesday, March 20th 2012 | 103,484 subscribers | Previous issues
Editorial
Dear Friends,
As the book launch is coming closer, we are working on the final touch-ups in the upcoming Smashing books, 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 Toronto—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.
Thanks again to everyone for your support. Have fun exploring, reading and designing!
Yours sincerely,
The Smashing Team
Table of Contents
01. TOC jQuery Plugin: Generate Tables Of Contents Automatically
02. Easier Documentation For Your Stylesheets
03. Squared Superheroes
04. A Haven For Legal-Documentation-Seekers
05. Shoebox Dwelling
06. Responsive Wireframes For Responsive Layouts?
07. Small Bits Of Inspiration, Every Day
08. Attributing Credit In Webspace
09. Never Ending Canvas
10. Smashing Highlights (From Our Archives)
11. New on Smashing Job Board
12. Recent Articles on Smashing Magazine
1. TOC jQuery Plugin: Generate Tables Of Contents Automatically
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 Plugin.
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)
2. Easier Documentation For Your Stylesheets
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 StyleDocco 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)
3. Squared Superheroes
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 Superheroes.
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)
Advertisement
4. A Haven For Legal-Documentation-Seekers
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 Docracy 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 Useful. As they are ESIGN Act compliant, you can even safely sign a document on-site without incurring astronomical legal fees. (jc)
5. Shoebox Dwelling
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 Dwelling.
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)
6. Responsive Wireframes For Responsive Layouts?
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 Wireframed 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 wireframes as well. (cc)
Advertisement
7. Small Bits Of Inspiration, Every Day
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.la 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)
8. Attributing Credit In Webspace
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 Code proposes a small solution to this problem.
With the help of two simple shorthand symbols, Maria Popova, the creator of Curator's Code 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)
9. Never Ending Canvas
Are you a pixel artist? Glueo 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)
Advertisement
10. Smashing Highlights (From Archives)
-
New High-Quality Free Fonts (January 2012)
Every now and then, we look around, select fresh free high-quality fonts and present them to you in a brief overview. In this selection, we're pleased to present Tondu, Banda, Morning Glory, Matilde, Bohema, Weston Round Slab, Highlands, Cabin, Linden Hill and other fonts.
-
Eight Inspiring Stories Of ASCII Art
Labels are fragile: text and pictures have always been closely connected. From the dawn of written language to the era of microcomputers, much of human creation has explored the relationship between the literal and the figurative, the form and the function. Within this is the future site of retro, ASCII art. It's often used as a catch-all term for "text-based art," regardless of the actual character set being used.
-
Portfolio Design Study: Design Patterns and Current Practices
We have carefully selected 55 design agencies and Web development agencies, analyzed their portfolio websites and identified popular design patterns. The main goal of the study was to provide freelancers and design agencies with useful pointers for designing their own portfolio.
11. New on Smashing Job Board
Here are the job openings published recently at our very own Smashing Job Board:
Senior UX Designer at Formspring (San Francisco, CA)
"Formspring is a global social media company headquartered in San Francisco. Its goal is to create fun, social interactions between people that allow them to get to know each other in a new way. As one of the fastest growing social media sites ever, Formspring has more than 4 billion responses posted, and has over 28 million registered members."
Senior Web Designer at The Baldwin Group, Inc. (Charleston, SC)
"The Baldwin Group, Inc. (TBG) is seeking a talented Web Designer to join their Web development team and help them build innovative and visually appealing government websites."
Front End Specialist at Koupon Media (Dallas, TX)
"Koupon Media has a highly skilled team that has a combined retail and mobile experience that spans close to 3 decades. They are looking for you to come in with fresh ideas, and move pixels around like they owe you something!"
12. Recent Articles on Smashing Magazine
No comments:
Post a Comment