Website Maintenance Tips for Front-End Developers

Advertisement

One of the biggest advantages of online media over print is the ability to change, update, and enhance online media at virtually anytime, with virtually no negative side effects. In fact, if a website or web application does not continually offer its users an ever-evolving and growing experience, that site or application would soon become insecure, unusable, and out of date.

Have you beautified your code, validated your markup, and made your XHTML more semantic? Have you implemented basic SEO best practices, spell-checked content, and removed legacy code? Have you ensured JavaScript is unobtrusive, applied the principle of graceful degradation, and minimized the use of Flash? If you’ve done all those things (and possibly more), what comes next? Are there things you can do to improve your site’s overall effectiveness beyond those?

Wrenches

In this article, we will discuss ways that web designers and front-end coders can keep their websites relevant, timely, and accessible long after a site’s launch. This guide goes beyond simple text and graphic updates, common “best practices” for CSS and XHTML, or other things you might see in a typical website checklist1. We’ll expand on many of the basics, and provide some effective tips for website maintenance geared towards front-end designers and coders.

1. Keep Your Content Clean and Updated

After your website has accumulated dozens, maybe even hundreds of pages, content can become old and outdated. Website maintenance should include ongoing reviews of static content that may require updates or corrections. Of course, content that appears on blog or news pages would become outdated, but may not require changes. In those cases, the best solution may be to post new entries that update the information.

Of course, as a front-end developer for a company or agency, content maintenance would likely not be your responsibility, but if you’re a one-man web agency or another type of freelancer, content maintenance would be a vital part of your routine.

Contract

Policy Pages, Terms & Conditions, Terms of Service
Legal issues could arise if policies and terms pages are not adequately updated to reflect the latest company standards and procedures. Reviewing these types of documents that appear on your website or in your web application should be a regular part of your maintenance routine.

Software Documentation
Documentation associated with a product or service may also become out of date with new releases or bug fixes. Where time allows, your maintenance routine may also include regular additions and modifications to documentation, whether they appear online or in downloadable format.

Contracts
The services your company provides may require agreement to services between both parties by means of a legal contract. Is this document up to date, reflecting the latest company policies and standards?

Keep Your Blog Clean
If you are engaging your readers to participate in discussions on your blog, make sure that your posts do not contain spam comments. For instance, at the very least, regularly go through popular posts to manually remove comments that lead to suspicious sites. It’s also necessary to analyze tags that you’ve used. Some tags could be altered or modified to better reflect the topic, maybe because of a singular or plural rendering, or because of a misspelled word. You could also reconsider your tagging system and come up with a style guide that describes your process of tagging posts, which would improve future tagging and tag maintenance. You might also want to close comments on popular posts to avoid spam and link dropping.

2. Repairs, Fixes and Upgrades

The most common website maintenance tasks are those related to errors, bugs, broken links, and browser incompatibilities. There are server-side maintenance tasks that could be performed as well, but we won’t be considering any of those in this article. Let’s look at a few things a front-end developer could be responsible for in this particular area when performing website maintenance.

Checking Broken Links: Not Just URLs

Checking for broken links, both internal and external, is a fairly straightforward task, since there are a number of web-based and stand-alone tools that perform this task. But link checking can go beyond URLs; you can also check to ensure all images and external files are properly referenced. Here are some tools to assist with these tasks:

Dead Links2 is a free web-based broken link checker that is very easy to use, and has an easy-to-read results page. Dead Links only checks links from anchor tags in your markup.

Dead Links3

Xenu’s Link Sleuth4 is a free stand-alone link-checker application with numerous features. It checks broken links, image paths, backgrounds, external CSS, external JavaScript, and more.

Xenu's Link Sleuth5

Updating Your CMS & Plugins

If you’re using a popular content management system, chances are very high that at some point you’ll need to upgrade. This would be necessary for a variety of reasons — maybe the previous version has security problems, contains inefficient code, or just doesn’t work properly any more.

