Designing for the ebb & flow…

The Web is finally actualizing into its own thing. The transition from print design and human tendency to “hang on to the old” is about gone. We are entering another new phase of web design. We are now at the threshold perhaps, of really inventing what will be the web of the future. John Allsopp wrote about “A Dao of Web Design” in A List Apart back in 2000. In that article he referenced a number of excerpts from the Tao Te Ching. One of those related to the designer’s need to control web pages, whereas The Sage “…accepts the ebb and flow of things, Nurtures them, but does not own them,” Tao Te Ching; 2 Abstraction.

We are in that state with the new tools and technologies arriving daily, and it is our responsibility to nurture them, but not own them. As web designers we are faced with a multitude of devices we are designing for – including mobile phones, laptops, tablets, e-readers, game consoles, and soon most likely, the display in my Honda! There are more people connected using mobile phones today than those using desktops/laptops. This could be a really big hassle for web design, but instead we have arrived at a time when the tools and the technologies are available to solve these problems and allow a more holistic approach to design. Responsive Web Design guru, Ethan Marcotte, suggests in a recent interview in .NET, that “we can finally design for the “ebb and flow of things,” referencing the Allsopp article stated above.

Responsive Web Design represents a transition from fixed styles to flexible design that includes fluid grids, flexible images, and media queries layered together to create a responsive design. Responsive in the sense that we can design sites that are responsive to the devices out there rather than remaining stuck in a single device mentality. Obviously we need more design focused on Mobile computing, as well as the rapidly growing tablet products. Responsive web design allows us to address all of these devices in one website.

So we will evolve our teaching with Responsive Web Design, learning the various techniques available, and the rapidly growing bank of frameworks and new technologies that address the issues we face. But one site for all devices is not a simpler solution in that we are designing for different users – a user may be on his/her laptop in the morning, using their tablet during the lunch hour, and then their mobile as they head to a meeting. Same user, different devices, and different needs! It will require thinking skills, paying attention to how these different devices involve different needs. It is challenging but exciting. Web design is becoming more important in the global landscape, and from where I view it all, it’s getting to be much more fun and meaningful!

There will be more about Responsive Web Design in the near future. In the mean time, here are some of the articles, books, websites, frameworks, etc. that I have been reading, and pondering. Please share the resources you find that inform you about this important era and responsive design.

Ethan Marcotte’s article on A List Apart: http://alistapart.com/articles/responsive-web-design (started the conversation)

His book published by A Book Apart: http://www.abookapart.com/products/responsive-web-design

Dan Cederholm’s new book: Bulletproof Web Design, third edition; http://simplebits.com

Examples of Responsive Web Design:

http://paravelinc.com

http://trentwalton.com/2011/05/10/fit-to-scale

http://thedolectures.co.uk

http://atxwebshow.com

http://netmagazine.com/features/ethan-marcottes-20-favorite-responsive-sites (these are pretty special)

http://mediaqueri.es/ – Media Queries

http://www.netmagazine.com/features/21-top-tools-responsive-web-design

And one of the interesting new frameworks related to Responsive Design: http://lessframework.com/

Advertisements

Changes are now!

