Archive for August, 2011

25+ Useful Document and File Comparison Tools


  

Figuring out how a document has changed from one version to another isn’t always the simplest task. It’s further complicated when that document is longer or more complex, like source code.

The tools collected here can help you analyze and compare your documents and files, as well as merge them if necessary. There are tools to compare everything from Word docs to WAV files, and everything in between (including plenty that support syntax highlighting for code). Some are free and some are paid, and there are options available for Mac OS X, Windows, and Linux.

File and Document Comparison Tools

Beyond Compare Version 3

Beyond Compare lets you easily compare files and folders, including text files (with syntax highlighting for HTML), Word Docs, and PDF files, among others. Available for Windows and Linux for $30 (standard edition) to $50 (pro edition).

Kaleidoscope

Kaleidoscope lets you compare text documents (including source code) and images. It has built-in integration with other programs, and can read .psd, .txt, .png, .jpg, and .html files. Available for Mac OS X for €29.

Workshare Compare

Workshare Compare is an enterprise-level document comparison tool that lets you compare Word documents and text-based PDFs. You can compare one document to multiple others. It’s available for Windows for $145 for a one-year subscription. There’s also a Basic version for $99/year that only compares Word documents.

Docu-Proof Enterprise

Doc-Proof works to compare XML, Word, text, and PDF files. It makes it possible to quickly compare fonts, sizes, deletions, insertions, spelling, and location.

ExamDiff

ExamDiff is a freeware visual file comparison tool for Windows. It includes automatic change detection, one-click recompare, drag and drop support, and is fully customizable. There’s also a Pro version with more features for $34.99.

Diff Doc

Diff Doc can be used to compare Word, Excel, PowerPoint, PDF, RTF, text, HTML, XML, and other document types. It’s available for Windows.

Compare Suite

Compare Suite lets you compare by keyword, compare two folders, ignore certain words, and includes syntax highlighting to make it easier to compare code documents. Compare Suite is available for Windows for $70 for a single user license.

WinMerge

WinMerge is an open source differencing and merging tool for Windows. It shows comparisons visually, and makes it easy to merge documents.

Araxis Merge

Araxis Merge is a three-way document comparison, merging, and folder synchronization tool. It can be used to compare source code, web pages, XML, and other text files, as well as Word and Excel documents, PDFs, and RTF files. It’s available for both Windows and Mac OS X for $129 for the Standard version and $269 for the Professional version.

Changes

Changes lets you sync folders, compare both code and prose, and even compare right inside a variety of text and code editors (including Coda and TextWrangler). Changes is available for Mac OS X for $49.95 for a single license.

CodeCompare

CodeCompare is a source code comparison tool built on the .NET framework that includes support for syntax highlighting, Visual Studio integration, three-way merge, version control integration, and folder synchronization. Basic functionality is free, but there’s also a Pro version for $49.95.

Compare++

Compare++ has built-in analysis fuctions for C/C++, C#, Java, CSS3 and more. It’s available for Windows for $29.95 for a single user.

DiffMerge

DiffMerge is a free document comparison and merging tool for Windows, Mac OS X, and Linux. It includes full editing support for compared files, and merging for up to three files.

Pretty Diff

Pretty Diff is a free web app for comparing code, written entirely in JavaScript.

Kompare

Kompare is a graphical difference viewer that lets you compare two text files It’s included in the KDE Software Development Kit.

UltraCompare

UltraCompare is a file and folder compare utility that works for text files, Word documents, zip files, and jar archives. In addition to local/network directory compare, it also supports FTP compare. It’s available for Windows for $49.95.

Code Difference Comparison Tool

This is a free, bare-bones, web-based comparison tool. Just enter the master text and the second text and choose whether you want it compared inline or side-by-side.

Diffuse

Diffuse is a free Python text comparison and merge tool for Windows and Linux.

Compare & Merge

Compare & Merge is a file comparison and merging utility for source code, HTML, XML, and other text-based files. It’s available for Windows for $39.95.

