Mark DuBois Weblog

I participated in the WOW/ Web Professionals web design contest in Kansas City last week (June 21 – 24). I wanted to take a moment and share my observations and include a few comments received from the judges. I am providing these hoping that we will continue to see gradual improvements in the competition every year.

First (and most importantly), I believe everyone competing at the contest demonstrated significant professionalism and enthusiasm. The contest is all about employing web standards, demonstrating professionalism and exhibiting a positive attitude. I observed these traits many times during the week.

Obviously, everyone participating had to win first place in their respective state competitions in order to participate in the national contest. The fact that you competed in Kansas City means you are a winner. We held separate contests for high school (secondary) students and college (post-secondary) students. Although both competitions had some similarities, there were a number of differences. Both competitions consisted of a series of 6 challenges (per competition). When all are combined, one would have many of the components of a working website.

Much of the contest is about professionalism. That is why we ask for copies of software licenses (operating system and applications – such as Adobe Creative Suite). This is also what we stress during the interview process. The following comments are meant to provide some feedback to participants (and to help those who plan to compete again next year). These notes are not comprehensive (only some of the common observations from judges). Obviously, a large part of this competition also focuses on adherence to web standards and established best practices in our industry.

First (and most importantly), focus on accessibility. This is important when choosing fonts and colors and when designing the structure of the site. Best practice is to include leveled headings and image descriptions (alternate text). Red/ green color schemes should be avoided as they will not appear as you think to those who are color blind. Similarly, one should stick with common sans-serif or serif fonts. Tightly spaced or script fonts can be difficult to read for those with poor eyesight.

Color schemes should support the type of website (for example, one would typically use a different set of colors for a bakery compared with a florist). Once you have a color scheme, it should be used consistently throughout the challenges (unless there is a specific reason to vary).

From a validation perspective, it might be easier to rely on the HTML5 doctype instead of XHTML 1.1 strict. The former is much more forgiving to the validator. Regardless of the doctype employed, don’t forget to include meta elements to help with search engine ranking (keywords and descriptions). When comments are included in the HTML and CSS code, they should be concise and provided to make the site easier to maintain. The purpose of each comment should also be evident.

If you design for a smaller screen size (such as a smartphone), don’t forget to use responsive web design techniques (perhaps percentages) to reduce the amount of horizontal scrolling.

Although not every team met the JavaScript challenge, everyone should understand these fundamentals. For those who were unable to complete this challenge, I recommend reviewing JavaScript fundamentals.

Lastly, there were some challenges with a title of “Untitled Document.” This should definitely be avoided.

Overall, many of the teams provided interesting approaches to each challenge. Many mentioned during their interview that lack of resources was actually helpful to their team (they could be much more creative). A number also mentioned that it would be helpful to have discussions with an actual client.

I appreciated all the feedback received during the debriefing and we will be making changes to this competition next year to reflect some of those comments. Overall, it was a great week and I hope everyone present enjoyed the competition as much as I did. Until next year…

I had the distinct honor of being part of the WOW/ Web Professionals web design contest. This competition was held in Kansas City last week (June 21 – 24). Teams of two (web designer and web developer) competed for over $210,000 in scholarships and prizes. I plan to post a few comments about the competition itself (based on feedback received from the judges). That will be the subject of another entry in this weblog. In the meantime, I wanted to share some photos. All were taken by either myself or Jonathan Worent. I hope these convey some sense of the excitement and enthusiasm we encountered all last week. What a positive experience for all.

I recommend clicking on one fo the thumbnail sized images below and then viewing the entire set at the Flickr website (you can also view these as a slideshow at the Flickr site).

Now that I have a full week of experience with my BlackBerry PlayBook tablet, I thought it time to review my latest experiences and offer some additional insights. Obviously, I have limited experience with this device and welcome comments to help me improve my overall understanding. I will focus on three areas  (backup and synchronizing files), debugging web pages in the browser, and working with Office 2010 files (mostly Word, Excel, and PowerPoint).

Backup - to me this has been somewhat of a disappointment. I believe the main problem is lack of 64-bit driver support. My laptop is Win 7 Professional (64-bit). Although I am able to plug in the device and the BlackBerry desktop software recognizes the device (and launches), as soon as I try to perform a ssynch or backup, the software indicates I need to connect my device. Clearly something is amiss (and I do not seem to be the only one with this problem given all the discussion forum posts about this being a problem). C’mon RIM – please release a 64-bit driver. In the interim, I launch Win XP Pro in a virtual environment (VMWare). VMWare contacts the mothership (my laptop) and requests access to the USB ports. Once granted, I am able to backup and synch my PlayBook tablet with ease. Obviously, I would prefer that I could do this without having to rely on a virtual region. However, it seems to work fine. For those who are curious, I provide some screen captures below. Remember, you can always click on the image to see the full size version of the thumbnail below.

This is the view in my XP virtual environment while the backup is happening.

On the PlayBook itself, one sees thee following (obviously one can dismiss this screen after the initial connection is established).

Obviously there are times when I simply am not able to connect to my virtual environment, but want to transfer images quickly between my PlayBook and laptop. In those cases, I rely on either DropBox (with its corresponding BlueBox BlackBerry application) or the Adobe SendNow product (especially for larger files). Of course, none of these options would be available without the use of Adobe technologies (Flash Player and AIR).

Web page debugging – as a teacher, I have grown accustomed to viewing source code and examining the contents of local storage. I wish I had this ability on my smart phone (but it is not a major issue due to the limited real estate available). It appears the PlayBook uses a modified version of a WebKit based browser. I first need to activate the Web Inspector within the browser (found under Options > Privacy and Security). I believe this must be done each time the browser is instantiated. From a security perspective, this makes sense as it may be possible to expose data to others in the process of debugging.

If the device is password protected (if yours is not, it should be), you will be prompted to enter the appropriate  password. The Web Inspector will then be active. One should have at least one tab open and pointing to a page you wish to analyze. One can then open a new tab and enter the address http://localhost:1337 (note the special port). If the Web Inspector is active, you will see links to each of the tabs containing web pages. If the Web Inspector is not active, you will see an error message indicating unable to connect. Both states are shown in the image below for comparison.

Assuming the Web Inspector is active, one can then click on one of the links (as shown above on the right) and then examine the source code, local storage, and other aspects (similar to web developer mode in Safari).

One would then be presented with a screen familiar to those who have done debugging in Safari on the desktop (example shown below).

Working with Office 2010 files – I tend to use Office 2010 to process many documents received from (and sent to) school. These are typically Word, Excel, and PowerPoint documents. There is a native set of applications on the PlayBook (shown below) which allow for basic creation and editing of these document.

This works fine if one only has some simple changes. However, to make more complex changes, it would be helpful to have something approaching the capabilities of Office 2010. Enter MS Sky Drive. I now have the ability to manipulate documents in my browser. for example, I am using OneNote via the browser (I can easily exchange this information with my Office 2010 version of One Note running on my laptop.

Overall, the more I work with this device, the more I understand why tablets make sense. There are many instances where having a laptop is just too bulky. Given that so much can be done via the WWW these days, one doesn’t need to have a bulky laptop to accomplish many tasks. Overall, I am impressed with this device. I do wish there were more applications available. For example, one application I seem unable to find for the PlayBook is anti-malware (especially anti-virus). I searched using multiple terms in the BlackBerry AppWorld to no avail. Perhaps I am just being paranoid, but I have anti-virus on my smart phone (Android), shouldn’t I also have it for my tablet?