The New Mobile Book Is Finally Here!


Yes, our brand new Smashing Mobile Book has finally arrived, and it has almost reached your doorstep! If you’ve already pre-ordered the book weeks ago, then it’s really only a matter of days! Until then, the complimentary digital version is waiting for you in your Smashing Shop dashboard. And if you haven’t ordered just yet, make sure to get the book now!

At this very moment, all pre-orders are being shipped from Berlin, Germany, by airmail. Due to an unexpected huge amount of pre-orders in the past days, delivery of the new book orders will take a bit longer since we only have a limited amount of printed books in pre-sale stock.

Of course, we are printing extra copies in this very moment as you read this post. But unfortunately, the shipping of the new printed copies can only start in early January 2013. Still, you get the eBook automatically once you’ve ordered the printed book, so you can start reading right away!

eBook Is Now Available

The eBook of the Mobile Book is available for download immediately: PDF, ePUB and Kindle formats for your convenience. If you have pre-ordered the book, your eBook is waiting for you in your Download Area. Also, keep in mind that the eBook is included in the Smashing eBook Library—our annual subscription with 70% discount on all Smashing eBooks.

And if you still haven’t ordered yet, you can get the Mobile book right now, and start reading within a couple of minutes! You won’t be disappointed. Why? Let’s see why.

About the Book

The Mobile Book

Our brand new printed Mobile Book features the most important things that you need to know as a designer, developer or mobile strategist to make your websites optimized for mobile. You’ll dive deep into the peculiarities of the mobile industry, explore responsive design strategy, design patterns and optimization techniques, learn about wireframing and prototyping for mobile as well as the guidelines for designing with gestures and touch. If you are looking for a good book on mobile, this is the one.

Table of Contents

When setting up the concept of the book, we worked hard to ensure a delicate balance between advanced knowledge and the current state of the art:

Jeremy Keith Foreword
Jeremy Keith has been around on the Web for a while and saw the emerging mobile medium from its earliest days. With his preface for the Mobile Book, Jeremy introduces us to this new facet of the Web and the new possibilities and challenges that the Mobile industry produces as a relatively young medium.
Peter-Paul Koch What’s Going on in Mobile?
This chapter provides a general overview of what’s going in the mobile industry today, who are its main players and how they influence each other. From a technical perspective, the chapter reviews the peculiarities of mobile networks and platforms, existing mobile browsers and guidelines for testing websites on mobile. You’ll understand the mobile market, how it works, what it involves and how it affects our daily work.

Chapter keywords: mobile value chain, operators, device vendors, fragmentation, Android, iPhone, Windows Phone, OS vendors, proxy browsers, open device lab, mobile network.

Stephanie Rieger The Future of Mobile
This chapter provides a glimpse of where the future of mobile might lead, and what technologies will lead us there. These include new low-power computer chips, new display technologies, new APIs and the growing penetration of near field communication (NFC). But more important than the technologies themselves is how they will need to work together, enabling new and exciting ways to do business, to connect with friends and family and to interact with the world around us.

Chapter keywords: connected devices, TVs, consumer customization, display technologies, RFID, NFC, Device APIs.

Trent Walton Responsive Design Strategies
The main components of Responsive Web Design(RWD) — flexible grids, flexible images, and media queries — are just the tip of the iceberg. And with the ever-increasing number of devices flooding the market, RWD is the most effective way to address them all at once. This chapter by Trent Walton features strategies, techniques and design workflow tips on building effective and bulletproof responsive designs.

Chapter keywords: image aspect ratios, resolution independence, breakpoints organization, vertical and em-based media queries, content choreography, image hierarchy, fluid type.

Brad Frost Responsive Design Patterns
As Responsive Design continues to evolve, we’re confronted with difficult problems about how to create adaptive interfaces that look and function beautifully across many screen sizes and environments. E.g. how do we handle navigation that’s four levels deep? This chapter features emerging responsive design patterns and explains how to use them meaningfully in your projects. Brad Frost provides useful tips and expert advice on various design elements covering everything from complex navigation to advanced data tables.

Chapter keywords: style guides, layout, navigation, conditional loading, progressive disclosure, background images, icons, maps, type, carousels, accordions, forms, tables.

Dave Olsen Optimization For Mobile
Although Responsive design per se has provided a great fundamental concept for designing mobile-optimized websites, the core ideas that make up these concepts pre-date the mobile revolution. In this chapter, Dave Olsen reviews what it takes to optimize mobile experiences in terms of performance. How do we keep responsive websites lightweight? What do we need to know about caching, lazy loading, latency? How can we start using RESS? Device detection or feature detection? Also, how do we develop and test our websites for performance? This chapter answers all these questions and more.

Chapter keywords: mobile performance, latency, localStorage, lazy loading, Data URI scheme, JS frameworks, RESS, browser detection, feature detection.

Dennis Kardys Hands On Design for Mobile (UX Perspective)
Mobile requires us to rethink the way we create, develop and build experiences for our users. In this chapter, you’ll look at some of the more glaring pitfalls to conventional processes, specifically as they pertain to how we design—and how we communicate design—for an increasingly mobile-accessed Web. You’ll learn about implementing and selling processes that support a realistic understanding of what it means to design with mobile in mind.

Chapter keywords: psychology, contextual interviews, collaborative design workshops, design studio methods, sketching, wireframing, convergent prototyping.

Josh Clark Designing With Gestures and Touch
Among the many new opportunities of the mobile medium are the capabilities of mobile devices. One of the major interaction changes, however, involves gestures and touch. In this chapter, Josh Clark explains how we can use them to improve the mobile user experience and provides concrete examples of implementations in real-life applications.

To ensure the quality of the book’s content, the chapters have been reviewed by a number of active members of the mobile design community such as Scott Jenson, Bruce Lawson, Lyza Danger Gardner and Bryan Rieger—just to name a few. It wasn’t easy to bring together such a stellar line-up of experts, but a compromise wasn’t an option.

Sample and Technical Details

The Mobile Book
The Mobile Book. Large preview

Extra eBook: Addendum

Initially, we wanted to cover all popular mobile topics within the printed book, but because some chapters took more time to write and review than planned, we decided to release them in an addendum to the printed book. All buyers of the Mobile Book will get the Addendum for free in January 2013. The eBook will provide insights into design and development for iOS, Android, Windows Phone, as well as introduce developing and debugging techniques for advanced HTML5 Web applications and explore UX patterns on these platforms.

Our new Mobile Book is available as a printed book, single eBook or as a part of the Smashing eBook Library.

What Reviewers Say About The Mobile Book

A few reviewers have had the chance to read the book a few days before its release, and share their views in a non-committal way. The result is very clear: the book is worthwhile. Should you get it? Yes! Let’s see why:

“I got my hands on an early copy of The Mobile Book, by Smashing Magazine. I’ll cut to the chase and just say this: It’s fantastic. You should own it. Really.”

Christopher Butler

“The standard, the reference book for Mobile. I worked for a mobile web publishing company for 18 months and the depth of knowledge provided by the experts in this book is extraordinary. It blew me away. This book provides a diplomatic, comprehensive guide to understanding “Mobile”, delivered by people who have a real passion for the Mobile endeavours in our community.”

Ben Howdle

“I’ll cut to the chase for those deliberating a purchase: it’s well worth the cover price. The eBook edition is a steal! This book establishes a mindset of understanding and exploring the medium. It embraces the breadth of its domain and will set you on an exciting path.”

