Comments on: Improving Your Process: Faster Front End Development

By: Maitreya Dwaipayan

Maitreya Dwaipayan — Wed, 07 Apr 2010 10:16:26 +0000

Hi
Thanks for this great post. I have just indulged myself into the field of front end designing. I wanna know what are the basic things one should keep in mind while preparing a prototype or site framework. I work for a software firm so my designs need to be basic but attractive. Images and other gaudy stuffs are no-no for me. So if anyone can provide me with a list of techniques for improving my designs with cross browser compatibility I would greatly appreciate them.

By: 50 New CSS Techniques For Your Next Web Design « SUMERA’S Weblog

50 New CSS Techniques For Your Next Web Design « SUMERA’S Weblog — Tue, 26 Jan 2010 11:33:28 +0000

[...] this post offers plenty of information on things other than CSS, it also offers some great advice for [...]

By: 50 New CSS Techniques For Your Next Web Design | Theme Center

50 New CSS Techniques For Your Next Web Design | Theme Center — Sun, 13 Dec 2009 07:48:27 +0000

[...] this post offers plenty of information on things other than CSS, it also offers some great advice for [...]

By: 50 New CSS Techniques For Your Next Web Design « Photoshop.vn – Your Design Resource

Mon, 24 Aug 2009 01:19:10 +0000

[...] this post offers plenty of information on things other than CSS, it also offers some great advice for [...]

By: Awesome Links of the Week 2009-08-09 « Jon Bergan - A blog about Design, Development & Being Your Own Boss

Sat, 08 Aug 2009 15:42:45 +0000

[...] Improving Your Process: Faster Front End Development [...]

By: Bart

Bart — Wed, 05 Aug 2009 20:05:17 +0000

For me the best of time saving tools are Clips (in Coda), templates (NetBeans), snippets (Textmate) or whatever you call them.
I’ve set up clips for almost everything in HTML, CSS and JavaScript. Sometimes it’s much better and faster than editor’s auto-completion or auto-closing tags.
E.g. I just type “nav”, press TAB and I’ve got UL and 5 list elements with links – a base for site navigation in about 1 second. Love it.

By: 50 New CSS Techniques For Your Next Web Design | Desinine

50 New CSS Techniques For Your Next Web Design | Desinine — Thu, 23 Jul 2009 08:16:50 +0000

[...] this post offers plenty of information on things other than CSS, it also offers some great advice for [...]

By: Alex Green

Alex Green — Wed, 22 Jul 2009 12:05:01 +0000

I would have to say that the single biggest time saver for me is Firebug. I can just write some rough styles then refine in Firebug, while getting immediate visual feedback. I also use a ruler extension for getting things lined up.

I think it’s a good idea to use a modular approach, that is to have a copy of certain styles and markup that is used often, such as layout structures, typographic styles, forms, and then make changes to suit the project.

By: alberto

alberto — Wed, 22 Jul 2009 07:25:52 +0000

Hi all, what about real deployment ? i mean deploy the site on the hosting ?

Which are the smartest and most solid tecniques to upload all and only files that have been modified (or created), in automatic way ?

Alberto

By: negs

negs — Tue, 21 Jul 2009 15:49:58 +0000

Add a color pallette and font size guide at the top of your stylesheet in a comment. Then you have easy access to your colors and font guide when you need it.

you can get your font guide from http://www.pxtoem.com.

example:

/* COLOR PALLETTE
main blue: #58a450;
highlight blue: #b95aff;

/* FONT SIZE CHART FOR A 16PX BASE SIZE – PLEASE USE PERCENTS!

6px 0.375em 37.5% 5pt
7px 0.438em 43.8% 5pt
8px 0.5em 50% 6pt
9px 0.563em 56.3% 7pt
10px 0.625em 62.5% 8pt
11px 0.688em 68.8% 8pt
12px 0.75em 75% 9pt
13px 0.813em 81.3% 10pt
14px 0.875em 87.5% 11pt
15px 0.938em 93.8% 11pt
16px 1em 100% 12pt
17px 1.063em 106.3% 13pt
18px 1.125em 112.5% 14pt
19px 1.188em 118.8% 14pt
20px 1.25em 125% 15pt
21px 1.313em 131.3% 16pt
22px 1.375em 137.5% 17pt
23px 1.438em 143.8% 17pt
24px 1.5em 150% 18pt
*/