Thinking in Layers – Layer 1 – Content

Posted on May 1, 2011 by Matthew Ell

Content is King. Most people who work in web design have heard this before. Content is the first layer that sets the foundation for an entire web project. Without good content that is well thought out and appropriate, it will fail.

How content ties in with a web designers job

Most web designers are not writers. However, when thinking of content in the context of web design, one can’t help not to think about the hierarchy of information. Markup languages used to create the ground work for a web project rely on semantically correct tags and properly divided blocks of information. Thus, a web designer does not see content the same way that a writer or editor sees it. This is generally where niche web professionals like Content Strategists, Information Architects and SEO’s come in. These skilled professionals are well versed in many areas of the web but focus mostly on content while working with designers and developers. However, what if you are a freelance web designer who maybe works with smaller businesses and clients as a “one point of contact” ?. Maybe you wear all these hats to a certain extent?

In the DVD “Designing with CSS”, Andy Clarke gives a great behind the scene look at how a web designer working one on one with clients can produce content. He starts in a word document and looks at all the content. He then continues to add comments to blocks of content where he identifies each as different html tags. Perhaps attention to SEO and Social Media is also focused on during this time. This process allows for focus to be placed on just the content and solves a lot of problems before it is put into an HTML document and production. Seeing Andy’s process was a huge eye opener.

Recently, Jeffery Zeldman lead a discussion where he explained that “Web Design is Publishing”. Brilliantly stated, it hints to the importance of building content rich site with web standards.

What do you do to produce content? If you are a designer or developer wearing many hats, is there a particular process you go through with your clients?

Please feel free to share your experiences below!

Thanks for reading and keep a look out for a new Trial and Error next week!

Posted in Web Design | Leave a comment

Thinking in Layers – Web Design Process

Posted on April 17, 2011 by Matthew Ell

Have you ever traced out the steps it took to solve a problem after you already solved it? I did this in school, where we were frequently asked to document and share our design process. Most importantly, we would try and look back on what we did and question it.

Recently, I have been questioning the web design process. Looking back at some of the sites I have completed and experiences along the way – It occurred to me that creating web site design is better thought of in “layers”. By thinking of each layer as it’s own entity but also considering the whole, there is a chance to focus on the “DNA” of a web site. Much like setting the apature on a camera or looking though a magnify glass, things can be closely examined and potentially seen from various perspectives.

In my findings, these are some of the basic layers of web design:

  1. Content Layer
  2. Branding Layer
  3. Design Layer
  4. Experience Layer

In a series of upcoming blog posts, I will be writing down some thoughts on each layer. With experiences and references that I hope are useful to you.
Thanks so much for reading!

Posted in Web Design | Leave a comment

Using Terminal for Beginners

Posted on March 27, 2011 by Matthew Ell

Why bother learning Terminal?

When I first started making web sites I never felt the need to know how to use a command line or non-GUI application. I saw it as old fashioned and thought that it would not be beneficial for me to take the time to understand it. As someone who comes from a design background, this was probably a rather natural feeling. Why does a web designer need to know computer science stuff ? My reasoning became clear when I realized that it was simply because I wanted to be a better web designer. My feeling being that – the more that you know about the the surrounding disciplines of a particular design practice, the better the design will be. On the same notion, being a web designer that can not only design but carry though on the development makes a more vital web professional.

With that being said, this will be the first in a series of posts containing useful Terminal commands in OSX for web development and sample cases when the Terminal can be useful. This is my first blog post on the subject, so please bear with me.

Basic Terminal

First things first – you need to know where the Terminal application is.
The Terminal application can be found at this directory address:

/Applications/Utilities

Hint: A quick way to open this location: From Finder use the “Go to Folder” short-cut command (command + shift G) and paste in the directory address above.

When the directory is open scroll down and find the Terminal application and open.

Congrats, you have accessed the command center for your computer. Don’t you feel like you are in the Matrix?

You should see an I beam blinking next to a dollar sign ($). This means that the Terminal is ready for you to make a command.

So let’s start doing some basic commands.

Basic Terminal Commands: A simple walk through

Where am I ?

When Terminal first opens, it automatically places you in your User directory. This is the name that you are currently logged in as. In finder this is your Home directory where all your Documents, music, etc. are stored.

For the first command, we are going to list all the files and folders in your Home directory. Simply type in the following:

ls