David Bushell

“As somebody who spends a lot of time tinkering and tweaking websites to make them work better, I thought this book was bloody brilliant. There is so much depth and information packed into its 336 pages that I think it will become the book for the mobile Web.”

Ian Nuttall

“Every chapter is full of golden nuggets of information and the standard of writing is, as you would expect from a Smashing Magazine book, impeccable.”

Craig Lockwood

“It’s essential reading for those involved with the design and development of web/app based output. The essays within will encourage you to consider how people interact with mobile technology and help you to produce mobile friendly solutions to your projects.”

Dave Hughes

“This book has something for all levels of expertise. [..] It doesn’t patronise, it doesn’t talk over your head either, it teaches. It is an important book of its time, don’t hesitate in picking it up.”

Jordan Moore

“Earlier I mentioned that you should add this book to your shelf, in reality, you’ll probably want to keep it on your desk.”

Joshua Johnson

“In general I think this book is a great addition for a company or agency library. As a specialist, it can leave you with a few chapters that are very much beyond your reach and can leave you with dangerous “knowledge” but a team reading the applicable chapters and then pooling their knowledge and learnings can use this book to go into the mobile future kicking and screaming. And kicking arse.”

Christian Heilmann

“The Mobile Book provides a detailed and well curated overview and reference for designers getting to grips designing for, and working with, the ever changing world of devices and responsive design.”

James Young

Frequently Asked Questions (FAQ)

We want to make it as easy as possible for everyone to buy the new Smashing book. We welcome all suggestions and advice that could improve Smashing Magazine’s user-friendliness. Here are answers to some frequently asked questions about the brand new Smashing Mobile Book:

What are the costs for shipping to my country?
The shipping cost for one book or a bundle is $5 — wherever you are in the world. We ship everywhere worldwide. We are paying a share of the shipping costs ourselves to make it possible for anyone to purchase the book. Our prices are transparent: we don’t have any hidden costs, and we won’t confuse you with tricky calculations. What you see is what you pay!
What about delivery times?
All books will be shipped via air mail to keep delivery times as short as possible. You can find the anticipated delivery time for your country in the delivery times overview. Please note that we will start to ship the books early-mid December 2012.
Will the book be available in other languages?
Maybe in future, but we have not made arrangements for that yet, so don’t hold your breath.
Is the Mobile Book available as an eBook?
Yes, the book will be available in PDF, EPUB and Kindle (Mobipocket) formats, and you can pre-order the eBook bundle now.
Is “Mobile Book” the “Smashing Book #4″?
No, “The Mobile Book” is a new series that we are starting here at Smashing Magazine. It is not Smashing Book #4 — it has a different design, layout and concept than other Smashing books. However, the Smashing Book #4 will be published in May 2013 — please stay tuned!
What payment methods are accepted?
We accept PayPal, VISA, MasterCard and American Express. We use a secure connection, with 256-bit AES encryption and a green GeoTrust Extended Validation SSL CA certificate.
Is there a money-back guarantee?
Yes, absolutely! No risk is involved. Our 100-day full money-back guarantee keeps you safe. Don’t hesitate to return your purchase. You’ll get your money back—no ifs, ands or buts about it.
I have a question that is not covered here.
Please leave a comment below, or get in touch with us via the contact form or via @SmashingSupport on Twitter. We would love to help you in any way we can!

We would appreciate it if you could inform your friends, colleagues and followers about the book. Feel free to link to, this post and use the hashtag #mobilebook on Twitter. If you choose to blog about the book, please feel free to use the images and information from our Mobile Book media kit (.ZIP, 6.6 Mb) which includes screenshots, photos and general information about the book.

Thank you for your support, everybody—we truly appreciate it. And we hope that you’ll love the Mobile Book just as much as we do!

Our new Mobile Book is available as a printed book, single eBook or as a part of the Smashing eBook Library.

(vf) (il)

© Smashing Editorial for Smashing Magazine, 2012.

Opinion Column: The Inconvenient Truth About SEO


Do you own a website? Do you want to be number one on Google? Whatever you do, don’t spend money on aggressive search engine optimization (SEO). I know that sounds like an extreme position to take. However, a lot of website owners see search engine optimization as the answer to their search ranking woes, when things are considerably more complex.

The inconvenient truth is that the best person to improve your ranking is you. Unfortunately, that is going to take time and commitment on your part. The answer doesn’t lie in hiring a SEO company to boost your website ranking for Google. The problem starts with the term “search engine optimization” and the misconceptions surrounding it.

What SEO Isn’t

Most website owners perceive SEO as a dark art, shrouded in mystery. They have heard phrases like “gateway pages” and “keyword density&#8221, or have been bamboozled by technobabble about the way websites should be built. All of this has left them feeling that SEO is the purview of experts. This is a misconception reinforced by certain segments of the SEO community.

The problem is that these kinds of complex techniques do work, to a point. It is possible to improve placement through a manipulation of the system. However, although it can have short term benefits, it will not last without continual investment. This is because the objective is wrong. SEO shouldn’t be about getting to the top of Google for particular phrases. In fact, we shouldn’t be optimizing for search engines at all. We should be optimizing for people. After all, that is what Google is trying to do.

Why You Shouldn’t Be Optimizing For Search Engines

Google’s aim is simple: connect its searchers with the most relevant content. If you are more worried about a good ranking than providing relevant content, then you are going to be fighting a losing battle.

If you hire a SEO company to improve your placement and you measure their worth on the basis of how high they get you in the rankings, then you are out of line with what Google is trying to achieve. Your primary objective should be better content, not higher rankings.

Original, valuable content.
Image credit: Search Engine People Blog.

The SEO company can use every trick in the book to get you better rankings, but over the long term they will lose, because Google is constantly changing how it rates websites so it can provide more accurate results.

Remember, you shouldn’t be optimizing for ranking in search engines, you should be optimizing for users.

A Better Way

Google does not make a secret of how to gain a high ranking. It states clearly in its webmaster guidelines:

“Make pages primarily for users, not for search engines.”

So how do you actually do that? Again Google provides the answer:

“Create a useful, information-rich website, and write pages that clearly and accurately describe your content.”

In short, write useful content. This could include (but is not limited to):

  • Publishing white papers,
  • Writing a blog,
  • Sharing research findings,
  • Producing detailed case studies,
  • Encouraging user-generated content,
  • Creating useful applications or tools,
  • Running a Q&A section,
  • Posting interviews

The list could go on. The key is to produce content people find useful and want to share.

Yes, there are some technical considerations when it comes to search engines. However, any reasonably well-built website will be accessible to Google. You don’t need an expert SEO company for that (at least not if the Web designer does their job right).

As an aside, it is worth noting that if you take accessibility seriously for users with disabilities (such as those with visual impairments), then you will also make a website accessible to Google.

However, setting those technical issues aside, it all comes down to content. If you create great content, people will link to it, and Google will improve your placement. It really is that simple.

The question then becomes, how do you create great content?

The Inconvenient Truth

This is the point where we come to the inconvenient truth. It is hard for an outside contractor to produce the great content that will keep users coming back and encourage them to share. In my experience, this is much better done internally within the organization. The problem is that this doesn’t sit well with most organizations. Its easier to outsource the problem to a SEO company than to tackle an unfamiliar area internally.