It is time that we engage in a broader conversation, through our blogs, google+, twitter and other collaborative tools you may add to the process. Web design has been changing over the last year or so, and today we find ourselves with better languages (html5, css3 at least) and better concepts for our frameworks and support apps such as Less (lesscss.org), Sass (sass-lang.com), Twitter’s Bootstrap (twitter.github.com.bootstrap) and support files in html5 Boilerplate (html5boilerplate.com) and Andy Clarke’s 320 And Up (stuffandnonsense.co.uk/320andup). We also need to pay full attention to Responsive Web Design ( http://alistapart.com/articles/responsive-web-design ), which is rapidly becoming the best practice of the era of numberless devices that web designers must include whenever we design a new interactive project.

Where to begin is not easy to figure out. Perhaps the best place to begin is to get a more collaborative and focused conversation started between students and instructors, students and students, all of us and others in the broader global community of web designers.

This blog is about to become more active, actually a new version of Webstuff2, perhaps Webstuff3 to indicate a next level. It is not easy to write regularly, but there is too much going on to simply hold on to it, or try to slip it into a curriculum that is becoming somewhat stifled. I firmly believe that a curriculum is more than what happens in the classroom however, and it is time to find out how much we can grow, just because we want to learn more, and be the best at what we are doing.

This intro to the “webstuff3 era” will be followed with an article about Responsive web design, as well as a list of resources that everyone should be reading. More soon.

Articles about Web Design

I have just posted a link to a Word document that contains direct links to a group of articles available from the Peachpit.com/articles website. These articles are by authors of recent books related to web design or they are actual chapters from books. I listed these to suggest that this is a way of keeping up with the latest resources as well as get in touch with authors you may not have read before. There is a wealth of material about progressive enhancement, html5, css3, designing with grids, and other interesting design issues. To get to the list go to my ftp site and the resources at the bottom of the page, Articles & Books. Look for the “alistofarticles.doc” link to download the linked titles. I will add a list of relevant books in a short time. If you go to the peachpit site, articles section, and select the “web design & development” topic from the left side menu,  you’ll find many more articles on other topics of interest for your reading.

Sharing resources

In the interest of sharing the wide variety of resources this instructor uses, my Netvibes account has been expanded to include most of my netvibes tabs which can be found at http://www.netvibes.com/wayneb#Home. The delicious account is simply http://delicious.com/wayneb. If you have problems accessing my sites, please let me know.

It’s time! (for HTML5)

This week we begin full focus on HTML5 in our web design/interactive media web scripting courses (client-side and server-side). The modular nature of the release of HTML5 and CSS3 assets have been available for some time, and will probably be completed by the end of the year or early next year. We only work with what is fully usable, and experiment a bit with future features, but it is a different, more efficient and semantic way of coding sites. The new html5 document structure begins with simplicity: . This is a great improvement over the 2 line doctypes from HTML and XHTML.

The early books about HTML5 are still forthcoming, but we can recommend a few  books to help you get started.

Introducing HTML5 by Bruce Lawson, & Remy Sharp, 2011. New Riders, ISBN 0321-687299, $34.99. http://www.introducinghtml5.com

Also check with Safari Books Online (through our library) for more new titles available to read free through the schools online account.

Hardboiled Web Design, by Andy Clarke, 2010. Five Simple Steps, ISBN 9781907828011. http://www.hardboiledwebdesign.com

HTML5: Up and Running, by Mark Pilgrim, 2010. O’Reilly Media. ISBN 10: 0-596-80602-7

If students are interested, we can provide a 1-2 hr workshop about HTML5 to help you get started.

How I manage information

I manage digital information differently according to what I am doing and the context of the process. I generally browse from my Netvibes RSS listings, or from more detailed subscriptions from NetNewsWire which is a high-end Mac content aggregator that automatically synchronizes with Google Reader. (I like the security of having my desktop aggregator duplicated with a cloud based system). NetVibes contains the frequently accessed subscribed sites, while NetNewsWire is a more extensive collection of subscriptions.

I typically browse RSS feeds beginning in Netvibes. I quickly tag anything I want to capture with a bookmarklet icon that takes me directly to delicious.com. In Delicious tag with a generic tag (css), a more specific tag (css3_tutorial), and sometimes added specificity (css3_queries_tutorial). When I am short on time I create a “READ” tag, which takes me back to articles I want to read in the very near future.

I also carry a Moleskine pocket notebook to Collect other types of information. It goes everywhere I go, and collects anything I want to collect. I also have a Moleskine for books/authors/publisher data in which I keep a lengthy list of new books that I think are important.

If I am going to post several articles, I use Marsedit, a Mac app that is a great outside editor which can add images, links, etc. and then automatically post to whatever blog I wanted to post to. I have multiple blogs so this is a handy and quick tool for getting a lot of posting done. It is also easy to create drafts, then go back and add to them and edit.

I am not a friendly FaceBook user, but do check it occasionally and get more links reminding me to than I choose to pay attention to. I also use Linkedin, with about the same amount of enthusiasm! I prefer searching subscribed resources and constantly updating my storage of articles and files that I can then find instantly.

More to come. Your process and any interesting tools you use to learn with, would be welcome comments.

Managing information

George Siemens stated that “The most critical skill that individuals need to master today is how to manage information.” Skills such as critical thinking, detecting information that is not accurate, creating personal learning networks, and similar 21st century skills are all based on how we manage information. This is the focus of our Fundamentals Of IMD course, that involves experiencing social networking tools that can become an extension of how we learn in a digital world. Hopefully, you continue to build your personal learning environment that began in Fundamentals.

It is important to learn the topics of our domains of study such as HTML, CSS, JavaScript, PhP, Flash, image manipulation, and planning processes. But these languages and tools are constantly changing as are the types of problems potential clients will ask us to solve.

We will only be as successful as the way we manage the overwhelming maze of information that is available to us. We are only as “smart” as the way we choose to manage the information that is the basis of our domains.

How do you manage information? What tools and processes have you developed and customized to support your design creativity? What networks or communities have your found that support your domain of learning?

If you only do your assignments, you may not develop the real skills necessary to become a successful designer. If you only create what teachers ask you to create in classes, you may never find out how to solve real problems that will confront you when you graduate.

I will add another article here about how I manage information, and I encourage you to share your methods and practices as a comment to this blog, or in discussions with your peers and instructors.

Previous Older Entries Next Newer Entries