Active File Compare

Active File Compare has syntax highlighting support for C++, C#, Java, Visual Basic, HTML, PHP, XML, and many other programming languages. It can also compare files that exist in Zip, Tar, and GZip archives. It’s available for Windows for $15.95 for a business license or $9.95 for a personal license.

Colored Diffs

Colored Diffs is a Thunderbird plugin for highlighting differences in CVS or SVN email notifications about changes made by other users.

Compare It! 4

Compare It! lets you compare not only text files, but also binary and image files, and includes an editing engine. It’s available for Windows for $29.

Compare PDF

Compare PDF has support for both PDF and text file comparisons. It can be integrated with other software products. Compare PDF is available for Windows for $35 for a single user license.

DiffPDF

DiffPDF is a free program that lets you compare two PDF files, with both text and appearance views (to check things like reformatting of a paragraph or if an image is changed). There are versions for Windows, Mac OS X and Linux.

Meld

Meld is a free visual comparison and merging tool for Linux. It allows for comparison of two or three documents, and in-place edits. It also allows folder comparisons.

Files Compare Tool

Files Compare Tool is a visual comparison app for files and directories. It offers color-coded side-by-side comparison and a powerful editing engine.

Quick Diff Online Tool

Quick Diff is a simple, free online comparison tool. Just copy and paste the two bits of text you want to compare, and indicate whether you want it to compare side-by-side or inline.

FourierRocks

FourierRocks is a graphical WAV file comparison tool. It’s open source, and works on the .NET framework.

Conclusion

The tools above can be a great way to compare documents and files. But don’t overlook the document comparison tools built into many programs developers and designers already use. Dreamweaver has built-in tools for comparing documents. So does Google Docs. Even WordPress has comparison tools for posts and pages. Leave us a comment and tell us what your favorite comparison tools are?

(rb)


How To Become A Web Design Expert

Advertisement in How To Become A Web Design Expert
 in How To Become A Web Design Expert  in How To Become A Web Design Expert  in How To Become A Web Design Expert

Have you ever wanted to take a client by the collar, shake them around vigorously and demand that they take you seriously because you are the expert? If so, you are not alone. Whether you consider yourself an expert and want recognition or are looking to one day become one, you need to step back and ask why being perceived in that way is important.

Why We All Want To Be Seen As An Expert

Many of us desire to be seen as experts because we would like our opinions to be taken seriously. Others want to be respected and valued, partly to satisfy our own ego, but largely due to a belief that we know best and that things should be done our way.

However, as we will see later, being an expert is more than about getting people to listen. If that is all you can manage, then they will see through this shallow desire and not give you the status that you believe you deserve.

Respect is not the only thing we expect from being regarded as an expert. Many of us also think that we would be able to charge more and that people will line up to hire us. Unfortunately, that is not always the case. Many experts are largely unknown, even within their field, and do not demand high salaries. Being an unheard-of expert is of little value to your career.

In spite of all this, being perceived as an expert can be helpful when working with clients, and it does create the potential to attract better-quality work.

What, then, does it take to become an expert?

What Does It Take To Become An Expert?

In his book Outliers, Malcolm Gladwell suggests that becoming an expert in any particular field takes approximately 10,000 hours of practice. For most full-time Web designers, this equates to almost four years’ worth of work.

I find this figure of 10,000 hours dubious. While I can see how this would apply to something like playing a musical instrument or a sport, I am not sure it applies to a field as diverse as Web design. 10,000 hours of Photoshop experience, for example, would not make you an expert in Web design. At most, you would be a Photoshop expert.

That said, Gladwell’s claim is right in one respect. To become an expert, you need time and experience.

Facts in How To Become A Web Design Expert
Many people claim to be experts, but only few invest thousands of hours of work to become one. Image by Brett Jordan.

Time and Experience

There can be no doubt that expertise only comes with time and perseverance. It does not happen overnight, and there are no shortcuts to achieving a high level of expertise. The longer you do the job, the more you’ll see and the less likely you’ll be surprised by new scenarios.