Admittedly, a good SEO company will have copywriters on board who can write content for you. However, their knowledge will be limited, as will their ability to really get to know your business. Yes, they can write a few keyword-heavy blog posts that Google will like the look of. However, this won’t fool users, and so the number of links to that content will be low.

The truth is that if you are serious about improving your placement on search engines, it has to be done internally.

This truth is all the more painful, as most organizations are not configured to do this properly.

Organizational Change Required

The more I work with organizations on their digital strategy, the more I realize how few are structured to do business in a digital world. The issue of SEO is an ideal example of the problem.

Responsibility for the website normally lies with the marketing department. Although marketing is well-experienced in producing and writing marketing copy that outlines the products and services the organization provides, they are not best equipped to write content that will be heavily linked to.

It is not surprising that if you search on a term like “call to action,” the top results are almost exclusively informational articles, rather than companies helping with services in this area.

The problem is that marketeers are experts in the product or service being sold, not necessarily the surrounding subject matter. For example, the marketing department of a company selling healthy meals will know everything about the benefits of their product, but will have a limited knowledge of nutrition. Unfortunately, people are more likely to link to a post on healthy eating tips than they are to link to some marketing copy on a particular health product.

What you really need is the nutritional expert who designed the meal to be posting regularly to a blog, talking about what makes a healthy diet. A blog like this would include lots of linkable content, would be able to build a regular readership and would produce keyword-rich copy.

The problem is that this is not how organizations are set up. It is not the nutritional expert’s job to write blog posts; that responsibility belongs in marketing.

The Long-Term Solution

Ultimately organizations need to change so that online marketing is a more distributed role with everybody taking responsibility for aspects of it. I am not suggesting that the central marketing function has no role in digital, but rather recognizing that they cannot do it alone. Others will need to have some marketing responsibilities as part of their role.

For example a company selling healthy meals should allocate one afternoon each week for their nutritional experts and chefs to share their expertise online. It would become the marketing department’s responsibility to support these bloggers by providing training, editorial support and technical advice.

Unfortunately, these experts are often the most valuable resource within a business, and so their time is incredibly valuable. The idea of “distracting” them from their core role is too much for many companies to swallow.

However, in the short term there is still much that can be done.

A Short-Term Solution

As we wait for companies to wake up and change the way they are organized, there are ways of working within the system.

If you haven’t already, consider hiring an employee dedicated to creating content for your website. You can partially finance it with the money you save by getting rid of your SEO company.

If that is beyond your budget, consider hiring a short-term contractor or a part-time staff member. You could even use an existing member of your staff as long as they have time set aside to prevent the Web being pushed down the priority list. Although this person won’t have the knowledge to write all the content themselves, by being situated inside of the business it will be much easier for them to get access to those within the organization who do.

Arrange meetings with these experts and talk to them about their role. Identify various subjects based on their knowledge and then either record a video interview or write up a blog post based on what they share. Also ask these experts what news sources they read or which people within the industry they follow. Monitor these sources and ask your expert to comment on what is shared. These comments can be turned into posts that add to the wealth of content on your website.

Finally, you may find that the experts within the business are already producing a wealth of content that can act as source material for content that users will find interesting.

For example, our fictional nutritional expert probably already has documentation on the health benefits of certain food types or how certain conditions can be helped through healthy eating. Admittedly this kind of material might be too dry or academic, but with some editing and rewriting it would probably make great online content.

The content you post does not have to be long, it just has to be link-worthy. The key is to share the opinion of your expert and provide content of value to your audience.

As that audience grows, start asking questions. Maybe even get some of your readers to share their experiences or knowledge. Over time you will discover that not only will your readers want to contribute, so will your experts. As they see the value in posting content regularly to the website, they will start blogging themselves. All you will have to do is suggest topics and edit their output.

I know what you are thinking: it just isn’t that simple.

No More Excuses

I realize this is a big cultural shift for many organizations. Marketing teams will feel they are losing control, the person responsible for blogging will feel out of their depth and the experts may resent being asked lots of questions. However, what is the alternative?

For better or worse, Google demands good content in return for high rankings. Pretending that SEO companies can magically find a shortcut that allows you to avoid this tradeoff just isn’t going to cut it.

If you care about how you rank, it is time to take responsibility for your website’s content. Once you overcome the initial hurdle, you will find that producing quality content on an ongoing basis becomes second nature.

Update (17.12.2012)

After a heated discussion in comments to this article, in social channels and via Skype, Paul clarified his position in the article How I See The Role of SEO in his blog. We are republishing the article for the sake of making his arguments clear and unambiguous — of course, with Paul’s permission.—Ed.

There seems to be the perception that I want to see an end to the SEO sector. Although I have issues with the name, I do believe they have a role.

Last week I once again expressed my concerns about website owner’s obsession with SEO in a post for Smashing Magazine.

My message can be boiled down to the following points:

  • Website owners are unhealthily obsessed with their rankings on Google.
  • We should be creating primarily for people and not search engines.
  • The best way to improve your ranking is to produce great content that people link to.
  • That great content is better produced in-house, rather than being outsourced to an agency.
  • A good web designer can take you a long way in making your site accessible to search engines.
  • Before you spend money on an SEO company, make sure you have the basics in place first.

An unfortunate response

Unfortunately this caused a massive and aggressive reaction in the SEO community. Smashing Magazine was attacked for publishing the post, I was told I was out-of-date and ill informed (which is of course entirely possible), but worst of all there were a shocking number of attacks on me personally.

To be honest this doesn’t entirely surprise me. I have been working with the web long enough to be all too aware of the over reaction it creates in people. However, it is always hurtful when somebody attacks you as a human being, rather than your opinion.

Of course not everybody was like that. I had great conversations with Bill Slawski and Joost De Valk, both of who attempted to put me straight personally and on their blogs. I very much appreciate them taking the time and they have helped to soften my views.

SEO companies do have a role

I think it is important to stress that I do believe SEO companies have a role. The problem is they are often brought in when there is still much work that could be done internally within the organisation.

To me its about return on investment. Why spend money improving your search engine rankings when you could spend the same money improving rankings and producing more engaging content? Or why not spend money on improving your rankings and building a more accessible website?

There are two exceptions to that general rule of thumb.

Content strategy

First, the SEO industry is changing. They are increasingly helping clients with content and that is great. However, if that is the role they are going to take then they need to stop saying they are about “search engine optimisation.” Creating great content is not primarily an SEO job. They have a branding issue there.

Also, although I am happy for an SEO company to help educate clients about content they shouldn’t be writing copy for them week and week out for them. Take the approach of a content strategist who trains up the client, provides them a strategy and then encourages them to take on the role themselves. Isn’t that better for the client?

Cleaning up after bad web designers

The second exception is where the web designer has built an inaccessible website. As Joost De Valk said in his response to my post, it falls to the SEO company to clean up the mess.

This is obviously an issue that needs addressing in the web development community and why we need people like Joost speaking at web design conferences.

However, I wouldn’t expect a web developer to provide all of the technical subtleties of an SEO company. That is probably too specialist for most web designers to do.

I don’t doubt that these subtleties are important and do make a difference to rankings. However, once again it is important that we have the basics in place first:

  • Great content.
  • A solidly built website.

Setting the right priorities

Hopefully that helps clarify my position slightly. I am not for a minute trying to destroy the SEO sector (as I was accused of repeatedly). What I am trying to do is set priorities straight.

