Smashing Newsletter: Issue #42
This newsletter issue was sent out to 67,498 newsletter subscribers on September 13th 2011.
Every other week our editorial team works on short, entertaining and (of course) relevant articles for the upcoming newsletter issue. The newsletter is sent out on every second Tuesday, and contains unique tips and tricks for Web designers and developers, written by us exclusively for our email subscribers. You can subscribe to the e-mail newsletter1 as well, of course.
Table of Contents
01. CSS Terminal: Live CSS Editing2
02. TileMill: A Map Design Platform3
03. The Future of eBooks With EPUB34
04. Make Images Look Retro: VintageJS5
05. Easier Number and Currency Formatting6
06. Creating Buzz With Launch Effect7
07. Responsive Overlay Grid for In-Browser Development8
08. Typing With Style Requires Inspiration9
09. Trip of a Lifetime10
On-the-fly CSS editing can come in handy when you’re developing a website; when you’re debugging, it can be invaluable; and it can be a huge help when creating prototypes, too. But your options are somewhat limited. Many designers turn to Firebug or the Web Developer Toolbar to edit their CSS on the fly, but those interfaces are not the easiest to use if you have to do a lot of editing (also, accidentally deleting what you’ve done is a little too easy if you’re making a lot of changes).
Enter CSS Terminal12. With this simple little bookmarklet, you can add or change styles on a live website right in your browser. Installing it is easy: just drag it to your bookmarks toolbar. The window is resizable, so you can make it as large or small as you need to when editing. You might also want to look at CSS-101’s prototyping snippet13, which overlays a grid or mock-up over the page that you’re styling so that you can edit the content directly in the browser. (cc)
The guys over at MapBox have come up with something that will save many of us the hassle of making maps look good. They’ve created TileMill, a modern map design platform that enables designers to easily create map designs using custom data. The tool is built on the open-source map-rendering library Mapnik and covers a variety of maps, from globe to street level.
Selecting exactly what TileMill15 should display is easy. Styles, markers, heat maps, you name it: TileMill will render them accordingly. The instant preview allows you to target specific areas and styles using styles.mss and labels.mss, which is the intuitive Carto language (similar to CSS). You can export your maps to PNG, PDF and MBTiles formats. The tool can be used on Mac OS X, Linux and Windows (using VirtualBox). How much more useful can it get? (sp)
Recently, the International Digital Publishing Forum published the proposed specification for the next version of ePUB16 for final review. The new ePUB 3 is supposed to increase the format’s capabilities in order to better support a wider range of publication requirements, including complex layouts, rich media and interactivity, and global typography features. The expectation is that ePUB 3 will be used for a broad range of content, including books, magazines and educational, professional and scientific publications.
Remember what the photos that you took with your first camera looked like? Dark with blurry edges, they gradually faded to yellow, and the colors lost their saturation as the years passed? Well, now you can make the pictures of your last holiday look like you took them years ago.
vintageJS20 is a free online tool that gives your photos an authentic retro look, with easy-to-apply functions, such as darkening edges and lightening the center, curves adjustment, desaturation, adding blur on edges and screenlayer. You can make the image public or download it to your desktop. This might save you the time of booting up Photoshop and applying advanced filters to your photos! (ar)
Proper, consistent formatting of numbers and currency is a tiny detail that makes a difference in design. But you can’t always count on those who update the content to adhere to the preferred style. Some will use numbers with commas, while others will leave them out; some will use the proper currency symbols, and some will not; and some will add more than two decimal places. You end up with a mess that someone has to go in and manually fix.
It just happens sometimes: suddenly, you get a vision for a new product, service or store. You’ll have to hash out the details of implementation, but the main idea is there, and you know exactly what to do. So, what’s the first step? You could start by registering the domain and putting a pre-launch page online. As a matter of fact, the WordPress theme Launch Effect23 is freely available for this very purpose. The theme enables you to tease your audience with your idea while building up a great number of promoters of your product.
The one-page theme lets visitors sign up using their email. Upon signing up, the page generates a special URL for them to share with their friends, so that you can track your most active promoters and reward them for spreading the word. What more do you need from a pre-launch page? This is a good tool to bookmark for your next creative breakthrough or start-up idea. (tt)
Creating grid-based designs in Photoshop works great, but once you’re in a live browser environment, you need a new set of tools if you’re going to continue strictly adhering to the grid. A lot of the tools out there work great if you’re designing fixed layouts, but what about flexible responsive grids?
The Heads-Up Grid26 is a recently released grid overlay for in-browser development. It works with fixed-width designs but also works great with responsive grids. Just specify the page units, column units, page width, number of columns, column width, gutter width, top margin and row height, and then paste the Heads-Up Grid code into the
head element of your website to generate the grid overlay. It’s a handy little tool. (cc)
Typography is one of the most important elements of design. It can make all the difference, turning your product either into a useful, usable delight or the audience’s worst nightmare. Rather than commit the common mistake of setting type randomly, why not study and explore resources on typography offered by Typetoken27?
Typetoken offers not only examples of good typography, but also interviews with designers, discussion on typography, visual language artwork, typefaces, and book announcements. It certainly is a goldmine for explorations in typography for your next design. (tt)
“Move,” “Learn” and “Eat”29 are three short videos featuring three inspiring guys. They cover 44 days, 11 countries, 18 flights and 2 cameras, turning three ambitious linear concepts (movement, learning and food) into the trip of a lifetime. The individuals share their experience of their trip around the world, dancing tango in Argentina, waking up with the sun in Machu Picchu, watching a football match in Brazil, eating fresh fruit in the markets of Barcelona…
Do you enjoy connecting with people, trying local delicacies, exploring new environments and learning languages? If you are equally passionate about travel and video editing, then these videos will leave you inspired and make you want to document your next trip. Check out these compelling short films and explore, experiment and enjoy! The world is all around us, at our feet; we just need to start paying attention to it. (ar)
The authors in this newsletter are: Andrew Rogerson (ar), Cameron Chapman (cc), Thomas Burkert (tb), Stephan Poppe (sp), Talita Telma (tt).
- 1 http://www.smashingmagazine.com/the-smashing-newsletter/
- 2 #a1
- 3 #a2
- 4 #a3
- 5 #a4
- 6 #a5
- 7 #a6
- 8 #a7
- 9 #a8
- 10 #a9
- 11 http://barberboy.github.com/css-terminal/
- 12 http://barberboy.github.com/css-terminal/
- 13 http://www.css-101.org/articles/trick-for-rapid-prototyping/
- 14 http://tilemill.com/
- 15 http://tilemill.com/pages/index.html
- 16 http://idpf.org/epub/30/spec/epub30-overview.html
- 17 http://www.walrus-books.com/2011/06/epubdemo3/
- 18 http://www.walrus-books.com/2011/06/epubdemo3/
- 19 http://vintagejs.com/
- 20 http://vintagejs.com/
- 21 http://josscrowcroft.github.com/accounting.js/
- 22 http://josscrowcroft.github.com/accounting.js/
- 23 http://launcheffectapp.com/
- 24 http://launcheffectapp.com/
- 25 http://bohemianalps.com/tools/grid/
- 26 http://bohemianalps.com/tools/grid/
- 27 http://www.typetoken.net/
- 28 http://www.typetoken.net/
- 29 http://vimeo.com/27246366
- 30 http://vimeo.com/27246366