One could argue that things move so quickly in Web design that lessons learned four years ago do not apply today. But I’m not convinced that is the case. In my experience, although technology changes, people do not. The majority of unexpected issues that arise when developing a website relates either to human error or to some element of user experience. Also, years of experience will improve your ability to solve problems. Even if the challenges are new, the fact that you have tackled so many before makes you more proficient at overcoming problems. Your methodologies and processes make you better equipped. Therefore, lessons learned years ago still stand today.

Obsessive Passion

I’m not suggesting that only experience matters. For instance, I don’t believe you should require a certain number of years of experience when employing somebody. Instead, look for a desire to learn, an ability to work in your company’s culture and, most of all, passion.

I began my career working at IBM and can attest that years served is not a reflection of expertise. Too many of the people I worked with coasted through the years with no passion for their work. Without passion, they had no desire to learn new things or push boundaries.

I believe that an almost obsessive passion for Web design is required to be a true expert.

In addition, my colleagues at IBM never took risks. Experimenting and making mistakes are crucial if experts are to establish their credibility.

The Importance Of Making Mistakes

At the heart of being a true expert lies one universal truth: you need to be willing to make mistakes, and a lot of them.

Unfortunately, we don’t live in a culture that celebrates failure. We want winners, people who succeed. But success comes down not to inspiration, but perspiration. Winston Churchill put it best:

Success is going from failure to failure with no loss of enthusiasm.

Succeeding in your chosen career and becoming a true expert requires that you fail not just once or twice, but again and again.

Failure is a crucial part of the journey to becoming an expert. As Charles Willson once said:

The definition of an expert is someone who knows what not to do.

Without failure, we cannot hope to learn the best way to do things. Although learning from the failures of others is possible, nothing beats experiencing failure first-hand.

We need to overcome our aversion of failure. We should go as far as celebrating it. Being willing to fail is a sign of maturity, bravery and a desire to do better.

Most importantly, we need to learn to face our failures. When a project goes wrong, people tend to react in one of two ways. Some of us carry on regardless, denying the issue. We pour good money and effort after bad. Knowing when to let go is so important. The others get rid of the problem as quickly as possible and pretend it never happened. But this route means that you will never learn from your mistakes. We need to take time at the end of a disastrous project to review where things went wrong and learn from it. This path can be a hard, especially when you have to deal with an unhappy client.

Those who are never seen to fail are either too timid to try, for fear of public ridicule, or simply do not desire success enough to endure the sting of failure.

You may be concerned that public failure undermines the perception of you as an expert. Although this is certainly a possibility, the public’s perception of you is shaped by more than whether you succeed or fail at a particular endeavour.

How To Ensure You Are Perceived As An Expert

Being an expert though never being appreciated as such is possible. Being knowledgeable is not enough; one also needs to be recognized for that knowledge.

This is a common problem and one you may be experiencing. You have done your 10,000 hours, made mistakes and learned your lessons. Nevertheless, your clients or boss fail to recognize the knowledge and experience you have accumulated.

How do you convince them that you are an expert and that they should take your opinion seriously?

Show Some Humility

The first step to being recognized as an expert is to stop insisting that you are one. People who are generally regarded as experts are often the last to call themselves one. In fact, they often go to great lengths to point out the limitations of their knowledge and to encourage others not to take their opinion as gospel.

People are suspicious of those who claim to be experts. Allow your knowledge to speak for itself, rather than insisting that people pay attention. But while saying that you are an expert is not wise, you could imply it in a number of ways. One of the most powerful ways is context.

Use Context to Your Advantage

If you took some modern art out of a gallery and hung it in a primary school, it could be mistaken for children’s painting. This is because context influences how it is perceived. The same is true with expertise.

Witness how managers take the opinions of consultants more seriously than their staff, even if both are saying the same thing. Consultants are paid more, and so their opinions are more highly valued.

You might not have much room to change your rate; nonetheless, you can change your context so that people value you more highly.

