• Feed RSS
Showing posts with label Web Development. Show all posts
Showing posts with label Web Development. Show all posts

5 Cardinal Sins of WordPress Theme Development

"We talk alot on this site about tips and tricks for getting what you want out of WordPress… but today we’re going to take a step back from the technical stuff to look at some practices, bad habits, and coding faux pas that would be better left in our past. So, forgive the heavy-handed post title (haha!), we’re about talk bring up 5 surprisingly common practices that are blemishes on the platform.
Two of the nicest things about working on WordPress Themes is that fact that we get to target in an incredibly flexible environment (that is, the web) and we have solid documentation to help guide us through the process (that is, the WordPress Codex).
After all, if the theme works, does clean, maintainable code matter?
But there’s a danger that exists in theme development, too: we can completely forgo best practices for working with the web and completely ignore the documentation. Specifically, there’s nothing that forces us to write clean, maintainable code. After all, if the theme works, does clean, maintainable code matter? Furthermore, why go through the effort of following WordPress best practices if the theme appears to work fine?
Weak arguments, right? I don’t know – the more I’ve worked in the WordPress space, the more I’ve been surprised which how much bad code actually exists. As such, I thought it would be fun to outline five cardinal sins of WordPress Theme Development.

Ignoring The WordPress Codex

As with most programming languages, frameworks, or libraries, WordPress includes a massive amount of documentation. The WordPress Codex is arguably the best resource that developers have for working with WordPress. After all, it provides documentation for the majority of the application.
But the WordPress Codex often goes above and beyond standard documentation – in addition to supplying function names and parameters, the Codex provides rich examples for how to use many of the API functions. After reading any given article, you’d be hard pressed not to find a clear example of how to the function in question.
In addition to the API, the Codex also features a variety of other articles related to development:
Whenever I’m working on a theme or a plugin and I hit a point where I think I need to write a custom function to achieve something, I’ll search the Codex first. The majority of the time, a function is already available that helps with what I need.
Every serious WordPress Developer should regularly use the Codex when working on any WordPress-related development project. Ignoring it can often lead to creative, but untested and unstable solutions that can cause more harm down the line than good.

Not Localizing Your Theme

A few years ago, if you were to ask me my thoughts on localizing a WordPress Theme, I would’ve said that it would depend on the marketing that you’re targeting. That is, if you think the audience is going to use a language other than your own, definitely do it; otherwise, there’s nothing wrong with leaving the theme translated in your own language.
Fast forward a few years and WordPress’ is powering millions of sites on the Internet. Sites all over the world are using the application to drive their site’s content. On top of that, it’s becoming increasingly common for developers to supplement their income or even make a living off of working with WordPress.
Because WordPress has been so widely adopted and because the Internet has made the world so flat, the market for any given theme is not limited to a single language. On top of that, WordPress makes it so incredibly easy to localize your theme and it requires so little extra effort, that I now argue that localizing your theme is no longer optional.
For the most part, you need to understand three things:
Other than that, there’s very little extra overhead that comes with localizing a theme; however, I do recommend that you take a look at the Translating WordPress article in the Codex. It outlines the three things above and goes more in-depth on each.

Theme File Disorganization

Developers talk a lot about code organization and maintainability. Personally, I think that it’s much easier to give lip service to those principles than actually follow through with them, but they are important.
The thing is, they look different for each project type. Some applications are written in a single language and run on a desktop, some applications use two languages and run on a mobile device, other projects – such as WordPress Themes – can use anywhere from three (HTML, CSS, and PHP) to four (through JavaScript) languages. Additionally, certain components of the theme run on the client side, some run on the server side, some community directly with WordPress, and others communicate directly with the database.
To say that there’s potential to sacrifice maintainability is an understatement.
But it doesn’t have to be problematic as there are certain standards that WordPress suggests for organizing your theme files. Specifically, the Codex details how to organize your PHP template files, your stylesheets, JavaScript sources, and images.
  • Template File Checklist provides a listing of the files that compose a basic a theme and details what each should include.
  • Template Hierarchy provides an explanation for how all of the theme files fit together and how WordPress renders each during its page lifecycle.
  • Stepping Into Templates also provides a detailed breakdown of templates and the WordPress page structure for each.
  • Theme Development is a massive article that encompasses everything surrounding theme development.
Sure, it takes a little extra effort organize your files rather than just doing enough to “get it working,” but the dividends payout over time as you begin working on the next version of your theme or as multiple developers begin to work on the same codebase.

Disregarding Coding Standards

Of course, file organization is only part of the development process that affects organization and maintainability. Next, we have to focus on how we actually write the code that resides in our files.
After all, not only should we want to provide well-organized files, but easy-to-follow, standard-compliant code as well. Again, the WordPress Codex provides standard set for the major languages that contribute to a theme’s codebase:
A lot to process, huh? The thing is, spending time familiarizing yourself with all of the above pays dividends over time. Applying these standards at the beginning of development is exponentially cheaper than having to refactor an existing theme or plugin.
Additionally, it results in contributing better code back to the community.

Not Testing Your Work

After a theme has been developed and is ready for release, you should do – at the very least – a single of testing. That is, you should verify that the various styles of post data are formatted correctly, that your theme isn’t using any deprecated functions, or that it’s using any functions incorrectly.
Luckily, the Codex provides a number of suggestions and tools to help make this process much easier.
  • Debug mode helps to iron out any PHP warnings and/or errors
  • The Theme Unit Test is a data file including pre-formatted post data for you to run against your local development environment
  • Theme Check is a plugin that will examine that codebase of your theme and provide notes on what needs to be addressed as well as recommendations for improving the codebase.
