MacWorld has an article, “Apple reveals its list of ‘iPad-ready’ Websites.”  The article brought some interesting questions to mind:

• What do you all think about the difficulty of upgrading websites that use Flash, to a more iPad friendly HTML5 + CSS + Javascript?
• Does upgrading mean that the design of the website must change?
• Is there a design-process for taking a UI developed in Flash and converting it into HTMl5 + CSS + Javascript?
• What does this mean for local (Florida) sales/marketing sites that are Flash heavy?  Should they move to become more iPad friendly HTML5 + CSS + Javascript?
• Will they be judged by potential clients, as being inferior, if their site appears broken on the iPad?

I think there is a much bigger question than just making sure things work on the iPad. If you follow Web standards thinking, I think we are hitting a point when we need to consider how anyone is accessing the Internet. Much more is happening through mobile and other devices such as the iPad. I am not so sure it is a good thing to move in the direction of proprietary development. PPK addressed this on his blog in February with the obsession he has seen with the iPhone.

If we embrace the fundamentals behind Web standards, then I think we owe it to our clients to educate them to the broader issues. iPhone is still a small percentage of the overall mobile market and smart phone market. How widespread will iPad really be? I think it is unwise as a business decision to not look at how to deliver the best experience over the wide-range of Internet devices that now exist and will only continue to broaden in scope in the years ahead.

I think as Web professionals, we need to be looking for innovative solutions like Video for Everybody. This HTML embeds HTML5 video into a site with fall backs to QT and then Flash. This solution may not be perfect yet but I like the idea of a solution that offers options, if one video solution does not work–fall back to another and so on.

I think that companies that rely heavily on Flash need to rethink their strategy. Those solutions just don’t work well throughout the spectrum of devices and do not really consider the context for mobile use. There have been plenty of posts since the announcement of the iPad that have reexamined the short comings of Flash and have called for new solutions. (Zeldman and Jeff Croft)

I think Web sites will be judged by whether they work across the spectrum because there will always be users on different platforms. To be honest, I am not a huge fan of browsing on my iPhone because  sites do not really work well with that platform unless the designer/developer has made it more iPhone friendly. But again, I think that same thinking needs to consider other Smart phones and devices.

The reality is that developing for the Web continues to be complex and continues to throw new problems at Web professionals that need new solutions. Let us embrace the challenge. That is part of the thrill of being in this industry. There is always some new facet to explore and new problem to solve. I hope that we respond by embracing the challenge and using our skills and talents to meet these new challenges with great solutions. Yes it means more development time and that we have to have a greater breadth of knowledge, but to move forward we need to embrace this reality and use the same passion we have in the past to make great Web experiences.

The challenge he laid down was to take time each day to practice your design skills by actually designing something. His challenge was to try this every day for a year. What I really liked about the article is that Jad gave some very practical advice on how to get started.

He suggested just setting aside 20 to 30 minutes a day to practice. To me, this is very do-able. It does not have to be a polished design. I even had the idea that I could work on something a little bit each day.

I like the idea of Jad’s challenge. When I was younger, I practiced the trumpet each day to get better. I think I spent 30 minutes a day with my trumpet. I also saw how practice made me athlete in a variety of sports that I played.

Why not take 20–30 minutes to work on a design idea?

I have started to practice my design. I have not been able to do it everyday but I am making progress. I decided to post my creations on Tumblr as a way of keeping myself accountable. Typography has been the theme running through my designs this month.

Are you up for the challenge?

Maybe just try it for a month? Or like me, just try it as often as you can.

Note: If you like this, you might also want to read my post, Great Designers Steal Practice. It was inspired by several posts by Cameron Moll and other reading I was doing at the time. I had a couple other ideas on how to practice design including wireframing other people’s designs to learn from them and trying to recreate other people’s work as a means to practice (not as design theft but as practice).

What are Web Standards

This video is a very good introduction to the topic. Jeffrey Zeldman really led the charge of this movement with his book Designing with Web Standards.

Why I use Web standards?

Almost every professional industry starts with standards. They are agreed upon best practices and principles that all the players in an industry follow. It makes for a common language and allows multiple people to collaborate.

Back before Web standards, different browser vendors would implement HTML differently. It was hard for a designer to build a Web site that would function well across many browsers because the rules would always change. Now there is a common environment that we can build upon to make great experiences for the Web user.