Like a work of art in a gallery, your expertise will be recognized if it is experienced in the right context. For example, people will give your comments more weight if you are standing on a conference stage than if you are in a pub. Likewise, your expertise will be taken more seriously if it is read in a book than shared around a conference-room table.

Paul-boag-fowd in How To Become A Web Design Expert
I often get mistaken for an expert simply because I stand on stage. Photo by Marc Thiele.

Getting a speaking engagement or a book deal requires that you first convince someone of your expertise. Conference organizers and publishers act as guardians of quality, and if these guardians have approved you, then people will assume you know what you’re talking about.

Not all of us can secure book deals and speaking slots. In this case, self-publishing, podcasting, blogging and participating in open-source projects are just a few alternatives. Standing out as an expert is easier than you think.

Not that context is everything. It’s also about what you say and how you say it.

Style and Substance

Another reason that books, presentations, blogs and podcasts are more effective than mere conversations could be that the arguments in them are better structured and more thoughtful.

How you articulate yourself is critical. While something might seem obvious to you, it is not always clear to others, particularly if the issue is recurring. When a client asks you to make their logo bigger or to fill up white space that you have so carefully crafted, being dismissive and irritable is easy because you have heard the request so many times before. Rather, carefully structure your response so that it is as convincing as possible.

That said, it is not just about substance, but also the style in which you present your arguments. An expert should speak with a quiet confidence. The truly great have little to prove, and so talk with a certain presence and authority. They don’t get flustered when someone disagrees with them. Instead, they seamlessly switch to a different approach.

If you want to be perceived as an expert, know yourself, be relaxed and present with confidence.

Unfortunately, problems will arise if the other party in the relationship already has certain preconceptions.

Overcoming Prejudices

Establishing yourself as an expert with your current boss or client can be a challenge. When you are seen as a junior member of the staff, their opinion won’t change overnight. Fortunately, you can do a couple of things to help shift that perception.

First, present evidence to support your positions. If your boss is worried about content being below the fold, show them a report on scrolling behavior.

Unfolding-the-fold in How To Become A Web Design Expert
Quoting research such as this report on scrolling can increase your credibility.

Secondly, quote established experts who support your case. Jakob Nielsen, for one, has written extensively on the topic of scrolling.

These techniques have benefits beyond just supporting your argument. They also demonstrate how well read you are in your field. Also, by demonstrating that your position is in line with that of other experts, you build your credibility by way of association. Their expertise rubs off on you!

Unfortunately, there is no quick way to overcome biases. This is hard for those who work regularly with the same people. But over time, by consistently demonstrating your expertise and using the techniques mentioned above, you can change their view.

With Great Power Comes Great Responsibility

The focus of this article is on becoming an expert. But before concluding, I want to say a word about what happens when you finally achieve your aim.

Once you gain the respect of your clients, boss or peers, what next? Becoming an expert has to be about more than having an ego trip. Rather, it should always be about serving others. You become an expert so that you can do a better job for your clients, provide more value to your organization and help others establish best practice in your industry. Ultimately, if all you want is to be loved and respected, you will never achieve your aim. People can detect that kind of narcissism a mile away and will dismiss you as vain.

That said, being taken seriously is important in our line of work. If we are not taken seriously, then good websites can go bad. I am sure you will share in the comments stories of how Web projects have gone wrong because people didn’t listen to you. But hearing some experiences of how you convinced bosses and clients to take you seriously would also be nice.

Cover image credit: Aural Asia

(al)


© Paul Boag for Smashing Magazine, 2011.


Showcase of Creative and Entertaining 404 Error Pages


  

When designing a website, many of us just neglect the error pages considering them insignificant. But the fact is many visitors come across these 404 error pages either because of typing a wrong URL or due to any other number of technical reasons.

Visiting an error page is not a pleasurable experience for a visitor but web designers can make it pleasurable by designing beautiful and creative error pages. All it needs is a little bit of creativity and some quality time, and your error pages will stand out. Here is a list of some creatively designed error pages that will inspire you.

