JQuery Plugin Project – FancyMe Alphabetical Tab Navigation

What can I say? I found this plugin-development to be a quite interesting hobby. Once I gave it a try, I couldn’t stop. And after making the tabbed navigation, I knew there was more I could do with it. So this next plugin was born.

alphabetplugin01

The alphabetically-ordered tab navigation is something I’m quite proud of.

The HTML structure needed is quite simple:

<div id="alphabet01">
    <span>Hugh Jackman</span>
    <span>Jennifer Lawrence</span>
    <span>Topher Grace</span>
    <span>Joseph Gordon-Levitt</span>
    <span>Anne Hathaway</span>
    <span>Jessica Biel</span>
    <span>Scarlet Johanson</span>
    ...and some more...
</div>

Ignore the fact that I’m using names of some of my favorite actors, you can use anything. The important detail to focus on here is that they are each inside a SPAN element, all of which are inside of the main DIV that will ultimately be the main container for our tabbed navigation.

The imports:

<link href="fancymealphabet.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="jquery-1.9.0.min.js"></script>>
<script language="javascript" type="text/javascript" src="fancymealphabet.JQuery.js"></script>

This imports the CSS stylesheet that contains all of the color themes and basic styles for the plugin (with comments so you recognize everything in the code) and the main plugin javascript file, along with the jQuery import (which I chose to save locally, but there are other ways)

After this, you just need the basic function call to create an alphabetically ordered tabbed navigation with the default theme and default settings:

<script>
    $(function() {
        $('#alphabet01').fancymealphabet();
    });
</script>

Check out the demo for more information on how to tweak your tabbed navigation.

Happy coding!

JQuery Plugin Project – FancyMe Tab Navigation

Continuing with the plugin project, I bring to you a simple tab navigation. The result is as follows.

tabplugin01

The previous result can be achieved through a very simple HTML structure, like the one shown bellow

<div id="mytabs">
	<ul>
    	<li class="current">Tab 1</li>
        <li>Tab 2</li>
        <li>Tab 3</li>
        <li>Tab 4</li>
    </ul>
    <div>
        <p>..Some content..</p>
    </div>
    <div>
        <p>..Some content..</p>
    </div>
    <div>
        <p>..Some content..</p>
    </div>
    <div>
        <p>..Some content..</p>
    </div>
</div>

Notice that we have the same number of LI elements and DIV elements, and that the LI element standing for the active tab has the class CURRENT.

The project comes with a predetermined CSS file that has multiple customizable color themes that can be changed through the main function call. The necessary imports are the following:

<link href="../fancymetabs.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="jquery-1.9.0.min.js"></script>
<script language="javascript" type="text/javascript" src="../fancymetabs.JQuery.js"></script>

And the function call, also inside the HEAD of your page

<script>
    $(function() {
        $('#mytabs').fancymetabs();
    });
</script>

And that’s it! This brings the tabbed navigation with its default values. More customizing information can be found in the demo.

JQuery Plugin Project – FancyMe Accordion

I’ve been working on this project for a while and I’m happy to finally be able to publish it. It’s a series of JQuery plugins with the peculiarity that they have several color themes than can be changed through a parameter in the function call, without having to touch the CSS.

The first one in the list is the Accordion Menu.

accordionplugin01

This is accomplished through a simple HTML structure involving a global H1, main titles with H2, and lists of submenus with UL. The HTML looks like the following:

<div class="accordion">
<h1>Menu</h1>
<h2>Title</h2>
<ul>
	<li><a>Something</a></li>
	<li><a>Something</a></li>
	<li><a>Something</a></li>
</ul>
<h2 class="active">Title</h2>
<ul>
	<li><a>Something</a></li>
	<li><a class="active">Something</a></li>
	<li><a>Something</a></li>
</ul>
<h2>Title</h2>
<ul>
	<li><a>Something</a></li>
	<li><a>Something</a></li>
	<li><a>Something</a></li>
</ul>
<h2>Title</h2>
<ul>
	<li><a>Something</a></li>
	<li><a>Something</a></li>
	<li><a>Something</a></li>
</ul>
</div>

Notice that I added ACTIVE classes to both the H2 and the LI elements that represent the currently active choice. The CSS can go untouched, but must be imported to the page, along with the plugin file.

<link rel="stylesheet" type="text/css" href="fancymeaccordion.css"/>
<script type="text/javascript" src="jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="fancymeaccordion.jQuery.js"></script>

After that, you can just reference the plugin through this simple line, which displays the result shown at the very top of this post (with all the default values)

<script>
 $(function() {
   $('.accordion').fancymeaccordion();
 });
</script>

Go Live! New version of my site!

Hi everyone! I’m back from the dead.

I had not posted in a while, I was so not happy with my last blog… and it took time to get it the way I wanted but here it is! Yes, it is still not finished but I wanted to get it out there nevertheless.

Some things still pending:

  • Responsiveness (media-queries are not ready, so they are not active, sorry)
  • Plugins section (I have to finish documentation of the ones I’ve got, so the section is currently inactive)

And I’ll keep improving this, of course, and adding content. But it’s off to a nice start!

UX Job Recruiting: What’s it about?

I just recently got myself involved with the whole recruiting process of my company and I must say it’s been a really interesting experience. Not something I’m very fond of doing, but something very interesting indeed. Even if I’m not really into the whole Human Resources area, there is a lot of value in how you select the people that enter your team.

My team is now growing slowly, but effectively I hope. And I wanted to share some of the strategies I put in practice for this purpose. A lot of it is new to me, too, so feel free to share your thoughts on it.

What you should look for in a prospect

I know it’s an obvious remark, but I still gotta say this: He/she must have a killer portfolio. It’s always an effective filter, since you can not just measure their work on quantity, but also on quality. Their way of thinking and organizing ideas is clearly visible not just in their past work, but also in the way they’ve put it together for a presentable portfolio. Getting a .ZIP file full of JPG images is very different from getting a PDF or a link to a personal website.

Are you a fan of social networking? This is where it all comes into play. Personally, I’m not very fond of doing this, but I recently found this infographic on the subject and it got me thinking of the value behind it. How about checking their social media presence? I ended up checking some of their blogs and it was a nice addition to what I’d already learned from them.

Then of course comes the interview. Interviews are the final breaking point, because then not only is their professional experience important. I’ve identified these following factors:

  1. Their enthusiasm is a key aspect of their qualifications. They should enjoy themselves doing what they do!
  2. The way they interact with you. If you are going to be working with them, there should be a favorable interaction between the two of you. Are they open-minded? Are they introverted or extroverted? Do you see them in a team with you?
  3. Can you maintain a conversation easily with them? And I mean, other than about the weather of course. They must be willing to speak their minds about the stuff they’ll be dealing with on a daily basis.
  4. They should be self-confident. And I don’t mean self-confident to a point where they start being obnoxious because this is a big minus. Self-confidence involves knowing what you’re talking about and saying it in a way that demonstrates you do. That doesn’t involve repeating ‘I this’ or ‘I that’.
  5. Their future aspirations and goals. Do they fit in with what you have in mind for them?

What you as a recruiter must accomplish

What? Of course there’s also the stuff you need to impress them with! You’re not only evaluating them, you’re selling them the idea of working with you. And this isn’t just something I asumed, but something I’ve personally experienced being on the other side of the coin.

When I was a full-time developer (oh, those days…) I had the misfortune of going to the must stressful and degrading interview I’ve gone to in my life. I’m not going to say where it was, of course, out of respect. But they were so mean to me that, even though in the end I convinced them I could do the job, they’d already convinced me not to work for them. The money didn’t even matter to me after that, even though it was well payed considering the experience I had back then. They’d asked me uncomfortable personal questions, the team leader had almost barked at me and stared at me doubtfully during a painfully long session of question-answer, and the place was creepy as hell. Needless to say, even after they called me back a few times trying to convince me, I was the one who rejected the offer.

In short, we need to convince them as well. How?

  1. You should be friendly. This should be obvious but… well, if you read my story, it isn’t always like that.
  2. Let them know you enjoy your job. They must understand that, if they work for you, they’ll enjoy it. It shouldn’t look like something they’ll hate waking up for every morning.
  3. Be clear and specific about everything. What will they be doing? How does your team work? What are the abilities required from them? What benefits do they get for working with you?
  4. Don’t turn the interview into a good cop/bad cop drama. You can get the data you need without being rude or pushy.

I hope this helps, good luck with your future recruitments!

When we ‘asume the user knows’

I’ll confess I’m an Amazon virgin. Why?

Now, don’t look at me like that. I know it’s weird, but I just enjoy bookstores too much. Nevertheless, when a book’s not there, it’s not there, and I decided I’d give Amazon a try.

Since I was a first-timer, after deciding to start the check out process, they asked for me to register, which is actually a very fast step. It’s fast… but it could be better, wouldn’t you agree? I just happened to encounter a tiny problem…

This may not seem like much of a problem at first glance. Well, no, now that I think about it, it does even at first glance! Let’s review in a more obvious kind of way…

I asumed it was because my password didn’t have any numbers or special characters in it, but… is this really the best way to let me know? Of course not.

It was, in fact, because of the lack of numbers. But I’m a user that quickly asumed that. I can bet you a lot of money my father would’ve been staring at the screen for a really long time. And he is used to buying stuff online.

This problem, though, is not an e-commerce specific scenario. It’s the password, after all. But looking a little beyond the actual data, we can see it’s a problem generated by lack of information.

Is it really too difficult to include something on the lines of ‘Your password should have numbers’?

There’s a link that leads you to tips on how to create a password, but the word ‘tips’ doesn’t imply obligation. It implies suggestion.

And I’m asuming it was because of the numbers… and not because of the length.

Really, now that I think about it… was it the length?

We need to avoid confusing our poor users like this. Correct vocabulary, choice of words, and, of course, enough information (just enough) are key aspects of our site’s communication with the users.

For the record, the rest of the check-out process is very user-friendly. I liked it.

The Pros and Cons of Responsive Web Design

As you probably read on the last post, I just recently finished reading Responsive Web Design by Ethan Marcotte. And, in risk of repeating myself too much, I think it’s one of the best web design related books I’ve read so far. If you still don’t know what I’m talking about, you can read Ethan’s introductory article on the subject.

But, even though responsive web design seems like a very impressive approach, is it always the right solution to your task at hand?

We should remember that it’s never just about implementing the latest design trend there is. Before thinking about investing time, money and resources on responsive web design implementation, we must consider the following:

  • Does it align itself to our site’s objectives?
  • Do our users expect the exact same of the website when they visit it on mobile as when they do on their computers?
  • Do we have the resources to do it?
  • Do our time schedules allow it?

I’d like to review a couple of statements against and in favor of its use

Reasons to consider Responsive Web Design

  • One solution to rule them all – Admit it, having a single version of a website that works on every screen width and device is a pretty great deal. It will not only be benefical for the users, it will also be easier to maintain afterwards.
  • Avoiding device-alternating issues – One of the main downfalls of building both, a desktop version and a mobile version of a site, is the fact either way the user is likely to share the URL, and the person who opens that shared link isn’t always using the same device through which it was shared. Responsive web design avoids this effectively.
  • It’s not just about the device - Even if we have a very large screen, we don’t always have a full-screen sized window open for the web browser. With a responsive web site, even if the window is resized, we never end up with that horrible horizontal scroll.
  • Attacking media display issues – Of course, a responsive website has to consider resizable media, in formats that can be viewed from every device.
  • Designing for mobile first – By now, I’m sure everyone is familiar with Luke Wroblewski’s motto of designing for mobile first, which is something we are practically forced to do while implementing responsive web design. This way, content that isn’t really needed by the user is avoided in the final result.

Reasons NOT to consider Responsive Web Design

  • Development times and resources – Building a responsive website has its complexity. Do you have the time (considering your previously established delivery dates) to do it correctly? Are there people on your team capable of doing it or do they need training? Do you have the time for that training?
  • Cross-browser compatibilities – HTML5 and CSS3 are very powerful allies for building a responsive website, but we all know that there are still many compatibility issues regarding these languages. Alternate ways of achieving the same results may be necessary, which brings a new issue to the list…
  • Loading times – Internet connection on mobile devices is still a greater issue than on common computers, which brings this topic to the table. Responsiveness requires extra server calls due to cross-browser and cross-platform compatibility issues (yes, we are back on the IE topic). Media alternating also needs additional server calls, or else resizing a huge image everytime will also result in slower loading times since the same 700×700 image is still loaded on a 320×480 screen.
  • Different devices, varying objectives – The objective of the desktop site (often informative as well as functional) is not always the same requested of the mobile version (often just functional, and not to the same extent of the full website). This makes it necessary to work on different versions for each purpose.
  • Image resizing restrictions – Image resizing is a very important topic for responsiveness. But think about advertising. There are pre-established sizes for web advertising, and resizing or croping ads may result in harmful distortion.

So, as for every other available solution, the conclusion is that you must judge it for yourself. Consider every aspect of it and of your current project. Is it what you need?

A Couple of Books You Should Read

Really, just because you haven’t heard of me, it doesn’t mean I’m floating around in some river. I swear. So don’t worry too much (though I appreciate it if you do). I’ve been up to my neck with stuff to do… and in need of some free time. But I’ve missed my blog for way too long.

Anyways, during those free periods of time I was able to finish reading a couple of very good books. I want to share brief reviews with you in hopes of convincing you of reading them yourself, since I can guarantee you they’ll be of great use if you are a web designer or developer.

Content Strategy for the Web by Kristina Halvorson

I know it took me like forever to finish reading it, but I finally did and I’m very fond of it. This

book is not just about the complexity of the process that content design and selection represents, but also about its importance, starting from the basic concepts revolving around it.

What I personally enjoyed the most was the inclusion of a very important (but also very commonly overlooked or ignored) concept: content auditing. Of course, who would have thought you not only needed to create new and great content, but also review the existing one? You can see why common sense is the least common of all senses. I specially loved what Kristina had to say on the subject.

To summarize, this book presents a whole new, more complete and accurate way of looking at your site’s content. It’s also very engaginly written, with lots of information that won’t bore you or tire you.

Responsive Web Design by Ethan Marcotte

It’s very new and fresh information, and Ethan has a very clear and to-the-point way of sharing the responsive web design philosophy.

Of course it gets technical, with a whole lot of CSS styling information, but it’s fully explained and

detailed, relating everything to a very nice-looking and simple example. It’s the sort of book that doesn’t involve passive reading. I would recommend that you read it and follow along the instructions of the various exercises, for better understanding. Specially the chapter on media queries.

To sum up, I’d say it’s an eye opener in many ways I used to view the development process. But it’s also very clear on not making you biased. Responsive Web Design is not the only solution there is, and this book doesn’t say otherwise. But it does highlight the benefits very neatly.

So? Will you read them? I hope you make plans for them, you won’t regret it!

The Pros and Cons of Working with JQuery Mobile

I’ve been working with the mobile web (either designing or front-ending, I tend to do both) for almost four months now and I’ve learned a great deal in that time. One of the many things I’ve learned from has been the use of the JQuery Mobile framework for mobile web experience implementation.

As you can imagine, after almost three months of having used it, I can tell you a few pointers that will help you decide whether JQuery Mobile is what you’re looking for or not. As always, there’s no definite answer.

Let’s start with the good things

JQuery Mobile saves you a lot of time with positioning, responsiveness and visual details. Why?

It helps with positioning because you can use its specific attributes to arrange stuff inside the page, thus saving time with not having to bother yourself with the width percentages and all that. Plus, there is even a pre-arranged way of implementing the 960 CSS Grid!

You also save a lot of time in taking care of responsive design, since JQuery Mobile makes your layout adapt to the changes in size, also taking care of details like hiding the address bar of your web browser.

It saves you time with visual details because it comes with a default CSS style sheet that lets you alternate between ‘themes’, that is, color palettes you can apply to your layout. You only need to call these themes via a specific letter associated with them. This applies not only to small elements like buttons and icons, but also to the entire header, footer or body background. You can also use easy-to-implement page transitions, so that your panels hide or show in a more native-looking way.

Another great feature of JQuery Mobile is that it actually helps you understand the basic usage of HTML5. If you take a look at the documentation and wander around the layout structure section, you’ll find it implements the data attribute provided by the HTML5 markup. Little by little, you’ll gain more understanding of it by just using the framework.

Its panel exchange structure is also a very good side of using JQuery Mobile. You are able to have many single-purpose “pages” inside the same HTML document, which saves you trips to the server. You can have a simple website built in a single HTML file.

So how’s that for starters? Sounds pretty neat, to be honest. And I’ve taken advantage of many of its features, but…

There’s stuff we should consider against it

I’m personally very fond of JQuery Mobile, but I’ve found certain criteria that have made me decide against its use sometimes. Let’s talk about them…

First things first: Performance. Importing the JQuery Mobile library, alongside its CSS file, generates new calls to the server, therefore making your application slower. If you want to avoid this, you’ll need to further synthesize these files with your own scripts and CSS files.

Another thing is that the styling provided by the framework is loaded with gradients and rounded corners. So what if your design doesn’t have any? You ought to find ways around this styling… or decide against using the framework at all, since breaking its normal functionalities makes it a little more troublesome than it should be.

I’ve also had a few problems with the way JQuery Mobile formats elements such as dropdowns (well, mainly just dropdowns). What it does is change the element for a list, which not only makes the interaction a little awkward (after many tests with users, we’ve encountered the pop-up list of options doesn’t always respond correctly), but it also makes dynamically loading content into the dropdown not as straight-forward as it normally is.

Well? What do you think? Is JQuery Mobile what you’ve been looking for? I hope whatever the answer is, you find the solution to every mobile project you’re working on!

Keep in mind, though, this article wasn’t written considering the latest version of JQuery Mobile, which is out today. I’ll write a revised version as soon as I have the time to get my hands on the newest version.

How to Design a Website Online

Nowadays, with the existing variety of online applications, many of our daily tasks can be handled without the need of a pre-installed software on the computer. But can an entire web design process be carried out without desktop applications?

It is not always easy to get access to the necessary or preferred software packages, so knowing what online alternatives are available can go a long way on the completion of everyday projects.

Documentation

Every correctly executed design project should be accompanied by some documentation to back it up. This project document can also be taken care of entirely online.

Evernote

For simple word processor activities, Evernote serves the purpose well. With a simple rich-text editor interface, it’s able to easily get the document managing task done.

Evernote screenshot

Google Docs

If Evernote’s functionality proves to be insufficient, Google Docs takes care of any additional document requirements. Apart from every word processing functionality included by Evernote, Google Docs can also aid in the creation of spreadsheets and presentations, with the alternative of either sharing through e-mail, online collaboration, or exporting to many of the known formats.

Google Docs screenshot

Wireframes and other necessary diagrams

As an extension of written documents that serve as back-ups for all decision taking during the design process, wireframes and other diagrams illustrate these outcomes more clearly. These are only some of the online tools currently available for the task.

Gliffy

Although Gliffy has a very limited UI element library, it serves as a multiple-purpose online diagram tool, allowing the creation of various other types of diagrams, such as flowcharts.

Gliffy screenshot

Balsamiq

Being a tool dedicated to wireframing, unlike Gliffy, Balsamiq’s application provides a greater variety of UI elements (for both websites and mobile apps), in a sketch-like type of environment. Mark-up tools are also at hand, for further notes and highlights.

Balsamiq screenshot

Mockingbird

In contrast to Balsamiq’s interface, Mockingbird works with straight-lined UI elements for wireframe construction. It also allows the creation of multiple pages in a single related project. Unlike Balsamiq, though, Mockingbird doesn’t support the wireframing of mobile apps.

Mockingbird screenshot

Mockflow

Mockflow, aside from having many similarities to Mockingbird in working with straight-lined elements and multiple-page projects, is an even more powerful wireframing tool. Its advantages include a wider variety of UI elements, the option of choosing a pre-established template, and wireframe support for various mobile OS apps and Facebook apps.

Mockingflow screenshot

Color palette generation

Colors are a very tricky decision for a web designer. Luckily, there are many tools online that can make this process a lot simpler.

Color Scheme Designer

For guiding designers through the process of choosing the correct color palette for the project at hand, this tool provides many different visualization options. Among those mentioned, there are two very effective preview options that allow the user to view the color palette applied to a simple website layout, as to give a better idea of how the colors will look like (in lighter tones and darker tones respectively). In addition to this, it gives the possibility to export the created color palette to various different formats.

Color Scheme Designer screenshot

Color Hunter

Being a lot simpler than the Color Scheme Designer tool, Color Hunter creates a palette based on any image uploaded by the user. It’s a fast solution to color choosing and it requires a lot less expertise.

Color Hunter screenshot

Kuler

Combining the best of the previous tools, Kuler lets the user either create a color palette from scratch based on the common color schemes (like Color Scheme Designer does) or generate a color palette based on an existing image (like Color Hunter).

Kuler screenshot

Image editing

From the creation of a small banner to the construction of a complete page template, an image editor is the most powerful ally of a web designer. And what happens when the web designer doesn’t have access to any of the applications included in the Adobe Suite? That’s when online alternatives come to aid.

Aviary

The Aviary image editor is part of a larger family of online editors, such as editors for audio, vectors and color. It has a very clean interface and even though it doesn’t include as many tools as other editors do, it’s easy to use and it even provides the user with a starting example of what can be accomplished through its usage.

Aviary screenshot

Pixlr

Reaching up to Aviary’s functionality, Pixlr’s tools go farther with the inclusion of more option windows (very similar to the ones handled by Adobe Photoshop), more image filters, and the option of language selection for international users.

Pixlr screenshot

Sumo Paint

The added value of using Sumo Paint is the possibility of working with its many new and fun drawing tools, like the mirrored brush, the pointy star tool, the rounded-corner star tool, the pie chart tool, among others. Apart from this, the Sumo Paint editor comes with a swatches window, not included by any of the tools mentioned before.

Sumo Paint screenshot

Sketchpad

Even though Sketchpad has a more limited amount of tools and functions, its pattern and shape selection tools are very handy additions for quick detailing. The user interface is also a lot friendlier than the other tools’, since it only shows the option windows that are absolutely necessary based on the current tool selection, toggling them on and off screen as the designer works.

Sketchpad screenshot

Font Selection

Visualizing fonts that will be the correct fit for a website is not always a straight-forward process. The following tools offer the type and style previews needed for this particular task completion.

Font Picker

With a very friendly interface, Font Picker provides a long listing of fonts for the designer to choose from. The user is able to change the text displayed by the fonts in the list and, based on personal criteria, just start eliminating the ones that won’t work, checking and keeping the ones that can be used. This way, Font Picker allows the user to easily build a list of viable fonts to use.

Font Picker screenshot

Type Navigator

In contrast to how the Font Picker tool works, Type Navigator asks the user for traits belonging to the ideal font, and afterwards provides results that align to said specifications. Additionally, Type Navigator includes links for learning more about each specified font and purchasing.

Type Navigator screenshot

CSS Typeset

CSSTypeset has a different functionality from the tools presented before. With this web tool one can analyze the appearance of larger amounts of text with certain properties applied, like line-spacing, letter-spacing, and other CSS styles.

CSS Typeset screenshot