On the next line you should see a whole list of the folders/files in your Home directory. Pretty quick, right?

I know where I am. Let’s go somewhere else

First, find out where are again:

ls

Next, type in where you would like to go. For this example, we will go to the Desktop:

cd Desktop

Hit enter and it will move you to the Desktop. You can see that you have changed directories by looking at the command line and seeing the current directory before your username.

I want to go back home !

So you want to go back to your Home folder? Simply type in:

cd ~

Bring me back a directory level

You should be back in your Home folder, lets check:

ls

Now, say that you want to go up one directory. This is generally the Users folder when your are in the Home folder. Type the following:

cd ..

Notice the two dots? It is telling Terminal to move up two directory levels. Your current directory(Home) > Users

Let’s make something

First let’s go back to the home directory:

cd ~

Check our location:

ls

Go to the Desktop:

cd Desktop

Now that we are on the Desktop, let’s create a folder:

mkdir Test

You should now see the folder “Test” on your desktop.

Let’s go into the folder we just created:

cd Test

Finally, let’s make a file! We will use the “touch” command

touch index.html

On the desktop, open the test folder and inside you should find your new index.html file.

From this quick walk through, You can already begin to see the advantages of using the Terminal. In a single window we can navigate to your folders and create new projects.

Challenge: Try using the Terminal for one day to navigate though your computer and open files. No using the Finder !

If you get stuck, check out this website that has a great list of commands to keep you going:

An A-Z Index of the Apple OS X command line

Thanks so much for reading and please feel free to write about your experiences in the comments section!

More Trial & Error next week : Early experiences with Ruby and writing on the subject of Version Control.

Posted in Terminal, Web Development | Leave a comment

First Post

Posted on March 24, 2011 by Matthew Ell

After a break from blogging for almost a year, I am going to take another stab at it. Thus, this brand new WordPress blog. My reason for stopping the first time was mostly due to a lack of direction in my writing. I thought that a tumblr would provide a better outlet, but found it useful only for visual stuff. This time around I am a bit more focused on what I want to blog about.

I learned that what I enjoy about writing is the information seeking. Especially how it forces me to understand something so much that I can explain it comprehensively to someone else. This brings me to my goal for this blog. While it will be a “blog”, it will mostly focus on my learnings of things related to Web Design, Web Development and “other”. Really, the writing is an exercise for me to better understand something of interest and share my findings with others.

Topics that have come to interest recently are:

  1. Subversion and Version control
  2. Creating a WordPress theme for public release
  3. Ruby and Ruby on Rails

In closing this post, I plan to investigate the three topics above in detail in upcoming posts. Providing useful resources, experiences and findings.

Thanks so much for reading and I hope you visit me again soon for my first real blog post!

Posted in Uncategorized | Leave a comment

Digesting Web Content

Posted on May 23, 2010 by Matthew Ell

This past week I read an article in the latest issue of WIRED magazine. The article was entitled Chaos Theory by author Nicholas Carr. His main argument in the article is basically that the internet is changing the way we read , focus on and analyze writing. In fact he provides recent studies that show that the brain it self is being changed to try and take in these pathways to content provided through the internet . The results are both positive and negative in that the brain is adapting to “digest” information at a faster rate, but is losing the ability to analyze and dissect this information at this rate.

His argument and article sparked up a lot of thoughts and questions in my own mind. For someone who feels like they have been training their brain to not feel overwhelmed by the internet, a lot of this writing helped me feel at ease. I very rarely sit at my computer and read an entire article on the web. I do subscribe to several RSS feeds and get daily newsletters in my inbox, but I do not read this information the way I read a book. I feel that one of the reason is the platform on which I am reading. For me a book is something that I can relax with on a beach and get lost in the writing. A desktop computer can have these associations with work, multi-tasking, and makes it hard to go “inside” your mind.

So how have designers responded to the issue of digesting content on the web?

IN TABLETS – I immediately thought of the iPad and the recent development of tablets. Aside from Apple making this new piece of technology to give tech geeks a new gadget to play with. The tablet platform is very different from the Desktop computer in that it is allowing a new experience for reading content and media on the internet. The size ( very close to a book), simple interface, and intuitive interface gives many suggestions that this device is perhaps aiming to take the place of a book. If that were not enough, advertisement is showing that it is a device that is something that you should relax with. While I think that it will be hard to take replace the connection and interaction a person has with a book, these tablets seem to be heading in a positive direction for taking in content on the web.