Entertaining 404 Error Pages

Agens
This error page is designed with extreme creativity that features an astronaut being lost in the outer space.

Screenshot

Giraffe
Giraffe features a mascot guiding the lost visitors, showing them how they can get back to the site again.

Screenshot

Frywiles
The missing bird in the row represents something is misplaced and cannot be found. Proper navigation is provided to help users get back to the website.

Screenshot

iFolderLinks
A baby weeping over a computer greets you when you come across the error page on iFolderLinks.

Screenshot

Apartment home Living
A very interesting approach of designing 404 error page. A nice ol’ chap appears whenever you come across an error page and a lady peering from behind the frame lets you navigate the website properly.

Screenshot

Factor D
Factor D features a beautiful yet terrified vintage scream queen to indicate the horror of being lost.

Screenshot

Sure Dev
This error page comically appears as if the user has broken the site with their plate spinning shenanigans.

Screenshot

Blizzard Entertainment
Here is another example of the site appearing to have been broken by the user.

Screenshot

Milrayas
With a whimsical play on the Where’s Waldo series of books, this 404 error page playfully asks where is the page?

Screenshot

TK Designs
This page uses an illustrated, space age character running through exasperated and lost. The page includes a search box to help users find their way again.

Screenshot

Blue Daniel
This extremely interactive (complete with animation) design is brimming with creativity. Set in a mock NYC subway line dubbed track 404.

Screenshot

Bit.ly
Here the mascot is floating out to sea, far from the familiar shores of the site.

Screenshot

8bitpeoples
In true 8bit fashion, just what you would expect from this site, comes a little creativity to go a long way.

Screenshot

Audiko
Has an extremely colorful and artistically crafted error page. Bold and beautiful.

Screenshot

Cooklet
Appropriately designed 404 page that simply says you came too late, the empty plate an indicator that you have missed out on something.

Screenshot

NPR
The 404 error page for NPR is designed in such a way that it redirects the lost users to the stories of lost people, places and things.

Screenshot

Prime
The site’s creative way of demonstrating that something is missing, easily earned it a place in this showcase.

Screenshot

Spiritual But Not Religious
This site uses a tongue in cheek sense of humor that plays into the site and its mission wonderfully.

Screenshot

Good Old Games (GOG)
This innovative 404 design suggests that the page you were looking for has broken out of the site and is now lost somewhere in the cosmos.

Screenshot

Abduzeedo
A very creatively designed error page that also uses the lost in space theme to inform visitors that the page they sought could not be found.

Screenshot

HomeStarRunner.com
This 404 page takes a bit of a different tact. Instead of being helpful, they berate the user and tell them to go away.

Screenshot

Hoppermagic
Here Hoppermagic takes the whimsical route, deploying their rabbit logo who has chewed on the cables and caused the error.

Screenshot

WeAreTeachers
This error page plays on the age old excuse given to teachers when homework was left undone, which works well on a community site of teachers.

Screenshot

Wooga
This error page also goes more of the comical route with their weeping raccoon, saddened by the users error.

Screenshot

Zappos
Here the cute, little weeping penguin also plays on the idea that the users error has caused the sad face. They also provide you with navigation that can take you onward and the make the penguin happy again.

Screenshot

Blippy
A vividly colored and extremely beautiful 404 error page. With an animated rainbow that appears to make the sadness of the 404 error go away.

Screenshot

OrangeCoat
OrangeCoat has designed a creative 404 error page flowchart that works with its users to try and figure out what caused the 404 error and to then help them along their merry ways.

Screenshot

Jolie Poupee
This error page was designed for Jolie Poupee which is eco-friendly children’s clothes stores. It is the perfect blend of cute and creepy.

Screenshot

Warhammer online
This fantasy gaming site uses imagery from the realm, mixing humor with the lore for their 404.

Screenshot

Twinpx
A visually compelling 3-Dimensional rendering of a broken 404 image is used to grab the users attention and let them know they are lost.

