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
01. A Better Responsive Grid2
03. Kick-Start Your Website And App Development4
04. Easy Scheduling With Doodle5
05. More Than A Facelift For Browsers6
06. Under The Site Goes Under The Hood7
08. Your Brand On The Line With The Tagl!neGuru9
09. Podcasts With Respected Thought Leaders10
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.
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)
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.
Now we have a new option: Bootstrap16 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. 960.gs 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)
The name may be familiar, recalling that famous search engine, but the product is different. Doodle17 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.
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)
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 concept19.
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)
If you’re curious to know how a car runs, you simply look under the hood. The same goes for websites. Under the Site21 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.
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)
If you want to boost your business and are looking for resources on branding, you’d better consult the Tagl!neGuru25. 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.”
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)
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 Tycoon27. 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.
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 Setup29 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 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://goldengridsystem.com/
- 12 http://goldengridsystem.com/
- 13 http://ender.no.de/
- 14 http://ender.no.de/
- 15 http://twitter.github.com/bootstrap/
- 16 http://twitter.github.com/bootstrap/
- 17 http://doodle.com/
- 18 http://www.doodle.com/
- 19 http://blogg.antrop.se/interaktionsdesign/redesigning-the-browser-window/
- 20 http://blogg.antrop.se/interaktionsdesign/redesigning-the-browser-window/
- 21 http://underthesite.com
- 22 http://underthesite.com/
- 23 http://leaflet.cloudmade.com/
- 24 http://leaflet.cloudmade.com/
- 25 http://www.taglineguru.com/tgpedia.html
- 26 http://www.taglineguru.com/tgpedia.html
- 27 http://www.dormroomtycoon.com/
- 28 http://www.dormroomtycoon.com/
- 29 http://usesthis.com/