Americans are not on their PC, they are mobile

By | Tom Printy | No Comments

A recent study from Nielsen, is shedding some light on how consumers in the United States are spending their time with digital devices. Americans now spend more time using mobile web and apps then using their desktop computer or their laptops.

If your website is not optimized for a mobile device then you could be loosing sales. Your customers will expect that your website will offer them an easy to use experience.  The site should be able to be easily viewed on a tablet or phone without the need to pinch and zoom. If your current website does not offer this you should consider creating a responsive design based website. This type of design will allow the site to “respond” to the type or size of screen the user is using, and give them the optimal layout of your website.

Also now may be a great time to consider a mobile app for your brand or business.  If you can offer a unique user experience that relates to your brand, now may be a perfect time to develop a mobile app, that will help engage your customer.

What is Responsive Design?

By | Coding, CSS, Javascript, John Wenzler, Mobile First Design, Responsive Design, Styling, Web Design | No Comments

This post is about responsive design principles, some current frameworks for building responsive websites,  and the concept of mobile-first.

With our clients we have learned that responsive design is not a feature, it is a necessity. So what is it anyways?

Responsive Design

Let the website RESPOND to varying browser sizing

The goal of responsive web design is to provide a great viewing and interaction experience regardless of the platform the user is viewing your site from. It also means providing the same content and options to users of all platforms. This means that the old-school “mobile version” of web sites doesn’t fit the responsive design guidelines.
The most popular modern frameworks for responsive web design are:

  • Twitter Bootstrap: Docs
  • Foundation Framework: Docs

I won’t get into specifics on the differences between the two, instead I will focus on what they both do well.

The Grid

A grid is a way of dividing up the page into columns.  These columns can then float and stack based on the size of the screen.  Both Bootstrap and Foundation utilize a grid based on 12 divisions.
With some simple math this means:

columns = 12/width

  • 1 column (full width) = 12
  • 2 columns = 6
  • 3 columns = 4
  • 4 columns = 3
  • 6 columns = 2
  • 12 columns = 1

So let’s say you want a layout where your first column is half the width of the screen, then there are two columns after this which each share 50% of the remaining space.

This would give us a 6 – 3 – 3 layout (as pictured below).

respGrid

Here is the implementation in Bootstrap and Foundation for reference:

Bootstrap

 

Foundation

You may have noticed that there is more than just the number of columns to span in the class, there is also a string that represents size (large or lg). This string designates when the column should go full-width and stack. You can use a variety of sizes from extra small thru large to let the browser know when you want the content to sit on top of each other and when to float left to right.

Base Styling

Besides providing a grid, these two frameworks provide a large selection of other components for laying out a nice responsive website.  You can check out the doc links above for more information on those.  Some components include: buttons, forms, image galleries, sliders, validation, and much more.

Mobile First

More than just a buzzword

As viewer market share is quickly moving to mobile devices, developers realized we are not safe building for a desktop and providing a fall-back experience for mobile users.  Mobile first is all about building for mobile devices and then making sure that the same experience is provided to users of a desktop.  The beauty is that if you have started with a responsive framework, you are well on your way to a mobile first design.

mobilefirst

There is no doubt that making a mobile first and responsive website can be a huge challenge, but with the way the web is moving it is a leap you need to take.  If you need help with your project or want to start building something for ALL of your users, let us at Edison Avenue Consulting know!

Remove Green Screen with Photoshop in 3 Easy Steps

By | Image Editing, John Wenzler, Photoshop | No Comments

So this one should be short and sweet.  You’ve got a photo with a green screen background and you want to remove the green, place in some new background, and pass it off as a nice clean piece of work.  It’s not hard to do and you can do it yourself. Without further ado, let’s get started…


 

Step 1

Open your image and add in the background

Screen Shot 2014-07-16 at 3.05.22 PM

We picked this nice shot of some glasses in front of a green screen…

Screen Shot 2014-07-16 at 3.10.36 PM

… and we are going to place them on this crazy dog that had a little too much fun! Notice I placed the dog layer below the layer with the green screen.  This makes sense since the glasses will sit on top of the dog’s face.  If this were a headshot and you were putting it on some other background, the headshot would be the glasses and the background would go where the dog is.

