Based on years of Website Development Service experience, I’ve compiled some tips that will help make your job much easier. There are open source services that developers keep quiet about, as well as mobile programming hacks and responsive development tips. Here are some of them:
If you want to improve your techniques, CSS effects or new kinds of transition, do it as a sandbox project. Keeping experimentation uncluttered by outside influences makes the code much easier to debug if something isn’t working as expected.
Chrome and Safari have a web inspector built in but you need to check out Firefox Developers Toolbar. It’s the perfect thing to detect those little CSS problems when testing your site in multiple screen sizes. Firebug has just added the ability to display multiple screen sizes in one browser tab too – which means you’ll never need to change your browser’s width to test your site ever.
Every object in your code should have one function, even with CSS. Don’t put all styles onto a .button class. Split it into .button-structure and .button-face.
If you don’t do that and something breaks, you’ll have a heck of time tracing back through your code.
Before you go live with a website, be sure to run it through ASafaWeb.com (pronounced A-Safer-Web). This site, written by Microsoft MVP Troy Hunt, scans ASP.NET websites for a range of common security issues. Should you fail any of the tests, it will advise you how to solve your problems.
Pixel Perfect is a tool used for comparison of initial designs with the actual front-end that the development process spits out. This Firefox plugin allows you to overlay a jpeg version of your designs right on top of the page. With this, you can check down to the last pixel that everything lines up.
Use an ‘incomplete’ or ‘todo’ CSS class to give a dotted outline to parts of the site that don’t work or are unfinished. With this, you can see which areas still needs work before you go live.
Do you want to have fixed navigation or a contact bar at the bottom of your site? When it comes to mobile, you’ll have to keep in mind that only a few browsers support the “fixed” class. Windows Phone 7 will replace the “fixed” class with “static” – which isn’t good.
So, here’s as list of mobile operating systems that support the “fixed” attribute in CSS: