Tag Archives: CSS

From low-fidelity paper design to high-fidelity prototype

I’ve been working on a new mobile design prototype for Science News for Kids. I started with a sketch book and a pen and ended up with a high-fidelity prototype using HTML, CSS and Javascript. Along the way I made high-fidelity wireframes with graphics editing program Pixelmater, created my initial prototype with code, did a usability study, iterated and this is a near final version of the prototype.

One of the nice things about prototyping with code is that once you get the bones of a website built, it’s easy to make changes and see how those changes impact your design. Someone doesn’t like how a color looks or how thick a border is? Just change the code and show them the results. It’s much more efficient than going back and forth with Photoshop wireframes.

The dangers of automatically truncating headlines

What’s the difference between losing a football recruit due to sex versus due to a sex offender?

Apparently, ESPN Cleveland doesn’t see a big difference. Below is what ESPN.com is reporting on their website about Ohio State losing a football recruit do to a sex offender being able to take a photo with the recruit (the recruit did not know the person was a sex offender and wasn’t pleased that Ohio State doesn’t take better precautions to prevent sex offenders from having content with college and high school students):

Since this story is about Ohio State, ESPN Cleveland automatically picked up the headline and linked to espn.com’s story. The problem is that ESPN.com has more headline space to work with than ESPN Cleveland. Sometimes, cutting off a word can really change the entire meaning of a story. Take a look:

ESPN Cleveland’s headline is factually wrong. This story has nothing to do with a recruit having sex. It is about sex offenders having access to recruits.

Perhaps the weirdest part of this whole affair is all that white space on ESPNCleveland.com in their local news box. Look at all that white space just hanging out on the right side of that box. There is all the space in the world.

There is plenty of space for ESPNCleveland to use the same headlines as ESPN.com. I suspect the box that those headlines are in is using too aggressive of padding or margins in CSS from the right side of that box.

If you are going to automatically grab headlines, and you’re a news organization, you might want to think really hard about having a computer truncate a headline. You might just end up with a libelous and ridiculous headline.

While allowing headlines to go onto multiple lines doesn’t look as good, it at least allows for factually accurate headlines. When reporting news, function should come before form.

#jcarn: Journalism needs more journalists that appreciate programming and technology

This is my blog post for this month’s Carnival of Journalism.

Journalism needs programmers.

Journalism needs journalists who know how to program.

Journalism needs journalists that appreciate programming.

The best gift that journalists — and by extension journalism — could get from programmers and developers doesn’t come from programmers and developers but from journalists and especially top editors. What journalism needs more of is a respect for technology and technologists. Journalism organizations need to hire more people with tech skills and to have a greater appreciation for people with tech skills. Journalism organizations especially need to hire more people with traditional journalism skills and technology skills.

But a word of caution: An appreciation for tech skills and developers doesn’t mean chasing the latest buzzwords. In fact, watching many news organizations chasing trends instead of meaningful innovation leads me to believe that there isn’t a healthy enough appreciation for technology in newsroom. There simply aren’t enough people in newsrooms with the skills to know what is worth pursuing and what isn’t.

Sometimes the best thing you build is the thing you don’t build. There are quite a few iPad news applications that come to mind.

Having an appreciation for tech skills does not mean having a team of developers in a corner of the newsroom or somewhere else in the building. It means having developers work on stories and be integral part of the action. It also means that more journalists need tech skills. These journalists don’t need computer science degrees, but it would be good if they knew some HTML, CSS and programming. It would also be good if more writers understood visual storytelling and vice versa.

Part of the issue isn’t just that newsrooms don’t have enough technologists, despite the Web being the dominant journalism platform, it’s that too many journalists don’t understand technology. Even as a writer or editor, you can work much better with a developer if you understand a little code — if you know what’s possible. Same with photography and videography. If you know how those components can compliment a story, you can work with others in your newsroom to put together better story and feature packages.

Knowing what’s possible is what newsrooms need more of. If I were to start a newsroom from the ground up, everyone would have multiple skills. All of my beatbloggers would know how to write, take photos, shoot video and do some programming. The developers would be good enough writers to write blog posts to go along with their applications. And I would want all of my employees to constantly be curious, looking for ways to make better journalism and be able to deliver it appropriately on the platforms that users want.

Training budgets are tight. I get that. That’s why I have a list of free tools and websites that journalists can use to gain a greater appreciation for programming and what developers do:

  • W3C Schools — Your first stop to learn about HTML, CSS and other Web technologies.
  • CodeAcademy — A simple website with exercises to teach you the basics of programming, programming logic and JavaScript.
  • Mozilla’s JavaScript guide — Continue your education on JavaScript.
  • HTML Boilerplate — Once you learn the basics of HTML, CSS and JavaScript, you can use this default HTML 5 template to start building websites.
  • Computer Science 101 at Stanford — Stanford offers this class for free and the next session starts in February. Follow along and learn with others around the world. I’ve taken a few college-level computer science classes, but I’m going to test this course out and tell you what I think. It has lecture videos and quizzes. It sounds like it should be pretty good.
  • Django — Once you learn some programming, learning a framework is good idea. Think of it as programming on rails and a way to allow you to build applications and websites faster. Django and Ruby on Rails are the two popular frameworks out there. Django is probably more popular in the journalism world, while Rails is more popular overall. I’m personally working to learn Django.
All you need to get started is a good, free text editor. On OS X, I recommend TextWrangler. Eventually you may want something with more power, but that’s fine to get started. Good luck!