Lemieux Design

Flash | Interactive | Web | Graphics | Brand | Video

RWD – The HTML5 Shim for Internet Explorer

Posted on: November 17th, 2014 by alemieux

HTML5 + IE

Last time, we took a look at the HTML Viewport Meta tag, which is important for getting your site to look good on mobile. Since our HTML standard is HTML5, we need to make sure it works in older versions of Internet Explorer. I’m not considering IE6 in this conversation, although according to this site, 1.7% of the world is still on it. So that leaves IE8 and 9. As you can see from HTML5 Readiness, that IE8 and 9 are lacking in HTML5 powers. So IE10 will have the fullest support of HTML5 and CSS3, but we can’t ignore IE8 and 9 users. In fact, in some workplace environments, those browsers are enforced by IT policies.

Since HTML5 tags like <section>, <aside>, <footer>, and <figure> are not in the XHTML spec, they won’t be recognized by IE. But IE will go into quirks mode when encountering these elements, but all of them will be styles as inline elements. There’s 2 issues at play here, the fact that IE won’t recognize the elements and how they are being styled. Most normalize style sheets, like this one from Nicholas Gallagher and Jonathan Neal, will take care of the styling of the elements as block level instead of inline elements. Here’s how we do that:

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
display: block;
}

In order to make IE recognize the elements themselves, we could add them to the document with JavaScript, but Remy Sharp has already done that for us with a script called the HTML5 shiv. You’ll need to put this into a conditional statement in the head section of your document. One key thing about the shiv that I’ve discovered is that it needs to placed after all of your stylesheet calls, both external and internal:

<!–[if lt IE 9]>
<script src=”js/html5shiv.js”></script>
< ![endif]–>

The conditional statement says something like, if the browser is anything less than IE9, add this JavaScript to the document. Here, I’m referencing the script locally for other reasons, but you can also reference it this way:

<!–[if lt IE 9]>
<script src=”http://html5shiv.googlecode.com/svn/trunk/html5.js”></script>
< ![endif]–>

Break out the wineglass and celebrate! Now you are ready to use HTML5 in all its glory and be sure that it’s supported on those older browsers. Not so much though. You should still test on those browsers as I have seen odd things happen to HTML5 docs in them. As always, be sure to validate your HTML.

Next time, we’ll talk about Mobile site design testing and some tools and resources for simulating and testing.

RWD – Viewports

Posted on: November 14th, 2014 by alemieux

This will be the start of a series on responsive web design (RWD), a topic of great importance nowadays, with lots of directions and advice. I’ll focus on the necessary aspects for those who are just getting started.

The Viewport

Typical Viewports

One of the first aspects that needs to be addressed when developing a site for mobile devices is the viewport width and scale. When viewing sites on an iPhone, for example, the default experience (if the site has not been developed with Responsive Web Design in mind) is a lot of pinching, zooming, and scrolling on the users part. Without the viewport width and scale being considered, the iPhone is rendering the page in a way that it can be viewed entirely, which will make all of the text incredibly small and unreadable.

The viewport on the iPhone (and other devices) is the area that determines how content is laid out and where text wraps on the webpage. Additionally, the viewport can be larger or smaller than the visible area1.

With the default viewport setting, the content will appear in the viewport without any scaling and not necessarily at the width of the viewport. In order to change that, we need to apply a Meta tag in the head section of our HTML document:

<meta name=“viewport” content=“width=device-width, initial-scale=1” />

There are actually a bunch of attributes other than what’s being shown here, but this code snippet has been widely adopted 2. The 2 attributes we’re most concerned with are width and scaling.

Viewport Width

You could set this up to be whatever width you want to target, but since we’re talking about responsive design, the best thing to do is set the width to the device width. This will tell the browser to show the webpage at its own device width3. The effect will be that the page will be readable and will not require so much pinching, zooming, and scrolling.

Viewport Scaling

Here’s an example of a site viewed on an iPhone without the viewport scale set:

Setting the initial-scale does 2 things:

  1. It sets the inital zoom factor of the page to the defined value, calculated relative to the ideal viewport. Thus it generates a visual viewport width.
  2. It sets the layout viewport width to the visual viewport width it just calculated.4