Of course, there’s also additional testing you can do such as cross-browser testing, HTML/CSS standards compliance, and so on. The Codex outlines even more testing suggestions in the Theme Testing Process article.

What Are Your Own Pet Peeves?

They say that you often learn from your mistakes and I’ll be the first to admit that during my time with WordPress, I’ve broken every one of these. But, like the rest of the development community, you learn and you begin building better projects with experience.
This is the first of this type of “WordPress culture” articles that we’ll be posting on the site… so share your own experiences below – or better yet, write about them at length and we’ll publish it if it’s great!
That said, this is certainly not the definitive list and I’m sure there’s more to add (we haven’t even touched hacking the core, harassing the database, or hard coding elements that should have options). Drop your own pet peeves in the comments!
What are some of the most annoying, harmful, or unsustainable practices that you’ve come across?"
read more

Recently in Web Development (July Edition)

"
Web development is an industry that’s in a state of constant flux with technologies and jargon changing and mutating in an endless cycle. Not to mention the sheer deluge of information one has to process everyday.
In this semi-frequent series of articles, we’ll seek to rectify this by bringing you all the important news, announcements, releases and interesting discussions within the web development industry in a concise package. Join me after the jump!


News

All of the important news in a single place: releases, announcements, companies bickering, security issues and all related hoopla.
Nettuts image

jQuery 1.6.2 Released

Almost every seems to be using jQuery these days and version 1.6.2 of the library is now out. This is the second minor release on top of jQuery 1.6 and lands a number of fixes for bugs. The version is already up on a number of oft used CDNs so using the new version is just a switcheroo away!
Read more
Nettuts image

JS Bin 2.8.0 is Out

Remy Sharp’s JSBin is a fantastic tool for debugging — by yourself or with a team. JS Bin 2.8.0 brings with it live previews, resizable panels and autocomplete among many others.
Read more
Nettuts image

IE10 Platform Preview 2 Released

Internet Explorer is on the path to standards redemption and they see IE10 as their asnwer. The IE10 Platform Preview 2 has been released and includes support for CSS3 Floats, HTML5 Drag-drop and File reader API among a lot more.
Read more
Nettuts image

WordPress 3.2 now available

The new version of WordPress ships with a ton of new features including a super focused, writing mode, a refresh of the dashboard, a new HTML5 theme and performance improvements among others. Be sure to update your installations!
Read more
Nettuts image

Code Release: Backbone.js 0.5.0

Along with a slew of tweaks and bug fixes, the most notable new feature is HTML5 “pushState” support, which you can see in action by trying a search in DocumentCloud’s public archive.
Read more
Nettuts image

Google Web Fonts v2 Released

Version 2 of Google Web Fonts has been released. This release includes a ton of new functionality including better searching and filtering capabilities and, of course, many more fonts.
Read more
Nettuts image

Google Releases Flash to HTML5 Conversion Tool

The tool, named Swiffy, was made available on Google Labs. You can upload a SWF file, and Swiffy will produce an HTML5 version which will run in modern browsers with a high level of SVG support such as Chrome and Safari.
Read more
Nettuts image

Node 0.5 Out in the Open

Version 0.5 of the highly acclaimed NodeJS environment is now out with a number of new features, bug fixes and performance improvements. Check out the link below to see the full changelog.
Read more
Nettuts image

NodeJS on the way to Windows

In more Node related news, Microsoft has officially partnered with Joyent in porting NodeJS to the Windows platform. The resulting binary is expected to work with versions as far back as Server 2003.
Read more
Nettuts image

Nettuts+ Releases Apps for Web Developers

Not to toot our own horn but recently we’ve started releasing custom made desktop apps that are tailor made for on web developers. Hit the link below to find out more!
Read more


New Kids on the Block

As web developers, the sheer amount of resources we can tap into increases exponentially with time. Here is just a quick look at some recently created resources that deserve your attention — everything from new books to scripts and frameworks.
Nettuts image

Guider.JS

Guiders is a JavaScript library for visually enhancing your web application with guiders. A guider is a dialog box that guides a user through your application. This improves the user experience of a web application by visually introducing the user to important features.
Read more
Nettuts image

Paper.JS

Paper.js is an open source vector graphics scripting framework that runs on top of the HTML5 Canvas. It offers a clean Scene Graph / Document Object Model and a lot of powerful functionality to create and work with vector graphics and bezier curves, all neatly wrapped up in a well designed, consistent and clean programming interface.
Read more
Nettuts image

smoke.js

A framework-agnostic styled alert system for JavaScript. Lightweight, flexible,uses CSS3 animation and is easy to use.
Read more
Nettuts image

CoffeeKup

If you like CoffeeScript, then you’re really go love CoffeeKup. It’s basically HTML markup as CoffeeScript!
Read more
Nettuts image

jsPlumb

jsPlumb provides a way to “plumb” elements of a UI together. It can be used with jQuery, MooTools or YUI3
Read more
Nettuts image

Meow

jQuery Meow mimics Growl notications. It supports all jQuery events and you can bind it to various sources for message input making it ideal for form validation, Rails flash notices, or a replacement for the alert() box.
Read more
Nettuts image

SocketStream

A phenomenally fast real-time web framework for Node.js, SocketStream is a new full stack web framework built around the Single-page Application paradigm. It embraces websockets, in-memory datastores (Redis), and client-side rendering to provide an ultra-responsive experience that will amaze your users.
Read more
Nettuts image

