For the most part we find that CSS frameworks focus on three key elements, layout, typography and markup semantics and look and feel. Each framework has its own degrees of strengths with regard to any of those elements, however what they all have in common is their orientation around the grid and effective use of it to speed the rollout of a layout and leave implementation of look and feel as the primary task to be done. What we have also found over the past year is that the YUI has done a phenomenal job with their project to provide the foundation for a robustly structured interface that can stand the test of time and simplify not only the lives of developers (who often care not for the intricacies of CSS), but also for the future features and variations that a site might have to survive in its lifetime.

Taking a closer look at the tools in the tool chest:

• CSS Reset neutralizes browser CSS styles. So similar to Eric Meyer’s CSS Reset, this will make sure that on a cross-browser basis, your CSS will behave as consistently as possible.
• CSS Base applies consistent style foundation for common elements. So the point here is that once you have the browsers reset to behave consistently, now the same must be done for all elements available in the DTD.
• CSS Fonts foundation for typography and font-sizing. A vital step in organizing your thinking and your project, your typography can be handled from a single location. This also makes maintenance of sIFR integrations even easier to manage.
• CSS Grids more than 1,000 CSS-driven wireframes in a 4KB file. Keep things simple and consistent by conforming to the same types of layout patterns that designers have had in the back of their minds for ages. This is a great addition to your project to assist with rapidly implementing elements into your layout.
• And finally, we recommend separating an additional file from the rest of the bunch. This one should contain all of the styling that you apply to your elements that would allow you to apply CSS Zen Garden principles to your layout. In other words, your foundation has defined the wireframe of your site making it consistent across browsers, making sure elements behave correctly and managing typography. Now, use this final file to apply the theme.

This is quite a powerful combination. Most of the web 2.0 developers out there will appreciate the leverage that is to be gained from this approach to code production. Obviously, since you’re adding several files to your project, you’re also creating additional HTTP transactions that will slow down your site. So be sure to apply some optimizations to the site before it goes to production. The development benefit should not become a punishment for the users.

For those of you who are just getting started with YUI, I hope this was helpful encouragement to dig deeper and to build your applications and sites more effectively. For those that still need to learn more information before diving in, check out this video:

Getting Started with YUI's Online Documentation @ Yahoo! Video

For those that are unaware about the great news we’ve been sharing, here are a few highlights in no particular order:

1. Increased availability of project management staff,
2. Improved quality assurance for each project,
3. Improved timelines / turnaround time,
4. Increased scale, provided by over 90 staff members (over 50% growth),
5. Pricing decrease, including:
   • 10% reduction applied to production of first page
   • 25% reduction applied additional pages
   • Fixed rate software implementation pricing

We have additional tools that we’re working on as we have time. Hopefully we’ll be able to share those as we move forward. Remember our goal at W3 MARKUP is to help you grow your business through effective and streamlined outsourcing.

If there’s something we can do to better help you do so, please reach out and let us know or leave a comment below. Some of the fantastic constructive criticism we’ve received from clients is the following:

Ad Hoc Troubleshooting Form:
Many clients move on to order just a few pages and implement them internally only to find that there are some areas an extra set of hands could make short work of. By providing a high priority form for completed orders, we could keep an eye on the queue of urgent tweaks you’re looking to make as you get ready to launch your projects. We’re thinking we could track time using FreshBook’s handy functionality for cases like these.

Cross-browser Bug Killer Form:
We’re constantly receiving calls and requests from those who’ve worked tirelessly on a project only to find that they are a few bugs that cannot be squished. Fortunately for you, that’s what we live for! We’ll be working on defining a methodology for you to be able to indicate to us the page(s) in question and the particular issue to be resolved and in which web browsers or email clients.

More Phone Support:
Being able to discuss urgent changes by phone appears to be a popular option clients would like to see either a bit more hand holding as they get used to the outsourcing process or they simply have so many concurrent projects that they prefer a brief phone call than 10 minutes reviewing their projects in the client area. That’s understandable, we’re working on it!

For those of you who kept reading, here’s a special offer: 20% off your next project! Simply follow that link and you’ll see the discount automatically applied in the order summary box in the sidebar at the right.

