Today at M.I.T., the Knight Foundation showcased 16 projects selected as the winners of the 2011 Knight News Challenge. Now in its fifth year, this media-innovation contest included $1 million in support from Google. As you’ll see in the full list of winners, these initiatives come from organizations large and small and are reminders that entrepreneurship can be sparked anywhere. Here are just a few examples of the creative ways the journalism community around the world is merging traditional skills with an online landscape:
At the University of North Carolina at Chapel Hill, OpenBlock Rural will use its seed money to work with local governments and community newspapers across the state to collect, aggregate and publish data.
In Virginia, the Miller Center Foundation’s State Decoded will serve as a platform to display state codes, court decisions and information from legislative tracking services to make government more understandable to the average citizen.
Liverpool, U.K.-based ScraperWiki will bring its experiences with public data to journalism camps in 12 U.S. states.
Chile’s El Mostrador will develop an editorial and crowdsourced database to bring greater transparency to potential conflicts of interest.
Ushahidi will build off its past crisis efforts to improve information-verification across email, Twitter, web feeds and text messages.
Other winning proposals tell rich multimedia stories, bridge the gap between traditional and citizen media and further improve the utility of data to journalists. Our sister program in partnership with the International Press Institute is also well underway. The entries in that competition are now in and the winners will be announced later this summer. We look forward to seeing the impacts these initiatives have on digital journalism and hope they encourage continued experimentation and innovation at the grassroots level.
Posted by Jim Gerber, Director, Strategic Partnerships, News
We’ve given you a look at some best practices for responsive design, but beyond the nuts and bolts of @media queries and flexible grids, there is something more subtle, and more important, at work behind the moniker responsive design.
Good design has always been about not just putting content first, but making it easy to read that content — give people what they’re looking for or they will go elsewhere.
It sounds rather basic, but if good, content-driven design were actually common on the web, then we wouldn’t need tools like Readability, Safari’s Reader or Instapaper, which are all services that strip out superflous distractions and give people what they want — content. If you’ve read through our guide to designing for readability first, hopefully you’re already streamlining your website and focusing on the content rather than sidebar, ads and other distractions. Responsive design picks up where that idea leaves off.
The cornerstone of any responsive design is a flexible grid system that adapts to different screen sizes, but that’s really the least interesting aspect once you master it. In the larger sense, responsive design is not about fluid grids, it’s about determining the constraints of the reader’s screen and how those constraints change the way your site needs to display. It’s about shifting your content based on the screen size of your reader and ensuring that your visitors have the best experience regardless of what device they might use.
In other words, responsive design is about making sure that the reading device being used doesn’t matter. Screen size is the obvious place to start. The constraints of small screens dictate some design choices, for example a single column of content, and means putting the primary content at the top of the page. It also mean ensuring your typography looks good. For example, the typical desktop browser font sizes of 14-16px often feel too small on an iPad.
But screen size isn’t the only thing to bear in mind when you’re building your site. Don’t ignore other aspects of today’s myriad mobile devices, like touch-based interfaces, access to GPS data or screen resolution. For example, your site might have a nice flexible grid, but if half your links require a hover state to be noticed, your site is no more “responsive” for a touch screen user than the average archived Geocities page. Also consider the impact of transitions and animations which can help guide users and create a greater feeling of responsiveness.
Different devices also have different built-in tools. Test for things like geolocation support using Modernizer and if the device supports it, use it. For example, a location-based form that works well on your desktop site might be better served by using the location data automatically on a mobile site.
In the end responsive design is not just about the size of the screen, it’s about how your arrange you information to give people what they want. Every site is different and you if simply jump on the flexible grid bandwagon without giving proper thought to your unique content, you’re not going to have an effective website.
The CSS 3 box-shadow property allows for drop shadows and other gradient-based effects without the need for images or other hacks. Box shadow works in Firefox 3+, Chrome, Safari, Opera and Internet Explorer 9. Older versions of IE will ignore the rule, but in most cases losing the shadows won’t be catastrophic for your design.
Box Shadows are handy and can do a lot more than just create a shadow effect. Check out this experiment for some examples of the myriad effects you can achieve with just a few box shadow rules (note that some only work in WebKit browsers). However, the box-shadow rule also showcases the ever-present differences between web browsers — even when the browsers all handle the CSS just fine.
While box-shadow works in all the browsers listed above, that doesn’t mean that it looks the same in every browser. For an interesting look at the variety of ways web browsers display box-shadow, head over to this handy guide to box shadow.
As you can see from the screenshot above, there’s considerable variation between the four browsers — everything from the almost non-existant shadow in some IE 9 examples, to the much heavier shadows in Firefox 4. That’s not to say that any one of them is right and the others wrong, just that there are differences. You’ll also find quite a bit of variation in font display and CSS gradients.
The point is, no matter how hard you try, you’re never going to to have pixel perfect rendering across web browsers. Nor do you need pixel perfect rendering across browsers. The real lesson of box shadows is that there will be variety, so stop worrying and get on with creating.
Unless you’ve been too busy wake boarding the Alps to notice, there’s a movement afoot amongst web designers — Responsive Design. Ethan Marcotte coined the term responsive design to describe the process of using liquid layouts and media queries to scale websites so that they fit any screen size. If you’ve never heard of responsive design before, Marcotte’s introduction is well worth a read.
In a nutshell, responsive design means using fluid grids, fluid layouts and @media queries to adapt your website to the plethora of different screen sizes on today’s (and tomorrow’s) web. Whether your visitor is on a phone, an iPad or a gargantuan desktop monitor, your website adapts.
Responsive design becomes an even more appealing tool when you start, as Luke Wroblewski says, designing for mobile first. That is, start with the small screen. Strip your site down to its essence and then build from there. Starting from the bare bones ensures a great mobile site, and it forces you to really focus on what matters to your visitors.
So how do you go about building a good responsive site? Well, that depends on the individual website, but there are some common patterns that are starting to emerge. To help you get started with responsive design, here are a few nascent best practices we’ve gleaned from a variety of sources around the web:
Use @media to scale your layout for any screen, but remember that this alone isn’t really responsive design.
Use liquid layouts that can accommodate any screen size. Don’t simply design one look for the iPhone/Android, one for tablets and one for the desktop. Keep it liquid, otherwise what happens when some new, intermediate screen size suddenly becomes popular?
Roll your own grids based on the specifics of your site’s content. Canned grid systems will rarely fit the bill. The problem with canned grids is that they don’t fit your unique content. Create layouts from the content out, rather than the canvas (or grid) in.
Start small. Start with the smallest size screen and work your way up, adding @media rules to float elements into the larger windows of tablet and desktop browsers. Start with a narrow, single-column layout to handle mobile browsers and then scale up from there rather than the other way around.
Forget Photoshop, build your comps in the browser. It’s virtually impossible to mock up liquid layouts in Photoshop, start in the browser instead.
Keep in mind of course that responsive design is a young idea and new ideas — and new tools — pop up everyday. Think of these not as hard and fast rules, but guidelines to build on.
In this week’s app roundup: Instagram and iCloud, replicated on Android; movies, recommended; cookbooks, shared; pictures, mysteriously pixelated; apps, found with Yahoo; karaoke, added to Shazam; ringer, smartly silenced; Swype, honeycombed; and much, much more. More »