I guess in short it is the phase “search engine optimisation” I have a problem with. It implies we should be accommodating the idiosyncrasies of search engines above the needs of users.

That is something I will never compromise over and I am sure something the vast majority of SEO companies would agree with.


© Paul Boag for Smashing Magazine, 2012.

10 Penyebab Error Program PHP yang Paling Sering Ditemui

Bagi kita yang sudah malang-melintang di dunia programming, termasuk PHP, tentunya sudah tidak asing lagi dengan yang namanya “error” di dalam program. Ibaratnya itu sudah menjadi kudapan sehari-hari. Hehe. Sedangkan bagi kita yang baru terjun di dunia programming, terutama PHP, seringkali “error” merupakan sesuatu yang menakutkan dan membingungkan. Banyak yang akhirnya nyerah dengan programming. Tahun 2008 lalu, saya pernah menulis artikel di website ini mengenai tingkatan error dalam program. Terdapat 3 (tiga) tingkatan error program yaitu error tata bahasa (sintaks), error runtime dan error logika. Dari ketiga jenis error program tersebut, sebenarnya yang paling mudah ditangani adalah error yang pertama yaitu error tata bahasa (sintaks) karena compiler atau interpreter langsung memberitahukannya saat program dikompilasi atau dijalankan. Namun demikian, tetap saja diperlukan pengalaman, ketelitian dan kegigihan dalam menangani atau mencari penyebab error yang muncul.

Dalam tutorial ini, berdasarkan pengalaman selama menjadi programmer dan mengajar di Universitas Budi Luhur, saya mencoba mengumpulkan berbagai macam error program PHP yang paling sering ditemui oleh programmer, terutama yang masih dalam tahap belajar. Setidaknya saya menyajikan 19 macam error program PHP yang terbagi menjadi 10 kategori berdasarkan penyebabnya masing-masing. Untuk setiap error program, disertakan contoh program sederhana yang disertai penjelasan solusi dan cara menangani error yang muncul. Kenapa 19 macam dan 10 kategori? Karena artikel ini mulai ditulis pada tanggal 19-10-2012 bertepatan dengan Hari Ulang Tahun ke-4 putra tercinta Muhammad Lintang. 🙂

Diharapkan dengan tutorial ini, kita semua akan terbantu dalam memperbaiki berbagai error program PHP yang mungkin ditemui saat membuat program. Memang untuk menjadi terbiasa menghadapi berbagai error program, diperlukan proses pembelajaran dan pengalaman yang cukup banyak. Oleh karena itu, perbanyaklah belajar dan mencoba sebanyak-banyaknya program jika Anda ingin menguasai pemrograman web dengan PHP. Semoga tutorial ini bermanfaat untuk kita semua.

Read More

Useful JavaScript Libraries and jQuery Plugins


If you have a problem and need a solution for it, chances are high that a JavaScript library or jQuery plugin exists that was created to solve this very problem. Such libraries are always great to have in your bookmarks or in your local folders, especially if you aren’t a big fan of cross-browser debugging.

A JavaScript library isn’t always the best solution: it should never be a single point of failure for any website, and neither should a website rely on JavaScript making the content potentially inaccessible. Progressive enhancement is our friend; sometimes JavaScript won’t load, or won’t be supported — e.g. users of mobile devices might run into latency issues or performance issues with some JavaScript-libraries. Often large all-around JavaScript libraries such as jQuery might be an overkill, while tiny JavaScript micro-libraries could serve as good, “light” alternatives for a particular problem. We’ll present some of them today.

In this two-part overview, we feature some of the most useful JavaScript and jQuery libraries which could be just the right solutions for your common problems. You might know some of these libraries, but you probably don’t know all of them. In either case, we hope that this overview will help you find or rediscover some tools that you could use in your next projects.

Due to the length of this post, we’ve split it into two parts for your convenience:

Quick Overview:

Below you’ll find a brief overview and links to the libraries and tools featured in this post. They are supposed to help you find just the right tool quickly without browsing the whole page.

Web Forms and Input Validation

Select2 jQuery Plugin
A jQuery-plugin for replacement and enhancement of <select>-boxes. The plugin supports search, remote data sets, and infinite scrolling of results. Users can just start typing what they’re looking for. Non-matching entries are removed from the view, and options can be selected using “Enter” or a mouse click. The plug-in works with standard select input fields as well as with multiple selects and optgroup. It also has support for selected, disabled and default text (HTML5’s placeholder attribute). The plug-in is based on Chosen, an alternative solution which is currently available in jQuery, MooTools and Prototype flavors and as a Drupal 7 module.


JavaScript Library

Another cross-browser solution to enhance the <select> element with jQuery and CSS. Requires jQuery 1.6 or higher. It provides full customization, support of optiongroup, automatic calculations, keyboard support, callback functions and is compatible with mobile devices.


This script allows Gmail-like auto-saving of drafts. It stores form data to the HTML5 local storage of the user’s browser and restores it when the user reloads or reopens the page or opens the page in a new tab. The data is cleared from local storage when the user submits or resets the form.


jQuery Credit Card Validator
This library attaches to the input event (with a fallback to the keyup event) and so every time a number in the input field changes, it calls a validation function. When a card is recognized, the credit card type is highlighted; and if the credit card number is correct, it is highlighted with a green checkmark as well. The plugin supports American Express, Diners Club, Discover Card, JCB, Laser, Maestro, MasterCard, Visa and Visa Electron. You might want to consider credit cards JavaScript validator and the Smart Validate Credit Card Validation plugin.

JavaScript Library

This library allows you to transform HTML text into input fields, without resorting to code inflation. The plugin inserts aesthetic as well as practical input possibilities, e.g. Tags, Ajax, Focus and others.


Avgrund: Better Modal Boxes
A jQuery plugin for displaying a depth illusion between popup and page. The original script by Hakim El Hattab uses CSS transitions and transformations, and the plugin gracefully degrades in those that do not support transitions and transforms. MIT licensed.

Avgrund: Better Modal Boxes

This library enhances ordinary search boxes with the ability to autocomplete faceted search queries. You can specify the facets for completion, along with the completable values for any facet. You can retrieve the search query as a structured object, so you don’t have to parse the query string yourself.

Ideal Forms Framework
A very comprehensive jQuery plugin for building and validating responsive HTML5 forms. It provides keyboard support, customizable input types, “on the spot” validation, localization and HTML5 placeholder polyfill. Supported in IE8+, Chrome, Firefox, Opera, iOS5+, Android 4.0+.

Ideal Forms Framework

With this JavaScript spell-checker you can suggests another domain when the user misspells it in an email address. Mailcheck helps effectively reducing sign up typos. While it already includes some  domains, you can easily supply your own.


A lightweight JavaScript form validation library. You can validate form fields using over a dozen rules and set custom messages; the library doesn’t have any dependencies and you can define your own validation callbacks for custom rules. Works in all major browsers (even IE6!).

JavaScript Library

jQuery File Upload
File Upload widget with multiple file selection, drag&drop-support, progress bars and preview images. It supports cross-domain, chunked and resumable file uploads and client-side image resizing. Works with any server-side platform (PHP, Python, Ruby on Rails, Java, Node.js, Go etc.) that supports standard HTML form file uploads.

JavaScript Library

