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.

Blog 5 Medium.com

Screen Shot 2014-10-24 at 11.27.19 AM

The website that I like is medium.com. I discovered the site from app store. I like the app very much because it is clean and easy to use. Basically you swipe from article to article and scroll up and down to read the article. The website is very easy to use as well, it is very simple and clean, it has a nice amount of visual elements that come with story. In addition, it tells you how long does each article takes you to read.

The intended audience is general audience on social media, and the contents are created by them and for them. The color scheme of the website is black, gray and white, it is very simple and non-distraction. The typography has a clean and smooth outline.

The pictures on the website are also interactive, so they are clickable and can lead you to more similar stories and give you more contexts and details about the article. You can also click on the author to go to their profile, so you can read more articles from the author.

Blog 4: WIRED magazine

Screen Shot 2014-10-10 at 10.55.19 AMThe site I’m critiquing this week is WIRED magazine’s website. The homepage layout of the website is very clean and clear, there’s no confusion about which section is which and what content is belong to what story. There are many good looking and relevant pictures that comes next to the articles. In addition to all that, I also find that the website has some gifs instead of still photographs on it. I like that because it can grab the readers’ attention, but I think journalists and designers should be cautious when it comes to using gifs because overusing can create visual chaos (imagine when you open a webpage and everything is moving…). I think the intended audience for the magazine is young upper middle class people, who are enthusiastic about science, Internet and technology.

While wandering around on the WIRED website, this story package caught my eyes. It combined still photographs, texts and gifs (which is a relatively new way for journalists to tell stories) to tell a story about beautiful yet deadly sea creatures. The story used photos and gifs to show how beautiful those creatures are and used text to explain how deadly they are. The story is not really ongoing, but it is an episode of a bigger series. At the end of the article, the journalist said, “Browse the full Absurd Creature of the Week archive here.” Which linked the article to the whole series.

Blog Three: Columbia Daily Tribune navigation CSS

By Hellen Tian

Screen Shot 2014-09-26 at 11.41.01 AM

I’m going to look at is Columbia Daily Tribune’s website this week. I like that the website have a drop down list when you hover over the beats. How they did it is they built a sub ul under each beat, and then put divs on those sub uls. Then they style it in CSS file.

It took me a while to find the CSS of the drop-down menu: that’s mainly because it took me a while to see that they made the effect by constructing ul under ul…

The first thing I did was I found its CSS and I disabled text-transform: uppercase. Then the beats on the homepage really becomes lower case… But that was in the CSS of the main navigation bar. Then I found the CSS of the sublist, and I disabled the font in the sublist, and then the font becomes Times New Roman. Because they have so many beats, the website have layers and layers of divs, and therefore there are so much overrode lines in the sublist CSS file!

I think this is a very practical trick that we would use, and it seems like it’s not terribly hard to make as long as you don’t lost track of your divs.

Blog 2: Missouri Business Alert website usability critique

mba

By Hellen Tian

The site I’m looking into is Missouri Business Alert’s website. It follows Steve Krug’s five guidelines for capturing reader attention/aiding in comprehension:
1. Create a  clear visual hierarchy on each page

2. Take advantage of conventions

3. Break pages up into clearly defined areas

4. Make it obvious what’s clickable

5. Minimize noise

To begin with, the site’s has a clean layout, viewers know what each section is about and there’s no confusion of what you can click on and what you can’t. There’s no noise in the website, everything is very clean and clear. The headline of the latest story is being presented on the very top of its main page, followed by latest stories (clickable url). Since news is being produced in chronological order, this is a very reasonable way to organize news feed. This kind of layout is also widely used in social media. Since social media platforms have a lot of users today, and readers are familiar with newsfeed organized in chronological order, it is smart for a news organization to organize its content this way.

The website’s “market snapshot” section shows how the stock market is going, which is something MBA user may care about.

One of my favorite part about the website is “If you only have 5 Minutes don’t miss these stories” section. This pushes news to the readers, letting them know how long does it take to read a news article. This addresses the readers’ potential concern of “I want to read the story but I don’t know long this may take. I’m not going to start because I don’t know if I have enough time to finish.”

MBA also offered different ways of organizing the content. For instance, you can choose to organize the content by region, by industry, etc. This helps niche audience to get the content they want on MBA website.

The visual elements are relevant to the stories, they are well produced and does not turn off viewers.

MBA also has good consciousness of connecting with audience on social media. There are social media badges on MBA’s website, so users can follow their feed on social media.

Blog One – Kowloon Walled City (By WSJ)

By Hellen Tian

kowloon

At the end of last semester, this piece (Kowloon Walled City) by Wall Street Journal caught my eyes. Using digital methods, journalists from Wall Street Journal incorporated audio, videos, still photographs, web interactives, and info graphics, etc. to tell the story about the “Walled City” in Kowloon, Hong Kong. The use of the natural sound at the very beginning of the project grabbed my attention and aroused my curiosity. Thus I clicked “begin exploring.”

In general, the site is engaging, and the usage is self explanatory. I personally did not experience any confusion about any content in the project. Information are presented in a clear and interesting way. For instance, after clicking “begin exploring” button, you would get into an animated snapshot of the “walled city”. When you move your mouse around, you know where to click. By looking at the human figures moving, you would want to click on them. Another example would be, in the “Explore” section, there is an info graphic that compares the population density of the “walled city” to other populous places in the world, like Manhattan. Such comparison is very clear and intuitive. It gives you a sense of how densely populated the “walled city” is.

There are also some details could enhance user experience if they are better done. For example, in the introduction video, the audio quality is not very well done. Some parts are fuzzy and you can hear clear audio jump-cuts. Also, the video ended when the man sounds like he is about to say something. This could leave viewers wonder “what is it that they [the journalists] cut off?” The visual component of the video is rather blurry as well. Not only the b-roll part (which may be old, because the “walled city” is being demolished some 20 years ago), but also the interview. That could undermine user experience and makes the piece look unprofessional.

Also, since most of the clips need subtitles, the time panel on the video should always promptly disappear when the mouse moves away from the video window. However this does not always happen (sometimes it disappears but in a delayed manner) for this project. As a result, the time panel sometimes blocks with the subtitle. Since a lot of the interviewees in this project speak Cantonese and a lot of readers of Wall Street Journal are English readers/speakers, this flaw makes information unable to get through.