And as always, another shameless recommendation to check out FreshBooks.com and ConceptShare.com for more solutions for reducing the overhead on the administrative and collaborative work you’re doing everyday!

For those of you in the Washington D.C. area today or tomorrow come meet us at the Interact 2008 conference. A lovely venue (as always) has been chosen and the roster of speakers and exhibitors will make it an all around exciting event.

We look forward to the opportunity to meet many of you. And hopefully a conference or event will bring us to your next of the woods soon!

1. Is it more convenient to have projects waterfall (be broken up based on client approvals or other steps in your workflow) than it is to package up the finalized artwork? If it is more convenient, what kind of time commitments can you make to provide the “next batch” of artwork?

   More and more of you are asking to waterfall your projects and we want to present a solid methodology for this. Please let us know how you like to work as this summer we’ve seen a lot of these kinds of requests and we’d like to tighten up the response time for this kind of approach.

2. Should we add an option to provide “working wire frame” or “skeleton site”?

   Meaning, are there cases, where if you provide a site map you would prefer to have all the pages linked together so that a site can be demonstrated for your client? A similar result is achieved when purchasing a theme or skin, but for sites without a software engine, would a “clickable” (build) site option be valuable?

We’d also like to share some tips for those just getting started. This is always stated during new client orientation phone calls (which we provide by the way), but it’s best to jot these down as well:

• We’d also like to recommend that those outsourcing for the first time leave themselves some cushion with client timelines so that when you have some additions to make or need help with changes, that there’s time for those to be turned around. In other words, expecting a client to review the work once it’s in your inbox is definitely possible, but it does take a least one project to make sure that you’ve asked for everything you needed (and frankly sometimes it’s just not possible until you work with the finished product) — please keep that in mind.
• RAR compression will realize the highest compression ratio for your artwork, so if you’ve got a 100 MB zip file to upload, you’ll probably see that same file be 70 MB or much less — so we recommend that. If you’ve got a file over 100 MB, sometimes the upload can go wrong, so we encourage you to post that to your FTP server and give us the link in the order form.
• At present our solution shines (best), when the entire finalized project is submitted for code production or (application) interface development. Whenever possible we encourage clients to provide as much artwork as they can to have the crispest experience.

As always if you have any input on how we could otherwise improve — please leave a comment below or give us a call.

For those that are not familiar, Freshbooks is a great tool for folks from all walks of life (design studios, project managers, copywriters, freelancers of any type etc) to simplify the invoicing and time tracking processes. If you dread dealing with the entire invoicing process and helping clients get set up with PayPal (thinking it will save you time or don’t even have the time to take a Credit Card over the phone let alone keep track of the transaction), these guys have simplified transactions as far as one can go. You can run widgets they provide on your Mac or PC to make counting those hours even more painless. Take a closer look, or give them a call (yes they answer the phone) better still go ahead and try it for free.

We’ll be polishing up look and feel shortly, but seeing as we have the kinks out, we’re ready to say FreshBooks is here and we couldn’t be happier! We’ll be using some of their features like estimates, recurring invoicing and snail mail service for our NET 30 clients as soon as we can.

As always if there’s anything we can do to simplify your outsourcing experience, reach out and let us know.

So what’s the news this time?! ConceptShare now has a Desktop Companion available for your desktop. I don’t know why they say it’s in beta, this thing is slick! It makes *very* short work out of getting your concepts into ConceptShare to provide your design briefs to us. And on our end it means that now ConceptShare can live in our docks / taskbars.

The Desktop Companion also brings the functionality that you’re used to along with other time saving features home to your desktop. We first tested this out over a 3G connection, so I’d imagine that we’d be even more impressed over a traditional broadband connection. Let’s see what we have, after a quick download and install of Adobe AIR runtime of course (click any thumbnails for a larger view):

There’s an “at-a-glance” view, that wasn’t really available in web application itself: workspace details are available like name, date of last activity are nice, but now you can also see the number of new comps posted, number of new comments as well as view the workspace users in a workspace.

To make sure you’re always looking at things in a way that’s helpful to you, now you can easily sort by: date created, people online now, last visited, new comments, new concepts, latest activity, date created and details can be edited as easily as ever, as well as toggling visibility and workspace deletion. Having used ConceptShare for quite some time here at W3, the thing that makes this companion live up to its name is that the changes you can make to workspace can now all be done in an almost “bulk” fashion, so housekeeping is a breeze and response time crisp.

As you would expect, you can also launch your workspace (in a browser) directly from the companion or even create a new workspace from scratch! Adding users to a workspace is also a breeze, by drilling down into a workspace, clicking on the thumbnail and then clicking the people button below the workspace name.

For those of you like us with many accounts to attend to, you can easily jump into various accounts, which is handy if you’re playing various roles in a number of workspaces.

Last but not least, dragging and dropping media into a workspace is a phenomenal experience (nice touch on the file upload complete sound)! Not only can you have a look at all of the media in a workspace simply by clicking on the thumbnail, you can also have a look at the people in a in a workspace and review the comments as well. The entire experience is also very crisp and (desktop) application like.

As promised, we’ll also be closing the circle on our ConceptShare integration by allowing you to give us access to your own ConceptShare workspaces so that you don’t have to re-upload or re-comment your finalized artwork!

We’re really thankful to Adobe for making it so straightforward for companies like ConceptShare to make the next logical step in user experience; bringing rich internet applications to the desktop. I’m sure there are some easter eggs or features in the Desktop Companion we haven’t covered and even more around the corner. Either way, the Desktop Companion should be a key piece of your daily ConceptShare diet, stay up-to-date with new developments at ConceptShare team. For those of you who are interested, video support is also available in the latest version of ConceptShare!

This issue should be resolved over the weekend; thanks for your patience.

Version 2.6 of WordPress takes everything to the next level in a ways that will benefit users looking for more CMS capability. Some of the features of this update are:

• Tracking of edits,
• Generate posts directly from sites you visit,
• Use of GoogleGears to improve performance of the WP Admin Panel, and
• Preview new themes before activating them

Have a look at this video for a walk through of the highly anticipated additions to this, one of our favorite software packages:

Let us know if you need help with your upgrade or with doing more with your WordPress site. If you really like WP, become a fan!

There have always been great tools and resources that help web developers and the like improve the user experience of their sites by following some best practices. However, what are often difficult to come by are some specific techniques that not only satisfy the requirements of the best practices, but also address issues that are even more circumstantial. In other words, we’re going to share some techniques that resolve nearly all of the most significant performance issues that web sites and web applications can face.

Understand first how your page(s) load by using Firebug for FireFox 2+ or IEInspector for Internet Explorer 5+. For those interested in Safari, you should check out this post from the webkit (Safari) team. It’s straight forward to find the area within either plug-in that allows you to observe the HTTP transactions and understand the behavior of your page from a transactional standpoint. We recommend using Firebug because it’s free; however using the IEInspector will allow you to see the page render behavior differences between IE and FF. Some relevant issues that impact performance that we’re not going to address in this post are:

• Rendering performance — how does your markup and style sheet actually behave as the browser renders it and how does that impact the perceived speed of the page from a user’s perspective.
• Database latency or page parse time — Dynamically generated pages or assets called in a page, like using PHP for server side includes or generating a table of data from a database entries play a role in the performance of a web site and we’ll set those issues aside for now and assume that you’ve optimized these factors as far as you can using server-side script caching, database caching etc.
• External objects — that is objects that are not locally hosted on your domain like Google Analytics for example. Fortunately they do compress their JavaScript for us, no doubt using some of the techniques discussed later in this post.

As Aaron Hopkins said: “Try benchmarking common pages on your site from a local network with ab, which comes with the Apache web server. If your server is taking longer than 5 or 10 milliseconds to generate a page, you should make sure you have a good understanding of where it is spending its time.” We’re also going to assume that you’ve moved beyond the use of inline JavaScript and CSS; there are countless references and ongoing debates out there on how to deal with functionality semantics and presentational issues. Now there are some questions that need to be answered in order for you to proceed with effective use of the browser plug-ins we recommended:

• Who is your target audience and what are the limitations of their browsing environments?
• How much data would your server end up having to deliver if it was answering requests of thousands of concurrent users?
• Aside from the actual “horsepower” of your web server and the quality/limitations of your server’s bandwidth, what are the things that you can change about your site that will realize the biggest impact? In other words, let’s apply the 80/20 rule.

The following concepts satisfy nearly any conceivable answer to the questions above:

1. Reduce file sizes of assets and reuse them as much as possible
   Obviously this is the most simple of steps, and includes optimizing file sizes of: images, JavaScript files, CSS files, the HTML itself and so on. We won’t get into the techniques to optimize all of these because that’s a Pandora’s Box to be certain. Firebug’s “Net” tab will show you the weight (size) of all of the objects required to render the page you loaded. Take steps to reduce these as much as you can. Some concepts like: using strict DTDs, removing comments from your code, white space removal and the like to reduce file size are nice, but as you will find out for yourself are not pivotal to achieve the desired results. Again, remember the 80/20 rule, we want to improve our user experience without destroying our ability to maintain the site or make it accessible to as many user agents as possible. So instead of modifying your development process, take advantage of sound techniques as they relate to your CSS or JavaScript coding. Organize (and configure) your content to be cached. Which means avoid using: query string variables whenever possible, dynamically generated assets (images, CSS, JavaScript, markup etc), unless you mean to send the headers to the browser to force caching of your assets. Caching is definitely an imperative if your site uses query string variables or has other obvious issues that indicate to the browser that a document (page) should not be cached. Again we’ll leave that issue to another discussion since there are numerous solutions to that issue. Firebug will allow you to observe the headers of objects that are downloaded to review the headers associated with each object to make sure you’re getting the desired result. I’d encourage you to make sure you disable the browser cache (and any other non-essential plug-ins for that matter) using the Web Developer toolbar throughout your testing.
2. Optimize HTTP transactions
   Now that file size is reduced and you’re confident that assets you desire to be cached are cached, endeavor to reduce the number of HTTP transactions. Again go back to the “Net” tab in Firebug and pay attention in particular to the number of transaction required to generate the entire page. From an image standpoint intelligent use of the sprites technique lends itself to image reuse, caching and optimized http transactions (a few larger files, rather than many small ones). As far as CSS, JavaScript are concerned, concatenate these files to further reduce HTTP transactions.
3. Further reduce the size of text-based assets
   Let’s explore the benefits of HTTP compression. Many (at least more than in past years) web hosts support this “out-of-the-box” for the HTML MIME type. Server load aside, unfortunately compression of .html is simply not enough for high traffic sites that are not putting all of their CSS and JavaScript directly into their HTML documents (we don’t recommend optimization technique this for countless reasons). The effects of applying HTTP compression to a site is night and day, but unfortunately the leverage of this approach needs to be applied to all text based objects/assets required to render a page.In fact, HTTP compression really makes your AJAX applications really perform, but if you really plan things out you should be able to cache some of your AJAX events.
4. Reduce the number of files
   We’ve learned how to compress our text based assets to reduce their weight and we’ve learned how combining related assets allows us to continue to use CSS Frameworks and/or compartmentalize our JavaScript so that our development style or preferences don’t impact the user experience. Now let’s finalize this process by pre-compressing our static content. There are scripts out there that are easy to find that will save you some time in achieving this result, but let’s be clear once again about what we’re up to in this step. Having the server do the heavy lifting of compressing your assets on-the-fly is great, but it doesn’t really scale. By combining and storing the compress version of the concatenated CSS or JS file, what you’re doing is further optimizing the performance of your web server, because what it’s now able to do is send static content, the very thing that all web servers excel at. This tip is vital to reaching that happy place we promised, when we said we would alleviate the most painful issues of most sites.