WordPress is one of the most widely used blogging frameworks, and it is used prevalently as a multi-featured content management system. Since there are thousands of WordPress plugins6 available, there are also bound to be hundreds of plugins that are no longer supported. Older, unsupported plugins that have not been updated by the plugin author to be compatible with the most recent version of WordPress could make your website insecure.

WordPress Plugin Directory7

Fortunately, in recent versions of WordPress, updating your WP installation is as easy as a few clicks. Also, your dashboard will notify you when plugin upgrades are available. Your plugin page also gives you the option to view details on a particular plugin’s recent changes. So, if your site is running on WordPress, updating your WordPress and related plugins should be high priority items in your website maintenance to-do list.

It’s important to note that the upgraded version of your content management system won’t necessarily support all tweaks and plugins that you have carefully installed and customized when the site was launched. So, as part of your maintenance routine, make sure you find newer versions of plugins or else replace them with reasonable alternatives before upgrading your CMS.

3. Browser Compatibility Testing

Ensuring all aspects of your website or web application are functioning properly in the most commonly-used browsers should be an ongoing part of your maintenance routine. While valid, semantic code will give you the best chance for cross-browser success, there is still the need to do manual and, if necessary, automated checks to ensure optimal compatibility.

Compatibility with Lesser-Used Browsers

Ensuring your site’s compatibility with IE6/7/8 and Firefox 2/3 on a PC is commonplace in website maintenance. But don’t forget to check some of the recent releases of lesser-used browsers like Opera, Chrome, and Safari. Firefox, Opera, and Safari should also be checked, if possible, on a Macintosh, because there is the potential for variations in rendering. I’ve personally seen CSS layout quirks that occur in Safari on a Mac, but do not appear in Safari on a PC.

Browsers

Automated Application Testing

Selenium Web Application Testing System8
Selenium is a suite of tools specifically for testing web applications. The suite includes Selenium IDE (a Firefox plugin), Selenium Remote Control (which automates the process), and Selenium Grid (which allows concurrent tests on multiple platforms).

Selenium Web Application Testing System9

Online Compatibility Testing

Browsershots10
Browsershots is probably the most popular tool for viewing screenshots of your website in multiple browsers and on multiple platforms.

Browsershots11

Adobe BrowserLab12
“Preview and test your web pages on leading browsers and operating systems — on demand. Adobe BrowserLab makes it easier and faster than ever before to see how your designs appear to your customers and audience. Get your results in real time, from virtually any computer connected to the web.”

Adobe BrowserLab13

Further reading:

4. Beyond Validation and Web Standards

Typically, website maintenance might consist of continued validation of pages, usually after features are added or content is updated. Validation might include both markup17 and styles18. There are things, however, that can be done beyond just simple validation of pages, since “valid” code does not necessarily equate to “good” code.

Cleaner, Leaner XHTML

Are there components in your markup that can be reduced in size? When you first coded the site, you may have suffered from a problem called “divitis“. This basically means there are <div> tags in your code that could easily be removed because they don’t serve a purpose. A perfect example is the <div> wrapped around a navigation section, like this:

<div class="nav-holder">
  <ul class="nav">
    <li><a href="home">Home</a></li>
    <li><a href="about">About</a></li>
    <li><a href="services">Services</a></li>
    <li><a href="products">Products</a></li>
    <li><a href="contact">Contact</a></li>
  </ul>
<div>

In the above code, in most cases, the <div> element is unnecessary. If a CSS enhancement is needed on the entire navigation section, this can be done on the <ul> element, since it too is a block-level element. Of course, there could be a reason that the outer <div> is needed, but the code would generally be just as flexible without that element.

What about too many attributes? This is not as bad as having too many <div> elements, but code can start to look cleaner and be easier to manage if you avoid habitually putting classes and IDs on virtually every element. Using inheritance principles in CSS, instead of direct targeting of each individual element can trim your code down to a more manageable level. It should be noted, however, that in some cases, while removing attributes could improve the performance of your markup, it could have negative effects on the performance of your CSS, albeit at very small levels19.

Further reading:

Improving the Quality of Your JavaScript

