This article is part of a web development series from Microsoft. Thank you for supporting the partners who make SitePoint possible.
There seems to be endless choices regarding how to accomplish the same task - to develop a website that works in today’s modern web. Web developers have to choose a web hosting platform and underlying data storage, which tools to write HTML, CSS, and JavaScript in, how design will be implemented, and what potential JavaScript libraries/frameworks to include. Once choices are narrowed down, the online world is filled with articles, forums, and samples that provide tips for making a better web experience. Yet no matter which path is taken, all developers are susceptible to mistakes. Although some mistakes will be related to a specific approach, there are challenges shared among all web developers. So through research, experience, and recent observations, I thought I would share a list I compiled of ten common mistakes I see web developers make - and how to avoid them.
The following list is in no particular order.
1) Writing Old School HTML
Mistake : The early days of the internet had much less options for markup than we do today. However, old habits die hard, and many still write their HTML as if we were still in the 20th century. Examples here are using
elements for layout , or
Impact : Writing last decade’s HTML can result in over-complicated markup that will behave inconsistently across multiple browsers. And it’s not necessary in more recent modern browsers like Microsoft Edge and even past versions of Internet Explorer (11, 10, 9).
How to avoid : Stop using
element for layout of content, and limit usage for it to displaying tabular data. Get acquainted with the current markup options available such as seen at whatwg.org. Use HTML to describe what the content is, not how it will be displayed. To display your content correctly, use CSS ( http://ift.tt/kO61ro).
2) “It Works in My Browser…”
Mistake : A developer may be fond of a particular browser or really despise one, and might primarily test web pages with that bias in-view. It is also possible that code samples found online may be written without factoring how it would render in other browsers. Also, some browsers have different default values for styles.
Impact : Writing a browser-centric site will likely result in very poor quality when displayed in other browsers.
How to avoid : It would not be practical to test web pages in every browser & version during development. However, having a regular interval of checking how your site will appear in multiple browsers is a good approach. Nowadays free tools to help are readily available regardless of your preferred platform: free VMs, site scanners. Sites such as http://ift.tt/erh8O7 or http://ift.tt/1re4nXrshow snapshots of how a given page would render over multiple browsers/versions/platforms. Tools such as Visual Studio can also invoke multiple browsers to display a single page you are working on. When designing with CSS, consider “resetting” all the defaults as shown at meyerweb.com.
If your site is using any CSS features created specific for a browser, be cautious as to how you will approach vendor prefixes such as -webkit-, -moz-, or -ms-. For guidance on industry trends in this regard, it would be worth your time to examine the following references:
- Microsoft Edge Dev Blog: A break from the past, part 2: Saying goodbye to ActiveX, VBScript, attachEvent…
- QuirksMode.org: CSS vendor prefixes considered harmful
- Bruce Lawson: On Internet Explorer supporting -webkit- vendor prefixes
While the above references explain a movement away from vendor prefixes and why, this site provides practical suggestions on how to work through this today.
Continue reading %10 Common Mistakes Web Developers Make%
by Michael Palermo via SitePoint
No comments:
Post a Comment