VisualSearch.js

VisualSearch.js is a rich search box for real data. It enhances ordinary search boxes with the ability to autocomplete facets and values for sophisticated searches.
Read more


Interesting Reads

Often, you’re not really looking for a tutorial as much as you’re looking for a rant, an opinion or just the musings of a tired developer. This sections contains links to precisely those — interesting posts from the developer community.
Nettuts image

Can a local variable’s memory be accessed outside its scope?

A great discussion with an extra fun analogy to explain memory management.
Read more
Nettuts image

Why is JSON so popular?

A quick look into why JSON gained so much marketshare compared to its more enterprise-y competitors.
Read more
Nettuts image

JavaScript is Dead. Long Live JavaScript!

An indepth look at the JavaScript platform by Peter Michaux
Read more
Nettuts image

Evolving the Google design and experience

The Google team writes about the recent redesign of the entire Google ecosystem. Not really developer oriented but a good, quick read.
Read more
Nettuts image

The Node Beginner Book

A fantastic resource for the NodeJS beginner.
Read more


Monthly Spotlight

Every month we’re going to highlight a specific tool that we think deserves a special mention. This month it is…
Nettuts image

Microjs

Microjs.com helps you discover the most compact-but-powerful microframeworks, and makes it easy for you to pick one that’ll work for you.
Read more


Wrapping Up

Well, that’s about all the major changes that happened in our industry lately. Since this is the first of its kind, everything is still up in the air — future editions will be shaped by your feedback.
Do you want us to cover more standard news? A focus on upcoming scripts maybe? Or just more interesting posts and discussions from the community? Let us know in the comments and thank you so much for reading!
"
read more

40 useful APIs for web designers and developers

"

An application programming interface (API) is a set of rules and specifications that software programs can follow to communicate or ‘interface’ with each other.
As developers are well aware, there are hundreds of APIs out there for doing almost anything you could imagine online. Some are better than others, and some are definitely more useful than others.
Below are forty of the most useful APIs out there. The included APIs will let you do everything from shortening a URL to displaying a book preview on your site to interacting with your Twitter account, and everything in between.
Please share with us which APIs have you found most useful and feel free to recommend others that we may have missed…

The Google APIs


Google offers dozens of APIs for web designers and developers.
Some are specifically related to popular Google products, like Gmail and Analytics, while others are more specialized and aren’t part of public programs.
All are free to use, of course. You can view all of Google’s APIs and code tools on their site directory.
  • Feed API – The Google Feed API lets you download any public feed (including RSS, Media RSS, and Atom) and then combine them into mashups. It simplifies the mashup process by using JavaScript rather than more complex server-side coding.
  • Places API – Google Places is a large directory of local businesses and attractions all around the world. The Places API lets you access that information and display it on your website, as well as display check-ins by users.
  • Geocoding API – The Geocoding API lets you convert any address into geographic coordinates, which can then be used to place markers on a map.
  • Tasks API – The Tasks API offers endpoints for reading, searching, and updating Google Tasks content and metadata.
  • Analytics Management API – The Analytics Management API gives improved access to your Analytics data, and lets you fine-tune your requests to just pull the information and reports you need for your application.
  • Blogger Data API – The Blogger Data API lets your application create and post new blog posts, edit or delete existing posts, and search for posts based on specific criteria.
  • Books API – The Google Books API lets you integrate book searches into your application, and embed book previews on your site.
  • Calendar API – The Calendar API gives access to many of the standard web interface tools and operations to your web app. Public calendar events can be searched and viewed without authentication, while authenticated sessions can access private calendars, as well as edit, create, or delete those calendars.
  • Moderator API – Google Moderator is a tool for collecting ideas, questions, and recommendations from any size audience. The API allows your website or application to do the same.
  • Prediction API – The Prediction API helps you make smarter apps that can analyze historic data and predict future outcomes. It can be used for things like recommendation systems, spam detection, upsell opportunity analysis, and more.
  • Picasa Web Albums Data API – The PWA Data API can be used to create albums and upload, retrieve, or comment on photos, among other features. It’s been used for everything from powering digital photo frames to full-featured mobile clients and more.
  • Static Maps API – You don’t always want an interactive map on your site. Sometimes a static map is just what you need. The Static Map API lets you embed static Google Maps onto your site, including custom styled maps.
  • Directions API – The Directions API lets your users get directions from one point to another using a variety of travel modes from within your site or app, and doesn’t require a Google Maps API Key.
  • YouTube APIs – YouTube has two APIs available: Player APIs and Data API. The Player APIs allow you to have an embedded player, or a chromeless player that you can then customize within HTML or Flash. The Data API lets your app perform a lot of the operations available on YouTube, including uploading videos and modifying user playlists.
  • Webmaster Tools API – The Webmaster Tools API lets your client application use a variety of Webmaster Tools functions, including viewing sites, adding and removing sites, verifying site ownership, and submitting and deleting Sitemaps.
  • Google Web Fonts API – The Web Fonts API makes it easy to add free web fonts to your website or application. Their collection of fonts grows on a continuous basis and already includes a huge variety.
  • OpenSocial – OpenSocial can be used for building social applications, creating social app platforms, and sharing and accessing social data.

The Yahoo! APIs

