Some of you are probably thinking “Hang on! What even is a plug-in?” Without getting super-geeky, it is basically a way to do a lot of things to any jQuery object (thus being able to utilize functions and methods that already exist) whist keeping all the complex code for the single-track purpose that it serves out of the files where jQuery is being invoked. Maybe a better way to explain that is to use the example that, if you wanted to add AJAX validation to form elements and that required 200 lines of code, having that together with all other JS would be confusing in the future. However, if you were to invest a little more time during initial development writing that 200 lines with a plugin mindset, you could create a function that would fire off all the magic on a selected object (assuming that the plug-in is linked along with the library itself). In the file that you deal with on a day-to-day basis, this would turn those 200 lines for that function into a single one. Just in case you’re interested, it just so happens that that very example I just outlined (the first that came to mind) is actually a real plug-in.

Introducing Stageform

Admittedly, part of my motivation for creating jquery.stageform.js was that I’d never done it before and needed a purpose on which to base one. Having said that, the function that I decided on was splitting a form into stages in a semantic way and only showing one stage (elements collecting one type of data) at any time.

Getting More Information

The latest release, a working demo, feature requests and an outline of how to use all options offered by the plug-in are all available as part of the GitHub repository for this project.

Tools For The Job

Before I even really got into specifics of actually checking my pages, I ran across the hurdle that is having to figure out what to use. A sin that I see committed by a lot of people in the web world (me included) is just saying something along the lines of " we need to make sure this markup is understandable to screen readers." The gaping flaw in that statement is generalizing screen readers and assuming that they all work the same as this is simply untrue. From what I found, cross-screen-reader quirks can be twice as hard to troubleshoot than cross-browser problems but aren’t spoken about half as much. The reason I say this is that, with the browser market, the stats make it easy to decide which browsers to support but, using screen readers, it’s less cut-and-dry.

These are the tools that I had access to and so chose to test with (remember though, the more apps you can test the better):

• VoiceOver – This is the tool built in to OS X that can read out content for most of the default applications. Thankfully, one of those that it works with is the Safari web browser.
• Fangs – An add-on for the Firefox web browser that allows you to load a page and then have a text based transcript of the elements that it found.
  

Things That I Noticed:

ALT Attributes For Images Not Placed In Context

So, the "alt" attribute should always be used on image elements because it is shown in place of the image if it fails to load but is also checked by screen readers. VoiceOver just spoke the text placed in the attribute but didn’t make clear that the text was connected to an image. The way around this one is just to include notation that is an image within the attribute value before any description of the contents.

CSS Styling Matters

A common accessibility tactic is to have an invisible link at the very top of a page to jump the header and navigation and dive into the important content. Theoretically, the benefit of this is that, a user being talked to doesn’t need to sit through all the stuff for the menu (which would normally come before the actual content) because they have a handy link to jump to where they need to be straight away. Upon trying it, the narration completely skipped over it because the CSS told that link to display: none. If that is the reason, then you have a choice to make; either you display the link for screen readers (and everybody else) even though most of the visitors won’t need it, or you can just leave it out all together.

Little Respect For The "tabindex" Attribute

The tabindex attribute can be applied to any HTML element and is a method to order the elements on the page in terms of tabbing through them with the keyboard. Unfortunately though, in my testing, the applications still failed to show up elements in the order that I had specified.

Conclusion

As I said at the start, those are just some interesting things to think about but, if you have any more information, please feel free to share down below.

An interesting survey of screen reader usage

Separation Of Data, Output and Styling

If you imagine any modern, static, webpage, you probably have the HTML file (describing the type of content in any given place on the page) and a CSS file (applies visual styles to the markup). Contrasting this to the dynamic approach in which the content is stored in a database and outputted within the markup, what you have is an extra layer of abstraction which is never a bad thing. The benefit of that is the ability to easily alter front-end template files without worrying about the data on the site being lost. A bit of a side advantage to this thought process over the one previously noted is that it makes allowing users to select styles for a predefined list much easier.

Security Becomes More Important

Content management systems are software packages that run on servers and more than just some files and folders. Like other apps that run on your desktop OS, they too have updates released for them that need to be implemented. It could be argued that, because your website probably stores data on visitors, you have a much bigger duty to try and ensure that their data isn’t exploited. All this translates to the fact that you may have to dedicate a bit more time to ensuring that such a website remains secure than you would with a comparable static one.

