current trends in web development and design csci 1106: animated computing
Post on 19-Dec-2015
214 views
TRANSCRIPT
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 guest-speaker 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 cross-browser 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 with clients.
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 BookmarkSmashing Magazine
http://www.smashingmagazine.comA List Apart
http://www.alistapart.comWeb Designer Depot
http://www.webdesignerdepot.comAppstorm
http://web.appstorm.net/http://mac.appstorm.net/http://iphone.appstorm.net/
SmashingAppshttp://www.smashingapps.com
Envatohttp://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
