Free iTunes book! – The Twitter Effect: How to increase your follower count and gain exposure on Twitter

Ericon April 25, 2012 : Leave a Comment

So I was getting kind of frustrated with the way that people use Twitter so I wrote a book outlining the right way to use Twitter. You won’t get 1000 new followers overnight using my methods, but you will definitely build an engaged audience. After all, isn’t that the point of Twitter?

So before you start buying followers and closing too early on potential customers, download my book (it’s free!) and try out some of the techniques I mention. I guarantee you will learn something and inevitably gain a more focused and engaged audience on Twitter!

If you have any questions of criticisms about my book feel free to email me at ericbieller [at] gmail [dot] com. Thanks for reading!

Posted in Uncategorized | No Comments »

How to Facebook and Twitter and Still Get Things Done

Ericon March 20, 2012 : Leave a Comment

hootsuite

It almost seems like magic the way that most social media juggernauts tweet, update Facebook, upload YouTube videos and respond to comments, seemingly nonstop, all while still managing to get work done. This is an issue that I have struggled with for quite some time. Recently, however, I have been exploring techniques to help myself better manage my time during the day, get more work done, and still remain engaged in social media.

Read the full article on 1stwebdesigner

Posted in Uncategorized | No Comments »

10 Epic Dribblers That You Should Be Following

Ericon January 9, 2012 : 3 Comments

dribbble

The quality of work on dribbble is amazing. It’s an great source for inspiration, finding talent and connecting with other designers. I’ve spent quite some time on dribbble lately and wanted to share some of the awesome talent I have found. Here are 10 amazing designers I have had the pleasure of stumbling across:

Hillary Hopper

Snuglug

Hillary has a unique and light hearted design style which I really dig. She uses a lot of bright colors and textures to really bring a fun vintage feel to her work. She is currently a designer at TinyCo and recently launched her new website.

Kerem Suer

Kerem UI

Kerem is an excellent designer with knack for clean UI design and use of whitespace. He has done a good deal of both mobile and web work which is all pretty much outstanding. He has also recently launched a new website.

Tomas Jasovsky

Hire me

I was pretty much forced to follow Tomas after discovering his profile on Dribbble. He employs a wide range of design styles, mad attention to detail, and a strangle-hold on color palettes. Checkout his personal portfolio to see more.

Lunaris

Warhammer

I’ve always loved fantasy style web art so Lunaris naturally stood out to me. His designs are uber detailed and indicate a very strong command of both design and software.

Larry Chen

Webos

Head over to Larry’s profile and you will see some great use of color along with a firm understanding of UI design, depth and spacing. His versatility as a designer makes him an immediate stand out.

Daniel Waldron

Winged Thing

What I love about Daniel is that his interfaces and logos all have a common theme of cleanliness and simplicity. Many of his designs also have that touch of texture and pinch of vintage. I highly recommend following him on Twitter.

Eric Hoffman

Snapper

Eric Hoffman is kind of a UI badass. Head over to his profile and checkout some of his mobile work. You won’t be disappointed. I also recommend checking out his website.

Rayz Ong

Rayz isn’t afraid of color. Checkout his profile for a landslide of color and creativity. His logos are outstanding and his presentation is great. I also recommend checking out Rayz on Behance.

Tanya Maifat

Eco Stuff

All I can say about Tanya is wow. This girl is an artist first and foremost and it shows in her designs. I highly recommend following her on Dribbble. Need help on a new game? Well you’re in luck because Tanya is a freelance designer. I highly recommend hiring her!

Riley Cran

Smash Robot

I chose Riley for his amazing grasp of typography and vintage style design. Clicking through his profile is like stepping back in time. He has a ton of shots to look through, each one bawler so I definitely recommend checking him out!

Tags: design, dribbble, Graphic Design, UI, user interface

Posted in Graphic Design & Photoshop | 3 Comments »

jQuery Tutorial: Making a login popup/dropdown box fade in with only jQuery and CSS

Ericon January 5, 2012 : 2 Comments

Drop down login box

Today I’ll be showing you how to make a popout login box for your website using jQuery and CSS. This is a common technique that I’ve seen and used across the web and is actually very easy to implement with jQuery.

Click here for a demo of what we’ll be building.

First we need to setup some base styles so everything looks pretty. Click here to download the base project files which we’ll be using as a starting point for the tutorial. This includes the initial HTML, CSS and jQuery files to help us get started.

If you load up index.html in your browser you will see a login box just hanging out in the layout. First thing we need to do is position this login box so that it is sitting on top of the other content on the page. We do this via absolute positioning:

#login_box {
	position:absolute;
	width:236px;
	margin:2px 0 0 732px;
}

Now the login box is sitting on top of the content in the spot that we want. Since this login box needs to not be visible until the “Login” button is clicked, we add display: none; to #login_box in style.css:

#login_box {
	display:none;
	position:absolute;
	width:236px;
	margin:2px 0 0 732px;
}

Now open up js/login.js. First thing we need to do is make this login box fade in when the “Login” button is clicked:

$(document).ready(function() {
    $(".login_btn").click(function() {
        $("#login_box").fadeIn();
    });
});

The login box will now appear when the “Login” button is clicked. However, we need to be able to close the login box by clicking the same “Login” button again. The code for this is actually quite simple:

First we create a variable for #login_box:

$(document).ready(function() {
    $(".login_btn").click(function() {
         var loginBox = $("#login_box");
    });
});

Then we add a simple if/else statement to determine the current state of #login_box:

$(document).ready(function() {
    $(".login_btn").click(function() {
        var loginBox = $("#login_box");
        if (loginBox.is(":visible"))
            loginBox.fadeOut("fast");
        else
            loginBox.fadeIn("fast");
        return false;
    });
});

Now we are able to show/hide our login box with ease. At this point the login popup box functions quite well but still has an obvious limitation. The user must click the “Login” button in order to close the login box. This box will not close by simply clicking outside of it. This functionality is a little bit tricky but is still only a few lines of code:

First we set a variable at the beginning of login.js:

var mouse_is_inside = false;
 
$(document).ready(function() {
    $(".login_btn").click(function() {
...

Then just before the end of the document ready statement we create an if/else statement which sets mouse_is_inside to true or false depending on if the user’s mouse is inside or outside of the login popup box:

var mouse_is_inside = false;
 
$(document).ready(function() {
    $(".login_btn").click(function() {
        var loginBox = $("#login_box");
        if (loginBox.is(":visible"))
            loginBox.fadeOut("fast");
        else
            loginBox.fadeIn("fast");
        return false;
    });
 
    $("#login_box").hover(function(){ 
        mouse_is_inside=true; 
    }, function(){ 
        mouse_is_inside=false; 
    });
})l

Directly after that we create a function which fades out the login popup box if the user’s mouse clicks outside of the popup:

var mouse_is_inside = false;
 
$(document).ready(function() {
    $(".login_btn").click(function() {
        var loginBox = $("#login_box");
        if (loginBox.is(":visible"))
            loginBox.fadeOut("fast");
        else
            loginBox.fadeIn("fast");
        return false;
    });
 
    $("#login_box").hover(function(){ 
        mouse_is_inside=true; 
    }, function(){ 
        mouse_is_inside=false; 
    });
 
    $("body").click(function(){
        if(! mouse_is_inside) $("#login_box").fadeOut("fast");
    });
});

What this does is, when a click occurs on the body of the website, we check to see if the mouse is clicking inside of the login box. If so, we do nothing, if we are outside the login box, we close it.

Click here for the project files for the final product

And we’re done! What rocks about jQuery is that things like this can be created in a matter of minutes. It’s very convenient and speeds up development time drastically! So, would you do anything different? Did I miss something? Let me know in the comments section below. Thanks for reading!

Tags: css, jQuery, login, popup, tutorial

Posted in CSS, jQuery, Tutorials | 2 Comments »

CSS container/wrapper height does not expand with floated content: CSS fix

Ericon December 8, 2011 : Leave a Comment

The problem: If a parent container/wrapper is NOT floated but the children inside of it ARE floated, then the parent will not expand at it’s children do. Here’s some quick markup showing a common scenario:

     <div id="wrapper">
          <div id="content_one" style="float: left;"></div>
          <div id="content_two" style="float: left;"></div>
          <div id="content_three" style="float: left;"></div>
     </div>

The problem is that, if you float the content within the wrapper, the wrapper does not expand with it’s content:

There’s a simple fix for this. All you have to do it stick a clearing div after all of the content. This will force the wrapper to expand to the size of it’s content. Here’s an example in HTML:

     <div id="wrapper">
          <div id="content_one" style="float: left;"></div>
          <div id="content_two" style="float: left;"></div>
          <div id="content_three" style="float: left;"></div>
          <div style="clear: both"></div>
     </div>

Which will yield a result similar to this:

As long as you have this invisible clearing div, the height of the wrapper is increased along with it’s content. Any boxes you place after the wrapper will come after the full wrapper block as you would expect. Do you know of another fix? Let me know in the comments section below. Thanks for reading!

Tags: css, error, expand, glitch, jQuery, tutorial

Posted in jQuery, Tutorials | No Comments »

Create and convert an epub formatted book for iBooks, Amazon, etc..

Ericon November 10, 2011 : Leave a Comment

Girl holding Kindle

I recently began working on an e-book of my own and quickly realized that this space has a lot of room for innovation and reform. First off, I had a hard time even figuring out how the EPUB format works and what it takes to create it. Hopefully this will clear some things up for you.

How does epub format work?

An ePub document is really a collection of XHTML files, stylesheets and images which are all contained together in ZIP format. It is basically like a little self contained website. This format tells the e-reader how to display the book to the user.

Here’s an example of an EPUB .xhtml file skeleton:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  <head>
    <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
    <title>Pride and Prejudice</title>
    <link rel="stylesheet" href="css/main.css" type="text/css" />
  </head>
  <body>
    ...
  </body>
</html>

Each .xhtml file represents a chapter of the book. You can embed images, styles, etc in the document just like you would a standard XHTML document. If you’re familiar at all with HTML this won’t come as too much of a shock. If you’re not familiar with HTML then you’re in luck! There are some tools out there which help you organize your ebook visually. Be forewarned, however, they are not easy to use.

Sigil – This is a multi-platform EPUB editor that is very simple and very small. The overall user experience (as with many ebook editors) is pretty bad though. It took me an hour or so to figure out how to use it but it works well overall. The main thing I liked about Sigil is that it gives you pretty deep control over the styling and organization of the ebook. You’ll need to understand HTML and CSS at least a little bit though since you must use it for styling.

epubbud – While the user experience may be pretty rough, epubbud is one of the only websites I could find that actually had decent EPUB editing functionality. The main issue I ran into here was that their text editor would constantly mess up my formatting. It made it nearly impossible to format the book the way that I wanted to.

Calibre – I used Calibre for about an hour and then gave up. It definitely works and comes pretty highly recommended but I just didn’t have luck with it, maybe you will though!

The table of contents for an EPUB book is stored in a .ncx file. This file must conform to a specific format and must reference chapter files exactly.

Here’s an example of a .ncx skeleton file:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE ncx PUBLIC "-//NISO//DTD ncx 2005-1//EN"
"http://www.daisy.org/z3986/2005/ncx-2005-1.dtd">
 
<ncx version="2005-1" xml:lang="en" xmlns="http://www.daisy.org/z3986/2005/ncx/">
 
  <head>
<!-- The following four metadata items are required for all NCX documents,
including those conforming to the relaxed constraints of OPS 2.0 -->
 
    <meta name="dtb:uid" content="123456789X"/> <!-- same as in .opf -->
    <meta name="dtb:depth" content="1"/> <!-- 1 or higher -->
    <meta name="dtb:totalPageCount" content="0"/> <!-- must be 0 -->
    <meta name="dtb:maxPageNumber" content="0"/> <!-- must be 0 -->
  </head>
 
  <docTitle>
    <text>Pride and Prejudice</text>
  </docTitle>
 
  <docAuthor>
    <text>Austen, Jane</text>
  </docAuthor>
 
  <navMap>
    <navPoint class="chapter" id="chapter1" playOrder="1">
      <navLabel><text>Chapter 1</text></navLabel>
      <content src="chapter1.xhtml"/>
    </navPoint>
  </navMap>
 
</ncx>

Defining components of your ebook

The .opf file defines the different components of an ebook like metadata, file manifest and linear reading order. There are a lot of important sections to a .opf document.

Here’s a sample skeleton to help you understand how it works:

<?xml version="1.0"?>
<package version="2.0" xmlns="http://www.idpf.org/2007/opf" unique-identifier="BookId">
 
  <metadata xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:opf="http://www.idpf.org/2007/opf">
    <dc:title>Pride and Prejudice</dc:title>
    <dc:language>en</dc:language>
    <dc:identifier id="BookId" opf:scheme="ISBN">123456789X</dc:identifier>
    <dc:creator opf:file-as="Austen, Jane" opf:role="aut">Jane Austen</dc:creator>
  </metadata>
 
  <manifest>
    <item id="chapter1" href="chapter1.xhtml" media-type="application/xhtml+xml"/>
    <item id="stylesheet" href="style.css" media-type="text/css"/>
    <item id="ch1-pic" href="ch1-pic.png" media-type="image/png"/>
    <item id="myfont" href="css/myfont.otf" media-type="application/x-font-opentype"/>
    <item id="ncx" href="book.ncx" media-type="application/x-dtbncx+xml"/>
  </manifest>
 
  <spine toc="ncx">
    <itemref idref="chapter1" />
  </spine>
 
  <guide>
    <reference type="loi" title="List Of Illustrations" href="appendix.html#figures" />
  </guide>
 
</package>

Writing it yourself

There is always the option of writing an ebook yourself, though I don’t necessarily recommend it. Before you decide to go down this road I would encourage you to checkout some of the EPUB management apps mentioned above. If you do end up creating your own files manually, Calibre has a nice conversion feature to get your files into the proper EPUB format. I haven’t used it personally so I’m not sure how well it actually work.

The EPUB specification is actually pretty descriptive and well written so I’d certainly recommend checking that out if you are looking to write your own EPUB book manually.

Please let me know if you have any questions or other issues in the comments section below and I will try to help you out as best as I can. Thanks for reading!

Posted in Uncategorized | No Comments »

Your users are your brand’s most important asset

Ericon October 3, 2011 : Leave a Comment

Over the past year I have been involved in many different discussions and meetings with the purpose of determining a company’s or product’s customer. I quickly realized that there isn’t a simple answer that can be applied across the board. However, I sometimes like to propose a different question: Who is your brand’s most important asset? More often than not the answer is simple. The users.

How does this help?

If you are asking this question then you are missing something vital to your business’ success. Without users you have no advertisers and typically no content. This also usually means you have no revenue. Basically, you have no business.

Building for the user and thinking about pie

Keep this principle in mind as you build out your web service or product. With every decision you make ask yourself “Is this good for the user? Why?”. User-centric design is indeed on the rise but you’d be surprised how many UX and product designers are still slaves to aesthetics. Looks are nice but they are not everything. If your web app was a pie, aesthetics would be a single slice while user experience would be half the pie.

Conclusion

We truly are entering an era where the user is king. Customer service, customer interaction and user experience are becoming increasingly important in our society. This is because users, at their core, are the primary link to revenue. Users are the ones who add true value to your platform, product or service. Without them you don’t even have a business.

I also want to note that I realize this principle doesn’t apply to all products everywhere but most modern services and products would truly benefit from this user-centric mentality. So what do you think? Is the user really that important or are there other factors? Let me know in the comments section below. Thanks for reading!

Tags: brands, pie, user, user centric, user experience, users

Posted in General, user experience | No Comments »

What makes Virgin Airlines better than all the rest

Ericon September 12, 2011 : Leave a Comment

I recently had the pleasure of flying Virgin America for the first time from San Francisco to Las Vegas. I was so impressed and intrigued by this airline that I was compelled to share my experience. So here’s what I thought of Virgin Airlines.

The Terminal

Apparently Virgin America had been stationed in the SFO international terminal while preparations were being made for them to switch over to the domestic terminal. Luckily the terminal was ready to go when I flew out last week. Upon entering I was immediately impressed. The terminal had that modern, un-cluttered feel. The furniture and seating areas were all modern and colorful. There was even a cool looking station where you could borrow a Chrome Book for your flight and drop it off at your destination.

Uniforms

As if Virgin didn’t stand out enough, their entire crew wore a sleek and seemingly comfortable black uniform. This may seem like a small detail but I think it’s marketing genius. In the back of your mind you will always remember Virgin for all the reasons they stood out, unique uniforms included. All of these little enhancements support your overall impression of the airline and help you remember your experience.

The Aircraft

The first thing I felt once aboard was excitement. I was immediately greeted by smiling crew members who seemed excited and happy. The vibe of the aircraft is electric. Unlike other aircrafts, Virgin is modern and sexy. Purple and blue lights line the top of the cabin above sleek leather seats. In the background you can hear an upbeat techno soundtrack that’s just faint enough to support the whole vibe of the aircraft. Once you sit down you are greeted by Virgin’s interactive screen on the back of the seat in front of you. I’ll go into more detail about that next.

Inflight Entertainment

Virgin’s inflight entertainment is second to none. Among other features you can use your display to order food/drinks, play video games, watch satellite TV, and even chat with the other passengers on the plane! The system also provides a remote that doubles as a video game controller and has a full size keyboard on the back side.

Conclusion

I’m excited that there’s an airline out there that is actually trying to push the industry by raising the bar on technology and service while keeping prices competitive. It shows that Virgin’s competitors are making a choice to provide a worse experience, though that won’t work for long. Once Virgin expands to more locations they will begin to rival even the largest airlines thanks to their amazing service and dedication to technology and experience. What do you think about Virgin airlines? Was your experience as good as mine or worse? Let me know in the comments below and thanks for reading!

Posted in Uncategorized | No Comments »

Creating scalable vector graphics in Photoshop

Ericon September 2, 2011 : 3 Comments

Lately I’ve been noticing that many designers are creating complex graphics and interfaces in Photoshop but aren’t putting any thought into scalability. So what is scalability and how does it apply to graphic design? Nowadays it’s common to port interfaces to a higher resolution, especially on mobile. This means that you can usually rest assured that whatever interface or design you create has huge potential to be scaled up in the future.

The problem

You create this amazing design for an Android app but three months down the road, you want to port it over to iPhone with support for Retina display. You have two options. Let the hardware scale up the graphics, resulting in some extremely blurry sprites or remake the app from the ground up at a higher resolution.

The solution

I thought it was more common knowledge among the design community but I’m noticing more and more that it actually isn’t. Photosho has some very good support for shapes using paths. This isn’t really true vector since the shapes are still sitting on pixels but the shapes are scalable.

Not sure what I mean? Here’s a fancy graphic:

Vector graphics example

You’ll notice that the first circle was rasterized and then scaled up, resulting in blurry edges. The second circle was kept vector and scaled up, resulting in smooth edges. Now imagine this was a sprite for an original iPhone game that you are now porting to Retina. Instead of recreating the sprite you can simply scale it up without losing any quality.

Scalable layer styles

All too often I see a designer using a rasterized layer in place of a layer style. One important thing to understand about layer styles is that they are scalable. Shadows, gradients, strokes, etc. can all be scaled up without any quality loss.

Here’s another fancy graphic showing what I mean:

Scalable layer style

Notice that the top example, which uses rasterized layers for the effects, looks more pixellated the larger you make it while the bottom example, which uses layer styles for it’s effects, is completely scalable.

Conclusion

I understand that sometimes it is necessary to use rasterized layer styles for those nice subtleties and effects. But it really is to your advantage to use layer styles and vector shapes when at all possible. You never know when you might need a higher resolution version of your graphic or interface and it’s nice to be able to easily scale up a few shapes and call it done.

What do you think? Have you ever needed to scale up a design that was completely made up of rasterized shapes? Or is it not worth the extra work to use layer styles and shapes? Let me know in the comments section below. Thanks for reading!

Posted in Uncategorized | 3 Comments »

Stuck on a programming or design problem? Take a bath.

Ericon September 1, 2011 : Leave a Comment

Ever heard the story of Archimedes and King Heiro II? Well the king tasked Archimedes with figuring out if his crown was real gold without damaging it. After many sleepless nights and much mental anguish, Archimedes’ wife instructs him to take a bath to relax. In doing so he notices the displacement of the water, which he could invariable use to determine the purity of the crown based on weight/volume.

The moral of the story is clear. Sometimes the most valuable work you do is done while relaxing and turning your brain off.

I cannot count the times that I’ve been glaring at my screen for hours trying to solve some seemingly simple programming issue or design problem. I eventually, reluctantly, pull myself away from the problem out of frustration, usually to sleep, eat, or just turn my brain off. And, like clock work, once I give it another go the problem is usually solved within 5-10 minutes. The important thing I take away from this is that some of our most valuable work happens while we’re not even at the computer. Sometimes we are more constructive eating dinner or taking a shower than we are toiling away at a computer.

So the next time you find yourself up against a wall when faced with a coding or design problem (or any other problem, really) take a bath, go out, take a nap, eat some dinner. For every problem there is at least one solution and sometimes the easiest way to find the solution is to stop looking.

Posted in Uncategorized | No Comments »

Tweets

Free iTunes book! – The Twitter Effect: How to increase your follower count and gain exposure on Twitter

How to Facebook and Twitter and Still Get Things Done

10 Epic Dribblers That You Should Be Following

CSS container/wrapper height does not expand with floated content: CSS fix

Create and convert an epub formatted book for iBooks, Amazon, etc..

How does epub format work?

Table of contents

Defining components of your ebook

Writing it yourself

Your users are your brand’s most important asset

How does this help?

Building for the user and thinking about pie

Conclusion

What makes Virgin Airlines better than all the rest

The Terminal

Uniforms

The Aircraft

Inflight Entertainment

Conclusion

Creating scalable vector graphics in Photoshop

The problem

The solution

Scalable layer styles

Conclusion

Stuck on a programming or design problem? Take a bath.