5. Put everything in its place
   Web development fundamentals teach you to compartmentalize your CSS and JavaScript for maintainability and caching benefits, however, where is the best location of these external objects in your document? Most would agree that CSS belongs in the <head> of the page and they’d be correct, as for JavaScript, we encourage you to put only that code that’s required for accessibility of your interface in the <head> and everything else can be placed just above </body> at the bottom of the document. In this way, your presentation file is downloaded and cached and used to render the page, meanwhile users with fast connections can begin interacting with the page while the heaviest JS code is last to load (and then cached). Combined with the tip above, this approach allows you to avoid making sacrifices to make rich user experiences.
6. Scale to fit
   Revisiting the issue of scale, now from a different point of view, use of a Content Delivery Network (CDN) has become a much more accessible solution to this problem. Since the days when Akamai was seen as an innovator and the “only” solution the problem of insatiable demand for a sites content (or to overcome poor developmental practices), the CDN has been instrumental in reducing latency in delivering objects to users by providing multiple regional POPs for your assets. There are a number of other more affordable leverage points for content delivery, nothing against Akamai, but these other options put this powerful solution in the reach of more people. When your web applications simply are not performing as well as you would like during peak times per day a CDN allows you to offload the busy work of delivering static assets and focus your web server on the thinking. Obviously point #4 should not be skipped when moving to this solution as you’ll see more leverage than you can imagine when these solutions are combined, not to mention save a tremendous amount on bandwidth charges (~60% usually). Meanwhile users will feel like your site or application has more speed because most of the assets a given user will be downloaded will come from the closest possible point on the web.
7. Throw some horses at it
   For more complicated situations, you can look at throwing more hardware at the problem when the previous items have all be addressed and implemented. Specifically I’m referring to the Amazon Computing Cloud. This tip deals more with the web server component of solutions, so we’ll just consider this a bonus tip for those of you looking to make some computationally intense applications. This is a phenomenal offering from Amazon (and there are even others to consider from them) to be able to instantly scale and access a tremendous a lot of computing resources on-the-fly. Services like BrowserCam come to mind for solutions like this one.

So let’s see how techniques 1-5 combine to take shape:

Click the image for a larger view

It’s hard to argue with results!

A bonus tip is to use YSlow to get even more from Firebug! We’ve achieved some great performance with our home page:

Click the image for a larger view

But YSlow shows us where we can still improve:

Click the image for a larger view

Unfortunately YSlow doesn’t pick up on the pre-compressed content we send to users, we’ll have to play with our headers more to satisfy #3 and #4 at the same time no doubt. We will work on these things as we see the need; regardless the techniques we discuss (points 1-5) are demonstrated in the results shown in these screen shots. Many of you may be familiar with some classic tools like Andy King’s Web Page Analyzer are a great starting point for identifying some troublesome areas of your page, but in recent years yahoo’s developer network has really put in a single place the findings that we’ve uncovered ("the hard way") over the years. Unfortunately, as with this post, you’ll still have to develop your own solutions, nonetheless we’d recommend heading over to developer.yahoo.com, they’ve done a great job documenting best practices for creating optimal user experiences, including:

• Reduce HTTP requests (as stated above)
• Reduce DNS lookups
• Avoid HTTP redirects
• Make your AJAX cacheable
• Post-load components
• Pre-load components
• Reduce the number of DOM elements
• Split components across domains
• Minimize the number of inline frames
• Eliminate 404s (file not found errors)

For many sites and in most situations only a few of the above are of concern, but those of you out there with an older sites or applications may benefit from going through the pages of their content, server, cookie, CSS, JavaScript, mobile and image best practices. The only thing I should warn you about when delving into these best practices is that as with anything you can have too much of a good thing. So once again we suggest the 80/20 rule, do what’s required for the maximum gain. Nevertheless, Yahoo!’s developer network has grown into a great resource to say the least.

So tell us what you think, if you’re interested we can put together some examples for you and/or touch on server related optimization techniques as well.

If you haven’t seen or used it yet, please have a look and let us know what you think. Does this approach make it easier to move through the process compared to the long vertical layout? Reach out, let us know or leave a comment below.