Less Control Over Individual Pages

Due to the abstraction that I noted before, a CMS based site will by default give users less control over the styling of pages on an individual basis. Although to some it may seem so, this is no bad thing. The reason I say that is that, having completely different styling across pages of a single website makes the experience seem disjointed for users. Just to clarify, in no way am I saying that dynamically generated pages should stifle good design. A better explanation maybe is to say that, when theming for a system, the focus is no longer on the look of a piece of content but on preparing styles for the different types of content that a user may add to add to the system.

The Parsing Of Logic

As I’ve been drilling into your brain throughout the article, what makes a CMS different than static HTML is that it relies on running queries that return data from a database. This requires that you have access to server-side technologies (most commonly PHP and MySQL) in order for it to function. Quite clearly, that means the you need to verify that your server can run the scripting languages as required by whatever package you use before taking the time to install and set it up.

From the fact that logic is passed comes a very useful side effect. For example, most systems will allow you to check whether the currently viewing user is logged in or not and then served up different content or layout as a result.

Quick note: even though pages in CMSs are built on the fly, what ultamatly gets sent to the browser is just regular HTML.

So, I hope those tips were helpful to any website owners looking to make the jump away from static pages to a dynamic system.

Having spam links on your site can cause you big problems beyond just bad semantics. Even though you can’t see them, Google can. My point being that, if a search engine crawler comes to a page and finds any content not related in some way to the main subject, the search rankings for all pages on that domain can suffer.

Needless to say, I’ve turned off and uninstalled the offending script but also urge you to check the source code of your pages once in a while to ensure that there isn’t more then you bargained for lurking within.

If you’re part of the design community in any way, shape or form then you are probably aware that Adobe products are often coveted within those circles. I say coveted (as a posed to appreciated) because of how expensive the dam things are; the barrier to entry is less like a barrier and more like a solid wall with hot lava on the top of it. Well, as is hinted toward by the title, Adobe is finally listening to the market and the fact that not everyone who wants to do some casual design work can afford to throw £700 at the project. The way they’ve answered it is to come up with the idea of what is broadly software rentals on a number of their more premium programs.

Before talking too much more about how this new model works or giving more two cents, I just need to say that this is already old news. Just now have I discovered it though after looking in the online product store just a few moments ago.

Let’s get into some details about this and see where the catches arise ’cause there definitely are one or two. So, the first thing to mention is the fact that the subscription route cannot be taken with all products although is open for the big guns. Next is the two sub choices: you have the choice to buy access to the product for one month at a time or to commit yourself for a full year (which saves you quite a sizable sum). In itself, the second of the two paths is one oddity. When I first saw it, I assumed (as would most I think) that the year-long option involved paying one lump sum and having access to the given product for a full year. Upon closer inspection, that’s not actually what it means at all – what it means is that you’ll be committed for a year but, instead of a handing over a one big ball of doe, the payments will still be charged to the registered card on a month-to-month schedule. In simple terms, you can’t use the subscription option to buy access to products for more than a month at a time in a single payment. Another important consideration is that (according to another post about this) the roadmap for Adobe releasing new versions of applications to users accessing them via this channel is set at around 24 months (just less than double that of the release of the normal version).

For me, the lack of any semi-permanent service is what kills the fire. Having said that, I do think this is an awesome step forward and will offer a load of awesome apps to new sets of people. Most useful for me is the idea that I could now rent access to Photoshop for one month whilst doing a short-term development project without having to hand over a lorry full of notes.

More information can be found over here. If you’ve got thoughts on this, I’m all ears!

Some Notes

In order to have this work correctly, you’ll need to be running PHP on the server you put it on. Also, keep in mind that this method of securing a page is far from foolproof and is just for the purpose of being a learning experience.

Download Project Files

As featured in an earlier entry, I recently hit this problem while restructuring and redesigning this site. Throughout the very long process, I discovered some things that will hopefully mean I won’t find myself in the same position again any time soon (there were almost 5,000 meaningless comments when I first looked). Not one to keep any pearls of wisdom close to the chest, I thought that somebody else might benefit from hearing what worked for me and maybe it’ll help to stop them getting into the same ugly situation that I was.

A Note About Akismet