Here are some reasons I advocate using Web standards:

• Quicker and easier development and maintenance — Using structured and semantic HMTL and CSS makes it a lot easier to understand code that was written by me or by someone else. I often have to revisit code that I wrote a year earlier. I can quickly get in and make my edits because I understand what I was doing in the past. I can also figure out what others were thinking when they coded their pages so I can learn from them or contribute to their work.
• It is forward thinking — Using standards future proofs your site for changes in the browsers. Standards gives you a solid foundation which will keep your site from breaking and allow you to implement new code and features as they are implemented in the browsers.
• Leaner pages - Separating content and presentation allows for less coding on your individual pages. I was able to cut the code on one legacy site down to a third or fourth of what it was when it was coded with tables for layout. Leaner pages load quicker which is a win for your visitors.
• Better accessibility - Using semantic HTML makes it easier for assistance devices to correctly interpret content. It also makes it easier to develop different versions of your site for different devices including mobile. You just serve up a separate stylesheet to each device.
• Highly adaptable — Separating presentation from structure makes it much easier to update a design or apply a new design because you only update one or more CSS files to update instead of updating code on every page.
• It saves time and money — This is the major business case for using Web standards. Leaner code means less bandwidth which saves money. Semantic code can improve your search engine rankings. It takes less time to develop and maintain Web sites using standards which saves the site owner money.
• I am joining other professionals in my industry in using agreed upon guidelines - Using standards makes it easier to work with others in my profession. We speak a common language and can contribute and collaborate with one another because we are committed to the same standards.
  

First and foremost, a Web designer is a problem solver. A client comes with a message they want to communicate, information that they want to share, or a product or products that they want to sell. My job is to find an appropriate visual solution that will tell their story and connect people with the service they are offering or selling.

I craft a solution by visually organizing the text, images and video on the page to communicate my client’s message. I also craft a visual personality that helps supports the communication of that message.

A Hybrid ???

I have always assumed that a Web designer was one who not only came up with a visual design but also had the skills to build that design. My thinking is shaped by the fact that I first got into Web design by learning HTML so that I could create a Web page. This was back in the late 1990’s and visual design on the Web was in its infancy. Slow connections meant that you had to be creative to add graphics to a page and make it efficient to download. So I learned to code in HTML and later in CSS so that I could bring my creations to life.

Hence, I have always thought that it served a Web designer well to know how to build his or her creation (read a recent post on the subject.) There are many times when I will not even do a design comp but jump right into writing HTML and CSS and create as I build. I know what graphics I want to create and I prefer doing that in Fireworks. As I code, I begin to craft the design and start adding in details that make the design really come to life.

It is only recently that I have come to realize that many consider me unique. Hybrid is one of the words that someone used to describe my skills. I never thought of myself that way because most of the designers that I follow code their designs.

What are your thoughts? What word or words do you use to describe the work you do?

A very telling video about what the average person is thinking when they use the Web. I listened to an interesting discussion about this subject on Sitepoint’s podcast.

I think the reason there is confusion about the difference between a browser and a search engine is the integration of search into the Web browser. Search is the function that users do the most of. I could see why they don’t understand the difference.

I believe this video is evidence that a lot of people are not so concerned about which browser they use and will probably stick with their default. Web designers are going to still have to consider IE6 for a long time and then determine what strategy to employ with IE6.

One strategy that I am investigating is Andy Clarke’s Universal IE6 CSS. I have implemented it on this site. I like the idea of serving up the user the basic content without styling.

BTW, a browser is software that you use to view Web pages. The more popular browsers include Internet Explorer, Firefox, Safari, Opera, and Chrome.

A search engine is a Web site that you use to search for things on the Internet. Two of the most popular are Google and Yahoo. Many modern Web browsers use Google when you use the Search box in the right hand corner of the browser.

“…attempting to describe the idea of becoming a better designer by dissecting, analyzing, and ‘copying’ the works of other designers.”

In his follow-up article, he talks about how Tony Williams, a drummer, would practice playing in the style of other drummers in order to become a better drummer himself. Cameron’s point was:

“…you become a good designer by familiarizing yourself with the methods and techniques used by those who are already good designers.”

As I read that, I thought about 2 ideas that I came across from other designers that were similar to what Tony Williams did.