Also we’re happy to see that many of you are taking advantage of the production profile facility in the client area. For those who have not checked it out, after you place an order say for a Drupal project with all of your style/preferential settings, you can go to the order summary for that page and place another order with all of the settings of that order “pre-set” for you. Please login to the client area and check it out and take advantage. We’ll be adding more functionality to this feature in the coming weeks as well.

• Creatives can now (contextually) mark up their designs instead of producing written documentation or countless pages of commented wire frames to communicate with front-end developers,
• Communication is vital and often time consuming in the user interface development process, ConceptShare streamlines this,
• The threaded comment facility of ConceptShare facilitates dialogue beautifully,
• Multiple stakeholders can now participate in the process of providing relevant input on a project, costs to produce polished and usable interfaces are dramatically reduced,
• The "risks" and "challenges" associated with outsourcing (or remote collaboration) are virtually destroyed thanks to the ability to "show and tell" using tools that are extremely easy to use

We’re really excited to have added this increased level of interaction for our clients. Communicating today’s Web 2.0 design, usability and user experience requirements to remote teams can finally feel just like sitting at the same desk with your own professional coding staff. This the first time in nearly 6 years that we can say that outsourcing for cutting edge code production has never been as accessible to freelancers, back-end developers, designers and agencies until now.

To get started:

1. Click the “I will provide design brief in conceptshare” check box (shown in the figure below) in section 1 of our order form and we’ll automatically create a ConceptShare workspace for you and send along the details for you! In the future, those clients will ConceptShare accounts will be able to give us access to workspaces they work with so that we can directly jump into their workflow process.

   
   The checkbox at the bottom of section 1 of the order form allows a ConceptShare workspace to be created for your project.

2. Next, add w3-markup.com and conceptshare.com domain names to your email account whitelists and check for email from our client area (support intranet) and also one from ConceptShare inviting you to the workspace created for you.

3. Login to the ConceptShare system and upload your comps (or mockups or design treatments or whatever you like to call them), label them appropriately and begin adding your comments and notes to each comp.

   
   Upload your comps to ConceptShare

   
   ConceptShare sample comment

4. When you’re done pop into the client area and let us know that you’ve finished providing your input

   
   Login to the W3 MARKUP client intranet

   
   View your ConceptShare design brief in the client intranet

   
   Review your Design Brief in the lightbox window

5. Our staff will then review all of your comments and ask any questions via the client area if we have any questions.

That’s it! No more 10 MB Microsoft Word / Project / Power Point documents or rifling through layer sets to try to make clear overlays and comments in your PSD files directly!

For those new to ConceptShare, please make sure to have a look at their tutorials and other relevant info at their site. ConceptShare has also received a lot of love, you don’t have to take our word for it; the Smashing Magazine guys loved how easy it made our WordPress theme project. Give it a shot and let us help you improve your efficiency, reduce headaches and get more projects completed every month.

What’s next? We’ll be improving/increasing the level of communication and integration with the ConceptShare system to provide even more support for projects requiring more than design brief level of detail for projects; that is projects that require dialogue and consult from W3 MARKUP code production staff.

Have any questions, comments or suggestions for us? Please let us know by leaving a comment below!

You may have noticed some changes of late on our site as we finally made time to roll out some features previously available only to select partners.

We’ve opened up our client intranet for all customers now, with it you’re able to:

• Track multiple project statuses with ease
• Communicate directly with the team working on your projects
• Easily make subsequent orders with your existing account

It’s one thing to receive great hand coding work, it’s yet another to get the code exactly the way you would have done it! So we’ve added some additional features:

• Our order form now contains most of the coding styles, techniques, javascript libraries and software (blogs, shopping carts, CMSes and frameworks) we support. No more asking us in live chat if we "support Magento" (now released); any software package we’ve ever worked with is listed right there for you!
• Within the client area, you can now use past orders as templates for future orders. We call this feature “production profiles.” A great use of this feature is for repeat orders with identical specifications; i.e. WordPress blog themes or ShopSite shopping cart themes projects for example can now be ordered in a few clicks.

We hope you enjoy the increased simplicity of the outsourcing process! Stay tuned there’s definitely more goodies to come. Let us know if you can think of anything that would make your outsourcing experience better.