Like Google, Yahoo! offers a number of APIs useful for developers. All are free to use and can help you integrate a variety of Yahoo!-owned web services into your app, including Flickr and Delicious.
  • Answers API – The Answers API lets you access the collective knowledge contained within Yahoo! Answers. You can search Answers based on a variety of criteria (including specific user, category, and more), set your app to watch for new questions in the categories you choose, and track new answers from specific users.
  • Contacts API – The Contacts API lets you access relationships in your Yahoo! address book. It reads a user’s Contacts information while respecting user privacy and permission settings.
  • Delicious API – The Delicious API gives read/write access to Delicious bookmarks and tags.
  • Fire Eagle Developer API – The Fire Eagle API helps you create location-aware websites and applications.
  • Flickr API – With the Flickr API you can view, search, and manipulate photo tags, display photos from a specific user or group, and more.
  • Local API – The Local API lets you access location-based information and user-contributed content.
  • Maps APIs – Yahoo! offers a number of APIs for their Maps services, including an Ajax API, a REST API, and a No Coding API.
  • Meme API – Meme is a multimedia light-blogging platform. The API lets you create apps that can read, post, and repost content through Meme.
  • PlaceFinder – The PlaceFinder API, similar to Google’s GeoCoding API, and lets you convert a street address into geographic coordinates.

More APIs


Yahoo! and Google aren’t the only ones offering powerful APIs for designers and developers. A number of social media sites and others have their own API(s), including Twitter, Facebook, Yelp, Bit.ly, and many more.
  • Twitter API – Twitter has a host of developer tools surrounding their API that let you create apps that interact with virtually any of Twitter’s functions.
  • Facebook APIs – Facebook offers APIs for working with Credits, Ads, Chat, and more, including a couple of legacy APIs that are no longer actively supported. Also found here is the Graph API, which is the backbone of the Facebook Platform, and enables your app to read and write data to Facebook.
  • Awe.sm – Awe.sm offers a number of developer APIs for integrating their social media campaign tracking tools into your app or website.
  • Foursquare APIv2 – The Foursquare API not only allows you to create apps that interact with the Foursquare service, but also to use Foursquare’s place-related database as a standalone service.
  • Ning API – Ning offers a set of APIs for developing desktop and mobile apps, custom network features, profile apps, and data importers.
  • Soundcloud API – Soundcloud’s API includes tools for sharing, streaming, and customizing the Soundcloud player for your website.
  • Klout API – The Klout API makes a variety of data available to developers, including Klout Scores, Network Influence, Amplification Probability, True Reach, and more.
  • Social Mention API – The Social Mention API provides a stream of real-time search data from a number of social media services for integration into other applications. It’s free for personal and non-commercial use.
  • Opus Social Media API – The Opus Social Media API can serve as a basis for developing a social networking and digital media site or app.
  • Digg API – Digg offers an API that lets you access their newsfeeds for your own sites and applications.
  • Yelp API – The Yelp API lets you access business listing info, business ratings, and review excerpts from Yelp in your application or website.
  • Zillow Neighborhood Information APIs – Real estate site Zillow offers APIs that give access to neighborhood information that can be integrated into other applications. (They also offer a number of other APIs, including postings, property details, home valuations, and more.)
  • Tropo – The Tropo API adds Twitter, IM, voice and SMS functionality to a variety of common programming languages. Development is free, though sending messages varies in price (with Twitter and IM messages currently free).
  • Bit.ly API – Bit.ly offers an API for integrating URL shortening into your app or site.
Written exclusively for WDD by Cameron Chapman.
Which APIs do you use? Are there any sites you’d like to see an API from that doesn’t currently offer one? Let us know in the comments!
Source
"
read more

HOW TO: Organize Web Development Projects Like a Pro

"
This is a guest post from Jay Melone, founder @ DigitalXBridge, which provides web and mobile design + development, SEO, eMail Marketing and hosting services out of the NYC area.
While web designers and developers are touted as being the tech-savvy and brilliantly creative types, they also have the unfortunate rap of being some of the most disorganized individuals on the planet. Luckily, most design shops come equipped with overly attentive, detail-oriented project managers. For those freelance designers working solo, or small web shops still operating in cowboy-code-slinging mode, this post is especially for you. Take some notes on the process employed below and begin pitching your services as Grade-A Professional. These process tips and tools will help you stay on top of your deliverables, submit dates to your clients you can reasonably hit, track changes requests along the way and, in the end, deliver a quality product. Do all of this well and expect your customers to become your word-of-mouth marketing evangelists, overnight.
Note: I’ll be speaking to traditional desktop browser web design and development (PHP).

Phase 1: Research & Analysis