1. In his book, Sexy Web Design, Elliot Jay Stocks recommended looking at the work of other Web designers and then doing a wireframe of their design in order to study layout. I had a similar idea back in December when I bought the book, The Web Designer’s Idea Book.
2. On the same day I read Cameron’s post, Chris Coyier wrote a post, Exercise to Get Better at Web Design. This article is even more in line with Tony William’s idea. Chris suggests finding a Web design you really like and then try to copy it identically. He even suggests looking for ways to put your own spin on it while you are recreating the design. Chris is not advocating design theft here but it is a similar idea to how Tony Williams would practice in the style of other drummers. Check out Chris’ article for all the steps of his suggested exercise.

A talk from SXSW on the clever things designers put in their design to add pleasure to the experience. I listened to the audio but look forward to viewing the slides since this was a very visual presentation. I would like to think more about the ideas presented here. It goes on usability to adding value to people’s experience and I am really motivated by that in design.

A couple of week ago, I read Jared Spool’s article, What Goes into a Well-Done Critique. One of Jared’s observations is that teams that felt they go the most out of critiques were those that conducted them the most. Critiques have benefits for both the designer and those looking at his or her work.

I had already been thinking that it might be helpful for us to have regular “pin-up” times where we can share our work. We could incorporate critique as part of that time.

Here is a summary of Jared’s important points:

• Respect — the person giving critique understands and acknowledges the hard work that the design owner has put into the design. There is also an awareness that it is dififcult for anyone to receive a critique of their work. Respect comes in offering critique when the design owner is ready for it. Jared does not mention this but I think respect also comes from the design owner being willing to come to times of critique with respect for the other designers and that their intent is to help improve the design.
• Dispassionate — All those involved in the critique must be able to step away from the design. the design owner understands he or she is not being judged but is helping the team to understand the journey he or she has taken to get to this design solution. The critic uses the critique to explore the different directions the design could go. This creates a learning opportunity for the team where everyone benefits.
• Lacking Authority — Critics recognize that nothing they say will change the direction of the design. Only the design owner can make that decision. Jared observes that in the best critiques he has seen, the critic never made a single recommendation. The critic asked questions and helped guide the discussion. They focused on the bigger picture. Instead of making a recommendation, the good critic might ask ‚“what alternatives did you consider for …?” This keeps the conversation on the bigger picture. And the design owner may have already thought through the alternatives and deemed the one that he or she came up with as being the better of the choices. A great way to offer criticism is the phrase “have you considered…?”
• Justified Impressions and Concerns — Skilled critics avoid hollow compliments and share specifics on what they liked in a design and how it supports the direction of the design. And when offering criticism, the skilled critic justifies their concerns and show alternative examples. This allows the discussion to focus on the merits of the justifications instead of opinions of taste. By comparing design alternatives, a team can look at the essence of the design issues.

Questions to Ask Yourself during a Critique

• What did I like or enjoy about this design and why?
• What concerns me about this design and why?
• What does this design remind me of and why?

What I liked about this article is that it challenges me to be actively involved in a critique by knowing what questions to ask myself. Even if I don’t give critique, I can actively engage in the process and listen to what others might bring up.

I am also challenged as a design owner. Like everyone, I am not a huge fan of critique. It is hard to put a design out there in front of others when I have invested a lot of time and a lot of myself into the design solution. This article challenges me to recognize and remember that the purpose of critique is to make the design better and that I am part of a team that is “for me.”

Good critiquing skills are something that come with practice. After reading this article, I can see why regular times of critiquing each other’s work is beneficial for the whole team.

If you are not familar with Jared Spool and his company UIE, I suggest you check it out. He sends out a regular UIE Tips email that have great insights. I also enjoy listen to their podcasts on my commute. And if you ever get a chance, they put on a great conference in Boston. I have attended it twice.

For the second year, A List Apart is calling all those who make Web sites to participate in a survey that gives us a better understanding of our profession. Nearly 33,000 participated in last year’s survey, including myself.

If you are a designer, developer, project manager, writer or anyone else who helps make Web sites, I encourage you to take a couple of minutes to take the survey so that we all can get a better picture of the state of our profession.

I found this via The Rissington Podcast.

• understanding
• identifying
• crafting