IN WEB DESIGN - Within the past several years we have seen many changes in the way content is designed in a web browser. There have been several advancements and scientific discoveries which have improved the way people interact with computers and web pages. A large part of these advancements and discoveries I think come from the study of a long list of umbrella terms such as Usability, Ergonomics, User Experience, Information Architecture, Graphic Design, HCI and the list continues. Moving forward in the “Digital Age” these practices are constantly looking at ways for humans to have more efficient experiences with technology, “More output then input”. Using traditional Graphic Design theories such as the use of grids, typography and information hierarchy, content for the web is transformed into more digestible and scannable content. This is of course in unison with User Experience, programming, and the underlying idea of creating applications that behave in a way a human can understand. Designers showed much of these things coming together at the advent of Web 2.0 .

The list goes on. For me, it is just a very exciting time for being a creator and designer of internet content. With new technologies such as Google Tv and tablets more people with have a chance to experience this content in new ways. I am really interested to see where it will take us and how we will make it apart of our lives.

Posted in Technology | Leave a comment

Solving LOST

Posted on May 16, 2010 by Matthew Ell

Over the past few weeks, I got deeply into the television series LOST. Prior to this, I had only heard people talking about the show and how hard it is to stop watching. So, with the final episode coming May 23, 2010 I decided to start from the beginning and see what all the hype was about. As expected I could not stop watching episode after episode in the first season, but something seemed less interesting when I got into the second season. Particularly, the whole bit about having to continuously enter this sequence of numbers to reset a timer which had something to do with correcting an electromagnetic field experiment that went bad. This did not make me stop watching the series and maybe something changes in future episodes, but I was thinking about how could a person program this action to continuously happen over time so a person would not have to keep entering it manually. I did this mostly for fun but here is a small code snippet in pseudo-code/JAVA syntax.

int index = 0;
//sets value of the start time of 2mins or a count of 120
FINAL int START_TIME = 120;
// sets the minimum number
FINAL int MIN = 10;

private void lostCycle(){
while (index < START_TIME){
// decrement 120,199,198, etc
START_TIME = START_TIME--;
// Sets a reset for when lostCycle reaches the MIN value START_TIME gets original value.
if(START_TIME == MIN){
System.out.println(4);
System.out.println(8);
System.out.println(15);
System.out.println(16);
System.out.println(23);
System.out.println(42);
START_TIME = 120;
}
//method calls itself to repeat infinitely
lostCycle();
}
}

Posted in Programming | 3 Comments

Code Magnification

Posted on May 2, 2010 by Matthew Ell

In two weeks my class in object-oriented programming will be coming to a close. I decided to take the class in hopes of giving me better insight into computer programing and computer science in general. Of course, I also took the class in preparation of possibly going back for a masters degree in HCI ( Human Computer Interaction), specifically the program at RIT, which requires 2 semesters of Object-oriented programming.

While my plans of  going back to school are still up in the air, learning about Java and Object-oriented programming gave me a lot more prospective into computer programming.

  1. Computer Programming is mostly problem solving. When was first introduced to programming in High School by way of  C++ and Basic Web Design. I thought it was interesting, and what I thought was interesting was the ability to tinker with code. For me, this tinkering is really solving and resolving problems. Breaking and fixing. Changing perspective and questioning. Computer Programming can be taking several problems that exist in a “non-tangible” domain and solving each problem till it is a tangible solution.
  2. Computer Programming is unforgiving. While I am not 100% exactly too sure what I mean by this statement, I have learned that a programmers logic must be dead on for a computer perform what you want it to do. By learning to look closer, line by line, you can really break down each process and make sure that each line has specific purpose to the end result. This means that tinkering and hacking programs together should be avoided in many cases. Use what you know and what you want the computer to know.
  3. Computer Programming takes time. Being accustom to using various open-source platforms, I mostly have the pleasure of working with frameworks and API’s.While this is a great thing to have available, I sometimes feel that by using a snippet or framework I am taking a shortcut. This is not always entirely true, but  after being introduced to what is involved when writing a program, it made me realize the amount of time it can take. This also made me realize that sometimes by not writing from the ground up you loose control of the end result.

