Tumblelog by Soup.io
Newer posts are loading.
You are at the newest post.
Click here to check if anything new just came in.

September 01 2011

09:19

The ultimate responsive web design roundup

Responsive design is the new darling of the web design world. It seems that not a week goes by that there aren’t new resources for doing it, opinions about how to do it or even whether to do it at all, and new sites that make beautiful use of it.

It can quickly get overwhelming trying to keep up with it all.

Here we’ve compiled a list of more than seventy resources for creating responsive designs.

Included are articles discussing responsive design and related theories, frameworks and boilerplates for responsive layouts, tools for testing your responsive designs, techniques for resizable images, and a whole lot more.

Then, to top it all off, we’ve collected a hundred of the best responsive designs out there right now to inspire you and give you some real-world ideas.

Articles and Publications

Below are a number of high-quality articles talking about responsive design and the techniques that go into it. Some might include a few code snippets or other technical information, but for the most part, these are concept-level discussions.

Responsive Web Design

This is the original post by Ethan Marcotte that was posted on A List Apart. It discusses the reasoning and principles behind responsive design, as well as practical techniques for creating responsive sites.


Responsive Web Design Book

Responsive Web Design by Ethan Marcotte, published by A Book Apart, covers the state of the responsive web, flexible grids, flexible images, media queries, and how to create responsive designs.


The Practicalities of CSS Media Queries, Lessons Learned

This post, from Bloop, is a fantastic overview of how to use media queries (and their pros and cons compared to creating a dedicated mobile site), as well as some useful tips for implementing them. Some useful code snippets are included, too.


Big vs. Small: Challenges in Responsive Web Design

This article discusses some of the challenges responsive web design can present, including the unique considerations that are required as desktop screen sizes continue to grow, while at the same time many users are now accessing the web more on tablets or smartphones.


Beginner’s Guide to Responsive Web Design

This Beginner’s Guide from Think Vitamin offers a great introduction to responsive design, including information on fluid grids and media queries.


Responsive Web Design: What It Is and How To Use It

This introduction to responsive design from Smashing Magazine is a great primer on the subject. It covers the basic concept, as outlined by Ethan Marcotte, as well as practical concerns for creating responsive designs. Code examples are also included.


Responsive by Default

This article from Andy Hume discusses why the web is responsive by default, and that designers have been forcing it to be un-responsive for years. It’s an interesting idea, discussed mostly from a developer’s point of view.


Content Choreography

We often talk about responsive design strictly from the technical end of things, but the entire point of responsive design is to improve the content experience. This post from Trent Walton talks about just that, how stacking content isn’t always the best solution, and what can be done instead.


Understanding the Elements of Responsive Web Design

This post from Six Revisions covers the basics of responsive design: flexible grid, flexible images, and media queries.


A Brief Overview of Responsive Design

Here’s another great basic rundown of what responsive design is and how to achieve it, this time from 1st Web Designer.


Responsive Web Design has Created Opportunities Across the Board

This post covers some of the opportunities that responsive design presents for designers and developers.


Designing for a Responsive Web

This article from Webdesigntuts+ discusses responsive design in terms of fluid grid, fluid images, and media queries.


Experimenting with Responsive Web Design

This article from Lee Munroe gives a simple overview of responsive design, particularly media queries, as well as some examples.


CSS3 Media Queries

Web Designer Wall offers a great roundup of media query code snippets, responsive design examples, and more in this article.


20 Amazing Examples of Using Media Queries for Responsive Web Design

This post from Design Shack offers up some great examples of responsive design, as well as plenty of information how to create your own responsive sites.


Context

This post from Adactio covers some of the confusion that often surrounds responsive design, breaking it down in simple terms and offering some useful insight.


A Richer Canvas

This article from Mark Boulton discusses some of the advantages that responsive design, CSS3, and other tools give designers and content creators, specifically that we should be designing from the content out, rather than the other way around.


Some Thoughts on Responsive Web-Design and Media Queries

This post from Jon Phillips discusses some of the potential downsides to responsive design and, more importantly, offers some great solutions.


Responsive Web Design and Mobile Context

This post discusses how mobile devices are being used for browsing web content, and how that can affect your responsive design choices.