He goes on to talk about the work that must be done under those categories and then lists some skills a designer must have and sharpen to be successful in that work. He also lists some specific skills that a Web site designer or interaction designer must have. It is a good list to check and determine where growth needs to occur.

Thanks to Cameron Moll’s Premium linkage for bringing this article to my attention.

• Let your layout breathe — CNN.com is a great example
• Consistency of spacing or use multiple scale
• Use range kerning in headlines (with larger font size)
• No hanging widows — Shaun Inman’s Widot plugin
• Alignment — aligning elements can make a huge difference
• Black is not black and white is not white — consider using #333 or #CCC instead of default black and white
• Flat is boring — create some depth
• Adding a pixel to add interest — as one border (they used example of Mint’s dashboard)
• Know when to quit

• Site Seeing — Luke W’s book that covers much of the content of the one day seminar I attended. One of the things I got out of it was thinking about hierarchy on a page. Thinking through the hierarchy of content and then coming up with a visual organization on the page to support that message. I also liked the idea of thinking of design in terms of visual organization and personality (often what we call look and feel). I have been challenged to consider visual organization first and then to come up with a personality for the site that enhances that organization and the message that site is trying to communicate.
• Principles of Design series on Design Meltdown — I liked the use of examples from other Web sites that supported the principles discussed in these articles.
• Exploring the Elements of Design — I saw this in a Border’s bookstore in Boston while attending UI12. I have enjoyed going through this book. It is filled with lots of examples mostly from the graphic design realm.
• Universal Principles of Design — This is a book that Andy Rutledge suggested to me. I am looking forward to reading it. It contains short chapters on different design such as 80/20 rule, Fitt’s Law and Gutenberg Diagram.
• Principles of Design, Elements of Design, Designing for the Web, and The Principles and Elements of Design articles on Digital Web — good primer articles to get familiar with the principles and elements of design. This was the article that I first read and then wanted to go deeper.
• Contrast and Meaning — Article by Andy Rutledge

I wish I had more time to process all that is being thrown at me. I would like to make a list of action points before I leave tomorrow so that I can begin to integrate this experience into my work.

Some of the highlights of the week:

• Getting to hang out with Andy Budd, one of my Web design superheroes. I met Andy last year at Refresh06. I have had several opportunities to chat with Andy during the conference.
• Communicating with Visual Design workshop taught by Luke Wroblewski. I also got a lot out of a seminar he did on Form Design. I look forward to his book on the subject which comes out in March. One of my action points is to read his other book, Site Seeing, which covers the material he went over in the workshop.
• Eating lunch with Cameron Moll. Yesterday, I got to eat lunch with Cameron Moll. I enjoyed getting to know him on a personal level. I took his workshop on Designing Elegant Interfaces with CSS. I wished we had covered a little more on design but he included things in the notes that were interesting including the process of his design of his portfolio.

I am looking forward to hearing more from Jared Spool this afternoon. Got to go.

• Right navigation on the secondary pages
• Overhanging graphic on that navigation bar that indicated “you are here”
• Colored drop down boxes of links on the horizontal navigation bar. The designer uses the same color for a “stripe” that goes down the left side of the page and for the background of the secondary page right navigation
• Use of sIFR for page titles
• Color palette and “feel” of the site

Jared also talked about how the homepage is usually the first page that gets designed because it is the easiest (and I think can be the most fun). Content pages and other pages that get you there are harder.

Users are not on your site to hang out on your homepage. They are there to get something, whether it is buying something, getting news, reading an article or connecting with a friend. The homepage and supporting pages (departments, galleries, etc.) are there to get users to what they want.

Given this, I have been re-thinking the design process and here are preliminary thoughts for the order of attention I give to design:

1. Content pages
2. Gallery pages
3. Department pages
4. Homepage

For an explanation of these type of navigation pages, see 8 Types of Navigation Pages by Jared Spool.

Of course the day I listened to this podcast, I was working on a new design for a site and I was starting with the homepage. After hearing this podcast, I think I need to put the homepage aside and start on the content pages and work my way up.

The prerequisite for doing something meaningful with any of these skills —€” HTML, CSS, Flash or whatever —€” is first embracing the medium as something different from print. Indeed, there’€™s no point in learning these skills unless as a print designer you’ve made a prior shift in your understanding of how design works in digital media. Specifically, come to grips with the fact that, on the Web, design is not a method for implementing narrative, as it is in print, but rather it’€™s a method for making behaviors possible.

