If you are a designer or developer, you probably know that this field is one of the most innovative and fastest growing industry in the world. If you want to keep up to date and stay ahead of your competitors you must learn new things all the time and follow trends. Even though the Internet is the best place for the Creatives to learn anything for free, I would highly recommend you to spend a few bucks and get some design and development books. There are a lot of experts who have encountered problems and found solutions which they share with us in the books, so why not take advantage of their best practices and smart approaches to problems?

These books will definitely help you become a better designer, developer or both. You will gain a lot of useful and practical knowledge in design psychology, user experience, branding, storytelling, programming, coding, business and much more. Hopefully this list of books will help you choose the next book to read during rainy evenings.

Recommended Reading: 20 Useful IPhone Apps For Developers & Designers

Design Is a Job

Co-founder of Mule Design and raconteur Mike Monteiro wants to help you do your job better. From contracts to selling design, from working with clients to working with each other, this brief book is packed with knowledge you can’t afford to not know. ($9 – $23)

Storytelling: Branding in Practice

This book is written for practitioners by practitioners. Through real life examples, simple guidelines and practical tools, the book aims to inspire companies to use storytelling as a means of building their brand – internally as well as externally. ($39.25)

Neuro Web Design: What Makes Them Click?

Neuro Web Design employs "neuro-marketing" concepts, which are at the intersection of psychology and user experience. It’s scientific, yet you’ll find it accessible, easy to read, and easy to understand. By applying the concepts and examples in this book, you’ll be able to dramatically increase the effectiveness and conversion rates of your own website. ($16.35)

Thinking with Type: A Critical Guide for Designers, Writers, Editors, & Students

Thinking with Type is the definitive guide to using typography in visual communication, from printed page to computer screen. This revised edition includes forty-eight pages of new content, including the latest information on style sheets for print and the Web, the use of ornaments and captions, lining and non-lining numerals, the use of small caps and enlarged capitals, as well as information on captions, font licensing, mixing typefaces, and hand lettering. ($16.47)

The Elements of User Experience: User-Centered Design for the Web

The Elements of User Experience cuts through the complexity of user-centric design for the Web with clear explanations and vivid illustrations that focus on ideas rather than tools or techniques. Jesse James Garrett gives readers the big picture of Web user experience development, from strategy and requirements to information architecture and visual design. This accessible introduction helps any Web development team, large or small, to create a successful user experience. ($17.81)

Content Strategy for the Web

Without meaningful content, your website isn’t worth much to your key audiences. But creating (and caring for) "meaningful" content is far more complicated than we’re often willing to acknowledge. Content Strategy for the Web explains how to create and deliver useful, usable content for your online audiences, when and where they need it most. It also shares content best practices so you can get your next website redesign right, on time and on budget. ($18.11)

Scalable and Modular Architecture for CSS

SMACSS (pronounced "smacks") is more style guide than rigid framework. There are no libraries within for you to download or install. SMACSS is a way to examine your design process and a way to fit those rigid frameworks into a flexible thought process. Learn how to structure your CSS to allow for flexibility and maintainability as your project and your team grows. ($20)

Logo Design Love: A Guide to Creating Iconic Brand Identities

There are a lot of books out there that show collections of logos, but David Airey’s "Logo Design Love" is something different. It’s a guide for designers (and clients) who want to understand what this mysterious business about logos is all about. Written in reader-friendly, concise language, with a minimum of designer jargon, Airey gives a surprisingly clear explanation of the process, using a wide assortment of real-life examples to support his points. ($24.08)

Web Design Confidential

Drawing on survey statistics from over 5,400 web designers from around the world, and the insight and experiences of several design veterans, Amanda Hackwith unlocks the door and sheds light on the web design industry in Web Design Confidential. Have you ever wondered if your hourly rate is too low or too high? Are you torn between freelance design work and full-time employment? Are you missing an essential design skill without even knowing it? Whether you’re looking for the latest web design practices, words of wisdom from design veterans, or just a better understanding of your profession, Amanda Hackwith and 5400 colleagues have the answers to your questions and you’ll find what you need in Web Design Confidential. ($26)

Client Centric Web Design

A client-centric web design methodology addresses the negative attitude that exists towards client work and has the potential to transform your business. For the client/designer relationship, to work both parties need to respect the other. In this book you will explore how to move the clients’ perception of you as a pixel pusher to that of an expert. ($13.79)