This is a plugin that ships with WP and as a middle-man between your server and the API for the companion web service. Using a growing database of comments submitted by users, the algorithm decides which posts are spam and leaves them in a queue that can be reviewed by the site administrator. Although, I’ve not used it myself, reports for those who have appear to agree that it’s a pretty solid service but far from perfect. Plans are available in pricing from free to $50/month. I personally don’t see a need to be a subscription to such a service as it simply isn’t worth it for the amount of traffic I get.

Establishing What Is Spam

In my experience, this can be the most important but also most difficult step to take. Setting yourself a definite list of criteria allows you to more easily decide what is malicious and what isn’t. Moreover, you can make this much easier on yourself by displaying the set of rules to visitors nearby wherever comments get posted. This will create expectations of visitors which, if not followed, can offer an indication as to whether the comment can from a real person or a computer script. Humans can read the guidelines that you set but machines can’t.

The Delete All Pending Comments Plugin

Again, this is a plugin that you can drop in to your WP directory and run with. Quite simply, it does as it says on the tin and was specifically created for sites victimized by spam bombing. As the WP admin paginate pages of comments not yet approved. However, if you’ve got twenty pages worth of comments that are spam, it can be extremely laborious to go through each one and mark it as spam. Once activated, this great little script will add an option to the backend which will allow you to delete all pending comments at once.

The WP-reCAPTCHA Plugin

Even if you think that you don’t know what a CAPTCHA is, you’ve likely seen one before. A CAPTCHA is the little box at the end of many webforms that asks you to type the letters that you see in the graphic. They work because bots cannot currently electronically read images so, requiring that it is entered at all points on your website that user input will virtually eliminate spam from automated services. I choose to use a service called reCAPTCHA (hosted by Google) because it is reliable, has APIs for many systems and input from users is used to digitize books.

That’s all I’ve got in terms of recommendations but they do a pretty decent job together. Of note though is the fact that, although these solutions should help quite a bit, they aren’t foolproof. It’s still really worth checking the comments once in a while to ensure nothing has slipped through the net.

If you have any more suggestions or advice to share, please post them down below.

Naturally, I’m going to begin with the reason for such a sudden change of heart. If you were a visitor here prior to the reboot, the misfortune of seeing the off the shelf design I was using. That very situation came as a consequence of the fact that, months before, security of the website was compromised and used in a destructive manner. Anyway, the point is that I now feel that it’s time to forget all that and the first stage had to be creating a fresh new image. On a side note, some of the people who follow my thoughts on the web wanted me to do a series (video) on steps required to theme a WordPress blog and I decided there was no better time to do it than it would be based on a project with a real purpose and real goals.

Now we can dive in to all that geeky stuff that we love and start talking about the actual changes made from both a technical and user experience perspective.

Improved Commenting

Ok, ok, I know this may sound like a terrible dull way to push from but – during the revamping – I spent an amount of time on and thus where the most improvement can be seen. Anyone who braved the comment section of any article before will have discovered that they had become spam havens. By the time I looked through the comments panel in the backend, an army of almost 5,000 spam comments was fighting to overtake the posts.

As a mechanism to deal with the problem, I made a number of decisions about exactly what constitutes a meaningful response to a post and used them as a basis to decide what deserved to be published. They are available above the comment posting form of any given article.

Better Approach To Writing

All the time that I was making technical alterations, one thought kept occurring to me – the name I chose for the site when I created it around three years back was mine and not one based on inspiration from my interest in technology. After letting that idea sit for a bit I choose that this is my corner of the web to post whatever comes to me that I think other people might want to read. In future, you’ll see that choice result in posts about everything from my favourite television to politics and some tech – obviously (!). Moreover, to try and keep my inspiration flowing, I won’t lay down any targets for myself about how often I’ll post or how long each one will be. In the past, I think not being serious about how much time I could dedicate to this was my downfall. To give a point of reference, due to the fact that I only have the use of my right hand and can only type with my index finger, it has taken me at least three solid hours to get this far in writing the article. Right now (apart from being a little tiring) that isn’t a major issue. When it will become one is upon my return to college in just shy of a month. Then I’ll have lots of new challenges and lengthy assignments to complete. At which point, spending this amount of time typing away after a six hour day in the classroom begins to sound far less appealing. The moral being that, this time, I’m not going to put myself in a position where there will be lots of new content to begin with and then fade ‘cause of lack of ideas.

Cleaner Markup and Design