The New Front End Design Stack: The Role of Responsive Design

This post from Acquia discusses the importance of responsive design, offers some great examples, the technical elements that go into creating responsive designs, and more.


Responsive Web Design from the Future

Responsive Web Design from the Future is a presentation by Kyle Neath that discusses the future of web design in relation to responsive design principles.


To Hell With Bad Devices: Responsive Web Design and Web Standards

This is an in-depth look at responsive design, discussing device-specific design, what responsive design means for apps, and more.


The Pros and Cons of Responsive Web Design

Plenty of articles discuss how to create a responsive design, but not that many discuss the good and bad things about responsive designs. The Pam does just that, giving a fairly comprehensive list of the positives and negatives associated.


11 Reasons Why Responsive Web Design Isn’t That Cool

This post from WebDesignShock outlines some of the potential challenges and problems that responsive design can present.


Tutorials

The tutorials below will teach you about CSS media queries and other responsive design techniques.

Quick Tip: A Crash-Course in CSS Media Queries

This Nettuts+ tutorial offers some basics for working with media queries, complete with video tutorial and code snippets.


Adaptive Layouts with Media Queries

This tutorial from .Net Magazine offers a look at basic CSS3 media query techniques. It includes plenty of code snippets and practical information about crafting your own responsive layouts.


Responsive Web Design: A Visual Guide

This video tutorial from Tuts+ offers a great introduction to what responsive design looks like, with examples. It then explains how to create your own responsive design, taking into account both the visual and technical aspects.


CSS Media Queries & Using Available Space

This post from CSS-Tricks explains the concept of using media queries to take advantage of the available space in the browser viewport. It includes plenty of useful code snippets and examples.


Working with Media Queries

Here’s a short tutorial for working with media queries, with plenty of code examples. It’s basic and to-the-point, but a perfect introduction to basic media queries.


How to Use CSS3 Orientation Media Queries

Media queries are great for adjusting the way your responsive design displays on different browser sizes, but a lot of designers overlook the orientation controls. These allow you to change the way your site is displayed based on whether a device is currently oriented to portrait or landscape mode, which is useful for both smart phones and tablets.


Optimizing Your Email for Mobile Devices with the @media Query

We often overlook HTML email newsletters when thinking about responsive design, but considering the number of people who are likely to view your HTML emails on their phone, it’s a good idea to use media queries in this case. This post from Campaign Monitor explains how it’s done.


How to Use CSS3 Media Queries to Create a Mobile Version of Your Website

This post from Smashing Magazine explains how to use media queries for creating a mobile site or otherwise linking separate stylesheets.


Adaptive & Responsive Design with CSS3 Media Queries

This fantastic post from Web Designer Wall includes a responsive design template, as well as a tutorial on how the template was created. It’s a great resource for those who like to learn new techniques by dissecting finished projects.


Responsive Web Design with HTML5 and the Less Framework 3

This article from SitePoint offers thorough instructions for creating a responsive design using HTML5 and the Less Framework. It includes all the code you’ll need for the final design, as well as a good breakdown of what that code does.


Tools and Techniques

The techniques and tools below make it a lot easier to create designs that respond the way you want them to. Many are for handling images (arguably one of the more challenging aspects of responsive design), but there are others, too.

CSS Effect: Spacing Images Out to Match Text Height

Depending on your layout, you may need text to line up properly with images, regardless of how the images and text are spaced. This technique from Zomigi shows you how to do just that.


Hiding and Revealing Portions of Images

Resizing images can only take you so far with responsive designs in some cases. At times, it’s more important for a particular part of an image to be visible or readable than for the entire image to be shown. That’s where this technique from Zomigi can come in handy. It makes it possible to dynamically crop background and foreground images as your layout width changes.


Creating Sliding Composite Images

This technique, from Zomigi, lets you create what appears to be a single image but is actually multiple images layered on top of one another. In this way, you can control the exact placement of different elements of the image as your browser viewport changes size and shape.


Seamless Responsive Photo Grid

This gallery from CSS-Tricks offers up a seamless photo grid that automatically resizes your images and the overall grid to fit your browser viewport.


Responsive Data Tables

