Interactive Media: David Foster Wallace reflection

David Foster Wallace is one of my very favorite authors, and a writer that I have quite a bit of respect for. So I was rather excited to find out that for our last homework assignment we would be reading some of his work instead of a frustrating chapter on web design (no, offense). So I began reading the article, loving the way it started out and waiting for the grand finale in which Wallace always so eloquently ties together his loose ends. But for me this didn't really happen in this peice, which I was somewhat disappointed by. Yes, for a commencement address it was something that I had never heard before. He didn't highlight his own personal resume, sprinkling it with useful bits for the future graduates, or offer some sort of Mark Twain related quote as his jumping off point, so in that way the reading was quite original. But if you strip it from its context, I didn't find the substance of the reading to be anything extraordinarily new for myself, but putting it in the context of design was infinitely captivating. 

.

.

.

As designers, I think that at some point in the process of working on a project, we get so wrapped up in the notion of "I the designer" that we tend to forget to step back and realize that we are commercial artists, our work isn't for us, it is for a greater audience. In this perspective I think that Wallace really hit  on a weak spot of graphic design, or really any art related endeavor. As a journalist, we were constantly told to put aside our "default" perspectives and actively pay attention to our audience and information in  order to make any writing as objective as possible. I think that this same idea must be infused into graphic and web design as well. 

.

.

.

"If you're automatically sure that you know what reality is and who and what is really important - - if you want to operate on your default setting - - then you, like me, will not consider possibilities that aren't pointless and annoying."

.

.

.

This quote struck me as quite brilliant. If we make assumptions about our target audiences and what is going on with them based on our own self-centered existence, then we are completely blind to what they really need. Will my user find my resume link based on where he or she is coming from buried within my "about me" paragraph? Or is this simply something I default to because I know my resume and I find myself somewhat interesting enough that people will want to read my "about me" paragraph until he or she comes to my resume link? Probably, as sad as it sounds, we would default to the latter. But that user needs a resume link that is placed away from the body text and made bolder for easier access. One should not simply assume that a user wants to sift through paragraphs of personal info if all they really want to see is your work experience in bullet form. 

.

.

.

Therefore, in constructing an about me website, I think that it becomes infinitely more important to keep Wallace's points in mind. Yes, our personal content is at the center of this website, but as the designer we must take a step back and look at this content as objectively as possible in order to achieve a usability that does not simply default to our natural behavior, but is carefully constructed with an awareness of the possibilities of the outside world. I will keep this in mind as I wrap up my designs in the last couple weeks of this class. 

Interactive Media: What is Javascript?

Usually when someone who isn't a pro in the computer nerd department hears the word Javascript, we think of complex programming and/or a cup of coffee. While Javascript aligns itself more with the first thought, it isn't as terrifying as it might seem after reading chapter 19 in our book. 

So far in this course, we have focused on the content layer, or HTML, and the presentation layer, or CSS, in thinking about our web designs. It is helpful to think if Javascript as another layer of design, one that adds interactivity to our websites. Because Javascript is a client-side scripting language, it is reliant on the particular browser and user that is using it. This means that it sometimes works and sometimes doesn't depending on the users particular browser preferences and capabilities. This makes it a little out of our hands, which can be scary, but we have encountered this before, and therefore must take any steps WE can as designers to help the Javascript run smoothly. 

Although Javascript is sometimes associated with annoying pop-up ads and re-directs that you never asked it for, it can be a very helpful tool in adding to the interactivity of your website, which as we have learned throughout this course is important on many levels. Fortunately, Javascript is a loosely programmed language, meaning that we don't have to dictate what every single variable does. This, I feel, will certainly help a newcomer to Javascript like myself, succeed at using it. 

.

.

.

All this being said, there are a couple things that I would ideally like to add to my personal website using Javascript. First, I like the feature in Javascript that allows you to reveal and hide portions of content. What if I was able to hide the text information in my about me site and have it revealed when the users mouse clicks "about." What if I was able to do the same with my resume? This might make my website look neater and the presentation more simple. I am not sure if this is a correct use of this Javascript function, but I think it might be worth a try. Second, the gallery feature might be neat to add to my website later down the road when I add my portfolio work to the site. I think the gallery would present a nice way to see my work without trying to simply place images onto the page in a gallery like manner using CSS. I think that this feature should wait until I get to that point in my design, but I think that it will be a useful tool down the road. 

