My Clear gif trick for image swapping for Media Queries with no hardcore backend code


First create a clear.gif file to use everywhere you want to stick lets say your logo. Dont worry about size the gif is but do wrap it in a div say we can control that clear.gif img properties. I then add that class to my CSS and make the img properties to be both 100% on width & height. Then create the class's properties to use the logo i want as the background of the div. after i got it right for current layout, i copy&paste for other sizes layouts and make the little tweaks needed with out ever having to touch the html embedded image. This saves time & coding for writing a script that swaps out each image depanding on page size. I hope you find this helpful.

Designer/Developer Inspiration and EXPANDING web design knowledge and all design knowledge:

Sick buttons and forms with style http://webdesignledger.com/inspiration/25-examples-of-subscription-forms-and-buttons-in-web-design

Tools you should have on firefox or chrome

http://webdesignledger.com/tools/9-useful-google-chrome-extensions-for-web-designers

http://tutsplus.com/

this sites breakdown to have development and design in separate tuts.

http://net.tutsplus.com/ & http://vector.tutsplus.com/ & http://mobile.tutsplus.com/ I check the most

They have free things to download for assets everyone and then n they got good articles.

http://www.smashingmagazine.com/

Typography:

great for some free fonts and font research to create from scratch http://www.dafont.com/

Typography Anatomy: http://www.bsu.edu/web/ucspubs/pdf/other/letterform_anatomy.pdf

Font manager i use and have a free version of thats older but rocks: http://www.linotype.com/

Also check out http://www.theleagueofmoveabletype.com/

EM vs Pixel Knowledge: http://jontangerine.com/log/2007/09/the-incredible-em-and-elastic-layouts-with-css

NEED SOMEONES logo

like big brands coke, tacbell and whatNOT http://www.brandsoftheworld.com/

LEARN things or reCAP to find stuff we forget about:

HTML: http://www.w3schools.com/html/default.asp

CSS: http://www.w3schools.com/css/css_reference.asp

CSS3: http://www.w3schools.com/css3/css3_reference.asp

LOGOS Inspiration links:

LOOK AT THIS FOR branding/LOGO/typography ideas:

http://coolhomepages.com/sort/?catName=Logos&sortType=DATE&pageNo=1

http://logopond.com/

site Inspiration links:

This site has sites you can submit as a designer you see all the work in different categories by design style

http://coolhomepages.com/

http://creattica.com/

faveup

desiner today

Good Look Creative | a Marketing Consultancy | Events | Publicity | Print | Web | Identity | 888.413.7744 | info@goodlookcreative.com | www.goodlookcreative.com

Creattica

Web Design Inspiration, CSS Gallery and Video Review Podcast - Unmatchedstyle.com

Design is Kinky

Styleboost

Ideabook.com Tutorials: Graphic design tutorials on how-to design logos, brochures, websites, direct mail, and other types of print and digital marketing

Ideabook.com Tutorials | The assertive palette

Stencil Revolution - Powered by Stencil Revolution

nerd crap thats cool:

http://www.macrumors.com/

http://gizmodo.com/

http://toucharcade.com/

BASE kit for MOBILE web development: Pretty sick!

http://www.sencha.com/

web design layout!

Meet the 960 grid system! http://960.gs/

CSS3 Mastery

http://net.tutsplus.com/sessions/css3-mastery/

HTML5 Mastery

http://net.tutsplus.com/sessions/html5-and-you/

CSS3 & HTML5 magic

http://www.chromeexperiments.com/

form knowledge

http://uxdesign.smashingmagazine.com/2011/11/08/extensive-guide-web-form-usability/