Amazing PSD To HTML. Pixel Perfect Everytime.

Que tal pararmos para falar sobre experiência do usuário? onde, quando e como? Vamos responder essas perguntas juntando mundo de UX com desenvolvimento Front-End e trazendo a união dos dois em uma trilha só!!!



psd to html5 css3 responsiveComo vocês verão logo abaixo, optei pela utilização do LESS. Para tornar a escrita do LESS mais otimizada, utilizei a extensão Mindscape Web Workbench , a qual é gratuita. Com ela, você consegue ver em tempo real a compilação do seu código LESS em CSS e você obtém a geração automática do arquivo CSS final, em duas versões: normal e comprimido (minified).

Tive um pequeno problema na utilização do @font-face, no caso de pessoas que já possuíam a fonte instalada no computador. Mesmo a pessoa tendo a fonte, ela renderizava diferente da fonte que eu usava no @font-face. Com isso, coloquei um :-)" na linha que pega a font local, assim mesmo que a pessoa tiver a fonte, ela irá baixar a fonte que coloquei no site, evitando que a mesma seja renderizada diferentemente do esperado.

Devemos ficar bastante alertas na utilização de HTML5 e CSS3. Se você assim como eu, já possui uma boa bagagem em xHTML e CSS2.1, é comum você tentar resolver os velhos problemas com velhas soluções. É necessário se indagar tempo todo: Continuarei utilizando divs auxiliares para a criação de bordas arredondadas? Continuarei utilizando divs para estruturação do Layout? É necessário estudo diário, para que você tenha novas respostas para essas velhas perguntas, assim aproveitando máximo que essas novas tecnologias tem a oferecer.

Para a maioria dos plugins acima, não precisei customizá-los para obter resultado esperado. Mas para alguns, não teve jeito: Tive que abrir plugin e fazer as modificações necessárias. Veja: Até utilizando plugins que possuem toda uma programação pronta, onde é necessário fazer somente uma chamada simples para que eles funcionem, às vezes você precisa modificá-los em sua essência para obter resultado esperado. Com isso, nesse cenário, ou você aprende jQuery, ou você está fora do jogo.


If you liked this article and you also would like to collect more info concerning O divórcio entre o PSD e o HTML please visit the web site.