Interactive Media: fixed vs. fluid layouts

Within CSS there are a couple different ways that you can use layout to optimize both what you want your website to accomplish for users as well as what works best for the presentation of your content in general. Although there are more layout options than discussed in this post, we will focus on two of them: fixed and fluid, and discuss the pros and cons of
both these layout options.

Fixed layouts: The fixed layout is one in which the designer has specified the pixel width of the page. It does not change the layout of the webpage if the user is viewing the page on a smaller device, laptop, mobile device, etc. The layout will always stay the same. As you might imagine, this is an older CSS layout model, one that worked well when everyone was viewing web pages on monitors at home, but it can make finding information on a smart phone a bit of a hassle for the user. The advantages then of this layout are that the designer has a lot of control, you set the pixel width and it will always do exactly what you tell it to do in terms of line length. This, therefore, means that it is easier to design around this model, and is a good strategy for a beginning web designer. The disadvantages of this system are that, if the browser is smaller than the pixels you specified, that content on the right hand side of the page will be hidden. This could be bad if you had some important info in the right upper hand corner, say social media information. Additionally, it works the opposite way, if the browser window is larger than your specified pixel count, there will be an awkward whit space on the right hand side of the user's screen. This might make your webpage look unpolished. In other words, the user is completely not in control of this layout, the designer has all the control.

Fluid layouts: The fluid layout is one in which the content reacts to the size of the browser window. Text and images "reflow" to adjust themselves and fit in their entirety in the browser window, whether on a mobile device, tablet or desktop. One might imagine that this is starting to become the norm in an age where people are looking at web pages more frequently on their iPhones than on their home computers. If you have heard of "responsive" web design, this is where that idea comes from. Some advantages in fluid layouts are that they avoid that awkward empty space we talked about with fixed layouts, as well as make sure that the user always has all the information that you want them to. This also means no horizontal scrollbars, which any user of web pages know are a pain in the butt. Yet there are a few downsides to this technological way of designing web pages. First, on large monitors, the line length becomes uncomfortable long for the user to read, and they are less predictable, making it difficult for a new designer to truly control his or her content on other devices. However, the biggest downside for me would be... there is more math involved here... and I HATE math.


Therefore, in thinking about my website and what might work best for me, while I love the idea of responsive web design, I think I might stick to a fixed layout for now, and then maybe work towards a more fluid layout later on. Simply because I am new at this, and my audience is potential employers, I would rather use a little older technique and use it well than be experimental and mess things up. Also, the way I set it up in Photoshop, users with even a very small browser should be able to get all the important info from my webpage.
.
.
.
Switching gears a little bit to talk about animation in CSS, I think that one animation technique I might use in my website is that of transitions. I would use this transition idea for my social media buttons at the bottom of my page. Perhaps I might make them change color, or maybe I would make them get a little bit bigger when the user ran his or her mouse over the button. The author says that using animations in a minimal way makes the website come to life with a polished feel and not going too overboard, therefore, I think that this is the only animation that I will use in my web design. 

Interactive Media: More CSS

Since it is around dinner time, and I'm feeling pretty hungry, I think that the best way to explain what the difference between padding and margin in CSS is with the example of a burger. Think of the margin as the bun of your burger, it sits on the outside of your burger and protects the area around that burger from bumping into other burgers or items you might not want touching your burger. In this way, the margin sits on the outside of the element and dictates how close or far away it is from other elements. Now let's pretend that the ketchup/mustard/whatever is the border. This comes right after the margin, or the bun. The border is then followed by the padding, in this case, the padding might be whatever lettuce, cheese, onion, tomatoes you put on your burger. The padding sits inside the margin between the content (the actual hamburger) and the border (your ketchup/mustard). The padding then, is the given distance between the content and the border, within the margin. So it looks like this:

Margin

Border

Padding

Content

Or in burger analogies: 

Bun

Ketchup/mustard

Lettuce/tomato/onion

Hamburger