Step 2

Select the green color range

This is where the magic happens, click Select -> Color Range.

Screen Shot 2014-07-16 at 3.05.46 PM

First you will need to click on the green area of the screen, this will choose that color range to be selected.  Then go ahead and slide the fuzziness slider until you feel you have an accurate representation of the subject selected without the background.

Screen Shot 2014-07-16 at 3.06.13 PM

Step 3

Remove the green color in a non-destructive manner

It is not uncommon to think the next step is to delete the green selection.  Although this will work, it is destructive and is not with the best practice of Photoshop.  A better alternative is to create a mask using the selection.  Of course we want the mask to be the glasses themselves and not the green section, so we need to inverse our selection.

Go ahead and click Selection -> Inverse.

Screen Shot 2014-07-16 at 3.11.01 PM

And then click the mask button on the layer.

Screen Shot 2014-07-16 at 3.11.14 PM

Boom, that dog is classy now!

Screen Shot 2014-07-16 at 3.11.44 PM

Bonus!

Let’s make this look like an ad for some spiffy new glasses! Select the areas from the glasses layer that are outside of the view of the glasses, like this…

Screen Shot 2014-07-16 at 8.00.13 PM

Then, without deselecting the current selection, change to the dog layer

Screen Shot 2014-07-16 at 8.00.25 PM

And apply a Gaussian blur to the selection

Screen Shot 2014-07-16 at 8.05.18 PM

You can then slide the radius slider to choose how bad you want to make this poor sap’s eyesight.

Screen Shot 2014-07-16 at 8.05.55 PM

And there you have it!

Screen Shot 2014-07-16 at 8.00.53 PM

 

And finally, I know you probably noticed the ugly green reflection on the hands and glasses.  Now this is a bit more advanced, but I’ll show you my method for removing that.

First thing you need to do is open Image -> Adjustments -> Replace Color

Screen Shot 2014-07-16 at 8.19.32 PM

Select the outer edge of the hand where the green is, and then choose a color down at the bottom by clicking “Result” and picking a color that closely resembles the color of the skin.  Click OK and repeat the process by clicking on the green within the glasses and choosing a result color close to the glasses color.  The final result is (drum roll)

Untitled-1

And now we have a picture worthy of a print ad.

Thanks for reading!

Comet: A jQuery and PHP Implementation

By | Comet, Javascript, John Wenzler, jQuery, PHP, Web Design | No Comments

If you’ve ever needed real-time data on the front-end of your website and you were using PHP as your back-end, you are most likely familiar with using a polling technique to fetch data.  What you may not know, however, is that another method exists for pulling data that does not require a large number of unnecessary requests.  Enter Comet…


 

  • Sounds great right? Just wait for the data to come to you!
  • The problem? Currently, no built in Comet functionality exists for PHP and Javascript.  I’ll share with you my code for implementing a Comet controller.

In this article I’ll provide the functions you need to get this working today on your project.  You will have to make some modifications to fit the framework and structure of your site, but if you need help, just leave a comment and I’ll do my best to get back to you!

The PHP

How to make a long held http request

Before we delve into code, I’ll give you a short summary of how we are going to accomplish our goals.  We will utilize a file on our system to keep track of if there are any changes we need to “push” to the front-end.  We will then provide a listener to that file so that if there is any change we will exit a loop and return the long held request.

First things first let’s make a “Push” function that modifies a simple text file.  This way any listeners looking at that file will trigger their callbacks.

We built a class so that we can use this code in a nice clean way.   Calling this is as simple as using:

Now let’s create our listener function.

Obviously $filename here will match the filename in the first function and the $timestamp parameter helps us keep track of changes.

The very first part of this function checks if the file exists, if not, it creates the file.

We pull the current time and store into $currentmodif using a special function that pulls a very precise time in PHP.  I will provide this function below.

Next we check if timestamp was sent in, if not, sets it to 0.

The while loop is where the magic of the long held requests happens.  We check if the last modification happened after the current time.  If not, we just do a micro-sleep for 10 ms and try again.   If we do have a new modification we exit the loop and return our new timestamp for modification and a message.