If you’ve ever heard the expression “measure twice cut once”, this the measuring phase. During R&A you’re familiarizing yourself with the client, their project, their business and their industry. Before you can spend a minute on actual design and development, you should immerse yourself in the client’s vision. This is not only important in nailing the proposal/estimate, but helps ensure you build what the client asked for and avoid costly changes to scope and aesthetics at the 11th hour.
  • Before any exchange of information takes place, be upfront and ask the lead/client if they’d like you to sign an NDA. This will show you’re considering their IP (intellectual property) in their best interest and help avoid any awkward feelings some clients may have about asking you to sign one in the first place.
  • Project intro questionnaire — At DigitalXBridge we have a tailor-made questionnaire we ask all of our new leads/clients to fill out. It’s a 1-pager, so it’s short enough not to overwhelm the client with homework on day one, but insightful enough to provide the answers to 90% of the introductory Q&A that takes place at the outset of a new engagement.
  • Follow-up discussion — Once the client submits the questionnaire, give them a call and go through each answer provided to make sure you’re both on the same page. It’s also a good idea to take notes for both you and the client during this discussion. Later, the client can review the notes again in writing. Measure twice.
  • Proposal (aka Estimate or Quote) — Now that you and the client are speaking the same language, it’s time to take those line items and start applying effort and costs to each. We use FreshBooks for all of our accounting, including estimate-writing. The more detailed a proposal, the less questions you’ll have to field and the more the client will understand how you arrived at the numbers you did. If you send them a 1-liner with one big number at the bottom, expect your phone to ring with a confused and frustrated client, at best. At worst they walk away without giving you the chance to explain yourself. Ride the transparency train as often as you can.
  • Review the Proposal with your client and discuss next steps — If the project is approved, now is when you should gather up 3rd party credentials such as registrars, hosting accounts, payment gateways, SSL certs, etc. If you use any project management software (we use Basecamp), this is also a good time to officially kick off the project whereby all previously gathered notes are dumped in the project workspace and some early to-dos and milestones established.
  • Site Plan — The final step of the R&A phase, and only once the project is approved, is the site plan. The site plan can come in a variety of forms (from hand-written sketches to outputs from the plethora of online tools), but the premise is that you’re asking your client to convey to you the basis structure of the site; i.e. the top-level navigation and transitions from page to page. 9 out of 10 clients will struggle to pull this all together so it’s important to use your skills as a designer to coach them through this so you have enough to get started on Phase 2: Design.

Phase 2: Design

While you were busy measuring repeatedly during phase 1 you had the opportunity to gather up all of your client comments, project specs and meeting notes. Now during phase 2 it’s time to turn all of that scribbling into eye-popping visuals.
  • Client Content — Before any designer can really dig in, they need some direction on content (copy, images, colors, product/customer data) from the client. Keep the requests light as you just need a nudge.. you’re still the designer and they’re still the client. This input should simply feed the Creative Concept step below, of which the client can focus on their most important page (e.g. Home Page) and supply all relavent content. Then they can move on to the rest of the site as the designer completes the Creative Concept. This job is almost always heavily underestimated by the client and once they realize they need to supply things like Policies and Terms, they hit a wall. Make sure you prep them for this assignment and give them adequate time and support. If you have copy writers available, make sure you make them available.
  • Creative Concept — This is your first design draft (images only; e.g. PSDs, no HTML just yet) of whichever page the client cited as most central to the theme and vision of the entire business and website, to which they provided content for in the previous step. The designer set of tools we use most for all web-related design work is Adobe Creative Suite.
  • Creative Walkthrough — Considering this is the client’s first encounter with not only your creative work but in seeing their idea come to life, you’ll want to discuss your first draft of the creative over the phone (in-person is even better). Explain the theme, where you drew your inspiration for colors, layout, fonts, etc and then hear them out on any tweaks they’d like made for the next version. Once you nail the general aesthetic of the site based on the initial page creative, you can get started on the remaining (“inner”) pages. To make the process of submitting designs and gathering client changes/feedback more efficient, you could take advantage of tools like ConceptShare (which recently launched an entire new v3 product). We’ve found it to streamline all of the countless emails and phone calls with a simple, visual interface.
  • Design sign-off — Before you move onto Phase 3: Implementation, you want to have creative sign-off from your client. Going back and changing design after coding begins can be costly to the budget so don’t underestimate the importance of this step.

Phase 3: Implementation & QA

Implementation is a fancy word for coding. Hand those beautiful PSDs off to your engineers to develop.. the site is ready to come to life. And because we encourage working iteratively, QA comes along for the ride during this heavy development period. That said, testing, as a whole, is a post in itself (to be covered later), so we’ll keep the view at 30k feet for now.
  • Client-side Coding — Start with HTML and CSS, then move onto any JavaScript, AJAX, Flash, etc, wherever applicable. If you have separate people handling design and development, communication between the two needs to be fluid so as to maintain the visual concepts born during phase 2. In fact it’s best if the designer can hand the page off to developer once client approval is received so that everything regarding that page is top-of-mind.
  • Client-side QA – Again, each of these points can be expanded upon but the general testing routines you want to validate here include: (1) typography/formatting, (2) accessibility, (3) and browser/OS compatibility.
  • User Guide – Well-written documentation not only conveys how things were built, but how to use the site and any administrative functionality (e.g. an admin panel or CMS). It also serves as a training manual and cut down on subsequent support calls post-launch. Finally, this document will serve as a guideline during client testing (UAT) within phase 4.
  • Site Demo – As pages get layered with client-side coding, it’s a good idea to share links with clients. The images produced during phase 2 are pretty to look at, but often you won’t begin to receive true client feedback until they can point and click.
  • Server-side Coding – Time to hook the client up to the server with PHP coding.
  • Hosting Account Setup – Whether or not you’ll be hosting the site, now’s the time to make sure the hosting account is established, email accounts exits, DNS entries are accurate, SSL certs are in place and implemented wherever necessary on-site and any other IT administrative steps have been carried out.
  • Functional QA: Includes testing (1) features/forms/fields, (2) cookie settings, (3) performance, (4) server-side communication and (5) security/penetration checks. Once all of the internal (i.e. completed in-house by you/your team) QA has been completed you can prepare to officially hand the site over to the client for testing and approval in Phase 4.

Phase 4: UAT & Training