Padding is helpful when you need to give content a little bit of room to breathe, and is particularly useful when using background colors and borders. Margins on the other hand, prevent content from bumping into other elements as well as the the edge of the browser window. Margins are EXTREMELY important for web design with CSS.

.

.

.

Onto the next question. There are several types of positioning within CSS that we should be aware of. I list and briefly describe three of them below.

1) Static positioning: This is the normal position that the elements are in as they naturally appear on the page. They have not been manipulated in regards to positioning when they are in this state. 

2) Relative positioning: Relative positioning is pretty straightforward to understand. If you move an element, it moves relative to its original spot in normal flow. This means that elements with relative positioning impact the content around them. This type of positioning doesn't always yield the results you might want, and therefore is more used as context for absolute positioning. 

3) Absolute positioning: A far more flexible option, these elements are removed from the document flow and then positioned around the browser rather than in regards to content around them. Unlike relative positioning, there aren't awkward gaps left over by the positioned element, and therefore this option will usually yield a more desirable aesthetic result. 

Interactive Media: Quantity vs. Quality

In the article "Graphic Designers are Ruining the Web," author John Naughton argues a point that may be boiled down to the notion of quantity vs. quality when it comes to web design. Naughton defines quality from a usability standpoint as well as a size standpoint. Aka he is of the school that webpages should be smaller in size and that aesthetics aren't necessarily the makings of a winning web page. He has a good point. Websites that load slowly are a hassle, and in the age of immediate information, waiting ten extra seconds for a pretty website to load just isn't something that anyone is willing to do. Naughton, it seems, does not care so much about the aesthetics of a page as much as he does the content of the page. He points to Peter Norvig's site as one that has quality information, but isn't necessarily aesthetically designed. This is where Naughton and I's opinion begin to diverge. Yes, I agree that large page size is an issue and needs to be controlled, however I would ask Mr. Naughton how many new followers/fans Peter Norvig gets on his site. Personally, when I clicked on Norvig's site, I couldn't even begin to access the information. It was jumbled, there was no hierarchy and quite frankly, I saw nothing on the page that might engage a visually inclined person and prompt him or her to read more. Therefore, I think that Naughton needs to think further upon the true implications of minimal aesthetic web design. It can be simple and small, but still contain valuable aspects of CSS and HTML that helps a user understand and communicate with the design. This is the balance that I believe Naughton does not speak about as much in his article as he should. 

.

.

.

That being said, I align myself far more with the thinking of the author of the second article, What Constitutes Good and Bad Web Design, Alice Rawsthorn. Rawsthorn takes a much more balanced perspective on the balance of aesthetics and usability. Where Naughton seemed to see aesthetics as a hindrance to information access, Rawsthorn believes that the look of a website can actually lead to usability and allow the user to engage with the web designer in a balanced way. I couldn't agree more. In fact, I was quite stunned after I read and looked at the Milwaukee Police Department website. As a former resident of Milwaukee, I would have never expected something that a) looks that nice and b) is that easy to use coming from the MPD. But it works! Immediately I am engaged in the site. The simple, clean graphics are eye catching and the navigation on the side makes it simple for users to jump to the part of the site they need to access the desired information. It is clean, loads quickly, is quite lovely and is easy to use. 

When Rawsthorn was talking about web design being made for new and up and coming computer monitors, it reminded me of our templates for our websites that ensure that users with an older computer can still access our information. I think that this is a very important point, and a point that modern web designers tend to ignore as they want to work with only the best machines. We must consider our audience. With more and more areas gaining access to only the most basic level machines, we must be aware that the internet is becoming more readily available and accessible and in order to get the widest audience possible we must design to a broader range of monitor sizes and web capabilities. 

Interactive Media: .gif vs. .jpeg

