Most of you haven’t tested your websites on anything other than a 21.5″ iMac. What does your site look like on an 11″ Mackbook Air or 15″ Macbook Pro? What does your website look like on a Dell laptop running Windows XP in IE8? Oh, don’t forget tablets and smart phones. Did you test for these devices as well?
Since you can’t control how people view your site, you need to test to see if your site is cross browser/platform/device compatible. You can do this one of two ways. You can buy all the different types of devices know to mankind, or go to Browser Stack and use their online service to test out your site.
Browser Stack is basically emulation software that will render what your site will look like in different browsers, different operating systems and different devices. The service is $19 a month, a bit out of your budget, but you do get 30 minutes of free testing. Just enough time to test out your first portfolio site.
It’s a bit early to be thinking about the rest of the semester, but I wanted to give you an updated plan of action since I switched us over to working with responsive/adaptive design.
February 27th
In-Class: More Responsive Layout Demos Homework: Extensively alter the typography/hierarchy in one of these templates for March 5th. Name your files “responsivetypography.html” and “responsivetypography.css” and upload them to your “homework” folder.
March 5th
In-Class: TypeKit Demo Homework: Use TypeKit with one of these templates for March 12th. Name your files “responsivetypekit.html” and “responsivetypekit.css” and upload them to your “homework” folder.
March 12th
In-Class: Forms Demo Homework: Add a form to one of these templates for March 19th. Name your files “responsiveform.html” and “responsiveform.css” and upload them to your “homework” folder.
March 19th
In-Class: JQuery Demo Homework: Come back from spring break with mockups for your portfolio website and ideas for a second website. And add a JQuery function to one of these templates by April 2nd. Name your files “responsivejquery.html” and “responsivejquery.css” and upload them to your “homework” folder.
April 2nd—April 30th
In-Class: Daily demos and work-in-class time on your two websites. Homework: Work on your two websites.
During the course of the semester we will be using a few tools to help use create and edit our own HTML/CSS web pages.
During class demos we will be using Bare Bones Software’s BBEdit to create our pages. While it’s not my favorite program for editing HTML/CSS it’s what the department will provide so we are stuck with it. However, it does what we need well enough, so it will suffice.
If you think this is something you will want to keep doing down the road, I’d suggest using Panic’s Coda. It’s what I use and has a ton of extra features that make web development a lot simpler.
If you are on a tight budget and BBEdit or Coda is too expensive there is a $4.99 program called Smultron for the MAC that will do everything you need to keep up with class assignments. If you aren’t running Lion yet, there is a freeware version that can still be downloaded.
Another budget friendly (i.e. Free) HTML/CSS editor is Text Wrangler. Again not a lot of extras but it will be all you need.
For you PC users, there are a lot of HTML/CSS editing options out there for you, but sadly I’m not aware of them except for Coffee Cup. I’m not sure how well its free version is, but I do know people use it.
Finally, both PC and MAC users can use Dreamweaver if you already have it. I don’t teach students how to use Dreamweaver because it has a lot of flaws and can help you develop a dependency on software and create very bad habits. As for Adobe’s Muse, I don’t know enough about it. I’ll check it out over the summer.
Demo on using JQuery Plugins, then work in class on portfolio site. Class will start at normal time.
April 16
Demo on PHP/MySQL (putting form data into a database), then work in class on portfolio site. PHP/MySQL Demo will start PROMPTLY at 8:30 am, work in class time starts at 9:45 am.
April 23
Demo on PHP/MySQL (recalling form data from a database), then work in class on portfolio site. PHP/MySQL Demo will start PROMPTLY at 8:30 am, work in class time starts at 9:45 am.
April 30
In class critique. Final portfolio website due at the beginning of class.
During the course of the semester we will be using a few tools to help upload our own HTML/CSS web pages to our web hosting accounts.
In class we will be using Cyberduck to upload all the necessary files to our web hosting account to make our web sites and pages work. The good news is this is a freeware piece of software with both a MAC and PC version.
Again, if you are thinking down the road you want to be a web developer, I would suggest getting Panic’s Transmit. While Cyberduck has a lot of features and is free, Transmit has a lot more features that once you get into using Content Management Systems (CMS) will make things a lot easier.
The following article came from Frank Chimero’s blog. His advice is dead on and the article is worth a read!
“Do I need to know how to code?” is a question that comes up with sure-fire consistency in design circles. I’ve seen it asked by so many, from uncertain design students in classrooms worried about their chances of landing a job, to seasoned professionals at conferences seeing their pool of print projects slowly evaporate. The question is being asked with even greater frequency as of late, because Adobe has launched their product Muse, which promises designers the ability to “create unique websites without writing code.” So, if a designer wants to work on the web, should they take the time to learn this dastardly “code” or instead rely on software like Muse?
My short answer is “Learn code.” My long answer, I suppose, would be that one should learn to code (specifically HTML and CSS), because it’s the language of the web, and while these skills aren’t necessary for every position, team or project, the knowledge does nothing but benefit the designer. Design decisions are not only affected by the characteristics of the content being designed, but also the qualities of the format. The best way to understand the characteristics of the web is to speak its language.
Good design and good markup provide structure to content. Good markup is a fundamental part of good design: beautiful on the inside, beautiful on the outside. HTML and CSS give another venue to provide structure to content in the native language of the web, and learning these guides decisions by surfacing the affordances of the medium. Design decisions are affected by both the content and the format, like how a sculptor would make different decisions if she were working with clay rather than marble.
It’s important to realize that the web is an experiential medium. It’s 4D: there is change over time as users interact with the work. Still images of sites are no good, much like how a still from a movie only gives a faint sensation of what it is to see the film. The best pathway to achieve parity between the construction and final result is to learn markup and stylesheets for concepting and prototyping.
The skills needed to learn HTML and CSS are not far from those used by the print designer day to day. One only needs to take the time to learn the terms. HTML is a markup language that annotates content with tags that define hierarchy and structure. Print designers already do this when establishing typographic hierarchy. CSS applies aesthetic treatment to parts of the design based on the content’s classification. Print designers should be familiar with this behavior from using styles in software like InDesign and Illustrator.
The mental leap in coding HTML and CSS is to learn the particular tags necessary to define the structure, hierarchy, and aesthetics. My belief is that learning them is a short step if a designer already understands typographic hierarchy, knows nesting relationships from producing outlines, and grasps separating aesthetics from structure by way of Styles in other software.
To get started, I’d recommend watching a few videos at Don’t Fear the Internet, which offers a succinct introduction to HTML and CSS for the print designer. Don’t miss their resources page as well. Learning to code is a leap, but it’s not as far as you think. Maybe it’s time to become bilingual.