The initial scale attribute is a ratio of 1 and will scale the content to the edge of the viewport. When it is set to 1 the page isn’t zoomed in.

Site with No Viewport Set Site with Viewport
In this example, the Viewport Meta tag is not included in the code and therefore, iOS uses its default width and scaling In this example, the Viewport Meta tag is set. Notice the scaling and width of the site.

Now your page will render correctly within the viewport on mobile devices.

Next time, we’ll tackle HTML5 and how to make it work with older browsers.

  1. Safari Developer Library: Configuring the Viewport https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html
  2. Responsive Meta Tag: http://css-tricks.com/snippets/html/responsive-meta-tag/
  3. Understanding The Viewport Meta Tag: http://www.paulund.co.uk/understanding-the-viewport-meta-tag
  4. Meta viewport: http://www.quirksmode.org/mobile/metaviewport/

Make a game with EaselJS and the HTML5 Canvas

Posted on: April 30th, 2013 by alemieux
Guessing Game

Play the game now

The HTML5 Canvas element is a container that can be used to dynamically draw graphics with a lot of help from JavaScript. The canvas tag itself is very simple:


<canvas id="gamespace" width="800" height="600"></canvas>

An ID is given to the canvas so that we can reference it with JavaScript and a width and height is defined. Since the canvas is a graphical space, you’ll notice that when you right click on it, your browser will allow you to save it as an image.

You can draw some basic shapes and text into the canvas with JavaScript. You can also import graphics into the canvas. This makes the canvas a dynamic environment for building games, dynamic charts, and other web applications.

EaselJS

The native code for working with canvas is a little cumbersome. Having come from a Flash/ActionScript background, EaselJS is a much better way to work with canvas. Part of CreateJS, a robust JavaScript library specifically geared towards developers coming from an ActionScript background, EaselJS has a tremendously easy to read API and syntax that’s immediately recognizable.

Along with EaselJS, you can add animation to objects in the canvas with TweenJS. If you’ve ever worked with TweenLite from Greensock, you’ll feel right at home with TweenJS.

No HTML game is complete without sound effects and cheezy soundtracks. You can add audio to the canvas with SoundJS. Very similar to how AS3 handles sound, SoundJS lets you load sounds, and has complete and progress methods.

Finally, you can create attractive preloaders for loading all of the game content with PreloadJS. PreloadJS can monitor load events and can track the progress of loaded objects.

The online documentation and downloadable samples are a great starter. You can get the code via CDN, github, or zip.

Game Setup

In this example, I’m creating a simple guessing game using Star Wars as a theme. There will be a few visual questions presented to the user. If they answer correctly or incorrectly, visual and audio feedback will be provided. If they get all of the questions correct, they are presented with a congratulatory screen with visual and audio feedback. If they answer incorrectly on any questions, they are presented with a different screen with negative visual and audio feedback.

The HTML

There isn’t a lot going on in the HTML file itself. A few styles and a lot of JavaScript library loading. Here, I am keeping everything local, but you can use the CDN links for the libraries. It took a little while to figure out exactly which files needed to be loaded and in which order. I looked at the example files for help. These files were minified, but I changed the names before linking them to the HTML file. In total, there are 6 libraries I’m pulling in and my own script file, which contains all of the logic for the game. The JS files are loaded in as follows:

  • js/easeljs.js
  • js/tweenjs.js
  • js/game.js
  • js/Sound.js
  • js/HTMLAudioPlugin.js
  • js/WebAudioPlugin.js
  • js/preloadjs.js

Imagery and Sounds

I didn’t spend a great deal of time on the imagery, but was able to quickly find what I needed on Google Images. I made the buttons and the interface features in Photoshop and exported as PNGs. Then I used imageOptim to compress the files further to make them smaller. Some of the splash screens are pretty big. Fortunately, there’s a lot of sound bites all over the web, so I also made quick work of finding quotes from the Star Wars movie for the game. In the SoundJS example files, I noticed that 2 file formats were being used: MP3 and OGG. The MP3’s were easy to find, but I had to convert to the OGG format. So I used Media.io in order to do the conversions and download them. The audio files are very small.

The JavaScript