If you’ve created a lot of custom JavaScript, possibly in conjunction with a JavaScript library, your code might benefit from improvements. You can test the quality of your JavaScript code using Douglas Crockford’s JSLint22, which he calls “the code quality tool.” I wouldn’t classify JSLint as a “validator”, because what is valid in JavaScript is not always what is best. In fact, many JavaScript techniques are now understood to cause major performance issues.

JSLint23

So consider whether you can include quality testing of JavaScript code as part of your regular website maintenance routine.

Further reading:

Cleaning & Optimizing CSS

After years of development, CSS files can become bloated, hard to maintain, and unreadable. Along the way, you may have learned to produce stronger code, so any future additions would be acceptable, but what about going back to optimize and refactor older CSS code? Many CSS files, over time, will develop redundancies that hinder speed.

There are a number of tools available to help with this task, all of which should be used with care. Before doing any optimizing, be sure to have backups of all CSS files, because automated tools, if used improperly, can render your code unusable.

W3C CSS Validation Service25
Before doing any CSS optimization, you should first check to ensure your CSS is valid. Errors in your CSS code could cause problems when doing any automated optimization or refactoring.

W3C CSS Validation Service26

Clean CSS27
This online CSS optimizer offers many different options and displays details of all changes made.

Clean CSS28

Dust-Me Selectors29 (thanks, jeyaONE)
This useful Firefox plugin will tell you which CSS selectors are no longer in use, so you can safely remove them.

Dust-Me Selectors30

You also have the option to do all optimization manually, to ensure no problems occur. Of course, many optimization techniques cannot be automated. One example is combining multiple CSS files to minimize HTTP requests. Also, you may decide to change class names and ID names to reflect more appropriate conventions. (e.g. using the class name “promo-box” would be more appropriate than “blue-box”, since the color of the box could change).

Further reading:

5. Improving Accessibility

If you’ve validated your markup and used best-practices coding techniques, then it’s likely that your site’s content is, generally speaking, accessible to users that are visiting your page using a screen reader or other assistive technology. But, since newly added content could affect the accessibility of your site, accessibility testing should be an ongoing process.

Tools to Test Website Accessibility

You can do ongoing checks for accessibility using a few tools, some examples of which are shown below.

WAVE – Web Accessibility Evaluation Tool34
“WAVE is a free web accessibility evaluation tool provided by WebAIM. It is used to aid humans in the web accessibility evaluation process. Rather than providing a complex technical report, WAVE shows the original web page with embedded icons and indicators that reveal the accessibility of that page.”

WAVE - Web Accessibility Evaluation Tool35

A-Prompt – Web Accessibility Verifier36
“A-Prompt (Accessibility Prompt) is a software tool designed to help Web authors improve the usability of Web pages created in HTML format. A-Prompt first evaluates an HTML Web page to identify barriers to accessibility by people with disabilities. A-Prompt then provides the Web author with a fast and easy way to make the necessary repairs.”

A-Prompt - Web Accessibility Verifier37

Besides using the tools shown above, a simple way to perform ongoing accessibility tests on your web pages is to view them with styles and JavaScript disabled. This will give you a general idea of what content will be accessible through assistive technology.

Testing Mobile Access

If you haven’t yet set up a mobile version of your website, there are a number of books and online resources that can assist you in this regard. If your mobile site is already up and running, you can continue to run tests on newly-added content and make adjustments as required. Below are a few helpful resources to assist you in making your site accessible to mobile devices.

Mobile Web Design by Cameron Moll38
“Much has been written about mobile devices. Plenty has been written about developing websites for the so-called ‘standards era’ of the web. However, little has been written about the two colliding. This resource aims to fill that void.”

Mobile Web Design Book39

5 free ways to create a mobile version of your website40
This article discusses a few free services that will assist in creating a mobile version of your website.

Further reading:

6. CSS3 & HTML5 Enhancements

