agosto 18, 2010

10 Essential Free E-Books for Web Designers

While many may still prefer print for long-form reading, e-books are gaining popularity as a worthy digital alternative. Aside from all the usual benefits of digitizing a book (faster searches, less page-flipping, linked pages, additional resources, etc.), e-books are a huge help to digital and online professionals.

There are now e-books available on almost every aspect of design, from planning your business and managing your time, to designing web applications. This post highlights 10 of the best free e-books for designers, with selections available as PDFs or in HTML.

Whether they’re meant to inspire or educate, let us know if you can recommend any other free e-books aimed at designers in the comments below.

1. Taking Your Talent To The Web

This detailed, intelligent guide is a how-to on transitioning from print to web by Jeffrey Zeldman. It was written for print designers whose clients want websites, print art directors who’d like to move into full–time web and interaction design, homepage creators who are ready to turn pro, and professionals who seek to deepen their web skills and understanding.

Even though it was written in 2001, much of the advice about transitioning from print to the web still holds true, and print designers and art directors are still scrambling to move into web and interaction design.

2. Web Designer’s Success Guide

Web Designer’s Success Guide is the definitive resource for starting your own freelance web design business. Written by Kevin Airgid, a recognized designer who runs an interactive studio, the book offers step-by-step instructions on topics like transitioning from full-time to self-employment, marketing your freelance business, managing projects and pricing yourself appropriately.

3. Designing For The Web

A Practical Guide To Designing For The Web aims to teach core web development techniques based on the principles of graphic design. Written by recognized designer and author Mark Boulton, it is a stand-out amongst web design books with the right balance between practical and inspirational.

It features five sections: Getting Started, Research, Typography, Color and Layout. The focus is on learning graphic design theory, which you can then easily apply to your own designs.

4. Design Your Imagination

Design Your Imagination is a complete and comprehensive guide on website design for those new to the industry, although it may also prove helpful for experienced web designers as well. Almost every aspect of website design is exemplified in this e-book, which aims to help beginners hone their creativity.

This book features more than 28 chapters that deal with a broad array of subjects, from the history of web design through web design principles, planning, and more, all illustrated with practical examples.

5. Time Management For Creative People

Compiled from a series of posts published on Business of Design Online by writer and creativity coach Mark McGuinness, this is an easily digestible guide to help professionals in the creative sector maximize their time and productivity.

Subtitled “Manage the Mundane – Create the Extraordinary,” this book is designed to help you maintain your creative focus while dealing with your other commitments. It includes plenty of practical time management tips tailored specifically for creative types.

6. Getting Real

Getting Real is the business, design, programming, and marketing philosophy of 37signals, a developer of web-based software used by over one million people and businesses in 70 countries. With short, value-packed chapters, this book is an excellent guide for building web-based applications in a smarter, faster and easier way.

7. The Woork Handbook

The Woork Handbook is focused around web design and programming and primarily deals with CSS, HTML, Ajax, web programming, Mootools, Scriptaculous and other topics about web design.

It is an excellent reference book on a range of subjects all drawn from a wealth of excellent articles published on Woork.

8. A Practical Guide To Web Typography

Robert Bringhurst’s book, The Elements of Typographic Style, is on many a designer’s bookshelf, and is considered to be a classic in the industry. The renowned typographer Hermann Zapf calls the book “a must for everybody in the graphic arts, and especially for those just entering the field.”

In order to allay some of the myths surrounding typography on the web, this book has been structured as a walk through Bringhurst’s working principles, explaining how to accomplish each using techniques available in HTML and CSS. Practicality is ever present with workarounds, alternatives and compromises for less able browsers.

9. Integrating Accessibility Throughout Design

This e-book is a practical guide with advice on how to improve your websites, software, hardware, and consumer products, all with an eye on accessibility and avoiding future snags. Written by Shawn Henry, an outreach coordinator who promotes web accessibility for people with disabilities, it’s a straightforward and engaging resource.

The book covers the basics of improving accessibility in design projects with tips for comfortable interaction, having accessibility in a user-centered design process, examples of accessibility in user group profiles, personas, scenarios and much more.

10. Web Style Guide

An in-depth resource that offers information and instruction related to several areas of web development, including interface design, information architecture and usability.

The book explains established design principles and illustrates how they apply to projects whose primary concerns are information design and efficient search and navigation.

Beginner and advanced designers will find this to be one of the most practical guides available.

More Dev & Design Resources from Mashable:

– 12 Beginner Tutorials for Getting Started With Photoshop
– 40+ Web Design and Development Resources for Beginners
– 10 Free and Fun Twitter Bird Icons for your Website
– 11 Ways to Speed Up WordPress
– 10 Free Wireframing Tools for Designers

Image courtesy of iStockphoto, iamspartacus9

More About: accessibility, book, design, designers, developer, e-book, help, how to, List, Lists, resource, web design, Web Development

For more Dev & Design coverage:

Follow Mashable Dev & Design on Twitter
Become a Fan on Facebook
Subscribe to the Dev & Design channel
Download our free apps for iPhone and iPad

Rundes

febrero 24, 2010

10 Essential Chrome Extensions for Web Developers

This series is supported by Rackspace, the better way to do hosting. Learn more about Rackspace’s hosting solutions here.

As a web developer, you’re probably among the earliest adopters of new browser technologies. Google’s relatively new Chrome browser is one of those products that developers jumped all over as soon as it became available, but its initial lack of extensions was a dealbreaker for many.

Now extensions are supported in Chrome and some of the tools you’re accustomed to using in Firefox have become available, plus a few unique to Chrome. We’ve compiled a list of ten of the most useful Chrome extensions for web developers right here; if you use these extensions, you might even be able to make Chrome your main workhorse. Maybe!

Look at the list and give it a try — and if there are any great ones that we missed, be sure and share them with us and the other readers in the comments.

1. Firebug Lite

Arguably the most popular Firefox extension for web developers, Firebug lets you look at and edit the HTML, CSS and JavaScript of any page on the fly without leaving your browser. Firebug Lite is a scaled-down version of Firebug made for Chrome. You can inspect a page for errors then quickly edit to fix them.

Though Firebug Lite doesn’t have all the same features as Firebug, it has most of the essentials, and there’s a console interface for power users.

2. IE Tab

Microsoft’s Internet Explorer web browser is not at all popular with web developers, but it’s by far the most popular browser for the general population. With IE Tab you can open any website in a tab that’s actually running Internet Explorer instead of Chrome. You can make sure your website runs correctly for those millions of people who aren’t using Firefox, Safari, Chrome, or Opera.

3. Eye Dropper

With EyeDropper, you can find useful information on any color on a website you’re viewing in Chrome. Click the extension button and a color wheel interface drops down. From there, you can click the color picker button, then click anywhere on the site to see where the color for that pixel falls in the wheel, what its RGB levels are, and what its HTML color code is.

4. Chrome SEO

Tapping the Chrome SEO button after the extension has been installed will give you website information that’s important for search engine optimization. You can check backlinks, traffic measures like the Alexa Rank and Google PageRank, popularity on social bookmarking sites like Delicious, and more.

5. Lorem Ipsum Generator

The Lorem Ipsum Generator extension will generate filler text for your websites so you can make sure your formatting works well without wasting time typing several paragraphs of text. This extension is lightweight and minimalistic, so it’s easy to use and it won’t take up a lot of memory. That means it’s easy to pop in and out of as needed.

6. Resolution Test

Resolution Test’s purpose is right there in the name — it re-sizes the browser window to show what your website will look like at various popular screen resolutions. As a web developer, you probably have a very high-resolution display. Good for you! But most of the visitors to your site don’t; this extension will help you make sure the site’s formatting looks ok to them.

7. Speed Tracer

Speed Tracer uses the browser’s built-in metrics tools to record how much time your web application is spending on various tasks so you can find out what the hang-up is if your site is running slowly. It can tell you how much time the browser is spending interpreting layout, Javascript, and other details.

The only downside to this useful tool is that for it to work, you have to run the browser with the command line flag “–enable-extension-timeline-api.” But if you’re a developer, that’s probably not a big issue, right?

8. MeasureIt!

MeasureIt! is pretty straightforward — it gives you the dimensions (pixel width and height) of any element present in a website you’re looking at. Like a lot of the other extensions on this list, it was previously available for Firefox.

9. Pendule

Pendule pops up an easy-to-use, well-laid-out control panel full of miscellaneous tasks helpful to developers. Examples include reloading or disabling CSS, viewing JavaScript scripts, hiding images, a color picker, a display ruler, viewing source, and several script validators. It works well as your basic, catch-all web developer’s extension.

10. BuiltWith

BuiltWith gives you a profile of the website you’re hanging out at, including a list of all the technologies it can find there. It will tell you what widgets the site is using, which analytics tracker the webmaster is using, which frameworks are present, which advertising platforms are in use, and so on.

Series supported by Rackspace

Rackspace is the better way to do hosting. No more worrying about web hosting uptime. No more spending your time, energy and resources trying to stay on top of things like patching, updating, monitoring, backing up data and the like. Learn why.