The initial setup of the game is in the init() function at the top of the code. Here, a bunch of variables are being set for game parameters, text, bitmaps to import, an array of sounds to import, and the preloader code.

The variables are a comma separated list of constants. I start by declaring the canvas:


stage = new createjs.Stage(canvas)

Next we need the constructors for all of the images to be loaded. EaselJS has a bitmap class for that. Here’s an example:


logo = new createjs.Bitmap("img/logo.png")

For creating text, EaselJS has a Text class. The constructor is very similar to the Bitmap class as seen above:


inst = new createjs.Text()

For those times when we need to center objects on the canvas, we declare a variable for the centerX and centerY positions on the canvas:


centerX = canvas.width/2,
centerY = canvas.height/2

For game progress, there are a few variables that need to be set:


questionPosition = 0,
numCorrect = 0,
numWrong = 0,

questionPosition will help us keep track of which question we’re on. numCorrect and numWrong will keep track of the question answered correctly and incorrectly.

We create an array of sounds called manifest that we’ll be using in the game with paths to the different versions (MP3 and OGG). Each sound is given an id that we can call on later when we want to play that sound.


assetPath = "snd/",
manifest = [{src:assetsPath+"Theme - Star Wars.mp3|"+assetsPath+"Theme - Star Wars.ogg", id:"theme"},
{src:assetsPath+"blaster.mp3|"+assetsPath+"blaster.ogg", id:"buttonSnd"},
{src:assetsPath+"powrweak.mp3|"+assetsPath+"powrweak.ogg", id:"powerWeak"},
{src:assetsPath+"cocky.mp3|"+assetsPath+"cocky.ogg", id:"cocky"},
{src:assetsPath+"haveyou.mp3|"+assetsPath+"haveyou.ogg", id:"haveYou"},
{src:assetsPath+"strong.mp3|"+assetsPath+"strong.ogg", id:"strong"}],

Each sound is inserted in brackets and the two types of sounds are separated by a pipe.

For preloading the images, we need to set up a queue and make an array. PreloadJS can do more than preload images, but I was only interested in preloading the image content, since the sound files are very small.

The queue looks like this:


queue.loadManifest(["img/starfield.png","img/logo.png","img/START-GAME.png"...]);

Then, we tell the queue to load. You can fire functions with event listeners to watch for complete, progress, Here, I’m only reporting the results to the console:


queue.load();
queue.addEventListener("complete", showManifest);
queue.addEventListener("progress", showProgress);
function showProgress(evt) {
var perc = evt.loaded / evt.total;
console.log(Math.ceil(perc*100).toString());
}
function showManifest() {
console.log("Files are loaded");
}

For all the sounds to play, a listener is added and the sound manifest is then registered. You can create fancy progress bars for the sounds to load and such with a progress handler. I didn’t need that here, so the function fileload() is simply reporting to the console when the files are all loaded:


createjs.Sound.addEventListener("fileload", createjs.proxy(soundLoaded, this));
createjs.Sound.registerManifest(manifest);

function soundLoaded(event) {
console.log("sounds loaded");
}

At the beginning of the game, the Star Wars theme music plays as the logo fades in and then the instructions appear. To play any sound with SoundJS we use the play() function and feed it the id of the sound as a string:


createjs.Sound.play("theme");

Just as in the original Star Wars movie, the logo is seen on a starfile up close and then fades off into the distance. This effect is achieved using TweenJS and EaselJS. Much like the setInterval class in AS3, the Ticker class in EaselJS allows you to set up simple animations of canvas objects. Here, the starfile and logo are added to the stage:


stage.addChild(bg,logo);

The Ticker class is started with a frame rate of 30fps and then the logo is animated with the scaleX and scaleY properties – which should be very familiar to AS3 developers.


createjs.Ticker.setFPS(30);
createjs.Ticker.addEventListener("tick", startAnim);
function startAnim(e) {
logo.x = centerX;
logo.y = centerY;
logo.scaleX -= 0.005;
logo.scaleY -= 0.005;

stage.update();
}

In addition to scaling down in size, the logo fades out. I decided to try this with TweenJS. First, we set the alpha of the logo to 1, just as in ActionScript the alpha values are on a range from 0 – 1. Then, we perform the tween. This is a long, slow tween over 3 and a half seconds long. TweenJS allows you to chain animations together. In this case, I’m calling an onComplete() function which brings in the instructions and the start button:


createjs.Tween.get(logo).to({alpha: 0},3600).call(onComplete);

This is very similar to the way we construct tweens with TweenLite in AS3:


TweenLite.to(mc, 3.5, {alpha:0});

In TweenLite you specify the object to be tweened, the duration and the property or properties to be tweened. In TweenJS you specify the object, the property or properties to be tweened and the duration.

Finally, we come to then end of the game initialization with the onComplete handler. This will bring in the instruction text and the start button. As in ActionScript, event handlers need to be removed for garbage collection. I didn’t come across anything in the online documentation for this, but I know it’s a best practice.


removeEventListener("tick", startAnim);

The start button and the instruction text are both tweened in with TWeenJS. In EaselJS, there are several text properties that can be set. Here, I’m setting some basic settings like font, color, and lineHeight. For the font and color settings, you can specify those as you would with CSS. Once the text properties are set, the text is added to the stage and the alpha property is tweened.


stage.addChild(startButton);
createjs.Tween.get(startButton).to({y:370}, 1000);
startButton.x = 245;
startButton.y = 620;

inst.text = "Welcome to the Star Wars Guessing Game. This game will test if\n you are a true Star Wars fan. In the next few screens, you will be shown some\n images from the Star Wars Universe. Identify the correct image to advance.\n If not, the Empire takes over the Galaxy.\n\n May the force be with you.";
inst.font = "normal 24px Myriad Pro, 'MyriadPro', sans-serif";
inst.color = "#298FC2";
inst.linewidth = 200;
inst.textAlign = "center";
inst.textBaseline = "top";

inst.lineHeight = 26;

inst.x = centerX;
inst.y = 180;

stage.addChild(inst);

inst.alpha = 0;
createjs.Tween.get(inst).to({alpha:1},1000);

Questions

The question functions are very similar. A question area is dynamically drawn on the stage using the drawRoundRect() method. There are 5 parameters, X, Y, Width, Height, and Radius. The question text is added to the stage and 3 images related to the question are shown. The user clicks on the image they think is correct. We increment questionPosition. Either the answerCorrect() or answerWrong() functions will be called when they do that. TweenJS is used again to fade in the images:


questionPosition++;
stage.removeChild(inst,startButton);

qArea.graphics.beginStroke("#298FC2");
qArea.graphics.setStrokeStyle(10,0,1);
qArea.graphics.beginFill("#ffffff");
qArea.graphics.drawRoundRect(50, 87, 700, 425, 10);

stage.addChild(qArea);

stage.addChild(ewok);
ewok.alpha = 0;
createjs.Tween.get(ewok).to({alpha: 1},500);
ewok.x = 70;
ewok.y = 150;
stage.addChild(wookie);
wookie.alpha = 0;
createjs.Tween.get(wookie).to({alpha: 1},500);
wookie.x = 290;
wookie.y = 150;
stage.addChild(gungan);
gungan.alpha = 0;
createjs.Tween.get(gungan).to({alpha: 1},500);
gungan.x = 510;
gungan.y = 150;

q.text = q1;
q.font = "normal 24px Myriad Pro, 'MyriadPro', sans-serif";
q.color = "#298FC2";
q.textAlign = "center";

stage.addChild(q);
q.x = 400;
q.y = 450;

ewok.onClick = function() {
answerWrong();
}
gungan.onClick = function() {
answerWrong();
}
wookie.onClick = function() {
answerCorrect();
}

The order in which you add items to the stage is pretty important here. For example, if I added the question area last, it would hide all of the text and graphics. By adding it first, the text and graphics are loaded on top of it.

Again, garbage collection is important. I created a clearScreen() function to remove the some of the basic stuff and additionally removed objects in each subsequent question using removeChild().

Of course, the user starts the game by clicking the start button. Here, there are no rollover effects on the button. Those certainly could’ve been added with EaselJS, but rollovers don’t translate for tablet and mobile use anyway. Clicking the start button calls the question1() function and game play begins with the sound of a blaster!


startButton.onClick = function() {
question1();
createjs.Sound.play("buttonSnd");
}

