Unique Ways to Learn…

Dan  Cederholm has been one of my favorite web designers to follow for a long time. There is something about the simplicity of his words – not simple words, but clear and concise when he describes a coding process, that I found in the first book of his that I read and used for my classes (Web Standards Solutions).

Reading his Simplebits website this morning, I read about his recent WordPress theme Pears. I have read the brief article before, but this time I went to the link for Pears [pear.rs] and discovered an amazing idea – to create a website to “collect, test, and experiment with interface pattern pairings of CSS and HTML”. The design is mainly for the user to create a collection of their own such patterns with the unique features of the theme’s structure. The left column is where you define a pattern you want to build and collect. When you select the pattern, the top half of the page becomes the pattern – a coded demonstration. The bottom half is a split window with the code used to create the pattern with the HTML on one side and the CSS on the other. What a great tool for learning and for storing snippets of code!

I highly recommend visiting pear.rs if you are just learning to code html and css, and to try the theme when you have your own hosting service as a tool for developing your own “patterns”. It is a great tool to add to my personal learning environment too!

Somehow, while on Simplebits my iPad jumped to Instagram.com/simplebits. Dan has collected a series of images to share – which probably are places and people where he lives. I have not bothered with Instagram before now, but I realized I have many images of my community that would be fun to share in this type of “biographical story”. Another project, but it looks like a fun way to share the community I am so attracted to and involved with.

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://netmagazine.com/features/ethan-marcottes-20-favorite-responsive-sites (these are pretty special)

http://mediaqueri.es/ – Media Queries


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

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.

WordPress Theme Frameworks

For web designers who may want to use WordPress as a robust content management system, might want to review some of the newer WordPress theme frameworks that are available.

Theme frameworks are not particularily new as the Sandbox theme has been a standard for taking the basics of a WordPress page and then adding theme information (CSS) to the basic structure.

But some recent frameworks are more sophisticated and aimed at making the CMS features of WordPress easier to work with when there is a lot of development to do or a designer is responsible for creating a lot of WordPress sites for customers.

As in other programming and markup environments (JavaScript, CSS, AJax, etc.) a framework is a completely coded theme that can serve as the base for many projects. Often the framework can be added to (as with several WP theme frameworks) with child themes – a way of changing the look and function of the base framework, yet using its many resources. (Justin Tadlock)

Tadlock’s article “Why I created a WordPress theme framework“, provides a good understanding of WordPress theme frameworks. Of the theme frameworks I have reviewed [Thematic, Vanilla, Hybrid, and Carrington] I think there are some creative uses of these products. I particularly like the Carrington framework, even though I have not completed a child theme with it. But if you need to save time, but also have time to learn the framework, these could be valuable assets in creating solid WP based websites.

Links to each of the frameworks mentioned and others are located on the WordPress Theme Frameworks link stated above. By the way, I forgot to mention that these frameworks are free – as in open source. Thematic does offer commercial versions but it freely offers the base framework.

Screencasting and other activities

Leigh Blackall’s “What to Do” provides a group of instructional videos that engage you in activities that will add to your PLE tool chest. I believe that as we experience new digital technologies we gain new potential as designer/developers and here you can pick and choose what is attractive and appropriate for your needs.

If you enjoy the videos and find some useful information, don’t hesitate to comment and thank Leigh for making these tutorials available. It never hurts to add a friend to our blogging network!

Fear, Trembling, & Excitement?

If you are a web developer who makes a living teaching web design, you may experience these emotions as I did this afternoon. Casually gleaning new stuff from my aggregator subscriptions and listservs I selected a link from Stephen Downes informative listserv and was sorta knocked out of my chair with the discovery of a new product that was so unusually rich and challenging that also seemed to take everything I have spent years learning and render it obsolete! Such is the power of new technologies. I can’t remember ever experiencing such contrasting emotions from such a simple act. I felt threatened, yet very excited. Fortunately I was able to share the product with a few faculty and then with one of my classes. We discussed its potential impact and our emotions after previewing the product demonstration and video. I think we will be in dialogue about it for some time to come, but it is comforting to have other professionals to share with about such events and new products.

Fear and trembling comes from the threat to the fabric of one’s daily practice. Excitement comes from the possibilities of a new technology that could dramatically impact global learning. Who knows where the wind blows.

If you are not into creating your own portal such as mygoogle, myyahoo, or netvibes you may get interested after visiting Zude. It is to be released in beta on May 1, so there is a waiting period, but a brief animated demo on the site will give you an idea of what’s to come and the video of the developers and a live demonstration will rock you. There is also an informative article from ZD Net.

Another site that is similar but a few steps back perhaps is yourminis. It creates widgets for your blog, website, and now…desktop! A very powerful rip, mix, & burn tool.

I have been a proponent of self-directed learning in my classes and often have students work on a personal learning environment (PLE). Their job just got easier. Zume allows you to drag and drop any webpage, application (a web-based api), images from other sites, videos, and pretty much anything on the web can be drag/dropped onto a Zude document page. You can also link any of your objects to any other objects creating a new type of rip, mix, burn.

This type of application is referred to as a “platform of personal expression (PPE)” by ZD Net and it further engages the interactive designer into envisioning a web that is a mixture of whatever technologies can deliver the goods the user needs. It changes our way of thinking about design, it stretches our imagination, it challenges us to get very close to all the technologies we can manage to understand and share as a community. It is one more reason why we need to develop a stronger community of practice as a department. We need to be networking to keep up with all that is happening.

Previous Older Entries