Although it is true that not all currently-used browsers support CSS3 and HTML5, new techniques in those areas can still be applied to work in newer browsers that offer support. During site maintenance, you can assess what areas of your website could be enhanced using specific CSS3 and HTML5 techniques. Of course, you would ensure that any modifications in this area will degrade gracefully in browsers that don’t support those new techniques. Progressive techniques, based upon CSS3 and HTML5, may help you finally get rid of the old code and all JS/(X)HTML/CSS-hacks that you had to use when the site was launched.

CSS3.info43
Everything you need to know about CSS3.

CSS3.info44

HTML5 Gallery45
A showcase of sites using HTML5 markup.

HTML5 Gallery46

Yes, You Can Use HTML 5 Today!47
In this article on SitePoint, Bruce Lawson describes how HTML 5 techniques can be implemented in a cross-browser fashion using some JavaScript workarounds to support Internet Explorer.

5 CSS3 Design Enhancements That You Can Use Today48
This article on Webdesigner Depot describes 5 CSS3 design techniques that can be used without harming the user experience.

Further reading:

7. Optimizing for Speed

A somewhat bizarre trend in recent modern web development is the seeming obsession with optimizing pages for speed — in spite of the continued rise in internet connection speeds worldwide. Although more people than ever before are on high-speed connections, more developers than ever before are concerned about the speed at which their pages load.

Analysis of a website’s performance during website maintenance may instigate a desire to make changes that will improve the speed at which pages load. If you’d like to include website speed optimization techniques into your maintenance routine, the following resources could prove useful.

Books by Steve Souders

High Performance Web Sites: Essential Knowledge for Front-End Engineers53
This book, by Steve Souders, is the ultimate guide to optimizing a website’s load time, offering 14 specific techniques that can help you serve pages to your users quickly and efficiently.

High Performance Web Sites: Essential Knowledge for Front-End Engineers54

Even Faster Web Sites: Performance Best Practices for Web Developers55
This is Steve Souders’ follow-up to High Performance Websites, providing a further 14 tips and techniques for improving website speed.

Even Faster Web Sites: Performance Best Practices for Web Developers56

Tools & Browser Plugins

6 Tools To Find Out Website Load Speed57
This article describes six different tools for testing the load speed of web pages, including Yahoo! YSlow, Google Page Speed, Internet Explorer’s Pagetest, and more.

15 Tools to Help You Develop Faster Web Pages58
Jacob Gube of Six Revisions gives an overview of 15 different tools that can help you analyze and improve the speed of your website.

8. Adding Comments to New (and Old) Code

If you’ve validated your code, and cleaned up unnecessary sections as outlined earlier, could your code benefit from further optimization? If time allows, during website maintenance, including comments in your XHTML, CSS, and JavaScript could improve the speed at which you make site updates in the future.

Commenting Your Markup

In some cases, comments won’t contribute a lot. For example, a <div> element with an ID of “sidebar” may not require a comment above it that says “This is the sidebar” — that’s obvious from the well-named ID. But your code could be easier to read with comments added to the bottom of sections where there are a lot of nested <div> tags.

The lower portion of your HTML code might look like this:

</div>
      
      </div>
      
    </div>
      
  </div>  

  <div id="footer">

  </div>
 
</div>

</body>
</html>

It might be difficult to make any major changes to this code without quickly being able to match the closing <div> tags to their opening tags. The same code would be easier for both front-end and back-end programmers with comments added, as shown below:

</div><!-- /content-inner -->
      
      </div><!-- /content-inside -->
      
    </div><!-- /content-left -->
      
  </div><!-- /main content -->  

  <div id="footer">

  </div><!-- /footer -->
 
</div><!-- /container -->
 
</body>
</html>

Commenting JavaScript

What about large sections of JavaScript that include nested loops that might be confusing long after you’ve written the code? It would be ideal to put comments in the code when writing it, but that’s not always done.

You can review complicated sections of JavaScript code and add relevant comments that will help you, when doing updates, to identify code more efficiently. Doing this type of maintenance might also help remind you to comment your code during actual development time in the future.

Commenting & Organizing CSS

CSS code can also be analyzed to see if improvements can be made by commenting or other organizational changes. I personally like to include global styles near the top of my CSS files, while indenting sections of CSS to correspond with the indenting of the HTML tags that they match up with.

