Front End Development: The Easier Way
Front end development uses 3 things, content(HTML), styles(CSS) and possibly enhancements(Javascript/Flash/Silverlight). So it would make sense to do develop in away that makes sure it doesn’t hinder the content if the browser doesn’t allow styles or enhancements. Which a lot of developers painstakingly do, but there is an easier way.
Most developers generally use a method called Graceful Degradation. This is a method where you code the website to make it work and look pretty, then go back and make sure it works if either the CSS or enhancements are shut off.
1 2 3 4 5 6 7 |
Which is fine, but the problem is you have to work around something you already built. If you’ve written the code so it doesn’t gracefully degrade then you have a bit of a problem. A good example of this is a pop up window on an anchor tag.
Sure you can have a noscript tag and put in an alternative, but if you have 50 links like this it become a real pain. So what can we do…
Progressive Enhancement
Progressive enhancement is a method of working that makes sure everything works even though styles or enhancements may be shut off.
You simply start off with pure content. Put content in tags that make sense. After doing this you can validate your HTML and make sure everything is the way you want it. Handling the pop up window example in this method would look something like this.
Now at this point you head to the styling. Layout everything the way you want it to look then validate the CSS.
1 2 3 4 5 6 7 8 9 10 11 12 13 |
If everything looks good, then comes the final step, enhancements. Basically in this step you put in anything that will help out the user interface like animations or in this case a pop up.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <!--pop up Javascript--> <script src="popup.js" type="text/javascript" charset="utf-8"></script> <!-- Styles --> <style type="text/css" media="screen"> a.popup:link, a.popup:visited{ color:red; } a.popup:hover{ color:black; } </style> <!-- Content --> <a href="popup.html" class="popup">Click Here</a> |
In this example the Javascript would basically find any element with the class pop up and make it’s href value open in a pop up.
That’s all there is to it. Start with content, make sure it works. Style it, make sure it works. Then enhance it. Really it’s just doing things in an order instead of jumping around. Nice and easy.
Related
Graceful Degradation & Progressive Enhancement
Progressive enhancement
Understanding Progressive Enhancement
Progressive Enhancement with CSS
Progressive Enhancement: What It Is, And How To Use It?