This jQuery plugin provides tool tips without being limited to cardinal directions. A grumble can be rotated around a given element at any angle, all 360 degrees and at any distance — with CSS. Works in Internet Explorer 6+ and modern browsers. Also, check Tipped, a larger library of various designs and implementations of tooltips with an extensive API.


Dialogs for Twitter Bootstrap
A small JavaScript library which allows you to create dialog boxes using Twitter’s Bootstrap modals, without having to worry about creating, managing or removing any of the required DOM elements or JS event handlers. You might want to check out the Date Range Picket for Bootstrap as well as a growing library of HTML Snippets for Twitter Bootstrap.

JavaScript Library

Prashant Chaudhary has realeased a free lightweight jQuery plugin that lets you create a custom drop-down that can include images, a short description, along with your usual text and value. It also supports callback functions on selection. You could use CSS3 Drop-Downs as well.


This jQuery plugin makes it easy to create alert, success, error, warning, information and confirmation messages. The notification can be positioned anywhere on the page and you can customize the text, animation, speed and buttons easily.


Complexify helps you to accurately gauge the quality of a user’s password to give them visual feedback, and to enforce a minimum level of security.

JavaScript Library

With Numberfy you can integrate native support for line numbers in your website’s text areas. On every key press in the text area, the text area’s current value is split into lines. This script will not work in IE due to a bug in the text-wrap properties.

A jQuery plugin for easily hiding and revealing related form fields conditionally.

You can use the library to give your forms a fade-out label. This implementation makes the label slide across the field when gaining focus and fade out when a value is entered. A fallback is provided as well.

An encryption system utilizing RSA and AES for JavaScript.

Web Typography Libraries and Plugins

A jQuery plugin for restoring baselines thrown off by odd image sizes. To use it, you just call the plugin passing the height of your baseline as a variable. You can also define multiple baselines for different responsive breakpoints.


Developed by the development team of Financial Times, this library is essentially a polyfill that fixes the inadequacies of CSS column layouts. With the library, you can provide configurable column widths, gutters and margins, define elements spanning columns, keep-with-next to avoid headings at the bottom of a column, group columns into pages and standardize line height to align text baseline to a grid.


Responsive Measure jQuery Plugin
A simple script that allows you to pass in a selector (ideally the container where your primary content will go), which generates the ideal font size needed to produce the ideal measure for your text. The script also  generates a resolution-independent font-scale based on the ideal font-size. Created by Josh Brewer.


The Widow Tamer
The Widow Tamer is a small JavaScript library that automatically “fixes” typographic widows. It’s designed to work with responsive sites, fixing widows as it finds them on resize or orientation change.

JavaScript Library

Fluid Line-Height
With his article, Tim Brown inspired developers to release tools that adjust line-height for optimum readability on responsive websites. The so-called molten-leading binds the height of the line to an element’s minimum and maximum width. jQuery-minLineHeight is a jQuery plugin that works similarly with minimum and maximum width association.

Nice Web Type

This jQuery plugin helps you create scalable headlines that fill the width of a parent element in your fluid or responsive layouts. You might want to check out Lettering.js as well to get a complete down-to-the-letter control of letters in your projects.


This library lets you kern, style, transform, and scale your Web type with CSS rules, automatically. You can adjust pairings, introduce font conditionals and augment properties.


The script splits headlines into rows before resizing each row to fill the available horizontal space. The ideal number of characters to set on each row is calculated by dividing the available width by the pixel font-size – the script then uses this ideal character count to split the headline into word combinations that are displayed as separate rows of text.

Nice Web Type

Little Time-Savers

money.js: Open-Source Exchange Rates and Currency Conversion
Joss Crowcroft has created an Open Source Exchange Rates API, which provides up-to-date, flexible and portable currency-conversion data that can be used in any application, framework or language (not just JavaScript). It has no access fees, no rate limits, no nasty XML: just free, hourly updated exchange rates in JSON. Joss also built money.js, a JavaScript currency conversion library that can be easily integrated in any website. A demo playground and detailed documentation are provided on the website, and the source code is available on GitHub.

JavaScript Library

Accounting.js: Easier Number and Currency Formatting
This simple, tiny JavaScript library will solve your currency and numbers-related formatting hassles, and it even includes optional Excel-style column rendering to line up symbols and decimals. It will make all of your numbers and currencies look much more uniform and professional.

JavaScript Library

Moment.js: Format Dates And Times
Moment.js is a lightweight JavaScript library which lets you format, parse and manipulate dates. You can add or subtract dates from one another, as well as parse things like Unix Timestamps. Display options include formatted dates, time from now, difference, time from another moment, native date and support for leap years.

JavaScript Library

Smart Time Ago
This little jQuery library provides you with an intelligent way of updating relative timestamps in your documents. Smart Time Ago checks and updates every 60 seconds the relative time, within a scope which you specify at the start. It checks the newest time in your scope and tunes the checking time interval to a proper value. The tool can be used as a jQuery plugin, or – if using node – can be installed from npm.

Smart Time Ago

A little JavaScript library that takes an array of objects with TimeAgo properties and sorts them from newest to oldest.

Piecon is a tiny JavaScript library for dynamically generating progress pie charts in your favicons. It has been tested to work in Chrome 15+, Firefox 9+ and Opera 11+.


Notificon: Favicon Notifications and Alerts
Matt Williams’ Notificon is a JavaScript library for creating favicon alerts and notifications. Instead of having to create a number of favicons and serving them to the client, you can specify a label and a favicon (the default being the current favicon), and it will generate a favicon notification for you. The script currently works with Chrome 6+, Firefox 2+ and Opera, but it’s a nice little add-on for browsers that support it.

jQuery Stick ‘em: Make Content Sticky on Scroll, to a Point
A problem: some of the images in the layout are very tall, so by the time you scrolled down to the bottom of the images, you would have to scroll back up just to read the description of the images or navigation items. The solution: make the content sticky as you are scrolling. This library solves this problem.

jQuery Stick 'em

Human descriptions for a span of time are often fuzzier than a computer naturally computes. For example, how long does “in 1 month” mean? We casually talk about four weeks, but in fact there is only one month in a year which is four weeks long. Countdown.js tackles this problem by producing an accurate and intuitive description of timespans which are consistent as time goes on.

A small library to provide some basic geo functions like distance calculation, conversion of decimal coordinates to sexagesimal and vice versa.


Cookies.js is a small client-side JavaScript library that makes managing cookies easy. It caches cookie values, making sequential reads faster, supports AMD / CommonJS loaders and is supported in Chrome, Firefox 3+, Safari 4+, Opera 10+ and Internet Explorer 6+.

firstImpression.js is a micro-library (1 Kb minified) that answers the simple question, “Has this user visited this site before?” The detection doesn’t require much logic, so the majority of the code is just a plain JavaScript port of the popular jquery.cookie plugin.

Chirp.js: Tweets on Your Website
A lightweight templating JavaScript library that enables you to display tweets on your website. Client-side caching is available; and you can set if you’d like to show retweets and replies, too.

Chirp.js: Tweets on your website

simpleWeather jQuery Plugin
A simple jQuery plugin to display the weather information for any location. The data is pulled from the public Yahoo! Weather feed via the YQL API.

A JavaScript library to zip and unzip files. zip.js provides a low-level API for writing and reading large zip files (up to 4GB with File Writer API). Works with Chrome, Firefox, Safari 6 and (unfortunately) Internet Explorer 10+. With Safari 5 and IE9, you must disable Web Workers and use a Typed Array polyfill.

