Mobile Strategies

28 07 2011

http://www.smashingmagazine.com/2011/07/11/picking-a-mobile-support-strategy-for-your-website/

Advertisements




Helper tools for CSS3 features

26 07 2011

Some helper apps to build gradients, drop shadows, etc.

http://westciv.com/tools/





Flexbox and multiple column layout in CSS3

26 07 2011

A few links to get you started with flexbox:

http://www.html5rocks.com/en/tutorials/flexbox/quick/

http://hacks.mozilla.org/2010/04/the-css-3-flexible-box-model/

 

multiple columns:

http://www.css3.info/preview/multi-column-layout/

http://www.alistapart.com/articles/css3multicolumn

http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-the-multi-column-css3-module/





Media Queries and a responsive website

26 07 2011

This is from our friends at A List Apart and Ethan Marcotte, who wrote about fluid grids:

http://www.alistapart.com/articles/responsive-web-design/

and a more practical and less conceptual version from Smashing Magazine:

http://www.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/

And a fairly dry but reference-y version:

http://reference.sitepoint.com/css/mediaqueries

Media queries and the portrait vs. landscape orientation:

http://www.1stwebdesigner.com/css/how-to-use-css3-orientation-media-queries/

Standard device sizes – quick and easy reference:

http://css-tricks.com/snippets/css/media-queries-for-standard-devices/





Text Effects summary

26 07 2011

http://www.w3.org/Style/Examples/007/text-shadow.en.html

There’s a “glow” option in there…





Text Shadow tutorial

26 07 2011

Some cool use of text-shadow – be sure to check out the demo page as well.

http://blog.typekit.com/2011/07/19/shading-with-css-text-shadows/





The Fluid Grid

21 07 2011

Here’s a pretty in-depth look at creating a fluid grid, i.e., a grid that will resize with the browser. There are some other methods, using the @screen method that we can cover as well, but this should be the next logical step from floats or absolute positioning.

http://www.alistapart.com/articles/fluidgrids/

This article takes the idea of fluid grids and advances it somewhat with a few tweaks for other layout issues:

http://www.smashingmagazine.com/2009/06/09/smart-fixes-for-fluid-layouts/

I make this last post with some reservations – yes, there are grid generators out there and pre-built layouts, worth having in your toolbox, but you need to know how to do it from scratch:

http://speckyboy.com/2010/05/30/liquid-fluid-and-elastic-layout-templates-tools-and-frameworks/

And another roundup of the same sort of stuff:

http://www.webdesigntoolslist.com/2009/07/webmastertools/roundup-of-css-grid-generators-css-grid-layout-generators/