Below is an example of commented and indented CSS:

/* FOOTER STYLES BEGIN HERE */

#footer {
  color: #A3A2A0;
  border-top: 1px solid #eee;
  min-width: 820px;
  height: 78px;
  font-size: .92em;
  line-height: 1.4;
  background-color: #fff;
}

   #footer p {
    float: left;
    width: 145px;
    margin-top: 5px;
   }
         
     #footer p span {
      width: auto;
      float: right;
      padding: 15px 25px 0 0;
     }

/* FOOTER STYLES END HERE */

Of course, when it comes to code improvements, what works best for your maintenance schedule and overall coding habits will be up to you. During site maintenance, your website may benefit from implementing some of these methods of commenting and organizing.

9. SEO Enhancements

As a front-end coder or designer for an agency or other company, you probably will not be responsible for SEO-related updates. If, however, this is a personal project or your own personal website, then you may need to do ongoing SEO maintenance.

Semantic, well-structured markup will automatically gain SEO benefits from the start — even without any specific search engine optimization techniques having been implemented. But, as time goes on, the integration of specific SEO methods may be required to boost your site in search rankings for particular search terms and phrases.

SEO

So, specific SEO optimization practices — optimizing keyword phrases, improving title tags, adding meta descriptions, writing good page titles, and optimizing internal link structure — are other items that could be added to a website maintenance to-do list.

Further reading:

10. Website Analytics & Conversions

Analysis of site traffic, bounce rates, traffic sources, and other web analytics-related statistics should be a regular part of a site’s ongoing maintenance. Of course, in an agency or corporate environment this area would fall under marketing or SEO. For a personal project, however, unless you’re outsourcing this type of work, you’ll need to continually analyze your site statistics to see where improvements can be made.

Improving “Call To Action” Areas

If you experience lower conversion rates than you’d like, your site could benefit from an adjustment in call to action61 buttons or similar components of your site. Wherever a user is located on your website, there should be a clear path to the services or products you offer. During site maintenance, changes could be made to ensure users are finding the most important parts of your website quickly and efficiently.

Google Analytics62

Analytics Tools

A number of free analytics tools are available, the most popular of which is Google Analytics, which is very easy to install. Most likely you’ve installed it on your website, but are you doing the necessary ongoing analysis?

You can look at keywords that are helping users find your website, and add new content according to those keywords. I once wrote an article for my own website based purely on a key phrase that was regularly used to find my site through Google. Now, since I wrote an article that specifically deals with the content of that key phrase, that page is the most visited page on my site.63

Google Analytics64
Google Analytics is the premiere website statistics analysis tool.

Google Analytics65

Analytics Toolbox: 50+ More Ways to Track Website Traffic66
This article on Mashable.com offers a list of more than 50 tools for tracking and analyzing website statistics.

Further reading:

11. Incorporating User Feedback

A high-traffic, successful website should have clear methods for users to provide feedback. The most basic of these is the contact form or email address on the contact page. You could also collect feedback through social networking, polls, surveys, and blog post comments. Whatever means you’re using to receive input on the functionality and usability of your site, your ongoing maintenance routine could incorporate many of the suggestions you receive.

Feedback on Twitter

Some suggestions for improvement could be simple bug and error fixes, or compatibility problems. These could be itemized and corrected in a relatively short time. Other suggestions received, however, could require significant layout changes or page restructuring, so would have to be factored into long-term maintenance.

Whatever the case may be, obtaining and acting on feedback from users will allow your website to grow and thrive, and will give evidence to your users that customer service is your priority.

Conclusion

Leaving a website untouched after its initial launch is, in many ways, like buying a car and never changing the oil or never filling up on gas — it might run fine for a while, but eventually it will slow down and come to a complete halt, providing no benefit to its owner or passengers. An ongoing routine of regular, scheduled analysis and maintenance using many of the techniques mentioned in this article could prove integral to the success and overall functioning of your website or web application.

↑ Back to topShare on Twitter

