Menu Search
Jump to the content X X
Smashing Conf San Francisco

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 San Francisco, dedicated to smart front-end techniques and design patterns.

Smashing Newsletter: Issue #41

This newsletter issue was sent out to 66,243 newsletter subscribers on August 30th 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

  1. A Better Responsive Grid2
  2. The End Of Monolithic JavaScript Libraries3
  3. Kick-Start Your Website And App Development4
  4. Easy Scheduling With Doodle5
  5. More Than A Facelift For Browsers6
  6. Under The Site Goes Under The Hood7
  7. Open-Source Interactive Maps With JavaScript8
  8. Your Brand On The Line With The Tagl!neGuru9
  9. Podcasts With Respected Thought Leaders10

1. A Better Responsive Grid

Grids are a staple of modern Web design, the foundation of so many websites. But as we move towards responsive design, where the layout adjusts to browser viewports and devices, managing grids can become quite difficult. A few elastic grids have been created to resolve this issue, but none approach the issue from quite the same angle as the Golden Grid System11.

A Better Responsive Grid12

The Golden Grid System uses the concept of “folding” grid columns into one another, based on the browser’s size. So, a 16-column grid that works great in desktop browsers would fold down to an 8-column grid for tablets, and a 4-column grid for mobile devices. It can handle screen sizes ranging anywhere from 240 pixels wide all the way up to 2560 pixels. The columns themselves are not the only things that are elastic either; while the column’s widths are based on screen size, the gutter widths adjust based on the page’s font size (specified in ems). The Golden Grid System comes with other features that make it perfectly suited to modern responsive Web design. (cc)

2. Ender: The End Of Monolithic JavaScript Libraries

With every new release, your favorite JavaScript library becomes heavier and requires more time to load. We’ve grown used to integrating jQuery, Modernizr, shivs, IE workarounds and many small JavaScript tweaks into our websites. Wouldn’t it be great to remove all the unnecessary functionality, and load a lightweight package that has only the functionality you need?

Ender: the end of monolithic JS libraries

Ender allows you to search, install, manage and compile front-end JavaScript packages and their dependencies. Essentially, it’s a command-line tool that allows you to combine and mix all of the popular and small JavaScript libraries out there to create your own personal development library. If one library you use goes bad or is abandoned, Ender will help you quickly replace it with another. And if you need a particular version of a package, the tool can help you out as well. The release page contains detailed documentation, a user guide and some video tutorials. No more wasted bandwidth! (ld)

3. Kick-Start Your Website And App Development

Frameworks are double-edged swords. They can be useful if you’re looking to get a website up and running quickly and efficiently while still making it usable and attractive. This only makes sense, after all: frameworks have all the elements you need and can save you hours of coding. But many of them are modelled on the techniques of their creators, and all of them need some “retouching” in order to be used in production. Finding a framework is easy; finding a good one not so much.

Kickstart Your Website and App Development13

Now we have a new option: Bootstrap14 from Twitter. Bootstrap is a toolkit that includes the base CSS and HTML for typography, tables, grids, navigation, error messages, modal boxes, buttons and forms. It’s built with the LESS framework. It comes with a standard 940-pixel grid (i.e. without the side margins), or you can create your own. Bootstrap allows you to create fixed or fluid layouts, and it comes with many elements that can be used as is or restyled to fit your website. Of course, the toolkit is free to use. (cc)

4. Easy Scheduling With Doodle

The name may be familiar, recalling that famous search engine, but the product is different. Doodle15 is a tool that helps you pick the best time to schedule a meeting or event. There are no restrictions if you are a sporadic user and want to invite friends over for the occasional barbecue. Choose a name for your party, suggest a date and time, add a location, and then invite your friends (via email) to choose a time slot. The address is conveniently linked to Google Maps.

Easy Scheduling with Doodle16

There are other options for those who need daily organization support. MyDoodle is the free account for frequent users. MeetMe allows you to coordinate meetings with other users. And Doodle Mobile connects your account to your iPhone or Android. One can also combine the Doodle Calendar with Google Calendar, Outlook Express, Exchange, Lotus Notes and other calendars. A simple and useful tool than can save you a lot of time and frustration. (tt)

5. More Than A Facelift For Browsers

The conceptual design of browser windows has not changed much over the last decade. Address bars are where they have always been, unnecessarily taking up space at the top of the window. How wonderful would a real native full-screen view of a website be? Inspired by the recent release of Mac OS X Lion, and in an attempt to address the complications that arise with mixing old and new interaction paradigms, Henrik Eneroth took on the challenge of developing a mock-up of a new browser concept17.

