Article analysis - absolute positioning pitfalls

The article I looked at this week was Absolute Positioning Pitfalls by Tyssen Design - http://www.tyssendesign.com.au/articles/css/absolute-positioning-pitfalls/. Though this talked a lot about using Dreamweaver to create a site (something I have never done, so its kind of foreign to me) the principle of making design look good, regardless of resolution and screen size, was eye opening. I have seen some poorly done sites that just look terrible for this reason. Most of them look ok on standard settings but when the window is minimized, it begins to go all over the place. I knew that float could screw up a site if not done properly, but using absolutes was news to me.

The reason that this does not work is because when absolutes are used, the elements are not aware of what is happening around them. Meaning, as someone who views the content on a smaller screen, the elements will be the same size as on the larger screen, and the layout will look different, as well as being much more cluttered and disorganized. This was one image that demonstrates what can happen with absolutes. It should have looked like this. It disrupts the nature flow of a site, and tries to smash everything into a area where it just wont fit.

Most people I know use dreamweaver to design, but none have ever talked about this as a drawback. I asked a few friends after reading the article, and they all said that they used the absolutes, because its easy to make, and looks good on their own computer. I plan on learning dreamweaver eventually, but I will have to remember how to get around this obvious problem when using this software to code. This just goes to show that you should know code well enough to find errors that software creates, or omits, so you can create the best site possible.

Design and Code

To me, this class has been challenging for two reasons
1. I love design, but do not have a lot of experience with designing web pages
2. My knowledge of HTML comes from the web essentials class, and even then I struggled.

So I really like the principles of design, and feel like I can make something look visually interesting, but a website has its own issues to deal with. Information flow, how to navigate, user perception/expectations, etc... I felt that my biggest strength is the look of the site. But because I do not know code very well, I didn't design my pages with the forethought that I had to figure out how to make the HTML and CSS work together to create my look. I strictly wanted it to look good. Because I chose to go this direction, making these different fields work together has required a lot of studying and research on my part. Mostly this has been a good experience. Some of it, however, has been frustrating to no end.

Working on the PeopleFace site was very difficult to me. I had to research just about everything that I did in CSS, and probably more than half of the HTML came from reading some books and websites I found. I found that creating a clean, easy to read/user interface requires a lot of forethought. Although I probably missed the mark, I think that working on PeopleFace has given me a better understanding about how simply code something that has a nice look, without it being to heavy or light. Im also trying to emulate sites that I think work well, and try to use some of their tactics and strategies when planning out code.

Though I will probably not do web coding/web design for a career, I think these principles and techniques I've learned will suit me well in any other field I choose to pursue, because the internet is involved in almost everything anymore. The more you understand it, the better off you will be in other pursuits.

Layouts, more final

2 Compositions - GamesKids.com

Here are my compositions. I added some description on some elements on the page, just to clarify exactly what each item is.

design sketches

Good Designers Copy, Great Designers Steal

Cameron Moll has written a great article about the fundamentals of web design. The overall idea behind the article is that there are certain formulas, or practices, that are better than others. As creative as a person would like to be, sometimes using a formula from someone else is a fast, easy, and ultimately better solution. Cameron refers to this process as stealing, with good reason, but these can be adapted to all types of web design. There are three levels of stealing according to Cameron.

Level 1: Copy, don't create. Taking the time to look at a site, figure out how they did what they did, and adapt other peoples techniques to fit your purposes. They used the example of taking the design of a Nike site, and using it to make their own page. They made changes, but they do look incredibly similar. It worked for both sites, and they saved a lot of time and energy in making their page.

Level 2: Steal from yourself. In this portion, Cameron talks about using previous work that you have done, and incorporate the code into a new site. Though this practice does me no good (I have created one site, and it is nothing to really be proud of), I think the code I have done previously will give me an idea about good structure, and something to check my work against to see if I am progressing or not.

Level 3: Steal from discreet sources. This means looking for things that are not mainstream, and try to find something to incorporate into your own work. The example used was someone took some random clip-art design, and created a logo from this. This seemed a little more risky to me, because if it gets big enough, someone, somewhere, is going to try and sue you for a copyright (even if they know they wont win.) I understand why people do this, because there are some great designs that people have no idea what to do with, but I just don't want to involve myself in this practice if at all possible. I would rather spend a more time making something than worry about the legal implications that might accompany this practice.

From the perspective of usability, I like Cameron Molls thoughts on stealing. If the navigation on a site works, there is no reason you should try to imitate/copy that workflow. To me, its kind of like building a house; A lot of houses share similar design and placement of things (toilets go in bathrooms, beds go in bedrooms, etc...) because it just works. Not every house is identical, but there is a logical placement of rooms and items (In good homes that is). so it is with web design. You don't have to have a site that looks just like apple.com to have a good website, but you may want to look at how the information flows, so you can imitate that experience and make your users feel more comfortable.

I found this article to be very helpful, and will help me as I try to actually make the design of my pages. This article talked specifically about webpages, but can be used in a just about any field. As for implementation, I will use other pages as references, and look at some of my old stuff to see how I had done it in the past.


http://articles.sitepoint.com/article/copy-great-designers-steal

The Expert Mind

This article by Philip E. Ross was quite interesting to me. It took a lot of concepts that I understood somewhat, and combined them together, as well as fill in the gaps of my understanding. Chess is never a game that I enjoyed very much, but I never took the time to figure out the strategies and maneuvers that lead to good playing. I thought It was a lack of understanding the gameplay on my part. It turns out, according to the article, that my problems were two fold. 1- I did not have enough experience, and 2- my way of approaching the problem could use some work.
Philip Ross talks about the amount of time taken to measure any given task, with 10 years being an approximate amount of time to master something. In this regard, mental ability is simply not a matter of talent (or something that could not be learned), but a matter of time spent working to solve the problem. He also talks a little bit about why this (mental ability) is not the same as a sport or learning a musical instrument (physical ability). Although many of the factors apply, needing ample time to study the craft, working hands on with something, etc ..., there are certain body types/physical abilities that make mastering a sport of physical skill easier. To cover these types of factors, I would suggest reading the book Outliers by Malcom Gladwell, as it covers all sorts of extenuating circumstances in success in various fields of study.
One of the techniques Mr. Ross covered was the chunking theory. This is basically how people organize complex ideas/thoughts/techniques into a single notion that is easier to remember. Your brain can remember about 5-9 single thoughts in a sequence, which gets put into a cluster that you will remember. The example used in his article is Mary had a little lamb. The words are very basic, and each sentence forms its own cluster. In our minds, we can piece these clusters together to form a song, because rather than remember each word individually, you remember lines of the song that flow together. If asked to say the third or forth word of that nursery rhyme, you have to think about it. If you were asked to recite the rhymes first line, you could probably do this with no problem.
Both of these ideas are incredibly useful, and I understand how this applies to the web. Many times you deal with code that is repetitive, but just different enough that it takes some time to get used to. A good idea is to remember chunks of code, rather than each individual word and command. This should help your brain to understand it better, and you should be able to make your life a little easier.