Images, Maps, Graphs and Visualization Libraries

jVectorMap is a jQuery plugin that renders SVG and VML vector maps in browsers ranging from the ancient Internet Explorer 6 to modern browsers. jVectorMap uses JavaScript, CSS, HTML, SVG or VML, and no Flash or any other proprietary browser plugin is required.

JavaScript Library

Subway Map Visualization jQuery Plugin
If you often deal with government projects, university departments or any websites of sophisticated organizations, every now and again you’ll be asked to design a nice visualization that would explain the various divisions, structures and internal hierarchy of those organizations. Where do you start? Well, creating a Subway Map-alike visualization is an option worth considering.

JavaScript Library

This library allows you to easily use Google Maps in your projects. Extensive documentation or large amount of code aren’t required anymore. You might want to check out Gmap3 jQuery plugin as well.


Leaflet: Open-Source Interactive Maps With JavaScript
A library for creating tile-based interactive maps for desktop and mobile browsers. An easy-to-use API is available, and the tool emphasizes usability, performance, flexibility and excellent browser support. The library offers a variety of map layers, including tiles, markers, pop-ups, image overlays and GeoJSON. It supports panning on both mobile and desktop browsers, double-tap zoom on mobile browsers (plus multi-touch zoom on iOS) and more. On iOS, hardware acceleration is enabled, and Leaflet has a modular structure that lets you reduce the size of the library to make it even faster. The project is open source and available for further development and forking on GitHub.

JavaScript Library

SVGeezy: a JavaScript plugin for SVG fallbacks
A JavaScript library which detects SVG images on your website and automatically “looks” for a standard image fallback for those older, less capable browsers. Created by Ben Howdle and Jack Smith.

SVGeezy - a JS plugin for SVG fallbacks

A script that checks each image on your website, when it’s loaded by a user, and replaces low-resolution image with their high-resolution equivalent, if available. It’s assumed that you use Apple’s high resolution modifier (@2x) to designate high resolution versions of images.

A JavaScript library for generating and animating gauges. Based on Raphaël library for vector drawing, it’s resolution-independent and works in all modern browsers.


A graph visualization library for building trees with connected nodes of data. Arbor.js is essentially a layout algorithm with abstractions for graph organization and screen refresh handling.


Timeline: Generate Timelines To Visualize Data
This library is supposed to pull in media from different sources. It has built-in support for pulling in data from Twitter, YouTube, Flickr, Vimeo, Google Maps and SoundCloud—and more will be included in the near future. You can easily fill in data from a Google spreadsheet, or use a more detailed method such as JSON to create your time-line. You can also host it on your website by using the Timeline jQuery plugin. The library is available on GitHub, or as WordPress plugin.

JavaScript Library

Unicon is a Grunt.js task that makes it easy to manage icons and background images for all devices, preferring HD (retina) SVG icons but also provides fallback support for standard definition browsers, and old browsers alike. From a CSS perspective, it’s easy to use, as it generates a class referencing each icon, and doesn’t use CSS sprites.

This device recognition library, gives websites the ability to gauge the users device capabilities before the image is requested from the server. Judging display resolution and network speed, it customizes the img src attribute to optimize the websites image resolution to the individual users hardware.

A Magnifying Glass With CSS3 And jQuery
This technique achieves an aesthetically pleasing visual effect. The CSS3 box-shadow and border-radius properties are used to create the magnifying glass itself, while jQuery is used to detect the cursor coordinates and mouse movements and present the larger image. And when your cursor moves off the image, the magnifying glass elegantly fades away. The included tutorial makes it very easy to learn and understand how to achieve this effect. The technique includes both a small and a large image in the markup, so optimizing the technique to load a larger image on demand might be a good idea.

JavaScript Library

This free and open source JavaScript toolkit provides the elements which you need to create interactive graphs, such as renderers, legends, hovers and range selectors. Rickshaw is based on D3, graphs are drawn with standard SVG and styled with CSS.


Flot: Plotting for jQuery
A JavaScript plotting library for jQuery, supports Internet Explorer 6+, Chrome, Firefox 2+, Safari 3+ and Opera 9.5+. You can use different types of graphs, use multiple axes, annotate a chart, update graphs with AJAX, provide support for zooming and interaction with the data points, use stacked charts, theresholding the data, apply pie charts and plot prerendered images.


Chronoline.js is a library that allows you to create a chronology time-line out of events on a horizontal timescale. From a list of dates and events, it can generate a graphical representation of schedules, historical events, deadlines, and more.

JavaScript Library

This D3 plugin helps you to visualize time series and construct better real-time dashboards, pulling data from Graphite, Cube and other sources. Cubism scales and reduces server load by pulling only the most recent values. Cubism can scale easily to hundreds of metrics updating every ten seconds. Cubism’s horizon charts allow you to see many more metrics at-a-glance space than standard area charts.


An alternative library for creating fast, dynamic and interactive HTML5 visualizations.

JavaScript Library

Data Visualization JavaScript Libraries
A growing, curated collection of data visualization JavaScript libraries that make it easier to create meaningful and beautiful data visualizations. If you haven’t one a useful data visualization library in the list above, you’ll definitely find the right one in this overview.

Data Visualization JavaScript Libraries

Last Click

jQuery Fundamentals
This HTML book is designed to get you comfortable working through common problems you’ll be called upon to solve using jQuery. You can read the content and try the various interactive examples. Each chapter will cover a concept and give you a chance to try example code related to the concept. Written by Addy Osmani.

JavaScript Library

JavaScript Patterns Collection
A JavaScript pattern and anti-pattern collection that covers function patterns, jQuery patterns, jQuery plugin patterns, design patterns, general patterns, literals and constructor patterns, object creation patterns, code reuse patterns, DOM and browser patterns.

JavaScript Library

JavaScript Garden
A growing collection of documentation about the most quirky parts of the JavaScript programming language. It gives advice to avoid common mistakes and subtle bugs, as well as performance issues and bad practices, that non-expert JavaScript programmers may encounter on their endeavors into the depths of the language.

JavaScript Library

Useful JavaScript and jQuery Libraries: Two Parts

Due to the length of this resource, it was split into two parts:

© Smashing Editorial for Smashing Magazine, 2012.

Entri, Edit, Delete, Tampil dengan PHP dan Ajax JQuery

Dalam setiap kesempatan membahas mengenai aplikasi berbasis web (web application), baik di dalam sesi mengajar matakuliah Pemrograman Web di Universitas Budi Luhur maupun sesi training terkait web, saya selalu menekankan bahwa hanya ada 4 (empat) proses dasar dalam aplikasi berbasis web. Aplikasi web yang sederhana hingga kompleks selalu berkaitan dengannya. Keempat proses tersebut adalah proses entri (input), ubah (edit), hapus (delete) dan tampil (show). Istilah lain dari keempat proses tersebut adalah CRUD (Create, Read, Update and Delete). Jadi kuasailah keempatnya maka selebihnya hanya variasi dari keempat proses tersebut. Sebagai contoh dalam proses update status di situs jejaring sosial facebook merupakan proses Entri atau Insert ke database, saat memperbaiki foto profil adalah proses edit (update) dan saat kita menghapus salah satu teman aalah proses delete.