JavaScript & jQuery: The Missing Manual

JavaScript lets you supercharge your HTML with animation, interactivity, and visual effects, but many web designers find the language hard to learn. This jargon-free guide covers JavaScript basics and shows you how to save time and effort with the jQuery library of prewritten JavaScript code. You’ll soon be building web pages that feel and act like desktop programs, without having to do much programming. ($23.99)

PHP Solutions: Dynamic Web Design Made Easy

You want to make your websites more dynamic by adding a feedback form, creating a private area where members can upload images that are automatically resized, or perhaps storing all your content in a database.

This book doesn’t just provide a collection of ready-made scripts: each PHP Solution builds on what’s gone before, teaching you the basics of PHP and database design quickly and painlessly. By the end of the book, you’ll have the confidence to start writing your own scripts. ($26.99)

HTML5 for Web Designers

The HTML5 spec is 900 pages and hard to read. HTML5 for Web Designers is 85 pages and fun to read. Easy choice. HTML5 is the longest HTML specification ever written. It is also the most powerful, and in some ways, the most confusing. What do accessible, content-focused standards-based web designers and front-end developers need to know? And how can we harness the power of HTML5 in today’s browsers?

In this brilliant and entertaining user’s guide, Jeremy Keith cuts to the chase, with crisp, clear, practical examples, and his patented twinkle and charm. ($9 – $18)

The Unlimited Freelancer

Freelancing doesn’t have to be a daily struggle. You too can build the business of your dreams – the business that you wanted to have in the first place. Sure, it takes hard work, but you’re probably already used to that anyway. By using the proven strategies in this book you’ll be running a successful business in less time than you thought possible. ($19)

CSS3 for Web Designers

From advanced selectors to generated content to the triumphant return of web fonts, and from gradients, shadows, and rounded corners to full-blown animations, CSS3 is a universe of creative possibilities. No one can better guide you through these galaxies than world-renowned designer, author, and CSS superstar Dan Cederholm. Learn what works, how it works, and how to work around browsers where it doesn’t work. ($9 – $18)

Decoding HTML5

In Decoding HTML5, Jeffrey Way dives straight in and delivers something that the every day designers or developers can immediately pick up and understand! This book focuses less on the politics of HTML5 (though it does touch on this), and more on the ways to immediately integrate HTML5 and its friends into your web projects. ($19)

jQuery: Novice to Ninja

jQuery: Novice to Ninja, 2nd Edition is the perfect book to jump-start your journey into jQuery. You’ll learn all the basics, so you’ll be able to truly appreciate the power of this JavaScript framework. Then you’ll move on to more advanced techniques, such as plugin development and the creation of almost every conceivable UI widget. ($23.97)

Website Owner’s Manual

Website Owner’s Manual helps you form a vision for your site, guides you through the process of selecting a web design agency, and gives you enough background information to make intelligent decisions throughout the development process. This book provides a jargon-free overview of web design, including accessibility, usability, online marketing, and web development techniques. You’ll gain a practical understanding of the technologies, processes, and ideas that drive a successful site. ($22.50 – $39.99)

JavaScript Web Applications

Building rich JavaScript applications that bring a desktop experience to the Web requires moving state from the server to the client side – not a simple task. This hands-on book takes proficient JavaScript developers through all the steps necessary to create state-of-the-art applications, including structure, templating, frameworks, communicating with the server, and many other issues. ($22.31)

The Elements of Content Strategy

Content strategy is the web’s hottest new thing. But where did it come from? Why does it matter? And what does the content renaissance mean to you? This brief guide explores the roots of content strategy, and quickly and expertly demonstrates not only how it’s done, but how it is done well. A compelling read for both experienced content strategists and those making the transition from other fields. ($9 – $18)

The Thank You Economy

If this were 1923, this book would have been called "Why Radio Is Going to Change the Game" . . .

If it were 1995, it would be "Why Amazon Is Going to Take Over the Retailing World" . . .

The Thank You Economy is about something big, something greater than any single revolutionary platform. It isn’t some abstract concept or wacky business strategy – it’s real, and every one of us is doing business in it every day, whether we choose to recognize it or not. It’s the way we communicate, the way we buy and sell, the way businesses and consumers interact online and offline. ($15.51)

Responsive Web Design

