Introduction
Today, we are going to be going into an in-depth look by hacking into multiple websites source code... which isn't really hacking at all, seeing as anyone can access it on any website, but it sounds cooler this way. With each website, I will find things I like that it does or what makes it unique.
YouTube

Youtube is the first place many people go to whenever they get online, and that is very understandable. Of course, they didn't get such a following without a little bit of web design magic. Let's look at a few things that I really liked in this opening page.
The Sidebar

At the core, this is little more than just a normal li that fits in some stuff that YouTube has to offer. On the surface, that's really all it is, but I like it for two reasons: it knows its place, and shows what YouTube is all about right off the bat. When I say it knows its place, I mean that at a point, it is no longer there. It doesn't take up a lot of unnecessary space when space becomes an issue at smaller sizes. When I say I love it for showing what YouTube is all about, I mean that if someone was to go onto YouTube for the first time in their entire life, they would know what they would expect to find. That a very good and very smart design choice and helps a lot of people out.

Recommendations
This may seem very minor, but there are many times where amazing YouTube videos or music is found using this. It takes what you like, and goes off to find videos that are similar to it in some way, and then recommends this to you. It is low enough down that it doesn't distract from the main content, but it is still there and easy to find, meaning that if you've ever run out of things to watch, you can find something new that you would've never found before. An amazing design and usability choice that also keeps users on the website longer!
CNN

The first 24 hour news station also has a pretty cool website with good ideas behind it and creates an overall good aesthetic of both simplicity and also being right to the point on information. Another bonus: the website is open for 24 hours (like every other website).
The New Stories
As to be expected, most people come to a news website for, well, news. CNN does such a good job at showing all the breaking news by putting up a live feed constantly to see what is both new and trending. While the criteria to get here isn't exactly the strictest, it provides information for someone who checks the news often and wants to see some immediate info that is about as current as can be. I love the way the code gives out the information, too. Instead of just hard coding it in every time they wanna change it, they simply set the article to a certain value and then the website goes to find that.

The Big Story

Big stories happen, and CNN really shows this off. Literally. They make the big story massive and right up in your face. Of course, these are the stories that would be the stories that would make headlines if this was a newspaper, and the transition from that into a website works better than one might think it normally would. Of course this is more than an h1 on steroids. This was made particularly as it is listed as "hierarchal pipe" in the inspect element. It is a genius way to catch attention that, while it has existed about as long as any form of media, still works very very well in the world today.
W3 Schools

W3 Schools is the place where anyone who wants to know anything about any kind of web-based code. A website like that needs to have some kind of design prowess so people will find themselves coming to the website. Good for the website itself, as it is a success on that part!
Try It Yourself
Any good teacher knows that you can't just tell someone how to do something and expect them to know how to do it. It just isn't the way we as humans work. W3 knows this, and makes sure that you have the option to try something out for yourself and truly understand what it is one is trying to learn. Not only that, it makes the website itself look much better and fits in very naturally with the overall design. At no point did the box look out of place. Right away you know that this website isn't going to tell you, but rather help you and let you learn from your experience that you have there.
A Sneak Peek

When first learning how to code, you may not be able to tell the difference between C++ or plain html. That is why right away W3 makes sure to give you a snapshot of what a chunk of code will look like. Even just seeing that little tidbit can help someone who is trying to learn web design and to fully understand what they're seeing. Something so simple can actually end up doing a lot for a website and how well it functions.
No comments:
Post a Comment