Checking the Answers

When a question is answered, it will be handled by answerCorrect() or answerWrong() methods, which will: play a sound, show a visual and allow the user to continue to the next question. If all of the questions have been answered, the continueFinal function is called.


function answerCorrect() {
// console.log("The force is strong with this one!");
createjs.Sound.play("strong");
questionCorrect = true;
numCorrect++;
stage.addChild(rightAnswer);
rightAnswer.x = 50;
rightAnswer.y = 87;

correctMsg.text = "The force is strong with this one!";
correctMsg.font = "normal 24px Myriad Pro, 'MyriadPro', sans-serif";
correctMsg.color = "#298FC2";
correctMsg.textAlign = "center";
stage.addChild(correctMsg);
correctMsg.x = 400;
correctMsg.y = 450;

if(questionPosition<3) {
stage.addChild(nextQbutton);
nextQbutton.regX = 384/2;
nextQbutton.regY = 56/2;
nextQbutton.x = centerX;
nextQbutton.y = 520;
}

if(questionPosition==3) {
continueFinal();
}
}

The answerWrong() method is very similar only it plays a different sound, has a different text message, and shows a different image.

Ending the Game

If all of the questions have been answered, continueFinal() is fired, which basically shows a continue button. Once again, TweenJS is used to animate the button into place. When the user clicks on that button, the endGame() method is called.


function continueFinal() {
stage.addChild(continueButton);
continueButton.regX = 384/2;
continueButton.regY = 56/2;
continueButton.x = centerX;
continueButton.y = 0;
continueButton.alpha = 0;
createjs.Tween.get(continueButton).to({y:520, alpha: 1}, 1000);

continueButton.onClick = function() {
endGame();
}
}

At the end of the game if you’ve answered all of the questions correctly, you’ll see an image of Luke, Leia, and Han and hear some audio. If you’ve missed any questions, then you’ll see Darth Vader and Obi-Wan Kenobi dueling with their lightsabers and hear Darth say “Your powers are weak old man”.


function endGame() {
clearScreen();
stage.removeChild(continueButton);
var results = new createjs.Text();
results.text = "";
results.font = "normal 24px Myriad Pro, 'MyriadPro', sans-serif";
results.color = "#298FC2";
results.textAlign = "center";

if(numCorrect==3) {
createjs.Sound.play("cocky");
stage.addChild(endGood);
endGood.x = 50;
endGood.y = 87;

results.text = "Great job kid, don't get too cocky!";
stage.addChild(results);
results.x = 400;
results.y = 450;
} else {
createjs.Sound.play("powerWeak");
stage.addChild(endBad);
endBad.x = 50;
endBad.y = 87;

results.text = "Your powers are weak old man!";
stage.addChild(results);
results.x = 400;
results.y = 450;
}
}

And that’s the end of the code review. There’s only 3 questions in here, but other questions can easily be added here. I suppose the questions could be randomized too. The point of this whole thing was to get a handle on CreateJS and see what it could do and to compare it with ActionScript.

Summary

I’ll admit, that the first time I looked at CreateJS, it was daunting and I was skeptical. But once I looked at the examples and really dug into the code, I could immediately see the potential and I hope you can too.

Download the source files below:

Download

Sublime Text 2

Posted on: June 27th, 2012 by alemieux

I’ve used a number of HTML editors in the past. When I was forced to use a PC (gag), I was told that I had to use Notepad to code my pages. I quickly convinced them to get me a copy of Homesite, which was a Macromedia product scooped up by Adobe and never supported again after version 5.5. It was an awesome editor that was extensible and had a great Find/Replace feature. Of course, homesite and most of its features wound up integrated into Dreamweaver, with code completion, code hinting and Find/Replace all built in.

BBEdit (Bare Bones Software), was my mainstay for a while. The nice thing about BBEdit is it’s a lightweight text editor that doesn’t get in the way of your workflow. Like Dreamweaver, it has a Preview in Browser feature and lots of tools to help you build your code.

Lately, I’ve been hooked on another HTML editor called Sublime Text.

Sublime Text 2

Sublime Text