From mobile browsers to netbooks and tablets, users are visiting your sites from an increasing array of devices and browsers. Are your designs ready? Learn how to think beyond the desktop and craft beautiful designs that anticipate and respond to your users’ needs. Ethan Marcotte will explore CSS techniques and design principles, including fluid grids, flexible images, and media queries, demonstrating how you can deliver a quality experience to your users no matter how large (or small) their display. ($9 – $18)

A Project Guide to UX Design: For user experience designers in the field or in the making

User experience design is the discipline of creating a useful and usable website or application – one that’s easily navigated and meets the needs of both the site owner and its users. But there’s a lot more to successful UX design than knowing the latest Web technologies or design trends: It takes diplomacy, project management skills, and business savvy. That’s where this book comes in. ($23.17)

Stunning CSS3: A project-based guide to the latest in CSS

By reading this book you’ll learn how to accomplish modern CSS3 effects and more by working through a series of practical yet cutting-edge projects. Each chapter walks you through standalone exercises that you can integrate into projects you’re working on, or use as inspiration. You’ll learn all of the most popular, useful, and well-supported CSS3 techniques. ($27.09)

Designing for Emotion

Make your users fall in love with your site via the precepts packed into this brief, charming book by MailChimp user experience design lead, Aarron Walter. From classic psychology to case studies, highbrow concepts to common sense, Designing for Emotion demonstrates accessible strategies and memorable methods to help you make a human connection through design. ($9 – $18)

Related posts:

1. Fresh Resources for Designers and Developers – October 2012
2. Cheatsheets Wallpapers for Web Designers and Developers
3. 20 Useful iPhone Apps for Developers & Designers
4. 30 Free eBooks and Whitepapers For Web Designers

Vector graphics have been widely applied in print media. In a website, we can also add vector graphics with SVG or Scalable Vector Graphic. Citing from the official spec at W3.org, SVG is described as:

A language for describing two-dimensional graphics in XML. SVG allows for three types of ßgraphic objects: vector graphic shapes (e.g., paths consisting of straight lines and curves), images and text.

It has actually been around since 1999 and as of 16 August 2011, it became a W3C Recommendation. Yet, SVG is still considerably underused, whereas there are a lot of advantages in using Vector rather than Bitmap to serve graphic or image on a website.

SVG Advantages

In term of serving graphics on websites, SVG offers a few advantages over Bitmap, some of which include:

Resolution Independent

Bitmap/raster graphic is resolution dependent – it is built upon pixels. Graphics served will looked pixelated when it is resized at a certain zoom level. That doesn’t happen to vector graphic, which is resolution independent in nature, as the graphic is expressed with a mathematical equation which makes it scalable at any zoom level while maintaining quality, even at Retina Display.

Reducing HTTP Request

SVG can be embedded directly into an HTML document with svg tag, so the browser does not need to do a request to serve the graphic. This also results in better load performance for the website.

Styling and Scripting

Embedding directly with svg tag will also allow us to style the graphic easily through CSS. We can change object properties such as background color, opacity, borders, etc the same way we do with regular HTML tag. Similarly, we can also manipulate the graphic via JavaScript.

Can be animated and Edited

SVG object can be animated when it uses the animation element or through JavaScript Library like jQuery. The SVG object can also be edited with any text code editor or a graphic software like Inkscape (which is free) or Adobe Illustrator.

Smaller File Size

SVG has a smaller file size compared to Bitmap, that has a similar graphic presentation.

Drawing Basic Shapes with SVG

According to the spec, we can draw some basic shapes like the rectangle, circle, line, ellipse, polyline and polygon with SVG and in order for the browser to render the SVG graphic, all those graphic elements need to be inserted within the <svg> ... </svg> tag. Let’s see the examples below for more details:

Line

To draw a line in SVG we can use the <line> element. This element is used to draw a single straight line, so it will only consist of two points, start and end.

  <svg>  <line x1="0" y1="0" x2="200" y2="200" stroke-width="1" stroke="rgb(0,0,0)"/>  </svg>  

As you can see above, the line start point coordinate is expressed with the first two attributes x1 and x2, while the line’s end point coordinate is expressed with y1 and y2.

There are also two other attributes, the stroke and stroke-width which are used to define the border’s color and border’s width, respectively. Alternatively, we can also define these attributes within an inline style, like so:

  style="stroke-width:1; stroke:rgb(0,0,0);"  

it eventually just does the same.

• View Demo “Line”