I liked how he makes the distinction between print and Web design.

• Print design is a method for implementing narrative
• Web design is a method for making behaviors possible

The Web is about interaction and behavior. It is a fundamental paradigm that anyone working in the Web needs to understand and embrace.

For me, one of the ways that I still need to embrace the medium is in the area of typography (see related post). I am still seeking too much control and need to embrace the fluidity of the medium. But I am embracing it and looking to grow more in this area.

I found both of these to be interesting reads. I agree with the distinctions that Josh is making between design and art. Design is trying to communicate to a specific audience. Art may not speak to anyone. Some of those who commented pointed out that a lot of times art is more for the artist than the public.

I am still trying to process this idea. I appreciate articles like this that cause me to think and reexamine.

I thought her examples of minimalism were not as minimal as I would have expected. I have seen several sites and blogs that are more simple, some focusing more of typography and less on imagery.

• Subtraction
• Derek Punsalan’s blog

One that she didn’t mention is the wicked and worn look. It might fit into her category of “collage.” I did like how she gave tricks to consider when working within a style.

• Wornamental, Thornamental- Resources for creating the Worn look
• Wicked and Worn — Cameron Moll’s tutorial for creating this style

This site caught my eye both from a design standpoint and because of the product it sells.

I sat through many design “crits” as an architecture student. This product would have been very useful. I can see using in my office with some of the stools that I like to use on days I feel like raising my desk.

I also like the design concept of this site. I have tried this approach of using real world objects in some of my designs and design ideas.

http://critbuns.com

A couple of weeks ago, I heard Richard Rutter of Clearleft speak to the subject of Web typography on the Boagworld podcast. Richard has put together some thoughts on webtypography.net. I was poking around today on that site and came across these thoughts related to using ems instead of pixels in defining the size of type on a Web page.

“… the beauty and advantage of the Web as medium is that readers are able to adjust their reading environment to suit their own needs. This is a concept that should be acknowledged & embraced, and built into website designs from the ground up.”

I have to admit, I have been reluctant to embrace using ems instead of pixels. Part of it is that I have not really understood ems. I have been hesitant because I have to relinquish control as a designer. But I think what Richard says here makes good sense. The Web is a medium where readers can adjust their reading environment. This should be recognized and embraced. It is part of the medium.

I had already been thinking about this after picking up Steve Krug’s second edition of Don’t Make Me Think. I was reading about accessibility and he also addressed the issue of resizable type. He talked about the fact that designers fear a compromised design when they hear “accessibility.” I think that has been my fear in using ems and giving up control. It becomes more of an issue when using text in “navigation bars” when increasing text size can break the design. I am motivated to read Dan Cederholm’s chapter about this in Bulletproof Web Design.

I like what this comic from Josh Porter communicates and I like how he chose to communicate it. those that read/use our Web sites are not so concerned about which is more important, design or content. What is important to them is that they can use it or that they want to use it.

MySpace is a great example. From a design standpoint, I hate it and it irritates me. I no longer use it partly because I did not like the design but I also did not care for the raunchy ads or the friend requests I was receiving. But I digress …
A lot of people do like the site because they use it. They use it to keep up with their social network. (One of the biggest reasons I left MySpace is that my social network was not using it. But they are using Facebook and I use it.) People using MySpace are not thinking about design or content but that the site is allowing them to do what they want to do, keep up with those in their social network.

This comic serves as a good reminder to me to keep what is important to the user as the most important thing. I think both good design and good content will lead to better use but a good evaluation of a site would be, is it being used?

http://www.haus-hoyer.de/

I came across this site through Design Meltdown. What I liked is that it used Javascipting to allow you to bring layers “forward.” You can click on the business card on the right and it comes forward. I later discovered that you can drag all the elements around the page.

I am not sure how valuable the ability to do this is on a site but there is a coolness factor. Because I do not know German, I cannot really judge the site on its content and how the behavior enhances or takes away from the site.

You could win a 30GB video iPod or a ticket to An Event Apart event.

You can take a tour of the new features which uses Flash video. It combines screenshots, animation, video of Martha and her voice over. I was wowed by the first experience I had with the site. I particularly liked a “Photo Gallery” module that uses CSS and Javascripting. I would love to learn how to do that.