Web Development | Webdesigner Depot

30 Jan
New developer tools in Firefox 10 and 11
Browsers, Firefox, Web Development
Tweet View Comments

Firefox 10, due out January 31st (the same day Firefox 11 becomes an official Beta release), finally rounds out the browser’s growing collection of developer tools with Page and Style Inspectors.
In some ways, these tools are similar to Firebug, but they’re also uniquely Mozilla-ey.
Rather than try to reproduce Firebug or the WebKit developer tools, Mozilla has included only the most essential features, focusing instead on making the experience elegant.
Does the new approach work, or will designers run screaming back to Firebug? Let’s take a look. Read more
10 Jan
Password strength verification with jQuery
Tutorials, Web Development, jQuery
Tweet View Comments

Many sites that require login credentials enforce a security setting often referred to as password complexity requirements. These requirements ensure that user passwords are sufficiently strong and cannot be easily broken.
What constitutes a strong password? Well, that depends on who you ask. However, traditional factors that contribute to a password’s strength include it’s length, complexity, and unpredictability. To ensure password strength, many sites require user passwords to be alphanumeric in addition to being a certain length.
In this tutorial, we’ll construct a form that gives the user live feedback as to whether their password has sufficiently met the complexity requirements we will establish. Read more
5 Jan
Zurb’s newest offering for developers: Foundation
Programming, Web Design, Web Development
Tweet View Comments

Zurb has a long history of providing awesome web apps and resources for designers and developers. Their apps include Notable, Axe, Enroll, and Spur, among others.
Other resources from Zurb include everything from downloadable sketchsheets and grid paper, CSS buttons, CSS3 tools, visual effects & animation examples, and a lot more.
Zurb has recently launched a new tool for designers, called Foundation, a free rapid prototyping framework.
Zurb’s Lead Designer, Jonathan, answered some questions for us about the new project. Read more
1 Sep
The ultimate responsive web design roundup
Resources, Web Design, Web Development
Tweet View Comments
Responsive design is the new darling of the web design world. It seems that not a week goes by that there aren’t new resources for doing it, opinions about how to do it or even whether to do it at all, and new sites that make beautiful use of it.
It can quickly get overwhelming trying to keep up with it all.
Here we’ve compiled a list of more than seventy resources for creating responsive designs.
Included are articles discussing responsive design and related theories, frameworks and boilerplates for responsive layouts, tools for testing your responsive designs, techniques for resizable images, and a whole lot more.
Then, to top it all off, we’ve collected a hundred of the best responsive designs out there right now to inspire you and give you some real-world ideas. Read more
23 Jun
Who’s going to save the World Wide Web?
Apps, Mobile, Web Development
Tweet View Comments
The World Wide Web turned the desktop application into a passé. But will mobile applications destroy the Web? It could happen, especially if things continue as they are now. But who will save it?
It won’t be mobile apps. They’re all the rage these days. Tens of thousands of them being maintained by developers (which might be the same people who previously developed desktop apps). And they are giving those who support the open Web reason to worry.
Who knows, we might live in a future where the Web suffers a similar fate as the desktop application has — desktop applications are still being made, yes, but the future prospects are, at best, glum.
However, steps can be taken in order to save the World Wide Web, but getting there is a long and difficult path. Read more
16 Nov
What Every Web Developer Should Know About Front-End Performance
Code, Programming, Web Development
Tweet View Comments
Too often as developers, we ignore a crucial last step before launching a website: optimizing for performance.
Most developers now recognize that organized, valid code ensures maintainability and compatibility.
Anyone who doubts this merely has to speak to a developer who has picked up work on an old website that is littered with unorganized, uncommented spaghetti code.
Just as preparing our code to be read by other developers is important, so is preparing our code to be read by browsers. Great web development might start with great organization, but it ends with great optimization.
This article introduces best practices of front-end performance. Read more
30 Sep
A Case for Coding Your Wireframes
Code, Programming, Web Development
Tweet View Comments
Working as a designer day after day can be laborious. Luckily, the field has expanded, and so the process has become simpler. Many free tools and resources are out there.
Wireframes bring elegance to design mock-ups. They are the basic structure of a website, with colors and enhancements removed.
They are used to view design concepts with just the bare essentials, and they can provide a useful perspective on any project.
Most wireframes are created in software suites such as Adobe Photoshop and Fireworks, but some websites enable you to create wireframe images right in the browser.
In this post, we’ll go over coding a basic wireframe image in HTML and CSS and see how it can benefit the creative process. Read more
27 Sep
10 Places to Buy Professionally Designed WordPress Themes
Web Design, Web Development, WordPress
Tweet View Comments
In the past few years, the popularity of WordPress has skyrocketed, which has led to a growing demand for themes. With this growing demand, we’ve seen new premium or commercial WordPress theme shops popping up everywhere.
Some may say that the premium WordPress space is getting a bit saturated, and they’re probably right. However, more premium theme providers does mean a wider selection for those seeking more than what a free theme can offer.
The only problem is being able to find quality and professionalism in the vast sea of premium themes. It seems that the majority of premium theme designs out there are lacking, and appear a bit amateurish.
So for this post, we’re showcasing 10 great places where you can purchase professionally designed WordPress themes.
All of these shops are run by either designers or people that understand design – and as you can see, it shows in the quality of each theme. Read more
23 Jul
Book Review: From Photoshop to HTML
Books, Review, Web Development
Tweet View Comments
If you’re new to creating website designs using Photoshop, learning to transform those .PSD files into semantic, standards-compliant CSS and HTML files can be a bit intimidating.
After all, there are plenty of great services out there that can slice up and code your files for you. But there are those cases when you may prefer to slice those designs by yourself.
That’s where From Photoshop to HTML: How to Slice Your Designs Like a Pro by Jeffrey Way, editor of Nettuts+, comes in.
In this 145-page book, the entire process of converting a .PSD file into a working website design is covered, in detail, with code examples. Read more
22 Jul
20+ Demos Showing Advanced jQuery Effects
Effects, Web Development, jQuery
Tweet View Comments
Just a short while ago, Flash was one of the primary technologies used by web designers to add interactivity to a website.
Since the introduction of the iPad, with its lack of the Flash Player, there’s an acceleration in the web development world to use alternative technologies to Flash, such as jQuery, Ajax and others.
Although Flash is still a very powerful and useful tool, which works great on many cases, several of the effects that web designers are accustomed to creating in Flash, can be just as easily implemented using jQuery.
Here are 21 online demos that show the power of jQuery for creating advanced effects and interactivity that can rival Flash. Read more
20 Jul
A Complete Guide to A/B Testing
How to, Web Design, Web Development
Tweet View Comments
A/B testing (also called split testing) is a testing method generally used in marketing to compare results between two samples with the goal to improve conversion or response rates.
In web design, A/B tests are generally used to test design elements (sometimes against the existing design) to better determine which design elements will get the best response from visitors.
A/B tests, by definition, compare only two variables (design elements) at a time. There is also multivariate testing, which compares more than one variable.
Each one serves a purpose and can help your clients make better decisions that will result in a more successful website.
Here we present a thorough guide to A/B testing, including the benefits of using it and how to administer A/B tests on your own projects. Read more
28 Jun
WordPress 3.0 Upgrade: What to Expect
How to, Web Development, WordPress
Tweet View Comments