While you’ve been keen at keeping the client informed of your progress along the way and asking for regular feedback, it’s been light in terms of formal client testing to this point. Now it’s time to really hand the reigns to your paying customer and iterate through a cycle (or two, or three) of UAT – User Acceptance Testing.
  • Training – One of the biggest mistakes we used to make when we started building client sites was to build something, turn it over to the client and say “good luck, let us know if you find anything wrong.” No good. For one, most of your clients will not understand technology like you do – some may need to understand the basics of website protocol; others may even be a bit more advanced but still need a primer on how to, say, upload catalog merchandise via FTP. Hold their hand. Send them the User Guide crafted during phase 3 and then take them step-by-step through each page and process. We like to use GoTo Meeting for client demos, where we’ll often run a scenario and then give keyboard and mouse control to the client and ask them to give it a shot. It works well and pays huge dividends to do it in a simulated training environment now and while you’re moderating vs. later in production when the boss is standing over their shoulder and you’re not around to lean on.
  • UAT – Now that your client is a pro with what’s under the hood of their site, UAT begins. But before they begin, coach them on best practices for reporting issues; e.g. trace their steps, break out expected vs. actual outcomes and provide screenshots whenever possible (with annotations on the screenshot.. even better!). If you use a PM tool you’ll probably want to capture all discussions and issues/changes found during this process there so that as you apply fixes, the entire process is tracked and documented. The more you guide them on the testing approach that works best for you and your team, the more streamlined the entire process will remain. Even though the client is testing on their end, the responsibility to deliver a high-quality product remains on your shoulders. Make sure you own this process, just as you have the previous steps.
  • Sign-Off – As UAT comes to a wrap, you want to somehow have your client both acknowledge that they’re approving of the work produced as well as give you permission to publish it to the world. Some shops use very formal documentation, others use email or even IM. Whatever works for you, both semantically and legally; but I’m sure most would recommend having it in writing. Whatever your approach, once you have their blessing it’s time for Phase 5: Go-Live.

Phase 5: Go-Live