This lightweight text editor has some great features built in. The beta period just ended for Sublime Text 2, but you can still download it and give it a try. It has remarkable support for a variety of syntaxes including HTML, PHP, ActionScript, JavaScript, and many more.

Writing HTML in Sublime Text is great. Code hints are offered and tags are finished off for you. When writing JavaScript, functions are bracketed for you and Sublime Text seems to remember your variable names. There’s a Code Snippets feature that allows you to select from a set of predefined snippets or you can create your own. I created my own HTML5 snippet. To start a file off with a Snippet, go to Tools > Snippets and choose the snippet you want to start working with.

When working with longer files, like CSS files, there’s a minimap on the right side of the work screen that allows you to quickly navigate through the file by clicking on different areas of the minimap (similar to Photoshops navigator panel). You can also work in multiple layouts. Choose a Layout from the View menu and you can have 2, 3, or 4 files open at once and work on them at the same time. If your like me and are quickly distracted by what’s going on in your web browser or email program, you can enter Distraction Free mode or Full Screen mode so that Sublime Text takes up the whole screen.

You can configure Sublime Text any way you want. The Preferences allow for different Color Schemes and font sizes. I’m leaning towards the Zenburnesque color scheme, which is easy on the eyes. Oddly, Dreamweaver doesn’t have these types of options. I was surprised.

Summary

I’ve been using Sublime Text for a few weeks now and I have to say I am very impressed. At first, it took a while to get comfortable with the way the program worked, but it wasn’t hard to adapt. I wish that it did have a preview in browser feature. I know it’s easy enough to switch back and forth from the editor to the browser, but it’s a nice feature. I also think it’s a little short on help. I wish there was a built in help feature with search capability. Right now, search is relegated to their website.

At $59, the price for this editor isn’t too steep and given what it offers, I’d say that’s the right price. So, if you’re tired of Notepad or even Notepad++, give this editor a try. I think it’s fantastic.

Al Lemieux is a web designer/developer in the Boston area. If he’s not coding, he’s playing volleyball or skiing.

Monoprice Tablet

Posted on: May 23rd, 2012 by alemieux

Affordable pressure sensitive tablet

A few weeks ago, I read a post by Ray Frenden about an alternative to Wacom tablets from a company called Monoprice. Turns out they make a bunch of different tablets, much like Wacom, without the hefty price tag.

Monoprice Pressure Sensitive Tablet

Monoprice Graphic Drawing Tablet with 8 Hot Keys

I’ve had a medium sized Wacom Intuos tablet on my wishlist at Amazon for a year now and the price barely budged, even when Wacom introduced their new tablets last month. I ended up buying the Monoprice 10×6.25 inch graphic drawing tablet with 8 hot keys for $50, which is extremely affordable. Even the low-end Bamboo tablets from Wacom don’t come down to that price.

What made me decide to purchase is the customer reviews. Everyone who purchased one was incredibly satisfied with their experience. I got mine yesterday and installed the drivers and got it up and running last night. At first, it didn’t seem like the pen was tracking right, but after I restarted my Macbook Pro, it seemed to track better. There seemed to be a little latency in some of the brushes in Photoshop, but I’ve seen the same latency with the Wacom tablets there.

The tablet comes with software controllers that don’t install as a preference pane in OSX. There’s a strip at the top of the tablet with assignable items. You can assign these to open applications or other commands, similar to Wacom. There’s also 8 pre-assigned buttons down the left side of the tablet with functions such as copy, paste, group, zoom in/out, save, and close window.

The pen requires a AAA battery, which is different from Wacoms pens. The battery powers up the pen on contacting the tablet. If you’re not using the pen, it powers itself off, there’s no switch. It has a plastic nib that feels spring loaded and a toggle switch with two programmable buttons. One thing about the pen is that it doesn’t have an eraser, like all of Wacoms pens.

The pressure sensitivity is remarkable. It registers really light touches well. I was surprised. I have noticed that in some programs with the Wacom tablet, that these light touches don’t register at all. I find myself having to configure brush settings or tablet settings often.

Overall, I’m very satisfied with this find and I would highly recommend to others who have been wishing that they could afford a tablet to seriously look at this one.

A Paradigm Shift

Posted on: June 11th, 2011 by alemieux

