Lumayag Venus Art 344A Design for the Internet I Project 1 Discussion
The World Wide Web (better known as the Web) is a place filled with tons of information, various forms of entertainment and a way to connect to others around the world. If you were to spend just an hour browsing, you would find many sites of many subject matters. You might also notice that, just like snowflakes, no two sites are alike. As we wander throughout the Web, we tend to overlook the design of each site and how it came to be from first concept to the final product. In this website, we will talk about two methods of creating sites: table designs and CSS. We will also look into the history of webpage design and its progression throughout the years. In addition, ten sites--five table-based and five CSS-based--will be broken down and studied to see each site's: Main objective (what the site is made for) Site navigation (how to move around and go to page to page) Arrangement of elements (i.e., where everything is placed) Overall effect of the site (does everything work to make a successful site) In the early days of the Web, sites were created using tables through HTML (short for HyperText Markup Language--in short, it's the code written to create websites). Tables are made up of columns and rows, which in turn make cells. Contents for a site are then placed into these cells. At the time, table-designs were popular as they were easy to work with in designing. Of course, table-designs had its share of problems. Some of main problems were the limitation in creativity and the lack of flexibility table-based designs carried. Also, when new technology came into the 21st Century, table sites were hard to view through devices like PDAs (Personal Digital Assistants) and cell phones. A few years passed and a new way of creating sites came onto the scene. This new way was known as Cascading Style Sheets, also known in its
shorten form CSS. With this new way of creating websites, designers had better control on the appearance of the page (for example, formatting text and navigation on a page). Since its arrival, many web designers have converted from table-designs to CSS to create sites. Even though it takes a little bit more time to get used to and can be frustrating to work with at times, the payoff is great for CSS-sites.
As stated earlier, table-based sites are made up of rows and columns, which in turn create cells that are used to place a site's various elements. This is an example of code for a table: table width="460" height="288" border="1"><tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></t r><tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr></table > With this code, a table that is 460 pixels wide and 288 pixels tall with six cells (in this case, a table with two rows and three columns) will be created. The site's content is added between the <td>and the </td>codes (it would replace the &nbsp; part that you see now). Now, let's look at five examples of table-based sites. 1. Elephant Eater Comics - http://www.elephanteater.com/ Former SDSU multimedia graduate student and comic book artist Ryan Claytor created this website to promote his independent publishing company called Elephant Eater Comics which features his autobiographical comic book series And Then One Day. The site is simply designed with a fitting and almost soothing color scheme and site navigation on the top of the page. Features on the site include Claytor's past works, upcoming events and a store where his books and other Elephant Eater goods can be bought. The site is not too over-the-top (just enough to promote Elephant Eater without using too much) and is well-presented overall. 2. San Diego Comic-Con International - http://www.comic-con.org/cci/ The San Diego Comic-Con International is the largest popular arts
convention in North America. What started with a tiny gathering of comic book collectors in the lobby of the U.S. Grant Hotel has grown into an event with over 100,000 attendees taking over the San Diego Convention Center every summer featuring everything from upcoming Hollywood movies to independent comic book sellers. Even with tons of information, the ComicCon official site is well organized with its navigation off to the left side (with its unique alternating color navigation menu). The color scheme is easy on the eyes and those who have attended Comic-Con in the past can recognize the colors used on the site are the same used for the banners and signs posted all over the Convention Center during the event. 3. VIZ Media - http://www.viz.com/ One of the major leaders in bringing Japanese entertainment to this side of the Pacific, VIZ Media has been working with translating manga (Japanese comics) and dubbing anime for the American audience. The arrangement of the site is pretty simple to see; each of the elements see on the first page (the main body and the two banners below) are separated with tables. The site works with the help of Flash (which is an entirely different topic that will be touched on another site). 4. Crunchy Roll - http://www.crunchyroll.com/ Crunchy Roll is a popular site featuring entertainment from all over Asia. Everything from Japanese animated shows to Korean television dramas can be found here, sometimes within days after being released in the home country. Visitors can up sign for an account, which will enable them to upload videos, comment on videos and participate in the forums. The site is a little cluttered with everything going on (site news, newly added videos, countless advertisements and so on), but the use of tables makes it easier for visitors to navigate around the site. In addition, the navigation menu is conveniently located on the top of the page with the sites' different sections listed along with the site search engine. The colors on the site reflect that of a crunchy roll, which is an actual sushi dish that normally contains fried shrimp. 5. KMFB News 8 San Diego - http://www.cbs8.com/ KMFB News 8 is one of the top sources for news in San Diego. The site features news stories from the television newscast as well as video and any
other additional items (which can be found with the site's "Hot Button" which is mentioned on each telecast for anything related to the day's stories). Almost like the Comic-Con site in appearance, the site navigation is off to the left side. The site looks a little busy with online polls, advertisements and other various links. But with the site being updated on a daily basis, it seems that getting the news to the masses is more important than how the site looks.
Sites that are created with CSS follow what's called a CSS Style. This is an example of one, right from the code created to make this site: #title_banner { position:relative; margin-left:auto; margin-right:auto; top:0px; width:904px; height:105px;z-index:1; visibility:visible} This is the style for the banner on top of this site. With the way it's set up, this tells the banner to be automatically centered on the page (with the 'margin-left' and 'margin-right' set on 'auto') and the position to be relative (meaning that as the site moves, so does the banner). There are many CSS styles that can be set for any HTML tag and much more. 1. theOtaku.com - http://theotaku.com/ theOtaku.com's main objective is to bring together fans of anime, comics and video games. The site just went through a complete renovation a few months ago with its new "Version Vibrant" design. As a frequent visitor and long-time member of theOtaku, I can say that this version is the best one they've released so far. Previous layouts
were just a good, but "Version Vibrant" is a refreshing turn from the site's previous gray-toned layout. Recently added news, fan artwork and fan writings are all featured on the front page with navigation on the top. 2. deviantART - http://www.deviantart.com/ deviantART is an online community for artists and those who love art. All kinds of art media can be found here--from lines drawings to photography to Flash animations. Recently, the site went through a renovation with its new version entitled "V6" with easier navigation and sticking to a warm gray color scheme. Out of the ten sites featured here, deviantART is one of the few that utilizes all of the space and not leaving any white space go uncovered. The site has much to offer with recent uploads from members (called 'deviations') and it would be rightfully so that they use every single space that they have to provide for the growing art community. 3. Zazzle - http://www.zazzle.com/ Zazzle creates an entire line of personal...