Category

Coding

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!

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!