How did St.Louis Post-Dispatch use CSS, JQuery, and Javascript in its website

Screen Shot 2014-11-07 at 10.50.17 AM

The website I’m looking at this week is St.Louis Post Dispatch. I can’t tell a ton about how the website uses jquery and javascript, but by looking at the website and its code, I can tell that there are two things definitely using javascript or jquery. The designers used javascript to embed a video player, but I don’t really know how that works, since I don’t really understand those codes. As for the navigation bar, I think the Post-Dispatch staff used the jquery, but I cannot find the jQuery in the website’s code. I think the navigation bar should always stick to the top of the screen, but that is not the case for this website. It disappears after you scroll pass it and comes back up after you scroll to the story section. I guess maybe it’s because of the miscalculation of the height, but it can also be other reason (maybe to be functional in some way or it’s too much trouble to fix). The website used CSS for styling purpose.

Advertisements

jQuery in TED.com

I am a big fan of TED talks. I used to be a lesser fan of the website. But, quite recently, the website got a “makeover.” It used to have a collage of stills from talks. The collage consisted of large to small pictures. If you hovered over the large pictures, you could see the title of the talk. However, you could not do that for the smaller pictures in the collage, which was a little annoying. With the makeover, now the collage has large and medium pictures, which means you can see the title of the talk. It is a great improvement, in my opinion.

homepage

With jQuery, the website has done two great things for its homepage, which makes all the difference in how user-friendly the website is. First, it increased the sizes of the images in the talk-collage (as seen in the picture above). Second, it made a slideshow of sorts of all the recent talks, which you can scroll through with the handy-dandy right arrow button you see.

It’s a simple use of jQuery, but it made all the difference in the world. It is much more clean and fun to use.

Blog Six: Firestorm

Firestorm: The story of the bushfire at Dunalley by The Guardian

This is an amazing work!

Screen Shot 2014-11-06 at 11.22.46 PM

The only thing you need to do is scroll down, and it even provides a small prompt at the bottom to remind you of that. The sticky navigation bar on the right side is convenient and consistent. And the position won’t distract much attention.

Screen Shot 2014-11-06 at 11.20.25 PM

Its design is very user-friendly and it is rich of content. It uses photos, text, graphics, videos background sound and interviews to tell a dramatic and complete story.

Screen Shot 2014-11-06 at 11.22.22 PM

Screen Shot 2014-11-06 at 11.25.29 PM

As readers scroll down, the whole story unfolds as a long slide show. The previous picture fades out and the new picture fades in. Some other effects are used as well. Besides, the text goes up, continuing to tell the story.

When I look for jQuery code, I found it set different Javascript and CSS for IE6 to IE9. It also used jQuery from Google:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>Screen Shot 2014-11-06 at 11.20.25 PM Screen Shot 2014-11-06 at 11.22.22 PM Screen Shot 2014-11-06 at 11.22.46 PM Screen Shot 2014-11-06 at 11.25.29 PM

Blog 6: How Buzzfeed uses JavaScript

Screen Shot 2014-11-05 at 9.58.17 PMOver the last few weeks, I’ve started to see JavaScript and jQuery everywhere — not that it hasn’t been there before. It’s just that I had no idea what it was about.

I wanted to point out Buzzfeed’s homepage because I like how it makes use of photos and captions. The homepage is pretty busy. It has lots of links to stories. It’s already borderline cluttered. But it rescues itself from chaos by using JavaScript. Instead of including headlines with each story link, it just uses photos. If you scroll over the photo, it reveals the headline or caption. This lessons the clutter that would be there if text appeared with every photo. I also like the opacity of the captions on the left side. It still allows you to see the photo.

The emphasis on visual allows for a more appealing homepage, in my opinion. However, the major drawback of this approach is that the visual has to convey what the story means. In some cases, it’s difficult to tell a story just by one image.

I wonder why they didn’t employ more interactive features. The centerpiece is static. It could be an opportunity for a slideshow of several stories. Perhaps they felt that feature would have been too distracting. I also would have found it beneficial to have the navigation stick at the top as you scroll.