I’ve been musing lately about how technology is shifting into the ‘mobile’ age. In Steve Jobs’ recent keynote speech at the WDDC, he heralded the end of the desktop era as everything shifts to tablets and mobile devices. Of course, desktops will be around for a long time and everything he says lately, needs to be taken with a grain of salt.

On my morning commute to work, I see people of all ages walking around the city of Lowell, MA with their devices in hands, glowing screens in their faces, mesmerized by whatever they are engaged in – thumbs blazing on the miniature keyboards. Seems that everywhere I go, in fact, someone has a device of some sorts that they are constantly looking at. In traffic on the highway after work, I see people in their cars – despite the recent laws against texting while driving – doing the same thing. I’m sure you’ve all experienced the frustration of standing in a checkout line while the person in front of you is carrying on an enthralling conversation while totally ignoring everyone around them.

The immediate gratification of the internet throughout the 90’s has paved the way for this paradigm shift. At work, my co-workers walk through the hallways with their Blackberries in their faces. In the bathroom stall next to mine, someone is checking their email and responding to it. That immediacy of information is changing the way we work, the way we learn, and sadly, the way we interact with each other. People feel more inclined to tweet something or email, poke, or Facebook a quick message to an individual with, surely, sincere intent, but without that human contact. It’s safer, dare I say more sanitized interaction.

How will this change us as a people? I was talking with a co-worker about the explosion of tablet and mobile devices and pondered on the impact it will eventually have on education. Students will no longer need to open a book. Their entire curriculum will be loaded onto their iPads. How will it affect the way a class is conducted. Instead of a student raising his/her hand, they can just text the teacher or some other digital form of hand raising.

Touch screen displays and devices will change the way we order something at a restaurant, or interact with a kiosk at a gas station. Apple has already changed the entire retail experience. Instead of walking up to a register, an employee can process your transaction with an iPhone. Who knows, maybe eventually, all we’ll have to do to vote in an election is download a voting app.

The implications here for design though is what I’m getting at and what this paradigm shift will do to design education. With the release of CS5.5, Adobe has made authoring for tablets and mobile devices from its entire Creative Suite much easier. Of course, this falls in line with Adobe CEO Shantanu Narayen’s vision of design once, deploy everywhere. How will this impact design?

I believe most designers are receiving traditional print design training through their college careers. It’s graphic designer’s and typographer’s that are teaching these classes. The basic principles of design are explained and experimentation and appropriation are used to propel the students through their portfolio classes. What’s the end result? Usually, a print portfolio. Surely, there are design schools who do have the ability to use technology and produce students with a portfolio that is something more than print. A website or an interactive Flash piece.

If graphic design training continues to follow the same principles, how can students be expected to incorporate more UX design practices into their portfolios? Are we at a point where the term Graphic Design is outdated? What should a design curriculum encompass these days to ensure that students have the right foundational competencies, but yet have all of the technical competencies to meet the ever changing technological landscape?

The big question is, now that we all have the tools that we need to produce mobile and tablet content, are all designers expected to just know how to do that type of development? Are they prepared enough to wade into the murky and unpredictable waters of mobile development? When someone is trained to be a fireman, they learn everything they can about fires and fire hazards and safety. A lawyer goes to school and learns everything about the law. These fields are focused and direct. In contrast, designers (in order to thrive in the current environment) need to know how to design for print, for web, for mobile, for tablet, and whatever else is in the realm of graphics (without a salary differential, mind you). They may have to understand HTML, CSS, JavaScript, ActionScript, and possibly other technologies that will allow them to do their jobs.

Another possibility is that students learn specific, narrow topics in design school to prepare them for a niche career? So one student could focus entirely on website design for the desktop. Another student could focus on mobile development. They would be acutely aware of all of the aspects of their respective fields and would be prepared to troubleshoot problems as they arise. Is this feasible though? Probably not. The thinking might be, ‘you can design a website, so you must be able to do develop one for mobile use?’ Maybe graphic design curriculum becomes more of a liberal arts study. More exploratory in nature until the student finds their interest and holds on to it.

There’s no question though, that as with the rise of desktop publishing changing graphic design behavior, tablet and mobile development will change it again. Are we ready for that change?