.gif (Graphic Interchange Format) and .jpeg (Joint Photographic Experts Group) are two different types of formatting to translate images to the web. While there are other graphic file formats available, these two file formats, along with .png are responsible for the pixel-based images that you see on the web. While neither is necessarily better than the other, there are certain differences that make it wiser to choose one file format over another when developing your website. So let's begin with the .gif file format. This was the first image format supported by web browsers, and it is still quite popular around the web today. It is idea for images with limited colors and color palettes. This makes it ideal for logos, line art, icons and other graphically rendered objects. You might ask yourself why not use a .gif for a photo? The answer lies in the fact that .gif files have an 8-bit color file, meaning that it can only support up to 256 colors. Any color that isn't within it's range will be blended into a color that is. Thus if you have a very color rich photograph, you may not be pleased with the quality of the image when it is saved as a .gif. The .gif file format is perfect for vector artwork because of it's 8-bit color file. A .jpeg file on the other hand IS ideal for photography. It compresses images by reducing sections of an image down to a tile-like image. Zoom in on a photograph online and you will see what I am talking about. However this does not make the .jpeg perfect. Unlike the .gif format, the lossy compression of a .jpeg will sometimes cause hard lines to disappear, or an image with sharp geometric components to look a little fuzzy. This makes it not an ideal choice for typographical elements or hard graphic lines. Therefore, in short, .gif files are better suited for typography and vector based artwork, and .jpeg files are better suited for photographs. 

.

.

.

It is important to remember when designing for the web that larger files sizes don't mean longer print time, it means longer load time. This has implications for your viewers in that, if a website takes too long to load (and "too long" on the web is actually a very short time) we will visit a different site for the information we need, and disgard the other site. This means that there are tradeoffs in the world of web design. Richer images with less compression will take longer to load, but will be graphically eye-catching and draw your users in, on the other hand It may take too long to load. A poorer quality Image may load faster, but does it send off the professional message that you want your "about me" site to send? Probably not. Therefore, we need to somehow strike a balance. As I am thinking about how I want To handle my website, I am thinking about the ways that I can optimize my site for both users and visuals using CSS and images. I want to use a large background Image to draw my users in, and I want this to be a sharp visual, no blurriness. I also want to use an image for a logo that I design for myself. After reading the two chapters for this week, I think that limiting my image use to these two elements and perhaps a footer and header produced in Photoshop and letting CSS handle the rest will allow me to create a professional site that still loads in a timely manner. My limited knowledge of CSS might affect this plan further down the road, however I don't want to just resort to a bunch of images on my website because I don't want it to run too slowly, I would rather try to use CSS for all that I can. 

Satisficing and Web Users

In chapter two of his book, author Steve Krug uses a word that might appear as though he is trying to use another word and just can't spell. That word is "satisfice," and yes, he spelled it correctly. So what does Krug mean by the this strange word, you may or may not be asking yourself? He refers to the phenomenon that occurs when a user visits a particular webpage and is faced with several options of where to click first or how to go about navigating the material presented, satisficing is choosing the first reasonable option that pops into the users head. Most of the time, this option is NOTHING like the one that the web designer had in mind for the user, whom that designer has wrongly assumed will navigate around and read the entire page before making a decision. But as Krug points out, users don't have time for that. Particularly with a medium such as the internet, users are looking for quick information, they're not logging on to read entire websites unless it is the news, or in the case of most young people today, their Facebook newsfeed. Therefore, while the "satisficing" decision that a user makes is not necessarily the right one for the information desired, it is the way users use the internet, and web designers need to be aware of this fact when designing web pages.
.
.
.
As soon as I read about "satisficing," I immediately thought to myself, "oh my gosh I do that all the time!" I do it with print media when I get a magazine and see an article on the cover I want to check out, flip to the section that my mind believes the article should be in, find out it doesn't exist there and have to give in and look at the table of contents. But I also find myself doing it on the web. Last week, I wanted to get some new shoelaces for my L.L. Bean boots. So naturally I visited the company website and immediately clicked on "footwear" tab at the top of the page. Rather than wait for the fly out menu that gave me specific options, I went with the first reasonable choice: click the button. This took me to a pictorial menu with a lot going on, so I looked for the accessories button. This took me to socks. I got pretty fed up with trying to "muddle" through the website for shoelaces, so I finally just searched in the company search bar for the item I needed. This would have been the logical choice from the start, but of course I went with what my mind told me would be the most reasonable option. I think that the most reasonable thing the web designer could have done differently to make my visit less of a hassle is:
a) Make the fly out menu repeat after clicking the button, rather than giving me a bunch of pictures with various types of footwear
b) Make shoelaces part of the accessories button under footwear rather than under general accessories.