Improving speed and efficiency of html/css coding ?

[Canapin]

Hi!
I’ve worked as a “web integrator” for a few years.
I don’t know if “web integrator” is the appropriate term. In french it is. :D

I receive the page designs in PSD format, and I translte them into HTML and CSS files.

After a few years of pain, where I was writing my pages with notepad++ and plain CSS, I decided to change my habits.

For now, here are my tools :

Sublime Text 3 (text editor) :
Emmet
HTML and CSS snippets
LESS/SASS

Photoshop :
CSS3PS Photoshop plugin (exports a layer properties into CSS properties)
Custom action to export a layer or group of layer into a new document

Web services :
Google fonts
FontSquirrel webfonts generator
Colorzilla Gradient Generator

Chrome Extensions (main browser)
W3C validator
User-Agend Switcher
LiveReload

Other Softwares :
LiveReload (“real time” local pages reloading)
PNGoo (optimized PNG compression)

Other :
Normalize.css
HTML5Shiv.js

I check my websites on :
Chrome (last version)
FireFox (last version)
Opera (last version)
IE 8-9-10
On Windows, and on some devices with the User-Agent Switcher Chrome extension.

I tried Compass (CSS Framework), but it’s functionnalities don’t seem useful to me as I only get the final PSD files and I don’t work on them at all.

So, I’m writing this thread because I’d like to ask you two questions :

What could I do to make my work more efficient?
What softwares/languages/plugins/methods should I choose if I want to start creating site designs from A to Z (colors, layouts…) ? I don’t know much about this.

Thank you! :)

[tomasz86]

I check my websites on :
Chrome (last version)
FireFox (last version)
Opera (last version)
IE 8-9-10
On Windows, and on some devices with the User-Agent Switcher Chrome extension.

I’d strongly suggest adding mobile browsers to the list. You may want to check StatCounter for statistics since usage is very different from desktop.

I also don’t think it’s necessary to check both Chrome (last version) and Opera (last version) as they now use the same engine. It may be useful to check the latest Opera 12.x (Presto) though, just in case.

[__]

What could I do to make my work more efficient?

I don’t know. You gave me a list of tools you use, but you didn’t tell me anything about your workflow.

When you’re working on a website, is there some point that feels like it’s taking too long, or not giving you good results?

I check my websites on … some devices with the User-Agent Switcher Chrome extension.

I’m not sure what you mean by this. Switching the UA string does not cause Chrome to emulate other browsers. This would have no affect on the site at all, unless you were intentionally serving different content based on the UA.

If you want to do testing on different mobile browsers (but don’t have them), try a service like BrowserStack (in fact, it’s worth trying anyway).

[Author]

Posts