Now that my class in Java is coming to an end, I am thinking of what will be my next focus. While I am tempted to take a second semester of Java, I am also wanting to focus in on Front- End Web Development (which is my main area of expertise) , HTML5, CSS3, jQuery, and ASP.net.

I guess time will tell.

Posted in What I have learned | Leave a comment

Relearning Web Design

Posted on April 25, 2010 by Matthew Ell

Recently I have been spending a lot of time relearning things in web design and development. I realize that I can get caught up in doing things repeatedly without questioning why. After all we are creatures of habit. This has been on my mind since I started to read Jeffery Zeldman’s 3rd edition of Designing with Web Standards. I was first introduce to Jeffery Zeldman while working at Webster Hall in NYC under the head web designer in May 2005. I was immediately interested in Web standards mostly because of it’s focus on  structure over presentation and encouraging Semantic Code. It kinda reminded me of a Adolf Loos approach to web design. The ideas in DWWS set me on a journey of really questioning what I do when I am creating a website. These questions have become less about art and more about engineering.

This week, I watched a video by designer Andy Clarke who wrote an excellent book on CSS called Trancending CSS. In the video he shows his process on creating a web site which he suggests designing in the browser. So, rather then sending a PDF or static mock up of a web design to a client, send a working demo right away. He explains that the benefits of this is providing the client the experience of the site immediately and the designer a easier way to make revisions through editing CSS. Much like Zeldman’s book, this video got me thinking about my own process in designing and producing a web site.

Here are some key concepts that I re-learned:

  1. Content is King - Andy Clarke shows that you can start the web design process with a word document. Writing out content as you would outline a book or and essay. This approach allow you to purely focus on Information Architecture and is a good way to think about how the mark-up should reflect this content.
  2. Write Once, Publish Everywhere - Zeldman encourages clean semantic code that is accessible to everyone and every device. This is done by using code that appropriate to the content that is being presented and limiting things like “Code Forking” and “Browser sniffing”. These things make the website slower and can lead to some undesirable results. The best solution is to write code once and the right way. This is the core idea of term “Progressive enhancement”.
  3. Client Relationship - Andy Clarke will sometimes invite a client to sit next to him while making revisions to a design. He does this by making real-time adjustment to the css which gives a client instant feedback. This approach lets the client get involved with the design process and gives them a sense of how their site works. This I feel is a much better approach then exchanging emails over a static image.

There are many other things that I re-learned recently, but these I feel are the most notable. I think that a large part of my job as a web designer and in life is to be always re-learning and questioning things that I do. This keeps things interesting and allows me to see things in a new light and take on new perspectives.

Relearning is a habit that I hope never dies.

Posted in Web Design | Leave a comment

PBS Frontline: Digital Nation

Posted on April 14, 2010 by Matthew Ell

Not too long ago I wrote a note called Digital Native Responsibility. I continued my thoughts on this after watching a very relevant documentary on PBS called Digital Nation. The documentary visited the common “digital native” in various cities all over the world which examined the positive and negative effects technology has on brain development. Much of this examination was questioning the act and psychology of muli-tasking. Is it possible? Has the “digital native” developed some sort of new brain functionality for technology? Are virtual worlds changing the “real” world? These kind of questions are asked and are seen from several angles. The good and the bad. Hosts Douglas Rushkoff and Rachel Dretzin are out to understand these questions rather than provide answers.

You can watch the program in it’s entirety on: PBS.org

Posted in Technology | Leave a comment

Trillian for OSX

Posted on April 12, 2010 by Matthew Ell

This past weekend I downloaded the alpha version of Trillian for Mac OSX 10.5 or higher. I sometimes feel the need to test out and use new IM programs. Some how I find myself always going back to iChat mainly because it is simple and offers the basic functionality I’m looking for. However, the newest Trillian is slowly taken iChats place on my monitor. Trillian for Mac offers more functionality without an impact on user’s experience. Features like Growl support, Facebook chat, and the ability to easily manage multiple IM clients at once is nicely presented through a clean and intuitive user interface. Additionally, Trillian for the desktop works seamlessly with their iPhone app.

While the application is still in it’s early stages, I am looking forward to seeing how it develops. I hope that they can keep the application UI simple while making further developments in areas like Video/Voice chat. One feature that I enjoy most, is the ability to connect and disconnect from individual IM clients in less than 2-clicks. Additionally, the ability to set one status for all your IM accounts is invaluable.

Posted in Technology | Leave a comment