Responsive design techniques aren’t very friendly to data tables. It’s easy to end up with tables where the type is so small it’s impossible to read. Or you can specify a minimum width, but then that kind of defeats the purpose of a responsive design. This technique from CSS-Tricks offers a solution for responsively displaying tabular data on a mobile device.


Foreground Images that Scale with the Layout

So it’s easy enough to create scaling background images, but foreground images are a little trickier. This article covers a technique from Zomigi for creating foreground images in your content that will scale with your layout.


FitText

FitText is a jQuery plugin for scaling headline text in your responsive designs. Using this, your text will always fill the width of the parent element.


Sencha.io Src

Sencha.io Src is an image hosting service that sizes your images to the appropriate size for the device requesting them. Images are also optimized for efficient repeat delivery.


The Goldilocks Approach to Responsive Design

This post by Chris Armstrong talks about the “Goldilocks Approach” for creating responsive designs that are “just right” for any device.


Responsive-Images

Responsive-Images is an experiment in mobile-first images that scale responsively to fit your design. The idea is to deliver optimized, contextual image sizes in responsive layouts.


Lettering.js

Lettering.js is a jQuery plugin that gives you precise control over the way your web typography appears, which can be a big plus in maintaining readability in a responsive design.


Fluid Images

This technique from Ethan Marcotte creates fluid-width images for your fluid designs. It also works for embedded videos, and there’s a workaround for IE compatibility.


Respond

Respond is a lightweight polyfill script for min/max width CSS3 media queries, to make them work in Internet Explorer 6-8. It’s only 3kb minified, or 1kb gzipped.


Modernizr

Modernizr is a toolkit for HTML5 and CSS3 that provides JavaScript-driven feature detection combined with media queries.


Responsive Web Design Sketch Sheets

If you wireframe your designs on paper, you’ll find these Responsive Web Design Sketch Sheets to be very useful. There are a couple of different layouts you can download for free, each of which shows a handful of likely device viewports.


Frameworks and Boilerplates

Frameworks and boilerplates can greatly speed up your design process. The good news is that there are tons of boilerplates and frameworks already available for creating responsive designs.

Golden Grid System

The Golden Grid System uses a 16-column base design for widescreen monitors. On tablets, the columns will fold into an 8-column layout. And on smaller smartphone screens, the columns fold again to 4-columns, allowing the design to adapt to anything from a 2560 pixel wide screen down to a 240 pixel screen.


The Semantic Grid System

The Semantic Grid System allows for fluid layouts and responsive designs, while also using semantic markup (which is sorely lacking from most grid frameworks).


Gridless

Gridless is an HTML5 and CSS3 boilerplate for creating mobile-first responsive websites. It includes no predefined grid system and no non-semantic classes.


Less Framework 4

The Less Framework is a CSS grid system for designing responsive sites that adapt to the size of the browser viewport. It has four layouts: default (for desktops and landscape mode tablets), tablet layout, wide mobile layout, and mobile layout. This is a good option for designers who want a responsive design but don’t necessarily want fluid columns.


Responsive Twenty Ten

Responsive Twenty Ten is based on the Twenty Ten WordPress theme. There’s also a plugin available to turn your Twenty Ten child theme into a responsive design.


Columnal

Columnal is a CSS grid system that’s a “remix” of some other grids, with added custom code. The elastic grid base is taken from cssgrid.net, while other bits of code are taken from 960.gs.


1140 CSS Grid

The 1140 CSS Grid System is a flexible, fluid grid that will rearrange based on the browser viewport. It’s designed to fit perfectly in a 1280 pixel wide monitor, but becomes fluid below that.


320 and Up

320 and Up uses the mobile-first principle to prevent mobile devices from downloading desktop assets. It’s an alternative to starting with a desktop version and scaling down.


Skeleton

Skeleton is a boilterplate for responsive, mobile-friend designs. It starts with the 960 grid but scales down for smaller screens, and is designed to be both fast to get started with a style agnostic.


Fluid Grid System

The Fluid Grid System is based on a six-column grid and has 720 different layout possibilities. Because of its simplicity, it degrades well in older browsers.


Fluid 960 Grid System

The Fluid 960 Grid System is based on 960.gs, but has a fluid layout regardless of browser size.


Foldy960