GetPreciseTime Function

That’s it for the back-end, moving onto the front.

jQuery

Simple Functions for Interaction with Comet Backend

Most of this code is self-explanatory so I’ll just point out the workings of the timestamp.  Notice we set timestamp to the value returned from PHP.  The ‘callback’ parameter in the connect function here contains whatever function you want to trigger when something changes.

What’s Missing?

You may have noticed that within this code there is actually nothing to change anything on a database or such.  That’s because that part of the logic is separated out here.  Our goal is to allow many connections or listeners to a single file that will all trigger at the same time on a change.  So the changes can happen in any way you want and you have to hook them up using the PHP push function we made first.  So whenever you want to trigger an update to all listeners, just call that push function in PHP.

 

Questions, comments? Please leave them below.

Top 5: jQuery Functions You May Not Have Known

By | Coding, Javascript, John Wenzler, jQuery, Web Design | No Comments

Welcome to my first of a series of website coding language related top five lists. I’m going to start us off with some functions from jQuery that you may or may not know. There is no particular order to this list, just a set of what I consider interesting and potentially useful functions in jQuery.  Let’s get started!


trim()

What it does

Trim is a super simple function that removes any leading or trailing whitespace from a string

How to use it

» Read More: jQuery docs

In Action

fadeToggle()

What it does

Toggles the visibility of an element with a fading effect. The function also accepts parameters for duration of the fading effect, the easing function to be used furing fading, as well as a callback function for when the effect is complete. You may want to use this function because it takes care of issues with trying to fade in or out while the opposite effect is still not complete.

How to use it

» Read More: jQuery docs

In Action

I toggle

delay()

What it does

Delay simply halts the execution of an animation until x milliseconds has passed, where x is the one and only parameter. NOTE: This function does NOT halt the execution of anything other than jQuery effects and animations, if you need to half execution of other code, use the old setTimeout function

How to use it

» Read More: jQuery docs

In Action

is

What it does

The “is” functions as a incredibly convenient way to check an element against a criteria.  That criteria is some other selector.

How to use it

$(<<selector>>).is(<<selector>>);

That’s it! And remember, selector can be any jQuery selector, regardless of the browser compatibility for CSS selectors.

» Read More: jQuery docs

In Action

Let’s say you have the following elements…

You can then use the following code to provide meaningful feedback about the DOM.
$(“.insideDiv”).is(“.active”)
Returns true in this case because the ‘active’ class is present in the element selected by ‘insideDiv’ class selector.
$(“#cb_01”).is(“:checked”)
Returns true or false depending on whether that checkbox element has been clicked. This is preferred over checking for the checked attribute on the input.

on()

What it does

I hear you out there, asking why in the world the ‘on’ function would be included in a list of functions you may not know. The truth is, however, even though almost any novice jQuery programmer has used the ‘on’ function, they have probably not used it in the way I will describe, and it’s a pretty darn useful way.

How to use it

$(<<container>>).on(<<event>>,<<element>>,<<function>>);

The big difference here is that the first selector is a container and the element within the parameters is the element to receive the click event.  So what’s the big deal? This is the way to replace the deprecated “live” function from previous versions of jQuery.  If you choose an ever present container element, the children will always have the function called on the event handler, even if they are added or removed asynchronously.  The simplest way to replace the live function is to migrate from…

… to …

» Read More: jQuery docs

In Action

Here we just placed some container divs to fill with items.
Let’s add them with some jQuery.

The next step is adding in our functions to see what happens with two different versions of the on function.

And we end up with the following…

Using regular on

Click Me!

Using body selector

Click Me!

Amazing post with all the goodies

By | Food for thought | No Comments

In varius varius justo, eget ultrices mauris rhoncus non. Morbi tristique, mauris eu imperdiet bibendum, velit diam iaculis velit, in ornare massa enim at lorem. Etiam risus diam, porttitor vitae ultrices quis, dapibus id dolor. Morbi venenatis lacinia rhoncus. Vestibulum tincidunt ullamcorper eros eget luctus. Nulla eget porttitor libero. Read More