10 Web Design Tools For Journalists: CSS3, Responsive Design And Rapid Prototyping

Journalists should go to more conferences that aren't tailored to journalists. While we're focusing on getting developer resources in the newsroom and trying to get the support infrastructure to do data and design experiments, there are web designers out there in the world who don't have to ask these questions and are instead focusing on the right tools to actually get things done. At least that was the takeaway for me this weekend at my first non-journalism-specific conference in ages: the Pacific Northwest Drupal Summit. Hundreds of developers and designers joined for the weekend to talk about the open source platform Drupal and tools to maximize Drupal's usage. Here's a list of the top tools I discovered around CSS3, responsive design and rapid prototyping. 1. Foundation "The most advanced responsive front-end framework in the world." Foundation was the most frequent tool to come up during the Summit -- in almost every session. It's a responsive UI framework, similar to Twitter's Bootstrap. It helps you to quickly create great layouts with design elements like buttons, tabs, forms, etc. already defined. (Example of a news organization using it, check out National Geographic's educational site for kids). 2. Style Tiles "A visual web design process for clients and the responsive web." The concept of "style tiles" have been around for a long time. Andrea Burton, UX lead at open-source education startup Funny Monkey, pointed to examples like Oprah's Dreamboards and Pinterest as examples of "style tiles" we've probably seen. They're basically a way of grouping concepts -- styles, fonts, colors, broad UI elements -- to materialize design ideas without having to create a fully-detailed visual mockup. Styletil.es lets you download a PSD for doing these mockups. Andrea is working on an open-source, HTML/SASS version. 3. Responsive design bookmarklet "Lets you view any webpage in multiple screen sizes." Whenever you're testing a responsive design, you have to constantly leave a bunch of browser windows open at different sizes or test each browser width one-by-one. The responsive design bookmarklet lets you preview all the common browser sizes for any site at the same time in one window. 4. Typecast "Quickly style type in the browser and check for readability, rendering and beauty as you work." When you want to quickly test an array of different web fonts on your site, Typecast can help. It lets you experiment with different typography by combining and comparing web fonts, and created detailed CSS and HTML as you design. 5. D3JS "Helps you bring data to life." This javascript library is perfect for data journalists who want to visually convey a data-heavy story. From the site: "D3’s emphasis on web standards gives you the full capabilities of modern browsers without tying yourself to a proprietary framework, combining powerful visualization components and a data-driven approach to DOM manipulation." 6. Sassy buttons "Want that fancy CSS3 button look with none of the work?" We used to design buttons as images in the dark ages of web design. But now you can create more flexible buttons with shadows and gradients and other effects using CSS3. Sassy buttons is a library of pre-styled buttons that are cross-browser compatible. 7. CSS hat "CSS Hat turns Photoshop layer styles to CSS3 with a click." Ever create a mockup in Photoshop that looks perfect, then try to re-create those text effects using CSS? CSS hat makes it really easy to copy those exact layer styles into CSS3. This is great if you do comps in Photoshop or if you're working with designers who don't know how to code. 8. CSS3 Pie "PIE makes Internet Explorer 6-9 capable of rendering several of the most useful CSS3 decoration features." PIE, which stands for Progressive Internet Explorer, is an IE attached behavior that lets you use some of the post popular CCS3 features in non-compatible browsers. 9. PX to EM "PX to EM conversion made simple." This tool comes from the folks at NorthStudio. When doing responsive design, it's best to use em-based fonts, rather than exact pixels. You use one base font as a percentage then scale up and down from there with ems, which are relative. This handle tool helps you get a handle on those conversions so that you're getting the exact font sizes you want, then grab the CSS. 10. PhoneGap "Easily create apps with the only free open source framework that supports 7 mobile platforms." This framework lets you build mobile apps for iOS, Android, Blackberry, Windows Phone, Palm WebOS, Bada and Symbian using the basics: HTML, CSS and Javascript.

Fishbowl

10 Web Design Tools For Journalists: CSS3, Responsive Design And Rapid Prototyping

Lauren Rabaino

About

Subscriptions

Events

Publications

WORK SMARTER - LEARN, GROW AND BE INSPIRED.

Subscribe today!

Lauren Rabaino