Blog
Web Designers Increasingly Tailoring the User Experience Alongside the Surge of New Technology Devices
Photo Credit: IGN.com
There has been a surge of new devices coming out with a wide variety of form factors and intended functionality. There was the boom of the netbook form factor and GPS/in-car systems, followed by the iPhone and other touchscreen mobile devices. Now companies are looking into providing more options for the touchscreen tablet-sized device and the HDTV screens that people already own (with the help of GoogleTV, AppleTV, and Boxee). These all are accompanying desktop computers, laptops and modern game consoles in the fact that they are all capable of being (if not already) Internet-enabled.
When people realize that the device that they’re using is Internet-enabled, they don’t want to have arbitrary limitations on what they can access considering that all of these devices have the screens and input methods that are necessary to access and navigate around a website or Web application that they can use on their computer. They’re all using the one-and-only Internet (or at least that’s how we’d like to keep it), so they should (in theory) be able to access the same content.
Many devices follow this rule of thumb by giving users access to a Web browser of some kind and this trend is becoming more prevalent among device manufacturers. This leaves Website designers with a new issue since most of the websites on the Internet were designed for computers with screen sizes ranging from around 13 to 24 inches with a mouse and keyboard. For example, needing to zoom and pan across a website that was designed for a desktop computer while using a mobile device is not the optimal experience.
It’s possible to take the same content on the site, detect the screen size of the device being used and display it in a way that best fits the device. The screen size detection is near instantaneous so it really comes down to the developers dedicating their time toward designing the new way that the content is displayed on the varying screen sizes. They can use a standard set of “Mobile,” “Computer” and “Projector/TV” options to limit the number of designs that need to be created (they might also choose to include a “Tablet” design). This still remains within the standardized capabilities of a website so the user is still simply accessing it via their Web browser of choice without needing to download an application or plug-in. (Although the developers might choose to offer an app simply due to the fact that it’s easier to access an application than to memorize and type in the URL on most devices.)
jQuery Mobile's Testing Lab
There’s a bunch of user interface libraries that developers can implement on their websites that help speed up the process of designing, as well as standardize an expected look and interactivity between websites that were developed by people who hold no relation (other than the fact that they used the same user interface library). Here’s a few that have sparked some interest in the developer community:
I would have included Cappuccino on that list, but 280 North (developers of Cappuccino) was recently acquired by Motorola so that they can continue their efforts for Motorola devices and software.
Still, this isn’t the first time something like this has happened—Palm was also recently acquired by HP and their efforts with WebOS (Web Operating System) will live on in HP’s future offerings. HP has already confirmed that their touchscreen tablet device coming “early in 2011” will be using WebOS instead of Windows 7 Tablet. Apple and Google (numerous hardware manufacturers are using Google’s software) already have a strong standing in this area and it’s reassuring to see that Motorola and HP are also making their commitment. The end result is being able to provide a centralized, yet completely open and free of corporate interests, access-point with content that’s custom-tailored to best fit the device that you are using.
It is important that we fight for this, because we don’t want our efforts of forming a centralized communication network to become overrun by large corporations that then will be able to influence what is sent over the network.
Kurt Zenisek
Web Developer
Connect with me on LinkedIn: www.linkedin.com/in/kzeni
Progressive Enhancement on the Web
I wrote an article in May called “What’s the Right Way to Update?” that covered the updating procedure for various software and how it can be improved so that users have the latest version. Having the latest version of software can be very important due to the fact that technology is updated at a fairly fast rate. Using a copy of software from six or so years ago can mean a lot in terms of what it can do and how you interact with it. For Website developers, the target audience could very well be using a range of Web browsers that were last updated as far back as 9 years ago or as recently as an hour ago. This is where the concepts of “graceful degradation” and “progressive enhancement” come in.
What is “Graceful Degradation?”
Graceful degradation is a development term that means a site is built to the latest standards, yet it still works for anyone using an old Web browser. Not everything will work exactly the same in the old Web browser, but nothing will be broken. This means that those users with the latest Web browsers will get to utilize all of the Website’s features, whereas those using a less capable browser will see a simplified version.
What is “Progressive Enhancement?”
Progressive enhancement is essentially the same as graceful degradation, but the developer starts by creating the base-level functionality that works in every browser. Then they add features to provide a little more for anyone using a modern Web browser. Graceful degradation and progressive enhancement provide the same benefits, but it’s just a matter of the developer’s preference as to what they want to use as their starting point.
Now that I understand the lingo, why do these terms matter?
I invite you to compare what Websites looked like in 2001 to what they look like now. Keep in mind that the Websites from 2001 were being viewed in Web browsers that were released just 5 years after the concept of displaying an image in line with other content on a Website was first implemented.
The modern idea of providing a better Website for users with capable browsers is in hopes that people using old Web browsers see some benefit in updating them, which would allow innovation to commence in the mainstream user base. I mean, a group of Web developers actually held a funeral for Internet Explorer 6 when Google announced that they no longer supported it (Microsoft even sent flowers)!
In the meantime, there still needs to be some ambition by developers that leads the way to the latest and greatest features and functionality .
Kurt Zenisek
Web Developer
Connect with me on LinkedIn: www.linkedin.com/in/kzeni
What Makes Apple’s Mobile Ad Platform Different
The iPhoneTM 4 has been out for over a month now. At that time, there was also a software update for older iPhones and iPodTM touches that added many features that were new on the iPhone 4. Part of the software update was the ability for app developers to display ads served up by Apple’sTM “iAd” platform. With the popularity of free applications that people download on a whim comes the desire for developers to monetize them to pay for their initial development costs and support further development.
The advertising model has now been brought into free apps, and it’s like a traditional Website that is mostly, if not entirely, supported by advertising. Apple’s iAd platform isn’t the first to offer developers the opportunity to include ads in their apps, but they do it a little differently.
The traditional electronic ad is either text, an image or a brief animation that, when clicked, will take you directly to the advertiser’s Website. iAd recognizes that most mobile devices either don’t support Flash or have a limited mobile edition of Flash so the common animated Flash ad isn’t possible. People often quote the statistic provided by Adobe that 96% of Web browsers have Flash installed, but that figure is actually representative of the percentage of Web browsers that are capable of running Flash and have it installed. That means it’s excluding millions of devices that have a Web browser that can’t run Flash, even if the device owner wanted to (this includes Apple’s mobile devices among many others).
Connect with HRB:
iAd instead focuses on the fact that 100% of all Web browsers have HTML support. Plus, all of the devices that iAd will be shown on also have CSS and JavaScript support for animation and interactivity. This method allows advertisers to show the full ad experience via CSS and JavaScript on all devices by default and shows the static version of the ad if they set JavaScript to be disabled. Using Flash will instead be shown as a blank block and will require the Flash plugin to show anything at all or requires the developer to also build the HTML version. This begs the question of, “Why not build the HTML version in the first place?” Ads haven’t been using HTML, CSS, and JavaScript until now due to the fact that CSS and JavaScript-based animations were introduced recently so Flash was the only option available to advertising / Website designers.
Click to view full size. Created by blog.monty.de
iAd’s extended ad view does include some new functionality that other ad services don’t offer. The ads expand within the current application when they’re tapped on instead of opening a Website in your Web browser. The ads are self-contained so that everything the advertiser wants to be shown can be included within the interactive ad, and can be closed at any time using a close button that is located in the same place for every ad. The expanded ad also has the ability to:
- Allow the user to submit a form (register for a giveaway / sign up to a newsletter)
- Download or purchase something from the App Store (purchase the full product / download a companion app)
- Save media to the device (wallpapers / videos)
- Access the camera (scan a barcode in a store / take a picture of yourself using the product)
- Integrate into other web services (social media / the product’s website)
- and more…
There’s the potential for a malicious advertiser to exploit some of these features or be a security risk but Apple is requiring each ad to be inspected and approved before being displayed. When iAd was announced, Apple brought up that finding a way to keep the advertising interactive while maintaining an emotional tone was very important to making this form of advertising engaging and effective. This is just another option that’s available to advertisers and developers alike and seems like a promising idea if used properly.
Kurt Zenisek
Web Developer
Connect with me on LinkedIn: www.linkedin.com/in/kzeni
The Emergence of Mobile (Part 2)
In my last article, “The Emergence of Mobile (Part 1),” I gave an overview of the history of the mobile phone as we’ve come to know them—from the very first commercially available phone to the phones we use today. Now that the worldwide adoption of cell phones has increased from 12.4 million people in 1990 to approximately 4.6 billion in 2009, developers can have a seemingly modest goal of 1% cellphone market share penetration. That translates to 46 million people, and that’s quite a large reach for being only 1%. With such a large user-base & increasing attention from the media and general public, the big question is this: “What’s next?”
The timeline above shows milestones in the mobile market and it’s clear this industry has come a long way since 1946. If the common trend in devices continues, the next mobile phone will be smaller, faster, more durable and more aesthetically appealing. It will also be more affordable and have a longer battery life. Advancements like these are predictable and don’t really add anything new to the average mobile phone’s repertoire, but they do make for a device that is more universally appealing to consumers.
Researchers have been trying things that might seem ridiculous at first. For example, there are prototype phones being developed that feature an embedded video projector. This would be valuable for businesses or general users who want to share presentations, photos and videos without having to huddle around a small screen. Another approach is to create a mobile device that can “push” content to any TV with this functionality (such as Google TV).
Still other researchers have been exploring augmented reality:
Services like these provide location-aware information such as points of interest (ie. restaurants) and social interactions (ie. Tweets & status updates). This video doesn’t really show that the augmented reality concept has branched off into other areas including photo sharing, games, and more. The only thing that the user needs to do is point their camera at what they’re interested in to see the information. Consider that the alternative is going to Google and getting results that may or may not be what you’re looking for. Augmented reality isn’t a new idea, but it has become much more feasible with devices that now have high quality cameras, fast processors, compasses, gyroscopes and highly-accurate GPS.
New ways of accessing/sharing entertainment & information will continue to be developed so that people will always be able to choose the method that they prefer the most. Documents were first written on stone until paper was invented, and now technology has made it so that our ideas can be accessed, shared, and collaborated on with anyone, anywhere, and at any time. The concept of storing & distributing information remains the same but the possibilities have been extrapolated so consumers are no longer restrained by arbitrary limitations.
At one point, the most common way of getting information about someone involved looking them up in a phone book. Now you can find information in half that time by using Google search and find out more about them via a social media marketing site like Facebook. Both website designers and hardware/software developers have been busy making sure that what they make works harder, faster, smarter and easier for the user so that they have the best experience possible.
Who knows? At today’s rate of innovation, something like this will probably be coming to your household sooner than you might think!
Kurt Zenisek
Web Developer
Connect with me on LinkedIn: www.linkedin.com/in/kzeni
Bringing Simplicity From Complexity: Using the PDCA Cycle to Improve Your Website Design Process
Website development for clients is a multi-step process. It usually includes writing proposals, scheduling client meetings, programming, SEO, getting approval from clients and making numerous Website revisions before the product is truly finished. Programming also requires dozens of specific sub-steps: from outlining code to fixing Web design bugs and to handling customer service requests. To outline the entire cycle in a detailed document would be a complicated and confusing process indeed.
But what if we could break down the process to just four recurring steps?
Years ago, Edward Deming considered this challenge and popularized the Plan, Do, Check, Act (PDCA) cycle (incidentally, he was also the creator of the Red Bead Experiment, a topic I covered in my last blog post). Its principle is simple: break every process into four simple steps that can be repeated until the goal is achieved.
Plan: Survey your objective. How will you achieve it? What will you do to get closer to it?
Do: Act on your plan.
Check: What happened when you acted? Did you achieve the right results? If not, how close were you and how can you improve your action to get closer?
Act: Act on your checking. Correct any steps that are pulling you away from your goal and refine those which are bringing you closer.
This cycle seems like common sense, but all too often we forget the simple steps because we’re so focused on the bottom line. Since joining the advertising industry, I’ve quickly realized that if I can simplify any programming process I’ll not only save my company and our clients time and money, but secure peace of mind for myself.
Recently I wrote a very large, very complex program for a client and upon doing so I found myself struggling with a code bug. I went back through my work and commented out various sections of the client’s Website to assess their effect. I quickly became frustrated because nothing I was commenting out changed the output.
Then I started commenting out whole files at a time, trying to find the one which caused the error. When I did find it, I realized I still had a 300-line file to work with, which references other files and calls external functions. Yet again, I began to comment out various sections…
Consider the above example in terms of the PDCA cycle. I was using it—planning (searching for the error), doing (commenting the errors out), checking (did I get rid of the error?) and acting (commenting out other sections of the Website code). Why didn’t I consider the PDCA cycle in the first place when I wrote this code?
Instead of writing this complex program all at once and then testing it as a whole, I should have began with small segments of code and tested them individually to see if they worked before I proceeded. Instead, I left myself with a huge program to debug, several segments of which were troublesome and led to other problems that took precious business hours to pinpoint.
The PDCA cycle’s benefit really shows when it’s used at every level of the Website development process—not just the beginning few stages. It definitely doesn’t look as threatening when put in terms of this cycle. The site needs to be laid out. As part of the layout, different designs must be drawn up for selection by the client. Within those sites, a color scheme should be chosen. Images should be selected and a general navigation hierarchy established. Down to the nuts and bolts of the formatting process, each one of these steps can be broken up and the same can be said of the content writing, keyword research and search engine optimization tasks.
This cycle is applicable to all parts of a marketing operation and, in fact, to life in general. Lots of fixable, small bugs are in fact much better than one large, perplexing one. Break things down. Don’t get lost in the confusion. Real bugs are enough to worry about.
Kestrel Henry
Internet Operations Intern
Connect with me on LinkedIn: www.linkedin.com/in/kestrelhenry
