Good Planning – The Secret to Developing a Great Website, Program, or Application

Good Planning is critical to the success of any project.  Start off a project by creating a simple purpose statement.  This is just a one sentence description of the problem that needs to be solved.  An example would be something like this:

“Our website will engage visitors to learn about the products we sell through great content and images, and ensure an easy purchase through our secure shopping cart.”

Just like submitting a screenplay to movie producers, you have to produce a one-sentence description summarizing the plot of the script.

This design is approved!

Approved!

Once you get a concise idea of what it is you are going to develop, you can then write a program specification (or spec) which is very detailed.  It forces you to think through a project from start to finish before you write a single line of code.  This is where you interview anyone with an opinion about the project happens.  Requiring your customer or employer to review and approve your spec before you start writing code will help to avoid errors, misunderstandings, and conflicts down the line.  It might include the history and what problems the program is intended to fix, what existing processes are being replaced (if any), what the program is expected to accomplish, and what benefits the new program will bring.

The program spec goes further in detail with important assumptions about the project, including the languages it will be written in, who will be the audience, what level of security is needed, who will be using the program, and perhaps what components might be divided up and to whom.  Of course, depending on the size of the project, it can be a few paragraphs or many pages.

The requirements part of the spec is the most important.  This is the painstaking, step-by-step detailed explanation of how the program will work and what it will look like. What is the overall feel, look and objective of the company?  What will the user be presented with and what will they need to provide, what information will they get, how the input is transformed to the output, how the information will be stored, how it will be retrieved, and what to do if there are problems.  This is also where you nail down imagery, font choice, color scheme, and layout.  List the information you need and the feedback you require and interview those individuals who will be giving the feedback.  Nailing down the design and function details is critical.  You don’t want this part of the process to drag on – which it can – but changes to the design or layout after you’ve started developing can become very problematic.

The importance of a detailed spec is what will determine the timeline and cost.  Depending on the project, you may need to set milestones.   Milestones are dates that you expect major pieces of the program to fall into place.  Give yourself plenty of leeway because things might not work out as expected, which can often be the case.  Milestones are great because they help the developer plan his/her work and monitor the timeline.  This can help with documenting any further changes beyond the agreed upon spec.  Unforeseen changes will affect the timeline and the overall cost of development.  This is a vital component for designers, developers or programmers.  Changes made to the agreed upon spec are fine as long as they are approved or there is appropriate compensation for changes affecting your scheduled timeline.  It is paramount that everyone with an opinion agrees to and understands the purpose of the spec and the timeline.  If you are a freelancer or contractor and find yourself in a position where a project is going longer than anticipated or agreed to without compensation, this can spell disaster.  This is serious business and your time and effort shouldn’t be dismissed.

You need to be thorough and keep your explanations simple and clear.  There is no right or wrong way to write a spec.  You are creating a blueprint that you and someone else can understand and work from.  Don’t leave anything open to misinterpretation.  Use graphics, illustrations, tables (wireframes) to clarify the details because you really don’t want to be derailed in the middle of the project after you’ve started writing the code.

An important thing to remember – your client or employer expects you to do the job you were hired for, and you expect them to trust your judgment and ability to do the agreed upon project as stated in the spec and timeline.  Any changes to the spec are pretty big issues and shouldn’t be taken lightly.  Respect is a two-way street.

If you write an accurate, detailed, and easy to understand program, application or design spec that your employer or client approves, your project will just about write itself.   Happy coding!

Advertisements

JavaScript polyfill for HTML5 and CSS3 (aka shim or shiv)

Modern Responsive and Responsible Design using HTML5, CSS3 and JavaScript

Web developers are commissioned to build websites for modern browsers today for every type of computer, including phones and tablets.  This is an exciting time to jump on board with a variety of developer tools and learn how to design for the future.  The problems arise when a designer looks at  the website with older Internet Explorer browsers including IE8, IE7 and especially, IE6 because  of the way they respond (or actually do not respond) to HTML5 and CSS3.  It is very important for web designers and developers to understand the problems and to figure out how to work around these issues.  We all want to build for the future, but lets not forget about the viewers who haven’t received the message about the rich internet experiences they can get from Chrome, Safari, Firefox, IE9, etc.

It is easy to forget when you have upgraded equipment and use Windows 7 and several Apple products used for development.

Of course IE9 is the default browser for Windows7 (which you have to purchase), but it also gives developers the ability to view websites in IE8, IE7 and IE6 by using the development tools found in the F12 console.  If you use Dreamweaver CS5.5 or CS6, you can also view your designs in the IE browsers as well as a variety of phones, tablets, Chrome, Safari, etc. by using the Adobe Browserlab developer tools console.

The PhoneGap framework allows developers to build apps and convert the web files into code that runs as a native app on the mobile operating system of your choice.  Dreamweaver comes with the PhoneGap kit and makes packaging apps and testing them simple.  You can compile and test Android, iPhone and iPad apps!

Mobile device development has challenges and opportunities.  Progressive enhancement using CSS3 and HTML5 allow leading designers to build a rich website for tomorrow’s browsers and devices while making sure the older browsers are rendering presentable and enjoyable pages.    It is not enough that a website designer can use Dreamweaver (or any CMS for that matter) to design websites but never look at the code.  The magic is in the code.  The days of copying and pasting are over if you expect to build unique, customized websites.  You have to know what issues surround the different browsers and fix problems as they arise.

 There are two JavaScript codes that have been crafted to help developers work around the Internet Explorer problems.  

1.  A fast & lightweight polyfill for min/max-width CSS3 Media Queries (for IE 6-8, and more).  Here is the link:  https://github.com/scottjehl/Respond.  It works like a charm.

  • Copyright 2011: Scott Jehl, scottjehl.com
  • Dual licensed under the MIT or GPL Version 2 licenses.

The goal of this script is to provide a fast and lightweight (3kb minified / 1kb gzipped) script to enable responsive web designs in browsers that don’t support CSS3 Media Queries – in particular, Internet Explorer 8 and under. It’s written in such a way that it will probably patch support for other non-supporting browsers as well (more information on that soon).

If you’re unfamiliar with the concepts surrounding Responsive Web Design, you can read up here and also here.

Demo page (the colors change to show media queries working)

2.  A frequently used common method is to use the shiv:
<!–[if lt IE 9]> <script src=”html5shiv.js”></script> <![endif]–>
To use this script, download the html5shiv and roll it in to your own code (ideally minified).

Full original, uncompressed source available here: https://github.com/aFarkas/html5shiv

This source code adds new HTML5 elements (which is simple code), but also supports printing HTML5 elements and includes the default styles for HTML5 elements, like block on article and section.

Getting it to work in the browser was easy, @jon_neal and afarkas made IE actually print HTML5 elements – these guys are to take all the credit. Please take a moment to thank them!

Whichever one you use must be included  in the <head> of your file but doesn’t matter if it appears before or after the CSS – but for the sake of performance, it would make better sense to include the CSS first then this script.  Of course, you have to upload the file with your website, or refer the code to an outside source.

shiv or shim?

Common question: what’s the difference between the html5shim and the html5shivAnswer: nothing, one has an m and one has a v – that’s it.  It’s all just polyfill.