Polyline

It’s almost similar to the <line>, but with the <polyline> element we can draw multiple lines instead of just one. Here is an example:

  <svg>  <polyline points="0,0 50,0 150,100 250,100 300,150" fill="rgb(249,249,249)" stroke-width="1" stroke="rgb(0,0,0)"/>  </svg>  

<polyline> element has points attributes that store all the coordinates that form the lines.

• View Demo “Polyline”

Rectangle

Drawing a rectangle is also simple with this <rect> element. We only need to specify the width and height, like so:

  <svg>  <rect width="200" height="200" fill="rgb(234,234,234)" stroke-width="1" stroke="rgb(0,0,0)"/>  </svg>  

• View Demo “Rectangle”

Circle

We can also draw a circle with the <circle> element. In the following example, we will create a circle with 100 radius which is defined with r attribute:

  <svg>  <circle cx="102" cy="102" r="100" fill="rgb(234,234,234)" stroke-width="1" stroke="rgb(0,0,0)"/>  </svg>  

The first two attributes, cx and cy are defining the circle’s center coordinate. In the above example, we have set 102 both for the x and y coordinate, if these attributes are not specified, 0 will be taken as the default value.

• View Demo “Circle”

Ellipse

We can draw an ellipse with <ellipse>. It works quite similar to the circle, but this time we can control specifically the x line radius and y line radius with rx and ry attribute;

  <svg>  <ellipse cx="100" cy="50" rx="100" ry="50" fill="rgb(234,234,234)" stroke-width="1" stroke="rgb(0,0,0)"/>  </svg>  

• View Demo “Ellipse”

Polygon

With the <polygon> element, we can draw multiple sides of shapes like a triangle, hexagon and even a rectangle. Here is an example:

  <svg>  <polygon points="70.444,218.89 15.444,118.89 70.444,18.89 180.444,18.89 235.444,118.89 180.444,218.89" fill="rgb(234,234,234)" stroke-width="1" stroke="rgb(0,0,0)"/>  </svg>  

• View Demo “Polygon”

Using Vector Graphic Editor

As you can see, drawing simple objects with SVG in HTML is quite easy. However, when the object gets more complex, that practice is no longer ideal and will give you a headache.

Fortunately, as we’ve mentioned above, we can use a vector graphic editor like Adobe Illustrator or Inkscape to do the job. If you are familiar with these software, it is surely a lot easier to draw objects with their GUI rather than to code the graphic yourself in HTML tag.

If you are working with Inkscape, you can save your vector graphic as plain SVG, and then open it in text code editor. Now, you should find the SVG codes in the file. Copy all the codes and paste them inside your HTML document.

Or, you can also embed the .svg file through one of these elements; embed, iframe and object, for instance;

  <object data="images/ipod.svg" type="image/svg+xml"></object>  

The results will eventually be the same.

In this example, I use this Apple iPod from OpenClipArt.org.

• View Demo “iPod”

Browser Support

Regarding browser support, SVG has been very well supported in all major browsers, except in IE8 and earlier. But this matter can be solved with this JavaScript Library, called Raphael.js. In order to make things easier we will use this tool, ReadySetRaphael.com to convert our SVG code into Raphael-supported format. Here’s how.

First of all, download and include the Raphael.js library to your HTML document. Then, upload the .svg file to the site, copy and paste the generated code inside the following load function;

  window.onload=function() {   	//the Raphael code goes here  }  

Inside the body tag, put the following div with rsr id attribute;

  <div id="rsr"></div>  

That’s it, you’re done. Check out the example from the link below.

• View Demo “Raphael”

Final Thoughts

So that’s the basics with SVG. We hope now you have a fair understanding of this subject. It is the best way to optimize your site for any screen resolution, even for use on Retina display.

As always, if you are an adventurous person, here we have put a few more references and discussion to dig deeper into this subject.

• An Introduction to SVG – W3 Schools
• Resolution Independent with SVG – Smashing Magazine
• Why Aren’t You Using SVG? – NetTuts

Thanks for reading and we hope you enjoyed this post.

• View Demo
• Download Source

Related posts:

1. Product Graphics: 6 Techniques to Make Images More Informative
2. Coding Kung-fu: 35 Graphics Built Purely With CSS3
3. A Look Into: CSS3 :First-Of-Type Structural Selector
4. How to Create an Image Slider using Photoshop & jQuery