Screenshot

Planetgeek
The page features a small bit of the classic 404 error page as an appropriately geeky t-shirt design, and gives the lost users proper navigation options to return back to the site.

Screenshot

Limpfish
A very simple and clean error page designed like a torn out wanted ad from a print publication announcing what the page is missing, and needs to be complete.

Screenshot

Deliciously Creative
Employing the imagery of a broken egg as they explain that something may have broken, their playful explanation playing into the imagery and site’s mission, this 404 page is wonderfully simple and creative.

Screenshot

D20srd
This playful and entertaining take on a 404 design sets up the page like a role playing game trap deployed on its visitors.

Screenshot

Clubpenguin
Using some of the sites animated penguins, who are checking a map to show they are lost, this 404 design has the penguins point you in the right direction…towards the navigation.

Screenshot

You may also want to consider our previous posts:

(rb)


Relentless Quality

If there’s one thing I’ll remember about Alex Mahernia, it’s footer spacing. Here we are at 10pm in the office and we’d be trying to launch a site. The only thing left is an A-OK from the creative director. And without fail, he’d yell at me to come into his office and point at his screen. “The footer spacing is too big on this page.” So I’d go back to battle the CSS until every single page on the site had consistent footer spacing in every browser.

Motherfucking footer spacing.

And what did it matter? Are our clients really going to lose customers because there’s an extra 10 pixels of footer spacing in IE6 on one of the pages? Is the client going to refuse payment because of these pixels? HOW MUCH BLOOD ARE THESE PIXELS WORTH?

But it was never about the footer spacing. It was about quality. It was about cultivating a culture of relentless quality in everything we produced.

Quality versus the Ego

Every time Alex called me into his office and showed me a page with an extra 7 pixels of spacing my blood pressure went through the roof. I took it as a personal insult. But he wasn’t insulting me. It was about producing a quality product.

Quality has no room for egos. Other people will have better solutions. You are going to miss things. You are going to break things. You are going to make mistakes. And people are going to point it out.

And I think it’s okay to get upset. Take that feeling and turn it inwards. Vow to make things better. Make sure you’re always producing the best quality product you can.

Move fast and break things

If you take a look at any of Facebook’s recruiting marketing, you’ll see a phrase repeated over and over:

Move fast and break things

And with good reason — the idea it embodies is fantastic. Unfortunately I see a lot of people interpreting this quote as something like this:

It reminds me of another misinterpretation that’s always bugged me:

Quality isn’t something to be sacrificed. Move fast and break things, then move fast and fix it. Ship early, ship often, sacrificing features, never quality.

Embrace change. Ship. Never cut corners.

Quality is contagious

Which reminds me of the broken windows theory:

Monitoring and maintaining urban environments in a well-ordered condition may prevent further vandalism as well as an escalation into more serious crime.

Broken windows are the reason most large software projects suck to work on. A little technical debt here, a few shortcuts there, and pretty soon you’ve got a codebase so full of broken windows that no one even cares if they throw another pile of broken glass on the heap.

But just as broken windows are contagious, so is a dedication to quality. Carve out a little piece of a messy codebase and clean it up. Sharpen the edges, polish the surface and make it shine.

The caveat here is that you can’t half-ass quality. Dedication to “semi-quality” isn’t dedication at all. High-end design coupled with mediocre engineering can only produce a mediocre result.

And I don’t know about you, but I don’t dream of building mediocre. I dream of building the best. So I’m thankful to Alex for instilling this idea of relentless quality in me, even if I still have footer spacing related nightmares from time to time.


Freebie: Responsive jQuery Slider Plugin Flexslider

Advertisement in Freebie: Responsive jQuery Slider Plugin Flexslider
 in Freebie: Responsive jQuery Slider Plugin Flexslider  in Freebie: Responsive jQuery Slider Plugin Flexslider  in Freebie: Responsive jQuery Slider Plugin Flexslider

