Posted by: Randeep Singh | July 26, 2011

Web sites: Design Techniques and layouts

Design Techniques

Link CSS support and implementation varies amongst the different browsers. Adobe launched a community driven site back in the CS2 time-frame with the goal of collecting the various issues and workarounds that arise when trying to use CSS. It has a great collection of browser CSS bugs, along with descriptions of what triggers them. Provides thumbnails of nice web sites. The design community gets to vote on the sites, add comments, mark their favorites, etc. Pretty handy resource for us. Use the drop down at the top to browse themes) 40 css layout templates Web Design Treands for 2009
  • A big part of what Muse will do is slice up the imagery used on the page and generate image assets. We should generate CSS sprites whenever possible so that we can reduce the number of hits to the developer’s site and reduce flashing on interactive elements. – Another key thing to think about is that some of the images used within sprites are over-sized to accommodate the case where someone with a vision disability pumps up the font-size … how would we support this given the fact that the imagery used in a design is only big enough to make the normal case look good?
  • I’ve heard that most designers create designs against a 960 pixel wide page, hence the 960 in

, and use some sort of grid technique to keep things spaced out consistently, etc. Grid design Grid design for columns Javascript based switching between multiple fixed or liquid layouts By changing just the stylesheet, it provides designers lots of examples of what is possible to do within the constrains of web design A collection of common patterns used in web-design. For inspiration, no code included Recent article on state of searchability WRT Ajax and Flash Gives a description of fixed, fluid and elastic layouts, and the pros/cons of each. effective techniques to create 100%-functional adaptive CSS-layouts Site devoted to typography on the web
CSS Techniques Faux columns – making columns appear as if they are equal in height. Equal height faux columns using a clear method. CSS3 method for liquid faux columns. Liquid layouts with negative margins. A technique that allows you to create tabs that can grow to accomadate wide content or large fonts. 45+ CSS Grid Systems, Layout Generators and Tutorials that every Designer should know Web Design is 95% Typography Setting Type on the Web Baseline Grids with CSS Sizing Text in CSS Yes another grid system



Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s


%d bloggers like this: