• Home


• Cypress College
  • Read First
  • Handouts
  • Projects
  
  
• Design Samples
• Video & Links
• Trends


• Terminology


• Javascript rollover
• CSS Concepts
  • Why CSS?
  • CSS Syntax
  • Structure: DIVs
  • Structure: Classes
  • CSS Inheritance
  • Box Models
  • Box Positioning
  • Box Dimensioning
  • Floats


• E-Commerce
• Hosting
  
• Search Engine Optimization
• Debugging and Validation


• Aesthetics
• Designer Ethics
• Designer or Developer?


• About the Author

Trends

Now - New Devices / Fresh Design Vs. Then - Hacks & more hacks

Most people upgrade their browsers as new releases become available. Prior to about 2010 many employees were locked into older browsers that were selected by IT departments, which frustrated web developers who attempted to bring the full power of CSS and jQuerry to their websites. As any technology becomes dated its functionality appears to be increasingly compromised on hardware that is newer, and better designed. In the years from 2009-2013 major trends emerged that changed internet access in ways about as significant as the emergence of the internet in everyday use between 1992-1995.

TRENDS	NOW (post 2012)	THEN (pre 2011)
Devices (Internet Access)	Smart phones out number computers 5 to 1. Smart phone users have capped limits on downloads/bandwidth, and so code must be lean and media campressed to maximum capability	In the pre Smart Phone Era most websites were built for the desktop or computer with fast bandwidth and users typically had unlimited transfer/download accounts
Animation & Media	NOTE: Apple stopped supporting Flash This forced webdesigners to impliment code based animation tools: jQuery, HTML5, CSS3 Major benefits: leaned code, faster	Flash was the cutting edge tool for animated and transition affects. JavaScript was also used but again very bloated code which wasn't a concern when users had unlimited bandwidth.
Code	HTML5 & CSS3: used for animation & media built into, some jQuery can be used but new designers need to focus of the fastest loading option. HTML5 & CSS3 will almost always be better than any JavaScript alternative.	HTML, CSS & CSS2: Convoluted HACKS required to make pages load properly across all the new devices and browers that hadn't caught up, rampant Internet Explorer problems.
Design	1. Visually: Flat design (2D on one page, using swipe versus scroll) that works across devices 2. Philosophy: visual and typographic brevity / LEAN RULES 3. Focus: User Experience & Branding 4. Device, UX, Social Media Integration: yelp to pick a restaurant and then GPS to get to the restaurant.	1. Visually: Realism, code bloated sites, less attention to media compression 2. Philosophy: developers (back end) and designers (front end) struggling to keep pace with change 3. Focus: Design Limitations focus 4. UX a second thought, social media emerging.
Browser Statistics	Browser Monthly Trends as of today, click here.	See the entire next section BELOW for statistics and the general web design climate in 2011 and before

 

Back Then Section starts here

CSS and Web Compliance / Standards

CSS web standards are a collection of rules that govern how a browser will render the code. Unfortunately for designer/developers IE functions so poorly when it comes to standards that you will HAVE to rely on hacks primarily for IE products to work as intended.

IE6: May it RIP soon...

IE 6 released in 2001 will finally make it's way to intensive care on July 13th, 1010 (and there will be dancing in the streets). Up to 60% of your development time can be spent debugging (primarily IE - 6 specifically). IE rant: I formally suggest a class action suit if anyone is interesting in attempting to recover the wasted development budget on the virus IE, oops I meant browser...

Browser statistics table: 12-09

The market growth line is my interpretation of the statistics. My legend works like this:

- or +prediction of losing or gaining market share
=prediction of insignificant growth or loss.
*most popular version of browser

Browser	IE 9	IE 8	IE 7	Firefox 3.5	Firefox 3	Safari	Chrome	Opera
Release	2010	2009	2006	05/09	06/08	09/08 v4*	06/09 v3*	09/09 v9.5*
market growth 12/09	+	+	-	+	-	=	+	=
overall marketshare 12/09	IE 6, 7, 8 = 37.7%			Firefox 2, 3, 3.5 = 47%		3.8%	8.5%	2.3%
marketshare 12/09		13.3%	13.3%	31.4%	13.6%
CSS support	3	2.1		3	2 & partial3	2 & partial3	2 & partial3	2 & partial3
CSS 2.1 support		partial	partial	yes	yes	yes	yes	yes
XHTML 1.0		no	no	yes		yes	yes	yes
XHTML 1.1		no	no	partial		yes	yes	yes
Notes	As of July 2008[update], no (finished) browser has fully implemented CSS2, with implementation levels varying (see Comparison of layout engines (CSS)). Safe development strategy: allocate 40% of your timeline for testing and revisions (hacks).
IE HACK	personal take, IE 6 was released in 2001. As a small developer, I can't justify spending valuable client's budget on writing hacks to support a browser that is almost a decade old, because a small subset of users & IT department have gone almost a decade without upgrading to free and superior products.
Browser	IE 9	IE 8	IE 7	Firefox 3.5	Firefox 3	Safari	Chrome	Opera
layout engine		trident	trident	gecko princeXML	gecko	KHTML webkit	KHTML webkit	presto princeXML
	Web browsers rely on layout engines to parse HTML into a DOM (Document Object Model)

Data for table Above: source: http://www.w3schools.com/browsers/browsers_stats.asp, Dec 5 2009

Data for table Below: source: http://en.wikipedia.org/wiki/Cascading_Style_Sheets#CSS_1 Dec 7 2009

CSS Launch and Development

	CSS 1	CSS 2	CSS 3
Release notes	December 17, 1996 -- The World Wide Web Consortium (W3C) today issued a Recommendation for Web style sheets. The Recommendation - Cascading Style Sheets, level 1 (CSS1) - gives Web designers a robust set of tools to help them specify Web page presentation properties...	12 May, 1998 -- Leading the Web to its full potential, the World Wide Web Consortium (W3C) has today released the CSS2 (Cascading Style Sheets, level 2) specification as a W3C CSS2 includes all the capabilities of CSS1 and adds improved typographic control, including dynamically downloadable fonts. There are new positioning properties to control layout; for example, to produce sidebars and navigation areas. Images and text can be layered and overlapped and can be dynamically moved around the screen with scripts. CSS2 also adds control over table layout, particularly useful for XML documents, and allows the automatic numbering of headings and lists.	currently in development released in modules includes CSS2 features (which is why CSS2 continues to be developed)
Main Features	Font properties such as typeface and emphasis Color of text, backgrounds, and other elements Text attributes such as spacing between words, letters, and lines of text Alignment of text, images, tables and other elements Margin, border, padding, and positioning for most elements Unique identification and generic classification of groups of attributes	absolute, relative, and fixed positioning of elements and z-index the concept of media types support for aural style sheets and bidirectional text new font properties such as shadows	rounded corners alpha transparency flexible box layout module
Disadvantages	While new additions to CSS3 provide a stronger, more robust layout feature-set, CSS is still very much rooted as a styling language, not a layout language. This problem has also meant that creating fluid layouts is still very much done by hand-coding CSS, and make the development of a standards-based WYSIWYG editor more difficult than expected. Supporting inferior browsers is grossly expensive
Advantages	Leaner and clearer html code implementing external style sheets Speed: Your CSS will be cached, speeding up the overall download of future pages, but a glut of CSS rules could carry a negative impact for the most important page (the first one)
Browser

 

© Melanie Stewart 2009 - 2014