Reviews: Chrome, Delicious, Firefox, Google, Internet Explorer, Opera, Safari

Tags: development, extensions, Google, google chrome, rackspace, web development series

Rundes

febrero 10, 2010

14 Fantastic Free WordPress Themes

Whether you’re a web developer whose clients need a great look and feel for their blogs, or just someone eager to bring a fresh new look to your own web site, there are literally hundreds if not thousands of free WordPress themes out there to consider. A number of those themes have been built by professional designers and talented amateurs, and are as easy on the eyes as they are easy on the wallet.

Whether you need a great photoblog layout, personal lifestream, or more business-oriented design, there’s almost surely an existing theme out there worth checking out for your next blog or blog upgrade. And if you’re already a developer or are willing to acquire a small set of template editing skills, you can always modify an existing theme to taste.

Have a look at some of our picks for great themes to either drop in as is or use as a starting point for your own tweaking and twiddling. Keep in mind this is only the tip of the iceberg — be sure to let us know about your other favorite themes in the comments!

1. Irresistible

For a unique personal blog look and feel, check out the free Irresistible theme from the folks at Woo Themes. It features dedicated spots for your photos, videos, and events lifestream along with your typical blog content. Featuring a nice, clean layout, this theme offers something a bit different from your typical 3-column blog design.

2. Demet

For a more magazine-style theme, check out the free premium Demet theme. This 3-column layout is fixed width and banner-ready for 125×125 and 468×60 pixel ad units.

3. P2

The P2 theme was inspired by Twitter, and was designed around allowing a group of bloggers to post short updates. It’s a great option for a cohesive group blog as well as for sites that do frequent liveblogging. Featuring dynamic page updates, threaded comment display, live tag suggestion, real-time notifications, and in-line editing for posts and comments, P2 is a powerhouse for blogs where real-time updates are critical.

4. WPESP Portfolio

WPESP Portfolio is a minimalist theme designed primarily for artists, photographers, designers, and others who need more of a portfolio showcase for their work. It combines the benefits of easy and frequent updates with the layout and user interface conducive to browsing visual works.

5. DarkHive

For an alternative magazine-esque style in two columns, have a look at DarkHive from the folks at MagPress. It sports a featured content slider for up front promotion of hot stories, auto-generated thumbnails for front page display, an Adsense ready loop between posts and on individual post pages, a 125×125-ready block in the sidebar and more.

6. Google Chrome

Here’s an interesting lightweight theme great for a geek-oriented blog, or a site that just wants a nice and clean two column look and feel. Inspired by the browser of the same name, Google Chrome is widget and gravatar ready plus XHTML and CSS validated.

7. Gallery

The showcase-style WordPress theme Gallery is built on the Thematic framework and was designed specifically for Smashing Magazine readers. Another great theme for a portfolio or other visual showcase, Gallery is a highly flexible and customizable theme that supports widescreen video embedding with the installation of a free plug-in.

8. Selecta

Another very visually-oriented theme, Selecta is great for videoblogs or other sites where video needs to be prominent. With a featured post slider carousel up top to promote your best content, threaded comments, and interest jQuery effects on board, Selecta also comes with six different color schemes to choose from.

9. BlackPower

A widget ready theme from the folks at SkinPress, the BlackPower theme features prominent Twitter integration, with your latest tweet appearing in the header. The two column theme also features easy on the eyes typography and a pastel color scheme with black wood effect on a translucent background.

10. Scarlett

The Scarlett theme features another great featured content carousel area up top and a real-time scrolling update area in the right-hand sidebar. It also includes a built-in javascript navigation menu, Adsense ready units, threaded comments display and more.

11. Freemium

The Freemium theme is a slickly-designed “premium” theme being given away for free thanks to the folks at FreebiesDock. Featuring two widget ready sidebars, a jQuery-based menu, 125×125 ad ready area and more, Freemium is a compelling design at a great “price.”

12. iBusiness

A great theme or starting point for a more professional business presence, iBusiness is a modern theme designed to showcase the About section right up front with a prominent image and company blurb or motto. This two column layout is widget ready, SEO optimized and 125×125 banner ready.

13. Meganews

Another great option for a magazine or news site, Meganews features a clean story-lead display in four columns plus a right-hand sidebar. It also supports an animated tag cloud and featured content slideshow.

14. Snapshot

A great theme for shutterbugs and photoblogs, Snapshot from Woo Themes can also be put to use as a portfolio or design gallery. It also comes with three unique color schemes to choose from as well as options for switching between photoblog and portfolio use.