When it comes to responsive design, it’s not just about fluid images or adaptive layouts. It’s also about the responsive methodology behind the entire design process. In responsive design, we are creating responsive experiences, meaning that all design components need to be able to adapt to the environment in which they are displayed and have to interact with. This is why we create tables, navigation menus, videos and other design elements responsive as well (see Responsive Web Design Techniques and Design Strategies for more details). It just makes sense to consider each and every design component — including the image slider.

In this post, we are glad to release a responsive jQuery slider plugin Flexslider which has been created, developed and maintained by Tyler Smith and released for Smashing Magazine and its readers. As usual, the plugin is absolutely free to use in private and commerical projects. The plugin includes fade and slide animations, customizable options as well as all the navigation options you would expect in such a plugin — touch gestures inclusive! It uses simple, semantic markup to create the slider and is lightweight, weighing only 5 Kb (minified). The plugin has been tested in Safari 4+, Chrome 4+, Firefox 3.6+, Opera 10+, and IE7+. iOS and Android devices are supported as well. In three simple steps, you can have a fully responsive slider for your responsive design.

Flexslider-new in Freebie: Responsive jQuery Slider Plugin Flexslider

Download the Plugin for Free!

The plugin is released under the MIT license. You can use it for all your projects for free and without any restrictions. Please link to this article if you want to spread the word. You may modify the plugin as you wish.

Flexslider1 in Freebie: Responsive jQuery Slider Plugin Flexslider

Features

  • Simple, semantic markup.
  • Supported in Safari 4+, Chrome 4+, Firefox 3.6+, Opera 10+, and IE7+.
  • iOS and Android devices are supported as well.
  • Slide and Fade animations.
  • Highly customizable slider options.
  • Directional, keyboard, and touch swipe navigation.
  • Lightweight (5 Kb minified).
  • You can use all HTML elements in the slides.
  • Free to use under the MIT license.

Flexslider5 in Freebie: Responsive jQuery Slider Plugin Flexslider
You can find the installation guide and documentation on the developer’s release site.

Behind the Design

As always, here are some insights from the designer:

“My motivation behind creating this plugin was the difficulty I had building my first responsive slider. There were no resources to pull from and I spent hours banging my head against the wall working through the logic. My goal was to make it easier for others doing the same thing. I wanted to build a plugin that served the newest of beginners, while providing seasoned developers a tool they could use with confidence.

FlexSlider serves beginners by being virtually plug and play, needing only the FlexSlider files and some images to get started. To seasoned developers, FlexSlider should be seen as a tool that gets them rolling quickly. It doesn’t add unnecessary markup and gives complete freedom to use any HTML element within each slide.

The most exciting thing about FlexSlider at this point, in my mind, is the slide animation. It was a challenge to construct, but the resulting responsive behavior is very cool. When you mix the slide animation with touch gestures, it creates a great experience across iOS and Android devices.

Problems I encountered when building the plugin was ensuring that the plugin would work across all different types of responsive builds, browsers, and devices. To accomplish that, I made sure the plugin did exactly what it needed too, and nothing more. For example, many sliders use fixed dimensions and absolute positioning to create animation effects, but this is not possible with fully fluid responsive design. Avoiding this practice, I limited my use of the $(window).resize() function and let the slider dimensions remain organic to the content within. The downside to this is that the fade animations can’t overlap, which is indeed a nice effect.

The most important lessons I’ve learned are that overusing (window).resize() function to control element sizing will make you cringe, which is why you won’t find much at all in FlexSlider. Keep your responsive design as light as you can. Remember the audiences you are extending to reach are on far less capable devices, especially with JavaScript.

If you are having a problem installing FlexSlider, post a comment in the Community section and I will respond. Follow @mbmufffin for FlexSlider updates!”

Thank you, Tyler. We sincerely appreciate your work and your good intentions.


© Smashing Editorial for Smashing Magazine, 2011.


  •   
  • Copyright © 1996-2010 BlogmyQuery - BMQ. All rights reserved.
    iDream theme by Templates Next | Powered by WordPress