Show/Hide Content with CSS and JavaScript

Today’s tutorial will show you how to hide away extra bits of content using CSS and JavaScript, to be revealed at the click of a button. This is a great technique, because displaying the additional content doesn’t require a refresh or navigation to a new page and all your content is still visible to search engine bots that don’t pay any attention to CSS or JavaScript.

Glazebrook, Rob L. CSSnewbie (2008). Articles>Web Design>Interaction Design>CSS

The Dilemma of Comments

Abuse has made me seriously consider – several times – disabling comments. I’m ambivalent about it. On the one hand it would make writing and publishing much easier. Write something, proofread it, publish.

Johansson, Roger. 456 Berea Street (2007). Articles>Web Design>Community Building>Interaction Design

Parse JSON with jQuery and JavaScript

While exploring the options for traversing JSON, I discovered that there is no official W3C documentation, or even a draft. As a subset of the ECMAScript language specification, it will probably remain under the governance of ECMA International. So unlike XPath, which is a commonly accepted language for traversing XML, JSON must rely on JavaScript’s object notation.

Reindel, Brian. d'bug (2008). Articles>Web Design>Interaction Design>Ajax

Creating Modular Interactive User Interfaces with JavaScript

Discover a technique that lets you move sections of a Web page using drag-and-drop functions. Different aspects of the interactivity are implemented separately and then composed into a unified whole, allowing for flexible customization that can make your Web users very happy.

Travis, Greg. IBM (2008). Articles>Web Design>Interaction Design>JavaScript

Web 2.0: A Very Short Introduction

A profound change is happening on the cutting-edge of web development: we are relinquishing control of information. No longer are sites working independently from each other; no longer is information sitting in isolation with no interaction between sites. Rather, the best web programmers are now creating sites that allow information to be reused anywhere.

Mercurytide (2005). Articles>Web Design>Interaction Design>Social Networking

Design Decisions vs. Audience Considerations

Deep down below the layers of interface, CSS, HTML, and XML—down where only the geekiest among us roam—everything comes down to this: it’s all zeroes and ones. On or off. The digital switch Though interaction and conversion becomes a bit more complicated at the point the interface meets the visitor, though there are a few more shades of gray, in the end it comes down to the same thing: yes or no.

Ragle-Davis, Robin. Digital Web Magazine (2008). Articles>Web Design>Interaction Design>Audience Analysis

Image Fade Revisited

This episode is revisiting the image cross fade effect, in particular Dragon Interactive has a beautiful little transition for their navigation that some readers have been requesting. Greg Johnson takes it one step further to implement this method using jQuery and the methods shown here.

Sharp, Remy. jQuery for Designers (2008). Articles>Web Design>Interaction Design>Ajax

The Document Triangle

Every paper and digital document shares three basic dimensions: structure, information and presentation. Although these dimensions are always interwoven, some people in the digital world mostly focus on document structures (e.g. information architects), some on the information they contain (e.g. marketers and writers/editors) while others specialise in the (interactive) presentation aspects (e.g. visual designers and Flash developers). The mutual dependence and interaction of these dimensions is the next level of design and does not regularly get the proper attention. In order to better understand the relationship between these dimensions, we need to look at each of them seperately, and how they inter-relate.

Bogaards, Peter J. BogieLand (2003). Articles>Web Design>Interaction Design

Web 2.0: Mistaking the Forest for the Trees?

Think of Web 2.0 as more of a concept than a person, place or thing and you'll find firmer ground. Even better, spend some quality time with O'Reilly's lengthy essay. Finally, keep in mind that the lion's share of Web 2.0 discussion is from a technological perspective; it hasn't yet filtered down to the information architecture, interaction design and similar discussion lists.

Rogers, Dave. GotoMedia (2006). Articles>Web Design>User Experience>Interaction Design

Toward 2^W, Beyond Web 2.0  

From its inception as a global hypertext system, the Web has evolved into a universal platform for deploying loosely coupled distributed applications. As we move toward the next-generation Web platform, the bulk of user data and applications will reside in the network cloud. Ubiquitous access results from interaction delivered as Web pages augmented by JavaScript to create highly reactive user interfaces. This point in the evolution of the Web is often called Web 2.0. In predicting what comes after Web 2.0--what I call 2^W, a Web that encompasses all Web-addressable information--I go back to the architectural foundations of the Web, analyze the move to Web 2.0, and look forward to what might follow.

Raman, T.V. Communications of the ACM (2009). Articles>Web Design>Interaction Design

Siete Impresionantes Sistemas de Navegación en jQuery

Ayer os presentaba dos excelentes galerías de proyectos desarrollados en jQuery. Hoy, para no ser menos, vamos a seguir hablando de jQuery. Lo que ahora os presento es una recopilación de 7 sistemas de navegación que nos os dejarán indiferentes.

Costales, David. davidcostales.com (2009). (Spanish) Articles>Web Design>Interaction Design>JavaScript

Introduction to jQuery 

The popular JavaScript library jQuery is an amazing way to extend the design possibilities of your site beyond what CSS can do. But luckily, if you are already comfortable with CSS, you have a huge head start in jQuery! This is a very basic introduction to including jQuery on your web page and getting started writing a few functions.

Coyier, Chris. CSS Tricks (2008). Articles>Web Design>Interaction Design>Screen Captures

Intro to jQuery 2 

Starting off where we left off last time, we continue exploring the possibilities of jQuery. We revisit some of the old functions and make them do some smarter things. We explore a simple variable and an IF/ELSE statement. Then we look at the AJAX-y .load() function, the CSS function, and then finish off by writing out own custom function and going over how that layer of abstraction can help us keep our code clean. Semantics counts in JavaScript too!

Coyier, Chris. CSS Tricks (2008). Articles>Web Design>Interaction Design>Screencasts

jQuery Part 3 – Image Title Plugin 

This video focuses on taking an already existing idea and code and turning it into a jQuery plugin. In this case it helps keep our code as semantic as it can be, and with JavaScript off, degrades nicely. We cover the syntax of creating a plugin, show off the cool chain-ability of jQuery, and show how to make the plugin versatile and expandable.

Coyier, Chris. CSS Tricks (2009). Articles>Web Design>Interaction Design>Screencasts

A Social Interaction Design Primer 

User experience matters in social media are more complicated than in non-social software. For example, the conventional user-centric view starts with user needs and goals. In social media these are not necessarily rational and objective. They can be much more psychological, and social, for example. Furthermore, the interactions that users have are not just with the software application -- they are with other users (through the software). The UI is not an interface to discrete actions and transactions (such as your online banking site); it is a social interface, and through it users feel like they are interacting with friends and audiences.

Chan, Adrian. Gravity7 (2008). Articles>Web Design>Interaction Design>Social Networking