Foldy960 is a responsive version of 960.gs. It consists of some extra classes and other things for turning a 960.gs design into a responsive design.


SimpleGrid

SimpleGrid is another responsive grid framework that supports infinite nesting. It’s configured for screens at four different sizes, including 1235px and 720px.


Testing Tools

These tools make it much easier to test your responsive designs without having to use a bunch of different devices.

resizeMyBrowser

resizeMyBrowser is a useful testing tool for responsive designs. Just click one of the predefined browser size buttons and your browser will resize. Each size is labeled with the name of at least one device that uses that resolution.


responsivepx

responsivepx is a browser testing tool that lets you enter a URL (local or online) and then adjust the height and width of the browser viewport to see exact break-point widths in pixels.


Responsive Design Testing

Matt Kersley has created this browser testing tool that lets you see exactly how your site displays at common browser widths, starting at 240px and going up to 1024px.


Screenfly

Screenfly shows you how a website will look on various devices, including internet-enabled TVs and mobile devices.


Adobe Device Central

A number of Adobe Creative Suite products come with Device Central, which can be a very valuable tool for testing your responsive designs. It lets you not only preview, but also test your designs on the device of your choice.


Examples

Below are 100 examples of fantastic responsive designs. There are a lot more sites out there using the technique, and new ones are launched every day. One great resource for finding new sites is Media Queries, a gallery dedicated specifically to sites using responsive design techniques.

Profi Span


Forgotten Presidents


Ben Handzo


Aaron Shekey


The Highway Hurricanes


dConstruct 2011


Merlin Ord & Media


The Happy Bit


Forefathers


Easy Readers: Adaptive Web Design


More Hazards More Heroes


Facts Regula


Hi, My Name is Andrew


Sifter


FoodDrinkEurope


The Obvious Corporation


Geek in the Park


Mapalong


JCHELBY


10K Apart


Expositio


Food Sense


New Adventures in Web Design Conference


Cisco London 2012


Team PAWS Chicago


Diablo Media


Andersson-Wise Architects


Designing with Data


Full Frontal 2011


Aaron Weyenberg


Web Design Yorkshire


Winnie Lim


Urban Svensson


Luke Williams


Upperdog


Writer


Toronto Standard


Design Professionalism


Impact Dialing


Modernizr


Johan Brook


Dust and Mold Design


Gridchin


Staffanstorp


El Sendero del Cacao


Dustin Senos


Kisko Labs



51bits


digitalHappy


Patrick Grady


Trent Walton


Headshift


Owltastic


WeeNudge


Ash Physical Training


Mark Boulton


The Modern Gentleman


Build Guild


Do Lectures


David Hughes


320 and Up


About.com


Really Simple


Splendid


Leica Explorer


Spigot Design


Cohenspire


Jason Weaver


Joni Korpi


iwantedrock.com


Converge SE


Pelican Fly


Simple Bits


Information Architects


Andy Croll


Hicks Design


8 Faces


The Sweet Hat Club


Little Pea Bakery


Sleepstreet


Andrew Revitt


Cujo.jp


Interim.it


Philip Meissner Design


Teixido


Transfinancieel


UX London


Jeremy Madrid


Brad Dielman


Thomas Prior


Clearleft


Herjen Oldenbeuving


Bureau


City Crawlers Berlin


CSS-Tricks


Robot…or Not?


Marcelino Llano


Caleb Ogden


A Flexible Grid


Simon Collison


More roundups

Here are some more great responsive design roundups from other sites.


Written exclusively for WDD by Cameron Chapman.

Are you using responsive design techniques in your projects? Know of any resources we missed? Let us know in the comments!

Source

March 11 2011

17:30

How French Site OWNI Profits by Giving Away Its Content

AUlogo.jpg

Business content on MediaShift is sponsored by the weekend MA in Public Communication at American University. Designed for working professionals, the program is suited to career changers and public relations or social marketing professionals seeking career advancement. Learn more here.

Most content sites in the U.S. have two ways of making money: charging for subscriptions or running advertising (or both). But a French site, OWNI.fr, has found an unusual business model for a site with no ads and no subscriptions -- that's also profitable. How do they do it? Their main business is doing web development and apps for media companies and institutions.