Mengingat pentingnya proses tersebut, saya memberikan contoh khusus di bab terakhir dari buku Pemrograman Web dengan PHP & MySQL berupa proses dasar entri, edit, delete dan tampil dengan PHP dan MySQL. Sebelum melanjutkan tutorial ini, tidak ada salahnya jika Anda mencoba contoh tersebut, terutama bagi Anda yang belum pernah mencoba program serupa. Saya juga pernah mempublikasikan artikel entri, edit, delete dan tampil PHP yang memanfaatkan Macromedia Dreamweaver.

Lalu apa yang akan dipelajari di dalam tutorial ini?

Apa yang disampaikan dalam tutorial ini kurang lebih sama dengan tutorial saya sebelumnya, yaitu proses entri, edit, delete dan tampil data dengan PHP dan MySQL. Namun kali ini, saya ingin menambahkan konsep Ajax (Asyncronous Javascript and XML) dengan menggunakan library JQuery. Dengan konsep Ajax, maka proses entri, edit, delete dan tampil dapat dilakukan dengan lebih menarik.

Read More

Pengumuman Pemenang Kontes Menulis Tutorial

Akhirnya kontes menulis tutorial yang saya selenggarakan berakhir sudah. Hari ini adalah pengumuman pemenangnya. Sebenarnya saya berharap kontes akan diikuti oleh banyak orang, namun sayangnya hanya sedikit yang mengikutinya dan beberapa juga tidak memenuhi syarat dan ketentuan yang sudah ditetapkan. Terlepas dari itu semua, saya tetap akan memberikan penghargaan kepada 2 (dua) orang yang telah mengikuti kontes ini. Siapa dia?

Read More

Why Account Managers Shouldn’t Prevent Designers From Speaking To Clients


Working as a Web designer can suck sometimes. This is especially true when you don’t get to work alongside the client. Unfortunately this scenario is more common than you would think. Many organizations have been carefully structured to keep the Web designer and the client apart. But is that really sensible? Would projects run much smoother without your account manager or boss acting as the middleman?

This issue came to my attention following the release of my latest book “Client Centric Web Design.” In this book I provide advice about how to work more effectively with clients. However, I had made an assumption in the approach I presented, an assumption which turned out not always to be true. It assumed that the Web designer and client can work collaboratively together. Following the book’s release I realized that for many Web designers that this is not the case.

Why Account Managers Shouldn't Prevent Designers From Speaking To Clients
Image credits go to Brett Jordan.

Whether working in house for a large organization or as part of a Web design agency, many Web designers never get to interact directly with their clients. Instead, the client’s requirements and comments are filtered through a middleman who manages the project.

In this post I examine why I believe this is damaging to projects and what can be done to rectify the problem. However, before we can answer these questions, we must understand why this way of working has become common in the first place.

Why We Have Account Managers

I want to make it clear that I believe that both project and account managers play a valuable role. There are good reasons why they are part of the Web design process and I am not suggesting they should be removed.

It is the role of account managers to provide outstanding customer service. This is a vital (if often overlooked) role of any Web design agency—we are not here just to build websites, we are here to provide a service to our clients. That means making our clients happy by communicating well, meeting deadlines and delivering within the budget. Our project managers regularly receive gifts from our clients thanking them for a job well done. This is how close the relationship between client and account manager can become. By lifting the responsibility for customer service from the Web designer, account managers allow us to focus on the job of actually designing and building websites—a luxury that many freelancers envy.

The account manager also deals with the plethora of organizational tasks which keep a project running smoothly, not to mention protecting us from the endless comments and questions from the client. I have had the misfortune of working on many projects where we have been drip-fed feedback from multiple stakeholders almost continually throughout the project. If it wasn’t for the account manager, I would have very quickly lost control of what needed to be done on the website. Lets face it, they also protect the client from us, as we sometimes have an overwhelming urge to rant at them uncontrollably (or perhaps that is just me). They also act as interpreters, taking our technobabble and translating it into a language that the client can understand.

In short, a good account manager ensures the client is happy and that the project remains profitable. Those are valuable roles and one that a designer would struggle to do on top of their other responsibilities. Just ask the average overworked freelancer.

If then the account manger is so valuable, where is the problem?

So Where Is The Problem?

Although having an account manager is incredibly useful, things often get out of hand. The role of account manager transforms from being a part of the project team to the sole conduit between client and designer. Instead of facilitating a smooth running project they become the bottleneck through which all communication must pass. This funnelled approach to communication prevents collaboration between the client and the Web designer. This kind of collaboration is essential to ensuring a happy client and a successful website.

Without collaboration, educating the client is difficult. Unsurprisingly most clients don’t know much about the Web design process. However, by working alongside the client throughout the project, the client learns the best practice for Web design and why certain design decisions are made. This educational process works both ways. The client will learn a lot about the Web design process, but the designer will also learn a lot about the client and his business. When the Web designer understands the nuances of the project, business and client, they produce better websites. Without that understanding they are much more likely to go down the wrong road by wasting time and money, while frustrating the client.

This isn’t just limited to designers either. Like many Web design agencies, we excluded developers from client meetings for a long time. Their time was precious and we didn’t want to waste it in meetings. However, we eventually discovered that when the developer understands the details of a project, they produce more elegant solutions and often suggest directions which nobody else had considered. When all communication has to pass through a middleman, the chances of misunderstanding and mistakes are further increased. Like a game of chinese whispers, what is said by the client or designer can be distorted by the time it has passed through an account manager.

I remember experiencing this regularly when I worked for an agency in the late nineties. A passing comment made by a client would become a dictate from the account manager that I had to follow. Instead of being a designer who could bring my experience to bear on a project, I became a pixel pusher. Because I wasn’t hearing directly from the client, I could not judge the strength of their feelings and so had no opportunity to challenge them over issues I felt passionately about.

Finally (and probably most importantly), without the client and designer working together on a project the client feels no sense of ownership over the design. The projects that inevitably go wrong at my agency are those where the final decision-maker is not actively involved in the design process. If a client has been involved in the design process, commenting and working with the designer at every stage, they are less likely to reject the final design—they will feel the design is as much their creation as that of the designer’s. However, if their feedback was through an account manager, they won’t have that sense of hands on involvement.

Fortunately, we can have the best of both worlds. We can have the benefits of an account manager, while still allowing the designer to work closely with the client.

The Best Of Both Worlds

At Headscape the role of the account manager is not to control all of the client communications, but to act as a facilitator for those communications. This provides all of the benefits of having an account manager and none of the drawbacks.

For a start, the Web designer and developer always attends project kickoffs, so they meet the client at the beginning of a project. This also ensures that they get all of the background on the project firsthand, rather than via the account manager. The Web designer also works directly with the client discussing ideas and presenting design. This gives the designer the opportunity to present their work in their own words and hear the feedback directly from the client. They can also work collaboratively with the client on some aspects of the design, such as wireframing, to help increase the client’s feeling of ownership and engagement. This also has the added benefit of allowing the designer to question and challenge the feedback they receive, engaging in a much richer discussion with the client.

The account manager is still very much a part of the process. He is still the client’s primary point of contact and remains responsible for ensuring the project stays on time and within budget. Also, whenever possible, he should be involved in discussions between the designer and client, to ensure he is fully aware of everything agreed upon. Where conversations take place without his involvement, the Web designer should report back to the account manager on the content of those discussions.