More Than A Facelift for Browsers18

Henrik suggests getting rid of address bars and combining some of the functions found in existing browsers that have not matured enough to conquer a spot in the minds of users. Henrik has grouped related tabs together, applying name tags that describe the contents of the groups. The user also has the option to save groups. Do you have suggestions of your own, or do you find the topic especially interesting? Join the discussion and help innovate the browsing experience! (sp)

6. Under The Site Goes Under The Hood

If you’re curious to know how a car runs, you simply look under the hood. The same goes for websites. Under the Site19 invites you to go under the hood of websites by basically comparing the scripts, libraries and services used on a website against a large database of Web technologies and tools, thus allowing you to explore what a popular website uses.

Underthesite goes under the hood20

All you have to do is enter a URL, and the service will analyze the website and list what technologies are used on the page, including its Web server, JavaScript frameworks and other scripts. You can also add your own tools and services, assign patterns used to detect a technology and track the technology’s popularity across all tested websites. It’s a handy little tool that saves you a lot of browsing through code. Do you know what’s under the hood of your favorite website? (ar)

7. Open-Source Interactive Maps With JavaScript

Creating interactive maps just got a whole lot easier. Leaflet is a lightweight JavaScript library for creating tile-based interactive maps for desktop and mobile browsers. An easy-to-use API is available, and the tool emphasizes usability, performance, flexibility and excellent browser support. There are many customization features that make use of HTML5.

Open-Source Interactive Maps with JavaScript

The library offers a variety of map layers, including tiles, markers, pop-ups, image overlays and GeoJSON. It supports panning on both mobile and desktop browsers, double-tap zoom on mobile browsers (plus multi-touch zoom on iOS) and more. On iOS, hardware acceleration is enabled, and Leaflet has a modular structure that lets you reduce the size of the library to make it even faster. The project is open source and available for further development and forking on GitHub. (cc)

8. Your Brand On The Line With The Tagl!neGuru

If you want to boost your business and are looking for resources on branding, you’d better consult the Tagl!neGuru21. The website offers helpful information on various techniques for writing slogans for companies and products. It describes the various kinds of tag lines, explains what to do and what to avoid, and revisits famous tag lines such as “I’m loving it,” “Think different” and “Just do it.”

Your Brand on the Line with the Tagl!neGuru22

One downside: most of the tag lines cited from politicians, athletes, musicians, companies and cities are US-based. The creators should have recognized that the market reaches beyond national boundaries. (tt)

9. Podcasts With Respected Thought Leaders

How exactly do professionals work? What techniques, design processes and methodologies do they prefer and why? To get more insight into the work of respected innovators and leaders in the creative industry, you might want to look at Dorm Room Tycoon23. The website presents podcast interviews with thought leaders in the worlds of design, marketing, business and start-ups. The hosts skip all of the usual sucking up and waffling found in most interviews and get right down to information you can actually use: the experiences that these leaders have had and the lessons they’ve learned during their career.

Podcasts with Respected Thought Leaders24

So far, Dorm Room Tycoon features interviews with some influential people, including Sir John Hegarty of BHH, Erik Spiekermann, David Hansson of 37signals, Guy Kawasaki, Elliot Jay Stocks, Ethan Marcotte and John Carlton. More insightful interviews are on the way, so be sure to check them out. You can subscribe to the podcast via iTunes, too. And if you want even more details on the technical set-up and environment that professionals create for themselves, consider visiting The Setup25 as well. (cc)

The authors in this newsletter are: Andrew Rogerson (ar), Cameron Chapman (cc), Stephan Poppe (sp), Talita Telma (tt), Luca Degaspari (ld).


  1. 1
  2. 2 #a1
  3. 3 #a2
  4. 4 #a3
  5. 5 #a4
  6. 6 #a5
  7. 7 #a6
  8. 8 #a7
  9. 9 #a8
  10. 10 #a9
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23
  24. 24
  25. 25

↑ Back to top Tweet itShare on Facebook

The Smashing Editorial prepares bi-weekly newsletter issues with lots of love and appreciation for the good ol' web with the latest tips and tricks for designers and web developers. Vitaly Friedman, Smashing Magazine's editor-in-chief, started this project back in early 2010. Today, we can't imagine a better way of informing and communicating with our fans and readers!

  1. 1

    Charles Roper

    August 30, 2011 1:43 pm

    There’s also a Sass version of the Twitter Bootstrap:


Leave a Comment

You may use simple HTML to add links or lists to your comment. Also, use <pre><code class="language-*">...</code></pre> to mark up code snippets. We support -js, -markup and -css for comments.

↑ Back to top