One big advantage for OWNI is its origins as a pure online business, with an entrepreneurial CEO Nicolas Voisin and a staff of web developers. The site was initially an aggregation of bloggers, with the parent company called 22Mars (March 22nd), set up to fight a controversial French copyright law known as HADOPI. While 22Mars was made up of web developers at launch in April 2009, they eventually revamped the site with more editorial direction and hired journalists in 2010 to work alongside the developers.

The result is a striking website, with an eye-catching design and various examples of data journalism and data visualization. In fact, when they set up an English-language site, OWNI.eu, its motto was "Digital Journalism." The site won an Online Journalism Award at the ONA conference last year, and is a finalist in next week's SXSW Accelerator competition for "news-related technologies." Here's a screen shot from one data visualization showing how many people have died immigrating to Europe from Africa:



fortress europe.jpg

All the American interest in the French site will grow exponentially when the site opens a U.S. subsidiary next month, somewhere in the San Francisco Bay Area. I spoke to the future CEO of that U.S. subsidiary, Adriano Farano, an Italian who had helped run Cafe Babel, a pan-European website. Here, he explains what the name OWNI means in French (largely a play on "UFO"):

adriano1.mp3

Farano told me that the parent company, 22Mars, is about a third of the way to closing a Series C round of funding for about 1.5 million Euros, and that they will seek a first round of funding for OWNI.us. In France, the company grew from just 8 people a year ago to 37 today, with 15 full-time journalists. At the same time, Farano says the site traffic also boomed, going from 200,000 monthly unique visitors to 1.5 million uniques today.

I also spoke by phone to OWNI's director of data journalism, Nicolas Kayser-Bril. The following is an edited transcript of our international phone conversation.

Q&A

Why did you start OWNI and what were your aims?

Nicolas Kayser-Bril: It wasn't planned to be a media company at all. It was started in April 2009, where there was a law called HADOPI being passed in the French parliament, that was dangerous for online freedom [and later was the basis for Loppsi 2]. Several bloggers got together to set up a platform [to fight the law]. And the company that was set up to run OWNI is called 22Mars, and we decided to host the platform so we had a blog network hosted on a WordPress platform. Step by step, the platform grew, and Nicolas Voisin, the CEO of 22Mars decided to take the experiment further and put one person full-time on maintaining and engaging the community.

We saw that this worked well so we put more resources and people into OWNI. So we decided to become a real media [outlet], a real website, still with this strong community of bloggers behind it. In the summer of 2010, we realized that OWNI had become a real media [outlet], ran stories, and really had a big impact in the traditional media sphere. We hadn't really planned to become one. This changed the way the company was organized. At first we had been more of a showroom for what we're doing, and today it's more of a lab where journalists are free to innovate and do what they want.

With that experience, we continue to run our service company, selling website development and applications. We specialize in providing apps and social media platforms. Half of our sales today have to do with social media, and the other half has to do with data visualization, crowdsourcing apps, and running innovative journalistic products. We serve all kinds of institutions and NGOs that have a story to tell but don't know how to to do it online. We build the tools for them to do so.

When you say half of your sales is social media does that mean helping them with social media strategy?

Kayser-Bril: We do some social media consulting, but most of the work is building social media websites tailor made [for clients]. For instance, with universities, they have unique problems as to how to communicate between teachers and students and the wider public. So we built the interface using WordPress to solve this problem. So we always build custom solutions with added value.

What was your background and that of the OWNI CEO Nicolas Voisin?

Kayser-Bril: Nicolas, our CEO, was an entrepreneur and got into the media in 2006 before the presidential election in France. He started doing a political show; he realized there was a big gap on how the public was informed about candidates' platforms. So what he decided to do was interview them without time limits and spent hours with them, and then posted them on YouTube. It worked really well, so he thought there was a need to reinvent storytelling online. That's what drove him.

The other core people at the company are mostly developers. I myself have a background in economics. I never studied journalism. Before OWNI, I was living in Berlin and working at a startup. Before that I was doing freelance work. I was doing online work for a presidential campaign in 2009, mostly web-related things. We didn't hire a traditional journalist until February 2010. Now we have many seasoned journalists working for us.

So you are set up as a non-profit or for-profit company?