With virtually any WordPress release (or the release of any open-source software, for that matter), there are bound to be bugs.
In a lot of cases the bugs are minor, and are just annoying. In other cases, these “bugs” can completely disable your site. Kind of like the difference between a mosquito bite and being attacked by a swarm of wasps.
WordPress 3.0 is no different. Almost as soon as the official release came out, reports of bugs starting pouring in. In the vast majority of cases, these bugs had to do with either customizations based on deprecated code or plugins that aren’t yet compatible with 3.0.
And in virtually every case, easy fixes have already been found. Of course, there are also a number of things you can do prior to upgrading to prevent problems. Read on for some tips, and some of the common bugs you might run into. Read more
10 Jun
WordPress: From Kubrick to Twenty Ten
Web Developers, Web Development, WordPress
Tweet View Comments

Kubrick, the default theme for WordPress since 2005, got many Web and open-source enthusiasts through some pretty tough times.
Developers have modified it, bloggers have learned HTML and CSS on it, and designers have made it their go-to template for designing blogs of all sizes for clients.
But let’s face it: five years on the Web is like a hundred years anywhere else, and Kubrick, even according to its creators, is due for an update.
Enter “Twenty Ten” the new default theme for WordPress 3.0, which is scheduled for an imminent release. Not only does it address general changes in Web standards and style guides, it takes into account the clamoring of designers who love WordPress but have had a hard time applying new principles to an older theme. Read more
28 May
Browser Testing: A Family Tree
Compatibility, Web Development, Webmasters
Tweet View Comments

One task drives web professionals to distraction more than almost any other: testing whether their design works equally well in a multitude of browsers and on different devices.
The list of browsers and platforms to verify against keeps getting longer, and as designers, our tempers are getting proportionally shorter; IE6 will probably feature in nightmares for years to come!
Yet doing our work in an ever-widening range of situations is becoming increasingly important.
This article highlights the most common issues that arise when testing with “the usual suspects” and explains why a change in tactics may soon be needed. Your entire perspective on compatibility testing could change. Read more
14 Dec
Solutions to 5 Common Ajax Problems
Ajax, Programming, Web Development
Tweet View Comments

The modern web developer who does not consider Ajax when planning or building their websites is potentially missing out on a powerful tool to enhance usability.
There are however, challenges in implementing Ajax functionality on a web page.
In this article we’ll discuss solutions to five of the most common challenges that a developer faces when using Ajax to enhance the content on their website.
Although there is a lot more to discuss and research on all five topics, this post should give beginners and intermediate Ajax developers some solid tips on implementing Ajax functionality in a more user-friendly and accessible manner.
Read more
12 Nov
Coding a Web Design for Speed and Quality
Code, Usability, Web Development
Tweet View Comments

The beauty of being a web designer is creating a detailed, creative, and original web design in Photoshop, without having to (for the most part) think about how it will be coded.
During the design phase, it’s all about the look, and either the coding can be taken care of later, or be outsourced to a developer.
Either way, not thinking about the development usability or functionality is a great way for a designer to not feel limited in the design process.
This is a great way of thinking, and can lead to the best designs. However, once it does need to be coded, we as designers are in a tricky spot.
In this article, you’ll find a few simple tips that can help designers learn basic XHTML/CSS conversion efficiently for a quick-loading website that is accurate to the original PSD. Read more
27 May
The 960 Grid System Toolbox & Resources
CSS, Web Development
Tweet View Comments

The 960 Grid System was created by Nathan Smith as a way to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels.
The 960.gs (or any CSS framework) was primarily developed for rapid prototyping, cutting down on repetitive and tedious tasks, but is also more than suited to be used for any web design project.
It will give your site a structured and solid foundation for you to build and style your design upon.
In this article, you’ll find tutorials, a showcase of sites designed using the 960.gs, spin offs, basic WP themes built on the 960.gs and possible alternative frameworks, if for some reason you don’t like the 960 grid system. Read more