This all sounds great in theory. However, in the real world of company politics and long-held working practices, you may meet resistance when implementing this approach. In such situations it is important to proceed carefully.

Getting The Support Of Your Account Manager

None of us like change, especially when it involves others telling us how to do our job. It is therefore hardly surprising that you may well meet resistance from your account manager if you suggest the approach that I have outlined in this article.

The key is to not to get frustrated if you meet resistance. Look at it from their point of view: how would you feel if they came along and told you to design websites in a different way, or worst still, suggested they should be more heavily involved in the design of client websites?! No doubt you would be horrified, so take the time to empathize with your account manager and seek ways to make the transition easier.

I occasionally encountered designers who complain to me that they have tried to implement my approach and had been shot down by their account managers. Inevitably the reason behind this failure has been because they have tried to rush the transition. If you go in all guns blazing, the idea will be rejected. Instead, start small and build up over time.

One starting point that has worked for others I have spoken to is to sit in on key meetings. For example, if you are not normally part of the kickoff meeting, start with that. Or if you don’t get to hear the client’s feedback firsthand, ask to be involved in that call. Reassure the account manager that all you want to do is sit in so you can hear what was said. That way they won’t worry about what you might say in front of the client. Once you are involved in those meetings regularly it becomes easier for you to start slipping in the odd comment.

I also recommend thinking carefully about how you present this approach to your account manager. It would be easy to focus on why you want to do it. However, you will have much more success if you present the benefits the approach provides for them. Remember, their primary concern is to ensure that the project is delivered on time and within budget. Therefore, when suggesting your heavier involvement with the client, explain that this will reduce the chance of misunderstandings, leading to a faster sign-off. This in turn will mean less iterations and higher profits on the project—all music to the ears of your average account manager.

Finally, point out that if you work directly with the client it will ultimately mean less work for them. Everybody loves the sound of less work! If you present the idea of direct collaboration with the client as having benefits for the project (and for the account manager personally), the chances are you will meet a lot less resistance.

I confidently believe that allowing the Web designer to work with the client ultimately leads to better websites, happier clients and a greater sense of job satisfaction for the designer. However, I am also aware it has its challenges. I would therefore like to see more discussion about how to best get this collaborative relationship working with organizations that traditionally keep these two parties apart. Perhaps the comments are the place to kick start the conversation.

(jvb) (jc)

© Paul Boag for Smashing Magazine, 2012.

Ikuti Kontes Menulis Tutorial. Dapatkan Paket Hosting+Domain. Gratis!

Dalam rangka memperkaya konten berbahasa Indonesia di bidang teknologi informasi dan komputer, serta sebagai wujud syukur saya atas bertambahnya usia pada hari ini (5 Juni), Achmatim.Net akan mengadakan “Kontes Menulis Tutorial PHP & MySQL”. Dapatkan hadiah menarik berupa 10 Paket Hosting plus Domain selama setahun untuk 10 tutorial terbaik. Kontes akan berlangsung hingga tanggal 1 Juli 2012, jadi jangan sampai ketinggalan ya… Baca ketentuan lengkapnya di bawah ini.

Read More

Membuat Validasi Form dengan JQuery Validation

Apa pentingnya sebuah validasi pada suatu form inputan? Pastinya sangat penting. Beberapa alasan mengapa validasi itu penting untuk dilakukan saat membuat inputan apalagi inputan di suatu halaman web adalah, pertama, tidak semua pengunjung memiliki pemahaman yang sama saat mengisi suatu form. Kasarnya, tidak semua pengunjung berhati mulia untuk mengisi form secara benar dan wajar. Ada saja pengunjung yang coba-coba. Untuk mengantisipasi hal tersebut tentu inputan harus dibatasi. Saya sering mencontohkan bahwa validasi juga dilakukan di sekitar kita, seperti pada mesin ATM dimana tempat memasukkan kartu dibuat tepat sesuai ukuran kartu ATM pada umumnya, mengapa tidak dibuat yang besar aja agar gampang masukin kartu ATM? Sederhana saja, kalo dibuat lubang yang terlalu besar, saya yakin akan sering ditemukan sendal jepit yang masuk ke sana. 😀

Alasan kedua mengapa perlu adanya validasi adalah untuk menjamin bahwa data yang diproses atau disimpan memiliki format yang seragam (standar). Sebagai contoh, inputan berupa tanggal lahir harus tersimpan dengan format yang sama misalnya tanggal-bulan-tahun atau tahun-bulan-tanggal, sehingga setiap data yang masuk harus memenuhi format standar tersebut. Oleh karena itu, sebelum menyimpan data tanggal lahir harus dipastikan (divalidasi) bahwa data yang diinputkan adalah benar dan sesuai dengan format. Alasan ketiga mengapa perlu validasi adalah untuk menjamin keamanan (security) dari aplikasi web kita. Jangan sampai kelemahan validasi dalam suatu inputan dimanfaatkan oleh orang yang tidak bertanggung jawab (seperti cracker) untuk menyusup ke aplikasi kita, misalnya melalui celah SQL Injection. Kenyamanan pengguna (user satisfication) merupakan alasan lainnya mengapa perlu validasi. User adalah manusia biasa yang tidak luput dari kesalahan, misalnya dalam menginput alamat email bisa saja lupa tanda @, atau dalam inputan jumlah produk yang akan dibeli bisa aja user salah menginput dengan selain angka positif. Dengan validasi, dapat meningkatkan kenyamanan user dalam mengisi form inputan, apalagi jika inputan disertai informasi kesalahan inputan (notifikasi) yang jelas.

Dari sisi letaknya, validasi dapat dibagi menjadi dua, yaitu validasi di sisi server dan validasi di sisi client. Validasi di sisi server biasanya dilakukan setelah form di-submit (dikirim) dan menggunakan bahasa pemrograman sisi server seperti PHP, JSP dan ASP. Sedangkan validasi di sisi client dapat dilakukan sebelum data dari form inputan dikirim ke server. Validasi di client umumnya dilakukan dengan Javascript dan atribut HTML. Pada tutorial jquery kali ini, akan dijelaskan step by step bagaimana melakukan validasi form di sisi client dengan menggunakan library javascript JQuery dan plugin JQuery Validation.

Read More

Membuat Header, Footer dan Nomor Halaman pada PDF dengan PHP FPDF

Dokumen PDF (Portable Document Format) sudah menjadi format dokumen yang secara luas dikenal. Karena format PDF bersifat terbuka (open document format), PDF dapat dibuka di berbagai sistem operasi dan juga dapat dibuat dengan berbagai macam software, termasuk dapat dibuat dengan bahasa pemrograman seperti PHP. Untuk tutorial step by step membuat laporan pdf dengan php sudah pernah saya posting sebelumnya. Nah, dalam tutorial kali ini saya akan membahas mengenai penambahan Header, Footer serta Nomor Halaman pada halaman PDF yang dibuat. Semoga tutorial ini bermanfaat untuk kita semua, dan jangan lupa sebarkan tutorial ini agar lebih banyak lagi orang yang menikmati manfaatnya.

Langsung aja, untuk membuat Header dan Footer pada halaman PDF caranya sangat mudah. Kita cukup mendefinisikan fungsi Header() dan Footer() di dalam class kita. Fungsi tersebut tidak perlu dipanggil karena secara otomatis sudah dipanggil bersamaan dengan pembentukan object dari class.

Read More