You’ve made it. Blood, sweat and tears have been shed by you and your client (hopefully not too many tears) and now it’s time for publishing to the live, production hosting account.
  • Planning – Before you actually release the site into the wild, sit down with your client and explain the release process. We typically put client sites live during off-peak (local) hours. So say we’re launching a site in NY, we would typically plan to begin this process at 3am EST so as to give ourselves plenty of time to run the release procedures, or worst case, take the site offline and notify the client of problems/delays.
  • Private URL Launch – Upload the site to their production environment with a private URL (e.g. just an IP or http://test.domainname.com) and then..
  • Smoke Testing – Immediately upon launch you want to make sure everything is stable. Run through all pages and perform a basic level of functional QA to ensure the site is still standing. If the site is transactional (e.g. eCommerce) place a couple test orders and validate the workflow on the back-end and database, as well verify email notifications. If we’re good to go..
  • Go-Live – Flip over to the public domain and notify your client that their site is officially live.
  • Check-In – Don’t forget to keep an eye on things over the coming days and weeks. You want to make extra sure that if there are problems, you’re the first to find them. There’s nothing worse than a client calling to tell you the site is down.. it will erase all those hours of hard work as well as the trust you’ve built with your client.

Summary

Designing and building websites includes lots of moving parts however the most important element throughout is communication. Whether things are going smoothly or falling apart, keep your client in the loop and work through things together. The process above is not a one-size-fits-all, but, at its core, contains a good guide to keep you and your web projects on track.
This is a post from Inspired Magazine. If you like it, you may want to subscribe to our RSS full feed to be updated on every article we're publishing. Also, it's highly recommended to follow us on Twitter!
Web :: http://digitalxbridge.com
Skype :: jaymelone | Yahoo IM :: digitalxbridge
Social :: Facebook | Twitter
"
read more

50+ Useful CSS Tools And Generators for Developers

" CSS tools are essential for web developers because they act like a sort of magic lamp that can simplify the job at hand. Most development tools are time savers that are there to help developers create stylish, functional and optimized websites with a few shortcuts.

CSS tools and generators are available in such large numbers that a developer can choose from a range of them to make their projects go smoother. Here is the collection of around 50 useful and handy CSS tools and generators that every developer should know about. Enjoy!

CSS Colors Tools

Color Scheme Designer This tool provides colors in the form of a color wheel that offers mono, complement, traid, tetrad, analogic and accented analogic color variations in the percentage ratio; and it also highlights the same with the suitable scheme chosen.
Cssgenerators36 in 50+ Useful CSS Tools And Generators for Developers
Ultimate CSS Gradient Generator It is a CSS gradient editor and generator that lets you create CSS gradients having cross-browser support.
Cssgenerators15 in 50+ Useful CSS Tools And Generators for Developers
CSS Color Codes This tool offers two options for furnishing the hexadecimal and RGB color codes. You can pick the color from the color picker and then copy its hexadecimal value from the bottom field.
Cssgenerators35 in 50+ Useful CSS Tools And Generators for Developers
Colors Pallete Generator This is a powerful tool that generates a color palette derived from the primary colors of the image that you upload. It is a useful tool for rapidly grabbing a particular color within an image for inspiration. With this, you can also generate Photoshop swatches and CSS styles.
Cssgenerators27 in 50+ Useful CSS Tools And Generators for Developers
CSS Colors This color chart offers more than 16 million colors with both RGB and hexadecimal color modes.
Cssgenerators39 in 50+ Useful CSS Tools And Generators for Developers
Gradient Image Maker This tool allows you to easily generate a gradient image of 3 types with on the spot previewing. With this tool you can create gradient images that you can use everywhere in your web page design.
Cssgenerators51 in 50+ Useful CSS Tools And Generators for Developers

CSS Layouts Tools

templatr It is a template generator that lets you create beautiful templates for your blog and web design without requiring any HTML and CSS knowledge.
Cssgenerators8 in 50+ Useful CSS Tools And Generators for Developers
Free CSS Template Code Generator It is a free HTML – CSS template generator that generates a three column layout without using any Tables. This template generator produces a custom-made template that can be used to control the look and feel of an entire website.
Cssgenerators9 in 50+ Useful CSS Tools And Generators for Developers
Firdamatic: the Design Tool for the Uninspired Webloggers This tableless layout generator lets you easily create and customize layouts by simply completing a form.
Cssgenerators10 in 50+ Useful CSS Tools And Generators for Developers
CSS Layout Generator – CSS Portal Another layout generator with which you can create a fluid or fixed width column layout, with up to 3 columns, header, footer and menu.
Cssgenerators16 in 50+ Useful CSS Tools And Generators for Developers
CSS Layout Generator Another CSS Layout Generator that allows you to create your own template by using HTML and CSS. You can create a template with up to 3 columns and a header and footer.
Cssgenerators22 in 50+ Useful CSS Tools And Generators for Developers
Layout Generator This tool generates multi-column and grid layouts with CSS 2.0 techniques by using pixels, percentage or em.
Cssgenerators24 in 50+ Useful CSS Tools And Generators for Developers
CSS Layout Generator With this tool, you can modify the header, footer, sidebars and layout width and can set the document type as XHTML or HTML strict or transitional to see the preview in the same page.
Cssgenerators30 in 50+ Useful CSS Tools And Generators for Developers
YAML Builder This tool is designed for visual development of YAML based CSS layouts.
Cssgenerators54 in 50+ Useful CSS Tools And Generators for Developers

CSS Grids Tools

The 1KB CSS Grid It is a lightweight tool with which you can streamline page templates for content management systems.
Cssgenerators1 in 50+ Useful CSS Tools And Generators for Developers
Variable Grid System It is a quick way to generate an underlying CSS grid that is based on the 960 Grid System.
Cssgenerators2 in 50+ Useful CSS Tools And Generators for Developers
GRIDINATOR This tool allows you to generate grids for the 960.gs, Golden Grid, or 1KB Grid. You can even generate a basic generic grid.
Cssgenerators4 in 50+ Useful CSS Tools And Generators for Developers
Blueprint Grid CSS Generator With this tool, you can generate more flexible versions of Blueprint’s grid.cs and compressed.css and grid.png files.
Cssgenerators6 in 50+ Useful CSS Tools And Generators for Developers
CSS Grid Calculator This calculator allows you to envision page layouts and draw grids in a variety of ways. You can have an accurate visual feedback on how text blocks and page divisions will appear within a browser window. You can also return style declarations for divisions and text to copy and paste into style sheets.
Cssgenerators7 in 50+ Useful CSS Tools And Generators for Developers
Grid Designer This tool allows you create design grids by giving you options to customize Columns, Pixels, Gutters and Margins.
Cssgenerators25 in 50+ Useful CSS Tools And Generators for Developers
Em Calculator Em Calculator is a JavaScript tool that lets you design scalable and accessible CSS design. This tool converts pixels to their relative em units based on a text size.
Cssgenerators26 in 50+ Useful CSS Tools And Generators for Developers

CSS Menus and Buttons

CSS Menu Maker This tool allows you create custom, cross browser compatible website menus.
Cssgenerators17 in 50+ Useful CSS Tools And Generators for Developers
CSS Menu Generator This menu generator lets you generate CSS and HTML codes which you need to create an appealing set of text based navigation buttons.
Cssgenerators28 in 50+ Useful CSS Tools And Generators for Developers
My CSS Menu This tool provides an easy way to create cross browser compatible CSS menus. With this tool, you can create Horizontal, Vertical, Drop-down web navigation.
Cssgenerators34 in 50+ Useful CSS Tools And Generators for Developers
Tabs Generator Another CSS navigation Tab Menu generator that allows you tweak size, colors, corners and more to generate unique designs that can be downloaded for your use.
Cssgenerators37 in 50+ Useful CSS Tools And Generators for Developers
List-O-Matic With this tool, you can choose the content, layout and presentation of your list-based navigation menus.
Cssgenerators42 in 50+ Useful CSS Tools And Generators for Developers
Button Maker Online This tool creates XHTML valid micro buttons (80×15). You can also create larger 88×31 buttons.
Cssgenerators45 in 50+ Useful CSS Tools And Generators for Developers
CSS Button & Text Field Generator This tool is a CSS button and text field generator that lets you easily create with just a click of the mouse.
Cssgenerators50 in 50+ Useful CSS Tools And Generators for Developers

Fonts and Text CSS Tools

Fonttester This is an amazing tool that lets you edit loads of CSS properties including inline height, font weight, font style and variant, text indent and transform, and word and letter spacing.
Cssgenerators32 in 50+ Useful CSS Tools And Generators for Developers
CSS font style You can use this tool to set the style of the font to italic or oblique.
Cssgenerators33 in 50+ Useful CSS Tools And Generators for Developers
Typetester This application provides a comparison of the fonts for the screen. Since the new fonts are packed into operating systems, the list of the common fonts will be updated.
Cssgenerators43 in 50+ Useful CSS Tools And Generators for Developers
CSS Font and Text Style Wizard You can use this wizard if you want to experiment with the fonts and text styles in order to generate sample CSS style source code. Dynamic HTML is used in this wizard that changes the style of the table in-situ, without loading another page.
Cssgenerators46 in 50+ Useful CSS Tools And Generators for Developers
CSS Type Set This is a typography tool that allows designers and developers to test and learn the ways to style their web content.
Cssgenerators21 in 50+ Useful CSS Tools And Generators for Developers

CSS Generator & Optimizer

CSS Generator This tool lets you choose a style for your web page. You can select different Cascading Style Sheet properties with live preview. You can choose color, HTML tag, click the field you would like to insert color into and color them.
Cssgenerators47 in 50+ Useful CSS Tools And Generators for Developers
CSS Generator This tool gives you a live preview of the color that you select from the palette. You can directly specify colors and other design attributes. This tool helps you select a face color for your new web project straight away!
Cssgenerators48 in 50+ Useful CSS Tools And Generators for Developers
Cascading Style Sheet CSS Generator This is a free tool that lets you create cascading style sheets for your web page. You can add as many style sheets as you want.
Cssgenerators49 in 50+ Useful CSS Tools And Generators for Developers
quickCSS – Online-CSS-Generator With this tool, you can generate CSS with just one click.
Cssgenerators53 in 50+ Useful CSS Tools And Generators for Developers
Spiffy Corners – Purely CSS Rounded Corners It is a simple tool to generate the CSS and HTML required to generate anti-aliased corners without using images or javascript.
Cssgenerators12 in 50+ Useful CSS Tools And Generators for Developers
Clean CSS This is a CSS optimizer and formatter that takes your CSS code and makes it cleaner and more concise.
Cssgenerators18 in 50+ Useful CSS Tools And Generators for Developers
Simple CSS This tool lets you create unique Cascading Style Sheets from scratch. You can also modify your existing CSS.
Cssgenerators31 in 50+ Useful CSS Tools And Generators for Developers
Regex Patterns for Single Line CSS While formatting your CSS Style sheet single-line, you may find Dan Rubin’s Textmate macro useful if you group your ruler and add white spaces that makes scanning through the web page easier. You can also use a regular expression if you don’t want to use Textmate.
Cssgenerators45 in 50+ Useful CSS Tools And Generators for Developers

CSS Sprite Tools

CSS – Sprit.es With this tool, you can easily generate CSS and HTML code by uploading the file you want to use in your CSS sprite and then click the button that join all your images into a single file. With this tool, you can also achieve any rollover effects.
Cssgenerators55 in 50+ Useful CSS Tools And Generators for Developers
Spritegen CSS Sprites This tool allows you create your sprite by letting your upload your image and then add more images. You can also set the output of your images as in PNG, JPEG or GIF.
Cssgenerators56 in 50+ Useful CSS Tools And Generators for Developers
CSS Sprites With this tool, upload any number of images and click Generate button to create your CSS sprites with ease.
Cssgenerators57 in 50+ Useful CSS Tools And Generators for Developers
Website Performance (CSS Sprite Generator) It is a tool that allows you to upload your source file in order to create the sprite image and CSS. This tool works by ignoring duplicates, resizing the source images, setting the sprite and other CSS options like horizontal and vertical offset, background color, class prefix, CSS suffix etc.
Cssgenerators58 in 50+ Useful CSS Tools And Generators for Developers
Spritebox It is a WYSIWYG tool that is helpful for the web designers who want to quickly create CSS classes and IDs from a single sprite image. This tool works on the principle of using the background-position property to line up areas of a sprite image into block elements of a web page.
Cssgenerators13 in 50+ Useful CSS Tools And Generators for Developers

Other CSS Tools

SlickMap CSS This tool displays your site maps directly from HTML unordered list navigation. This is appropriate for the websites that want to accommodate up to three levels of page navigation and extra utility links that can be easily modified to meet personal requirements, branding, or style preferences.
Cssgenerators14 in 50+ Useful CSS Tools And Generators for Developers
CSS3 Please! This tool displays the output of your code instantaneously. It is a simple yet powerful tool for the web designers and developers.
Cssgenerators19 in 50+ Useful CSS Tools And Generators for Developers
CSS Sorter CSS Sorter is a tool that sorts CSS files and rules alphabetically so that you can easily manage your CSS files.
Cssgenerators20 in 50+ Useful CSS Tools And Generators for Developers
Sky CSS Tool Sky CSS lets you create CSS classes without requiring any manuscript code. In order to work properly, it needs a JavaScript compatible browser.
Cssgenerators23 in 50+ Useful CSS Tools And Generators for Developers
CSS Table Wizard This wizard helps you generate style source code and allows you to do experiments with table border styles.
Cssgenerators29 in 50+ Useful CSS Tools And Generators for Developers
Csstxt Csstxt is a powerful tool that illustrates numerous ways to add a style to a text with ‘a’, ‘p’ or div tag.
Cssgenerators41 in 50+ Useful CSS Tools And Generators for Developers
MinifyMe It is a small AIR application that packs together multiple CSS and JavaScript files into one and runs on your desktop.
Cssgenerators44 in 50+ Useful CSS Tools And Generators for Developers
Password Generator This tool generates all the compulsory codes required to password protect a directory, or selects files within it on your site by means of .htaccess. This tool works by encrypting your desired password and then put the outputs inside your .htaccess and .htpasswd files.
Cssgenerators52 in 50+ Useful CSS Tools And Generators for Developers
XHTML/CSS Markup Generator This is a simple tool that lets you quickly generate XHTML Markup and a CSS frame; shorten syntax so that you can directly jump to the elements styling. This tool significantly speeds up your work.
Cssgenerators11 in 50+ Useful CSS Tools And Generators for Developers

"

read more