Transcript A List Apart

Current Trends in Web
Development and Design
CSCI 1106: Animated Computing
We’ll talk about...
•
•
•
•
•
CMS, HTML 5, and CSS 3
Graceful degradation vs. progressive enhancement
Trends in design... and whether or not to follow them
Useful non-Dreamweaver software for web development
Useful links to keep yourself up-to-date on the web
development/design world
Content Management Systems
•
•
•
•
•
More and more frequently, developers are moving away from
“hard-coded” websites
Most developers and designers, including myself, now code and
design all of their websites with the intention of using some form
of CMS
A CMS essentially turns your website into a very powerful blog.
The CMS makes updating your website incredibly simple, which
is very important if you have a client who is not computer savvy.
Popular Content Management Systems include Drupal, Joomla!,
and WordPress.
WordPress is free, very easy to use, and powerful - and guestspeaker recommended!
HTML 5
•
•
•
HTML 5 is better thought of not as a new language, but a
revision of an existing language
For the client, HTML 5 allows for greater interactivity between
the website and the visitor. For the developer, HTML 5 improves
the semantics of the language
As a beginning developer, focus on learning the basics of
XHTML before worrying about transitioning to HTML 5. A solid
knowledge of XHTML 1.0/1.1 will make the transition to HTML 5
much easier.
CSS 3
•
•
•
•
This version of CSS brings many exciting new features, many of
which are already in common usage.
Some great new options include: rounded corners, drop
shadows, multiple backgrounds, colour opacity options, and
advanced border options
You can start playing with CSS 3 in your websites now! Check
out http://www.css3.info for some examples
But before you do, pay attention to the next section...
The Basics of Browsers
•
•
•
There are a few main browsers that a developer can expect his
or website to be viewed with: Internet Explorer, Firefox, Safari,
and Chrome.
Those four browsers run on three different rendering engines:
Trident (IE), Gecko (FF), and WebKit (Safari and Chrome)
In general, WebKit has the best support for the latest standards
and Trident has historically had the worst support (though that is
apparently changing with IE9).
The Basics of Browsers
•
•
•
•
Because CSS 3 is still relatively new, not all browsers support all
of its features and not all features are implemented in the same
way for each browser.
As a result, every developer must decide how important crossbrowser similarity is to him or her.
For a few years, developers adopted a philosophy revolving
around “graceful degradation.”
Recently, however, developers have begun to lean toward
“progressive enhancement.”
Graceful Degradation
•
•
•
For many years, developers would code their websites with the
hope that, when viewed with older browsers, the more advanced
features would simply “degrade gracefully.”
Mostly, you’d just hope that a missing feature wouldn’t cause
your site to completely implode.
This was especially important when developers were still coding
for visitors using Internet Explorer 6, which was notorious for
being a developer’s nightmare and is suspected to have
participated in the killing of many, many adorable puppies.
Progressive Enhancement
•
•
•
Recently, with the long overdue death of IE 6, developers have
abandoned graceful degradation in favour of “progressive
enhancement.”
Progressive enhancement is, in many ways, the opposite of
graceful degradation. Instead of starting with the new features
and working backwards, the developer begins by coding the
most basic possible version of a website and adding layers of
styles afterward.
Content is what matters most to a developer using progressive
enhancement - and it’s what will matter most to your visitor.
•
•
Building a Site With
Progressive Enhancement
When coding a website, a developer should begin by developing
an internal architecture (IA) and then build a very basic and
semantically strong version of the website with no style at all. At
this point, the website should be easy to navigate and read and
should function for all potential users.
After this stage, the developer can then begin adding style to the
website to make it match his or her vision. As styles are added,
one should always consider what the website will look like if
those styles are taken away. (Firebug is your friend.)
Current Design Trends
•
•
•
Over the past few years, many trends in design have both come
and gone. If they’re gone, it’s almost always for the better.
Should you play into current design trends, knowing that they
may very well go “out of style,” within a year? Absolutely, if
you’re developing a strong website with progressive
enhancement.
Progressive enhancement and CSS allow you to make relatively
easy design changes to your website without the need to
fundamentally change its structure. So why not make your site
look fresh?
Popular Trends in 2010
•
•
•
•
•
Big, GIGANTIC header sections
Interesting typography choices, including “slab” typefaces
One-page websites
Big, GIGANTIC footer sections
Designs with either a retro or organic feel (thank all the hipsters),
and also designs that incorporate the real world with setting and
texture.
Dead Trends
•
•
•
•
Web 2.0 buttons/shiny interfaces
The “wet floor” effect (only websites aimed at Mac users should
be using this effect, really)
Gradients everywhere
Flash-heavy websites
•
•
•
•
•
Development Tools
In general, web developers tend to be Mac users, so you’ll find
the best variety of tools on a Mac. (Note: Many of these
applications are paid...)
Espresso, Coda, BBEdit (or TextWrangler), and CSSEdit are all
fantastic development tools.
Transmit and ForkLift are great FTP clients, FileZilla and
Cyberduck are the popular free alternatives.
Having a decent RSS Reader (NetNewsWire) and mail
application (Mail.app or Postbox) is very helpful.
Dropbox (also for Windows) or CloudApp are great for working
Tools for Windows
•
•
•
•
Notepad++ is a good alternative to BBEdit/TextWrangler
Texter is a powerful text-expanding application
Clipboard Manager widget
Launchy is an application launcher for Windows
Web Applications
• There are TONS of web apps available.
• http://goo.gl/1tma
Websites to Bookmark
•
•
•
•
•
•
Smashing Magazine
http://www.smashingmagazine.com
A List Apart
http://www.alistapart.com
Web Designer Depot
http://www.webdesignerdepot.com
Appstorm
http://web.appstorm.net/
http://mac.appstorm.net/
http://iphone.appstorm.net/
SmashingApps
http://www.smashingapps.com
Envato
http://envato.com/
•
•
•
•
•
•
•
•
Also...
•
Be sure to check out the Head First series from O’Reilly Press.
They have a wide variety of informative, easy-to-read books
covering a huge selection of topics, including...
•
•
•
•
•
•
HTML/CSS
Web design
PHP
Javascript
iPhone development
WordPress
Contact Me!
•
•
E-mail: [email protected]
Twitter: twitter.com/knuckleball