Kayser-Bril: 22Mars is for-profit, and we did not spin off OWNI as a non-profit organization from an accounting perspective. The website does not have to make a profit in the sense that we don't make money from the website. No subscriptions and no hidden advertisements. The value the website provides is in gaining expertise online that we can then share and sell to clients.

So your model is basically making money by developing websites and custom social media solutions? The site is more of a testing lab?

Kayser-Bril: Exactly. You could compare it to businesses in other industries. We might start selling online objects or other products in the coming months to have more high-margin products.

We will start selling e-books, which is a big driving force of 22Mars -- we don't sell content but we sell products, because everyone knows content is abundant. What's missing is a way to properly browse through it and consume it. So we'll be selling apps. Not apps for the iPhone or in the App Store. We always remain on the HTML side and JavaScript and stay compatible with all platforms. So they would run on the open web as well as on the iPhone and iPad.

augmented cartoon.jpg

We're convinced that the apps you see on the iPhone and iPad and Android in the future will be merged into web apps because it makes more sense economically to develop something once instead of three or four times. We develop for all devices. We recently published what we call an augmented cartoon where you have more depth in text, and can follow links. We made it for the iPad; it was more of an iPad app than it worked on a computer. With HTML 5 you can really design an app and optimize it for the device you want.

Kayser-Bril explains how developers will work for OWNI for less money than at other companies because they have a chance to work on projects about society and politics:

nicolas1.mp3

Does OWNI have a specific political viewpoint?

Kayser-Bril: Not really, we're not really involved in politics. What we do fight for is freedom online and offline, supporting the declaration of human rights. We could lead fights in defense of Internet freedoms (for example, against censorship, for Net neutrality, etc.). We'll fight against all laws that restrict freedom of speech online. We don't have any more political views beyond that. When you see the political views of people at OWNI, it ranges from leftist to libertarian so it would be impossible to have a single political line.

Tell me about the work you've done for WikiLeaks.

Kayser-Bril: WikiLeaks called us to do similar work that we are doing on a daily basis, which is building interfaces and web apps. Their problem is that they had masses of web documents but they were not comprehensible for a normal human being. So we came up with this app to browse through the Afghan War Logs. It illustrates how OWNI works, because when the Afghan War Logs came out, we realized we could build that just like for the Iraq War Logs.

afghan war logs.jpg

It was a non-commercial relationship with WikiLeaks, and it made perfect sense because we learned a lot so we could sell crowdsourcing applications. From a business perspective it made a lot of sense.

Kayser-Bril explains how OWNI helps clients with unique open solutions, and that everyone's become a media outlet now:

nicolas2.mp3

Have you done work for media companies?

Kayser-Bril: Yes, many French ones. Our client list include France24, Radio France Internationale, Groupe Moniteur (professional magazines), Le Monde Diplomatique, Slate.fr, Le Soir (Brussels) and Zeit Online (Berlin). We're in talks with many more, and we've worked as well for NGOs and public institutions (the municipality of Paris and the French presidency).

I noticed that you re-post or license content from other sites on OWNI. How much of your content is original vs. reposted?

Kayser-Bril: About half and half. We are trying to reach the 60% mark of original content. If someone is more of an expert than we are, we just republish his or her article. Not just re-posting it, but fact-checking it, adding images -- we really want to add value to cross-posted articles.

You have a Creative Commons license on your stories. So does that mean anyone can run your stories on their site?

Kayser-Bril: Of course. Our whole business model is built on the Creative Commons license. On the content side, the more our articles are republished, the happier we are. We don't have advertising, but we want our articles to be read. Please repost them. On the business side as well, we only use open technologies -- HTML and JavaScript and no Flash. And that makes sense because our added value isn't in the code or software that we build, but how we can answer our clients' needs and provide them open solutions.

Kayser-Bril explains how OWNI's new U.S. site won't consider other media sites as competition but as partners:

nicolas3.mp3

Can you point to any successes you've had in some of your journalism experiments?

Kayser-Bril: The WikiLeaks project didn't turn out as well as it could have. One thing we did was rethink the way surveys are made. We worked with a pollster and realized that when a media [outlet] orders a survey, what you get in the paper is a page with two infographics and a pie chart. That's not enough. We built an app that lets you browse through all the data the pollster gathered to really see in your area what men over 45 thought. What was really successful was we added the possibilitiy for you to take the survey while you were browsing the app.

