Quick Tips to Make Web Development A Breeze

Quick Tips to Make Web Development a Breeze

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:

Coding tips

Sandbox

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.

Firebug and Beyond

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.

Do Your Job One Thing at a Time

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.

Project Management

Make Your Site Secure

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.

Get Perfect Pictures

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 dotted lines

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.

Mobile Tips

Active Phone Numbers

Going High or Going Low?

Is your site ready for retina screens? Don’t think you’re OK just because the numbers are on your side right now, because it won’t stay that way forever. There are a couple of solutions for switching images depending on response to screen resolution. Use the JavaScript framework retina.js, which uses Apple’s @2x naming convention to swap out standard images with hi-res versions. You can also supply high-res images to iOS devices using webkit-image-set.

Fixed Navigation

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:

  • Mobile Safari iOS5 and above
  • Android 3 and above
  • Blackberry 7.0 and above
  • Shortcuts

Qurt Global Logo