Louis Lazaris is a freelance web developer and author based in Toronto, Canada. He blogs about front-end code on Impressive Webs and curates Web Tools Weekly, a weekly newsletter for front-end developers.

  1. 1

    Thanks for this info. I’ll use some tips for my next project.

    2
  2. 2

    Really good topic you have covered everything in website maintenance

    0
  3. 3

    Great post again. I’m a front-end developer so this will definitely come in handy. :)

    The only thing that I do different is my CSS rule is all in one line.

    I used to do it in each line until my CSS files just started getting way too long.

    0
  4. 4

    Chris at dailyplush

    November 4, 2009 12:42 pm

    Thank you for this long post. There are really usefull informations about clean code and commenting. Thank you.

    0
  5. 5

    What a random collection of tips; the list lacks consistency. I do like some tools you mention though.

    0
  6. 6

    I had to say this article was rather pointless and boring. The quality of articles on Smashing Magazine is going down and down. Same stuff, different arrangement. I mean, how many articles of this nature have been published not only on this site but on other web related blogs?! Where are the “smashing” articles?

    0
    • 7

      Smashing Editorial

      November 4, 2009 1:23 pm

      This is the first article about website maintenance on Smashing Magazine, Mr. Anonymous.

      0
      • 8

        The title is not my problem and I think you can hardly call this the first article on website maintenance. Various articles published on this site talk about using the different tools: W3C validation, code commenting, cross browser compatibility, SEO, plugins… the list goes on and on. The point is there is nothing unique or interesting about this article.

        0
      • 9

        Hey SmashingMag
        I recently discovered your mag through your twitter profile and begun reading your daily articles. Im a young and aspiring web/graphic-designer and have been working since January this year – obviously being new to the web-dev industry I was very keen to learn and get up to scratch with upcoming technology’s and trends.
        Smashing is one of the best resources in my arsenal of tools, and everyday I look forward to discovering what new and exciting article you have in-store for me.
        You guys produce great, informative & inspirational articles!
        Without you guys, growing as a developer would not be as easy or exciting is it is.

        Thanks for all the hard work and keep it up!

        0
    • 10

      Everything has always been posted before, usually multiple times, that doesen´t mean everybody has read everything that has been posted before.

      As a great man once said, and it applies to all fields, not just design:
      “It´s all been done before, foolio.”

      0
    • 11

      I agree. Last posts are just getting more and more boring on SM. Maybe stop doing that book (personally i made order i don’t mind it’s so long..) but before book all was so useful and interesting to read. Now i just read about designs in russia or another country then about designs with fonts where the same was few weeks ago. In past you post some useful tutorias that really helped.. Well at least this post is nice for me as newbie,, but also it’s just basic.. but for me ok. Well i hope after new SM design and after book that will finally come to us.. site will get better with more quality posts too:) Thanks:)

      0
  7. 12

    Why no server tweaks? Do all those things above, and once your site matches them all, here comes one who puts your server down. Maintenance that!

    A properly maintained site requires good servers, regular security updates to them, backups and more, not just codewise issues.

    0
    • 13

      Bogdan Pop,

      This post is primarily discussing front-end related updates, and similar, as the title says. Those things you mentioned are just as important, maybe more important, which is why they will be considered in a future article, from what I understand.

      0
  8. 14

    This post has some very useful information. Does anyone know if there is a CSS cleanup tool that can remove CSS code that I have not used anywhere on my site? I always have a problem of adding a lot of extra CSS and then forgetting about which ones I should remove from the CSS file.

    0
    • 15

      jeyaONE,

      Thanks for asking about this. We added a tool called “Dust-Me Selectors” in section #4, under “Cleaning & Optimizing CSS”. Thanks!

      0
      • 16

        Thanks Louis! That was fast. This firefox plugin will be a godsend for me. I really appreciate your hard work and extensive research on this post.

        0
  9. 17

    Very useful post. I work on a very large site and I have printed this artilce to remind me of the maintenance chores that I always should be doing.

    0
  10. 18

    Nice list.

    However, optimizing for speed isn’t bizarre, with rising connection speeds our applications are delivering much more data and doing a lot more. At least in the back-end if you don’t optimize for speed you will get killed when you try to scale.

    0
  11. 19

    Good list, I wrote down each item as a reminder for myself.

    0
  12. 20

    Good post, although i do find it bizarre you talking about keeping a design clean when you have really over complicated the front page of Smashing with your latest update making it confusing to use – the look of the site is great, but if it wasn’t for the RSS feed i would struggle to find smashing articles as the site is now littered with articles from lots of sites, some of which i already read, some i used to avoid – not much choice now though.

    0
  13. 21

    Speaking of RSS… this has to be one of the longest feed articles I have received in a very long time. Don’t you folks believe in “excerpts” or “teaser” posts to entice me to view the entire article… if I choose to and not because you insist.

    0
  14. 22

    Thanks once again for the resources

    0
  15. 23

    Helpful post. Just wondering why the Apple logo is next to all the other browser logos… (I know what it says right before it, but it was still confusing at first glance.)

    0
  16. 24

    Nice post re. 7. Optimizing for Speed, i’d add the website accelerator WAX by Aptimize. If you have a dedicated server you just put it on and it accelerates your website – clever piece of technology.

    0
  17. 25

    i am front-end developer. i will use all tips my next large website. And also thanks for post.

    0
  18. 26

    “if possible, on a Macintosh, because there is the potential for variations in rendering. I’ve personally seen CSS layout quirks that occur in Safari on a Mac, but do not appear in Safari on a PC.”

    Differences? Really? Even after Safari on Windows uses webkit? Hmmm.

    0
  19. 27

    Useful list, I bookmark all item.

    0
  20. 28

    IMHO, CSS indentation gives no advantages, but just headaches.
    I used it in a couple of projects, but I found it harder to mantain. I rather use a normal list of rules, with good comments to describe and separate logical sections

    0
  21. 29

    Great article in my opinion, with some interesting tools. Thanks SM! :)

    0
  22. 30

    I enjoyed this article and it’s given me a few things to think about.

    The one thing I can’t agree with is the “Commenting Your Markup” section. Adding these comments to the HTML just creates unnecessary noise on the page.

    Also, if you’re spending hours reducing your CSS rules to shorthand (a common kilobyte saver) why spend all of those kilobytes on pointless HTML comments.

    Any reasonable text-editor for HTML will tag-match and it only takes sensible indentation and the general avoidance of div-itus to keep things readable.

    0
  23. 31

    As “Browser Compatibility Testing” I prefer Applications like Browserpool or the IE-Tester. Screenshots-Services aren’t the same and sometimes not really helpful!

    0
  24. 32

    Great article! The tools listed help me a lot to make my work most complete.

    0
  25. 33

    Very nice roundup of useful tools!

    0
  26. 34

    Great article with good resources!
    Keep up this good work!

    0
  27. 35

    SM tell us something we don’t know.
    I know that it depends on the readers experience.
    Some find it useful others boring.
    So why don’t you categorize the posts as beginner / advanced.
    That way the reader will see what he expecting to see

    0
  28. 36

    xenu sleuth.

    been using it for around 10 years.

    killer app.

    0
  29. 37

    These are great. I’m going to try the adobe browser lab today. I’ve used browser shots but it’s often too slow and only takes shots of my site half loaded. Especially sites with Javascript.

    0
  30. 38

    Good article. I was already using some of these but got to know many that would increase my efficiency. I really enjoyed this article and look forward to upcoming one. Cheers !

    0
  31. 39

    Thanks for the information. Not yet fully into Freelancing yet – but this is definately saved in my Front_End Folder for future reference. Thanks again!

    0
  32. 40

    Ensuring your site’s compatibility with IE6/7/8 and Firefox 2/3 on a PC is commonplace in website maintenance.

    Ensuring your site’s compatibility with IE6/7/8 and Firefox 2/3 on a PC is commonplace in website maintenance.

    Ensuring your site’s compatibility with IE6/7/8 and Firefox 2/3 on a PC is commonplace in website maintenance.

    3 Articles after the redesign we have our first out-of-place article.

    0
    • 41

      Many development blogs and tutorial sites do not support IE6. The article is not talking about development blogs, but general development done for clients and on in-house design teams.

      0
  33. 42

    Interesting that Flash is discouraged – I’ve found HTML/CSS to be a true nightmare in terms of consistent appearance across browsers, and Flash to be a very, very welcome relief from that.

    Also – does Smashing know that when running a search on the site, none of the links that are returned work?

    Wait, my bad, some do work – on Safari, but not on Firefox.

    0
  34. 43

    Yet again, another brilliant article from WDD. Thanks for this wealth of info and tips.

    0
  35. 44

    Greath Article, it make me clear about the way to developing a lot.

    0
  36. 45

    As a professional website manager, I found that article very interesting. I was thinking I should write down some tips for developers so they think more about website maintenance when coding, to make future maintenance tasks easier for them or whoever (a website manager?) would have to do it. I think you’ve done it :)

    0
  37. 46

    This is the first article on SM about site maintenance…
    Then thank you for deciding to publish it. This article was a great help, we need to learn more about maintenance rather than focusing on huge, all-around updates everytime we want to change a site feature. Maybe someone can write an article on the benefits of small, inconspicuous site improvements versus massive overhauls. =)

    0
  38. 47

    I found an excellent tool for testing IE5.5 through to IE8 online all on one installation of windows.
    Its called IE Tester and its free!

    0
    • 48

      I’m one of the new viewers and I realy LOVE your desgin and colour-use.Well done and I’ll keep coming back to check out the updates!

      0
  39. 49

    What a great resource! I apply most to my practices today, but one thing I need to focus on is mobile standards. Improving my knowledge on HTML 5 / CSS3 would probably be an early resolution for next year too!

    0
  40. 50

    Great post.

    However, I’ve found that the hardest part about maintaining a website, particularly when you work by yourself is always keeping on top of outdated content, while still developing new projects.

    What I’ve done to help the issue is to create an excel spreadsheet of my sitemap. Included in that spreadsheet is all of the items that need to be updated, page-by-page. Then I specify which month out of the year it needs to be updated. If it’s a monthly-change then I designate it in the spreadsheet. It’s a calendar-based content outline. Then, when I’m finished updating the content, I mark it off when its done.

    I think these are the kinds of topics missing from our the web development blogs. Particularly because most of the major bloggers design a website, build a website and hand it off. I’m interested in what systems and practices the person they hand it off to has in place.

    0
  41. 51

    Tidy up my XHTML ??
    Don’t be silly, I have never touched the stuff, and no-one in their right mind should still be using XHTML after it has officially been killed off – start using HTML5 if you want something forward-looking.

    Xenu is a great tool, but please, don’t indent your CSS, it makes it really hard to read, and gives no benefit at all.

    0
  42. 52

    Some really useful tools. Thanks!

    0
  43. 53

    While some people have criticized this article, I found it to be very useful and helpful. Thanks for another quality post!

    0
  44. 54

    Hi Buddy!!!

    Here your website maintenance information is useful to me…
    Thanks For Sharing…

    0
  45. 55

    I think these are the kinds of topics missing from our the web development blogs. Particularly because most of the major bloggers design a website, build a website and hand it off. I’m interested in what systems and practices the person they hand it off to has in place.
    Sheena Rai
    Technetto

    0
  46. 56

    Thx for sharing!

    Despite its (old) age this article could become one of the most relevant ones for the next few years!

    Super awesome step-by-step “tutorial” / summary!

    Kind regards,
    - Alex

    0
  47. 57

    Yes, thanks for writing and posting this, it’s a great overview and even though not all of it was relevant for me it surely had some nuggets of knowledge in it!

    Mishy

    0
  48. 58

    Keep these articles coming as they’ve oepned many new doors for me.

    0
  49. 59

    Great article. Some of these solutions could help websites across all industries increase website conversions. For me, to be able to increase website conversions, first you have to improve visitor experience.

    0

↑ Back to top