That's extremely interesting in terms of journalism, because you can see what your audience is like compared to the people who took the survey. It's also interesting in terms of business because one big asset today is having a big database with qualified voters and such an app would be very valuable for many clients.

*****

What do you think about OWNI's site and business model? Do you think they can replicate their success in the U.S.? Why or why not? Share your thoughts in the comments below.

Mark Glaser is executive editor of MediaShift and Idea Lab. He also writes the bi-weekly OPA Intelligence Report email newsletter for the Online Publishers Association. He lives in San Francisco with his son Julian. You can follow him on Twitter @mediatwit.

AUlogo.jpg

Business content on MediaShift is sponsored by the weekend MA in Public Communication at American University. Designed for working professionals, the program is suited to career changers and public relations or social marketing professionals seeking career advancement. Learn more here.

This is a summary. Visit our site for the full post ».

August 26 2010

10:19

Growing Lourish.com: A NetSquared Cambridge Event Wrap-up

Cuddly toy and CSS bookThe August NetSquared Cambridge (UK) event was led by Dave Bower, a software developer who is the driving force behind Lourish.com. Lourish is a newly launched website designed to facilitate swapping of home-grown fruit and veg in the local community.

read more

July 27 2010

12:46

Hacks and Hackers look at health, education and leisure

Online journalism expert Paul Bradshaw gives a detailed post on his experiences of a recent Hacks and Hackers day in Birmingham organised by Scraperwiki, experiences which he claims will “challenge the way you approach information as a journalist”.

Talking through the days events, Bradshaw observes how journalists had to adapt their traditional skills for finding stories.

Developers and journalists are continually asking each other for direction as the project develops: while the developers are shaping data into a format suitable for interpretation, the journalist might be gathering related data to layer on top of it or information that would illuminate or contextualise it.

This made for a lot of hard journalistic work – finding datasets, understanding them, and thinking of the stories within them, particularly with regard to how they connected with other sets of data and how they might be useful for users to interrogate themselves.

It struck me as a different skill to that normally practised by journalists – we were looking not for stories but for ‘nodes’: links between information such as local authority or area codes, school identifiers, and so on. Finding a story in data is relatively easy when compared to a project like this, and it did remind me more of the investigative process than the way a traditional newsroom works.

His team’s work led to the creation of a map pinpointing all 8,000 GP surgeries around the UK, which they then layered with additional data enabling them to view issues on a geographical measure.

See his full post here…Similar Posts:



March 19 2010

17:07

How To Increase Conversions On Any Website In 45 Minutes [Six Revisions]

“Redesigning a website, or even a single page, can be a tedious and time-consuming process. Re-opening a project that you so happily completed can take major mental willpower. However, improving a website doesn’t need to take weeks, or even days. I’m a believer in baby steps: making incremental progress, small victories, minor adjustments with big results.

That’s where my 45-minute plan comes into play. In less time than you spend watching The Bachelor each week, you can have a dramatic (and measurable) effect on your website.”

Read more at Six Revisions

Share: Twitter Facebook del.icio.us Digg StumbleUpon Reddit Yahoo! Buzz FriendFeed NewsVine Mixx Suggest to Techmeme via Twitter MisterWong

February 20 2010

08:26

Free Multimedia Tool Workshop Updated Handouts

online news association ona logoHey Journalistopians, it’s been a long while, but I wanted to post the handouts and examples I’ll be sharing at this weekend’s Online News Association Parachute Training in Boca Raton, Fla. Feel free to use these in presentations, in the classroom, to line your birdcage — whatever tickles your fancy!

Share: Twitter Facebook del.icio.us Digg StumbleUpon Reddit Yahoo! Buzz FriendFeed NewsVine Mixx Suggest to Techmeme via Twitter MisterWong

Older posts are this way If this message doesn't go away, click anywhere on the page to continue loading posts.
Could not load more posts
Maybe Soup is currently being updated? I'll try again automatically in a few seconds...
Just a second, loading more posts...
You've reached the end.

Don't be the product, buy the product!

Schweinderl