I hope the posts here are testaments to the fact that semantic code is important to me. Helping to accomplish that throughout this design are certain structural tools unique to the upcoming HTML 5 specification (use of the aside element as the sidebar hook for example). You’ll notice though, if you snoop around the source code, that I didn’t take implementation of an evolving standard to the bitter end. An earlier post discussed my reasoning for this philosophy but the upshot was that, in my view the industry isn’t yet in a place where it can ignore the use of IE 6 and the constraints imposed by the use of it. Sparing us all the lengthy justification, I ultimately settled on using new elements for content that isn’t critical to access of information; hence using them in the sidebar and footer areas but little in the header and main content.

Rating System Employed For Posts

My idea to implement a rating system for posts came as a solution to the fact that I’d chosen to remove all comments that merely showed a general likening or disliking toward the content and thus added no real value to the discussion of the way that comments should. Approaching things in this way have several advantages; the people who wish to show a general opinion can do so in a structured manner and there will be no confusion over which comments are spam. To further explain, if a “visitor” now posts a general comment, that comment is almost guaranteed to be non-genuine because it has fallen outside the pre-defined course of action for expressing that kind of view. Spammers can’t add a link to the number of stars selected!

As of the time of writing, I’m using the kk star rating plugin to handle all the fancy stuff but, as it has a few output display issues, that is liable to change when I find a better option.

Print Stylesheet

This is something that I wish I didn’t have to talk about but I feel that I do. I say that because, in my opinion, we have reached the stage where this ought to be a given but still isn’t. For anyone scratching their head right now, a print stylesheet is a set of CSS rules that only apply when the browser print function is invoked. A lot of popular sites have dedicated “print this page” button instead of a stylesheet. The reason that the CSS method is better is that printing something uses the workflow that the user has become accustom. Although not currently completed, I’m working on it to be completed within the next few days.

Additionally, I’ve started to clean up grammar and spelling in some of the articles.

Over the coming days and weeks, I’ve got more improvements on the way but that’s all for now. If you’ve got anymore ideas about improvements that could be made or you see any issues, please feel free to leave them in the comments.

The first big issue, especially for freelancers, is job titles. Some refer to themselves as designers/developers, some as simply graphic designers and even some as inflated as “information architects.” The problem is that many customers will expect the developers to be able to take care of all their web needs. That instantly creates a problem because, to avoid turning work down, the person then quickly has to learn more skills. Without realizing it, by doing this, the client is slowing the development of the site which will make it more expensive. Even worse, making the designer learn more skills that they’re not expert in could make the final product suffer. So, we need to find a way to better define job titles which are more universally understood.

Next comes the problem of qualifications and experience. From what I know about the industry, getting work is less about formal certifications and more about a strong and long-standing portfolio of work completed in the past. This introduces the problem of where you get that experience from when starting out. One way that I’ve personally tried to overcome this was by offering to take design jobs at no charge. Doing that for a while really opened my eyes in regards to just how demanding people can be even when they’re getting something for free that would run them hundreds on the open market. This quickly made it crystal clear that, even though it helped me to build a portfolio. I could not possibly devote every evening to it and see no financial return. So, the problem still stands, how the hell do you gain trust if nobody is willing to trust you in the first place?

Add to all of this the issue of not knowing what kind of qualifications and references that commercial design firms will expect and you’ve got yourself a big fat pile of unknowns. On that note, I saw an article that gave poll results from readers of a large design blog relating to the relationship between having an academic degree and their current web design job. I’ll let you go over to the page if you’re interested but, in summary, the results are a very mixed bag. Although I personally believe that a range of skills are important in case you want a career shift in the future, one thing the article does reinforce is that this is not always entirely necessary.

Free free to give your thoughts down below.

What angers me most is that, in order to get the grades I will need for the job market, I am required to produce a product whilst knowing that it drops the ball on several major areas that I learned on day one of my design journey. For example, we were told that the root location of all websites is ALWAYS index.html. Well, a person only has to install WordPress or Moodle (which, by the way is used by the college in question) to see that such a claim is a bare-faced lie! We were also told that writing HTML from scratch is “the old way” of doing things and that people now use graphical web authoring tools. If the teacher who told us that bollocks knew the first thing about the industry, they would know that this is simply not the case. In actual fact, all respectable web developers would tell you the exact opposite as it helps them to achieve cleaner code.

I guess my point is, we don’t want the future industry being restricted by fundamentally incorrect information. If people can’t do something right, they shouldn’t do it at all.