jQuery Masonry
jQuery Masonry. A dynamic layout plugin for jQuery. The flip-side of CSS floats
Font sizing with releative ems…
Font sizing with releative ems http://t.co/hkTlgEdh
For the web typophiles out there, Responsive font size with media queries to deal with device orientation woes
For the web typophiles out there, Responsive font size with media queries to deal with device orientation woes http://j.mp/wcospp
In a world of Javascript loaded from CDNs–test for SPOFs…
In a world of Javascript loaded from CDNs–test for SPOFs (the blocking of a page loading by a remotely hosted script) http://t.co/qlqE6lMu
Browser updates on HTML, CSS, etc file save. No pressing…
Browser updates on HTML, CSS, etc file save. No pressing reload!!! LiveReload. This will change your coding process! http://t.co/DkV8teyu
Tips for responsive web design
Right now, responsive pretty much all about the width of your website–although it may not always be that way. Responsive design is an approach though and not a specific technology (media queries, etc.). It’s about responding to the device the website is being displayed upon. For example, the appropriate design may change for touchscreens by making buttons larger.
People are used to scrolling up and down, so matching the width of your document to the width the browser is often the main goal. Although most of the tips below are related to CSS and media queries AND focus on informational sites (not web applications), I believe that JavaScript has a significant place to play in behavioral changes and touch implementations in responsive design. The following list is intended for front-end developers and designers that work with CSS regularly, but are just starting to build responsive sites.
Note: I am not going to use the term mobile, but small-screen. Using mobile implies that you are moving–not that you are viewing the site on a small screen. (via Zeldman)
The decision trees of your layout multiplies with responsive design. Where should this item if the screen resolution is…? This adds complexity to the project due to the multiple (or continous with fluid layout) layouts. Be sure to plan out how many layouts you will create from the beginning. Small, medium, and large? Two small layours (landscape and portrait?) Start with a media query boilerplate and add or subtract the media queries you need.
Continue Reading →
Being familiar with the implementation difficulty…
Being familiar with the implementation difficulty encourages compromises in design http://t.co/ZYxkHZGA
Web layouts should be created from the content out, not for…
Web layouts should be created from the content out, not for a certain device/canvas in. -Bolton, A Richer Canvas
When are we going to get a responsive layout programs?!…
When are we going to get a responsive layout programs?! Imagine a world where a graphic designer could design a site in % from the start.
Make sure you add all those CSS3 draft proprietary prefixes…
Make sure you add all those CSS3 draft proprietary prefixes with Prefixr http://prefixr.com/
You will need a good text trim function if you make sites…
You will need a good text trim function if you make sites with a client-managed CMS.
You can download Google Fonts as TrueType files now for use…
You can download Google Fonts as TrueType files now for use in Illustrator and Photoshop http://is.gd/2bdKBq
Every editable content block should have an edit link on it…
Every editable content block should have an edit link on it if the user is logged in.
FitText: dynamically resize headlines to fit container,…
FitText: dynamically resize headlines to fit container, jQuery plugin http://fittextjs.com/
It’s ALWAYS a mistake to design page layouts with code–oh,…
It’s ALWAYS a mistake to design page layouts with code–oh, but so tempting! Use a graphics program.
No one can tell the difference between a 25ms page load and…
No one can tell the difference between a 25ms page load and a 40ms page load. Make sure it’s not 700ms and move on!
Don’t let your tool (WordPress or another CMS) decide your…
Don’t let your tool (WordPress or another CMS) decide your site design. http://bit.ly/gPp4Mo
The art of creating websites is always walking a fine line…
The art of creating websites is always walking a fine line between automation and uniqueness.
Mac tip of the day: Put your icon label on the right. You…
Mac tip of the day: Put your icon label on the right. You can fit more icons vertically on the far right of your desktop.