Speckyboy Design Magazine » Javascript http://speckyboy.com Web Design News, Resources & Inspiration Sat, 26 Jul 2014 08:24:23 +0000 en-US hourly 1 How to Make Any Website Responsive http://speckyboy.com/2014/04/24/make-any-website-responsive/ http://speckyboy.com/2014/04/24/make-any-website-responsive/#comments Thu, 24 Apr 2014 10:54:27 +0000 http://speckyboy.com/?p=48092

According to Verisign’s Domain Name Industry Brief for 2013, it is estimated that 85% of all .com and .net TLDs (top-level domains) have websites: that’s over 100 million websites [being that .com and .net domains...


The post How to Make Any Website Responsive appeared first on Speckyboy Design Magazine.

]]>


According to Verisign’s Domain Name Industry Brief for 2013, it is estimated that 85% of all .com and .net TLDs (top-level domains) have websites: that’s over 100 million websites [being that .com and .net domains collectively number over 120 million]. Now, that is a lot of websites! So how exactly are we going to make them all responsive?

If you have an existing website that is not responsive, I’m sure you’ve probably given some thought to how you would make it mobile-friendly. It’s really hard to argue against the mobile trend these days with Mobile Web Traffic now at about 25% of all Internet Traffic, and sales of mobile devices (Phones & Tablets) currently surpassing traditional personal computers by over 6 to 1. Let’s face the facts: It doesn’t depend anymore, your website needs to be mobile-friendly.

Building a responsive website from scratch today is easier than it has ever been as a result of improved frameworks and techniques. However, with all those non-responsive websites out there, we have to find ways to quickly and gracefully retrofit them with responsive enhancements. In this article, I’ll introduce a step-by-step process for making any website responsive using a responsive web design framework called Restive.JS, and using a very real and very popular website as our specimen.

The Specimen

To get started, we need a website that would be our ‘guinea pig’ of sorts. I felt it would be best to use a website that was pretty popular, but wasn’t natively responsive. So for this tutorial, I decided to use to use the AirBnB website because – believe it or not – it’s not natively responsive (it redirects mobile devices to a dedicated mobile subdomain).

When I visited airbnb.com using a Google Galaxy Nexus, I was redirected to m.airbnb.com where I got served a list of search results I didn’t specifically search for, plus a number of action links like ‘Sign Up’, ‘Log In’, and a very prominent link to download the app for Android (which I already had on my phone). Some of the interesting things on the original website like ‘Neighborhood Guides’ as well as the social network links a la Facebook, Twitter, etc. were absent.

No offense against AirBnB, but I would have loved to see a responsive version of the original website, and then decide for myself if I wanted to download the app. I would have loved it so much, that I’m going to create a responsive version of the AirBnB website.

Disclaimer: This tutorial is in no way endorsed or authorised by AirBnB. It is meant to serve as a guide for how to retrofit existing websites to make them responsive, and is nothing more than that. The final result is merely for testing purposes only and should never be used as a substitute for the original AirBnB website, which remains at www.airbnb.com.

The Tools

Google Chrome

No disrespect to the other browsers out there – especially Mozilla Firefox – but Google Chrome is awesome if you’re a web developer, especially because it sports a built-in Mobile Emulator which I view as essential. For this exercise I’ll be using Chrome exclusively for the development side of things. However, you can as well use any browser that has good developer tools, and then test using your preferred mobile emulation environment.

A Text Editor

We are going to make some changes to HTML and CSS files so you’ll need a text editor for this, any one will do.

Introducing Restive.JS

Restive.JS is the cornerstone of this operation. It is a jQuery Plugin [or Framework if you like] that helps you add responsive features to a website almost instantly. The premise behind Restive.JS is simple: Go Responsive with Less Code and Less Hassle. It has quite a lot of features [that you can explore in your own time].

A major benefit of using Restive.JS is that it lets you define all your responsive CSS markup inline, unlike media queries which splits your responsive markup into distinct ‘markup realms’ that you have to manage separately.

So basically, with Restive.JS I can write CSS like this:

#my-element-id {/* Styles */} //my desktop style rule
.phone #my-element-id {/* Styles */} //my general smartphone device style rule
.tablet #my-element-id {/* Styles */} //my general tablet device style rule

As opposed to this:

#my-element-id {} //my desktop style rule

@media only screen and (min-width : 320px) and (max-width : 480px) {
/* Styles for some mobile devices */
}

@media only screen and (min-width : 321px) {
/* Styles for some other mobiles  */
}

/** ...And yet more Media Query Directives **/

The Process

Step 1: Download the AirBnB Website

To download the AirBnB website, I simply open the web address in my web browser, and then I save the whole web page. If you’re using a browser like Firefox or Chrome you can save the complete web page, including all images, CSS, Javascript, and the like. I used Firefox to do mine.

I created a new folder on my desktop, then I saved the complete web page in this folder. I then created a copy of the original index.html file, and named it index.orig.html; this is just so we can compare changes later if we need to.

Next, I created three new folders called ‘js’, ‘css’, ‘img’; affectionately referred to by me as The Three Amigos, although they are nowhere near as entertaining. And I think it’s pretty clear what these folders are going to be holding so we’ll move on to the next thing.

Step 2: Install Restive.JS

Installing Restive.JS is a snap. We do need to find out if the AirBnB home page uses jQuery; I suspect it does, but just for the sake of argument let’s make double sure.

To do this I open the local index.html [that I saved previously] in my browser, and I ‘View Page Source’. On the resulting page, I do a quick search using .js as the keyword and the browser immediately shows me where all the link-referenced Javascript files are. Going through each one I see this file reference…

<script src="https://a2.muscache.com/airbnb/static/libs_jquery_2x-4c61948b1a5fa686ed70f7b9bf4a18c9.js" type="text/javascript"></script>

…which looks like it could be jQuery. After opening it I see that it is, so we can conclude that conclude that jQuery is indeed active on this page.

All we need to do now is load Restive.JS sans jQuery, and we’ll add the code & markup directly below the above jQuery script reference thus:

<script src="index_files/libs_jquery_2x-ba3075998163c02622926b9556bc93aa.js" type="text/javascript"></script>

<!-- Install Restive.JS -->
<script type="text/javascript" src="js/restive.min.js"></script>
     
<!-- Configure Restive.JS -->
<script>
    $( document ).ready(function() {
        $('body').restive({
            breakpoints: ['10000'],
            classes: ['nb'],
            turbo_classes: 'is_mobile=mobi,is_phone=phone,is_tablet=tablet,is_portrait=portrait,is_landscape=landscape'
        });
    });
</script>

You can grab Restive.JS via Github, and simply store it in the ‘js’ directory.

Restive.js has the basic format of most jQuery plugins. In the above code & markup, we have defined 3 options, ‘breakpoints’, ‘classes’, and ‘turbo_classes’ and I’ll just briefly explain what they do.

breakpoints and classes are the primary options in Restive.js. What they do is setup declared breakpoint ranges, and then apply classes to the given selector as the viewport width of the device on our website matches that specific range. So if we had defined breakpoints: ['240', '320'], and classes: ['240-css', '320-css'], the plugin would setup the breakpoint ranges of 0 to 240 pixels, and 241 to 320 pixels, and then it would add the class 240-css to the <body> tag (which is our selector) if the device viewport width fell between 0 and 240 pixels, and it would add 320-css if the viewport width was between 241 and 320 pixels. This is pretty much how these two options work hand-in-hand.

turbo_classes is a special feature of Restive.js that adds classes [in addition to those defined in the classes option] to our <body> tag when certain pre-defined conditions are met e.g. when the device is a mobile device, when the device is a tablet, etc. There are about 9 specific conditions in all. Right now, we’re using 5 because that’s all we need. So for example, is_landscape=landscape will tell the plugin to add the class landscape to the <body> tag if the device is in landscape orientation, and being that Restive.js is stateful, this class will also be removed if the device switches to portrait orientation.

In our particular circumstance, we’re not overly concerned with conventional breakpoints, as we are focused primarily on form-factors. Hence we will simply define breakpoints: ['10000'], and classes: ['nb'], to create a range from 0 to 10,000 pixels that will match all devices. Then we simply use turbo_classes to apply specific classes pertinent to our aspirations.

What this means is that if you have a phone, and you visit our updated website, Restive.JS will make sure to add the class mobi phone portrait to the <body> tag, because the device is a mobile device, it’s a phone, and it’s in portrait mode. If you switch to landscape mode, Restive.JS will update the class to mobi phone landscape in realtime. If you were using a tablet instead, you’ll see mobi tablet portrait. The importance of all this will be clearer a little later.

Step 3: Define Responsive Enhancements

Now that we have everything setup and almost ready to run, let’s decide on the responsive enhancements we would like to add to our website. It’s very important to have a clear focus beforehand on what needs to change on the website.

AirBnb website Screenshot

I made some annotations to the screenshot of the AirBnB website that you can access if you need to; it contains some strategy notes regarding how we’re going to make these responsive enhancements.

First, we break down the layout of the web page into five zones: (1) Header, (2) Hero, (3) Content – Level 1, (4) Content – Level 2, (5) Footer. Then we determine all the general responsive enhancements [as Tasks] that will be required to make our website Mobile-friendly. They are all clearly itemized in the above annotations: One page has the layout zone breakdown, and the second page has the responsive enhancements for mobile devices.

Step 4: Implement Responsive Enhancements

All the Responsive Enhancements we are going to make going forward will be done via inline CSS. So we create a file called restive.css; this file will go in the ‘css’ directory. For now this file is blank, and we’ll add to it as we go. We then create a link reference to this CSS file on the index.html page.

<head>
    <!-- ALL THE OTHER MARKUP INSIDE HEAD TAG -->
    <link href="css/restive.css" media="all" rel="stylesheet" type="text/css" />
</head>

Note: It’s important that our CSS file load after every other similar file, so we link to it just before the closing <head> tag.

Also, we have to change the existing viewport meta tag from what it currently is now ['<meta name="viewport" content="width=1000,maximum-scale=1.0">'] to a mobile-friendly one. So replace the existing viewport meta tag to what you have below:

<meta name="viewport" content="width=device-width, initial-scale=1">

And before we get started, let’s agree on a few conventions. Within the Developer Tools interface it’s very easy to see all the code, but copying and pasting all the HTML here will be overkill. Because the markup is long, I’ll show snippets of markup [or code] like below:

<!-- HEADER ZONE -->
<div>
    <div class="name">
        <!-- MARKUP TRUNCATED --> 
    </div>
</div>

I’ll only depict the operative element. Any markup within it that is not immediately relevant will be truncated [it's still there but I just won't show it] and replaced with the HTML comment with caption ‘MARKUP TRUNCATED’ [I'll also do the same for Javascript code with caption 'CODE TRUNCATED']. In addition, only the direct parent of the operative element will be shown, as this ought to be enough to give a good idea where the snippet is so you can find it inside the Developer Tools interface. I’ll also indicate what Layout Zone we are looking at using another HTML comment on the first line of the code snippet.

So the basic M.O. is that I’ll describe the goal of the Task required to enable the desired responsive enhancement, then next comes the HTML markup, and then finally the CSS Markup.

Note: If you’re not familiar with Chrome Developer Tools, there are a lot of resources that you can find only to help you. I also wrote a blog post on Testing Responsive Websites that could also be helpful.

Task 1:

The first task is concerned with resetting any major fixed width elements so that nothing breaches the viewport width of a mobile device. For example, the <div> with class container-full-width has a min-width of 995px; we’re going to need to reset this property and force a fluid width instead.

<!-- HEADER ZONE -->
<div class="navbar-inner">
    <div class="container container-full-width page-container">
    <!-- MARKUP TRUNCATED --> 
    </div>
</div>
.mobi #header .container-full-width {position: relative; min-width: 10px; min-height: 44px; width: 100%; margin: 0; padding: 2px 0 0 0;}
.mobi .page-container {width: 100%; padding-left: 15px; padding-right: 15px;}
Task 2:

The second task is concerned with making the header zone fixed for mobile devices, so that whether we scroll up or down, the navigation bar always remains in place. We’ll also set a new minimum height for this navigation bar.

<!-- HEADER ZONE -->
<div id="header" class="navbar navbar-top">
    <div class="navbar-inner">
        <!-- MARKUP TRUNCATED --> 
    </div>
</div>
.mobi #header {width: 100%; position: fixed; z-index: 10000;}
.mobi #header .navbar-inner {min-height: 44px;}
Task 3:

Now this task is a real doozy. We’re going to need to enable two different navigational systems, one for the original website, and the other for the mobile website. However, they have to consume the same markup space.

So we need to add some HTML markup i.e. div#nav-left and div#nav-right that will hold the navigational system for mobile; this needs to be hidden on devices that are non-mobile. Likewise, on mobile devices, we need to hide the navigational system of the original website. We also add id tags to certain elements for easy jQuery access later. Finally, we create an image sprite for the icons needed for our mobile navigation UI.

<!-- HEADER ZONE -->
<div class="container container-full-width page-container">
    <div id="nav-left" class="nav-new">
        <ul>
            <li><a href="#" id="nav-button-browse" class="nav-new-button"><img class="nav-sprite icon-browse" src="img/transp.png"></a></li>
        </ul>
    </div>
    <a href="/" class="brand airbnb">Airbnb</a>
    <div id="nav-right" class="nav-new">
        <ul>
            <li id="nav-new-search"><a href="#" id="nav-button-search" class="nav-new-button"><img class="nav-sprite icon-search" src="img/transp.png"></a></li>
            <li><a href="#" id="nav-button-actions" class="nav-new-button"><img class="nav-sprite icon-actions" src="img/transp.png"></a></li>
        </ul>
    </div>
    <ul class="nav">
        <li id="header-search">
            <!-- MARKUP TRUNCATED -->
        </li>
        <li id="header-browser" class="dropdown item_explore">
            <!-- MARKUP TRUNCATED -->
            <ul id="header-browse-sub" class="dropdown-menu dropdown-bordered">
                <!-- MARKUP TRUNCATED -->
                <li class="wide"><a href="/locations"><i class="icon icon-product-neighborhoods icon-map-marker blue"></i> Neighborhoods</a></li>
                <!-- MARKUP TRUNCATED -->
            </ul>
        </li>
    </ul>
    <ul class="nav pull-right help-menu" style="margin-left:0;">
        <li id="header-actions-1" class="dropdown" data-dropdown-sticky="true">
            <!-- MARKUP TRUNCATED -->
        </li>
        <li id="header-actions-2" class="list-your-space">
        <!-- MARKUP TRUNCATED -->
        </li>
    </ul>
    <ul class="nav pull-right logged-out">
        <li id="sign_up">
            <!-- MARKUP TRUNCATED -->
        </li>
        <li id="login">
            <!-- MARKUP TRUNCATED -->
        </li>
    </ul>
    <!-- MARKUP TRUNCATED -->
</div>
#header .nav-new {display: none;}
.mobi #header .nav-new {display: block; position:absolute;}
.mobi #header #nav-left {top: 0; left: 0;}
.mobi #header #nav-right {top: 0; right: 0;}
.mobi #header .nav-new ul {margin: 0; padding: 0;}
.mobi #header .nav-new ul li {display: inline-block; width: 44px; height: 44px; margin: 0 auto; text-align:center; padding: 12px 0 0 0;}
.mobi #header #nav-right ul li {padding: 9px 0 0 0;}
.mobi #header .nav-new img.nav-sprite {background-image:url(../img/nav_sprite.png); background-repeat:no-repeat; background-position: 0 0; vertical-align:middle;}
.mobi #header .nav-new #nav-new-search {display: none;}
.mobi #header .nav-new img.icon-search {background-position: -10px -10px; width: 24px; height: 23px;}
.mobi #header .nav-new img.icon-browse {background-position: -10px -50px; width: 24px; height: 18px;}
.mobi #header .nav-new img.icon-actions {background-position: -10px -90px; width: 24px; height: 25px;}
.mobi #header .nav {display: none;}
Task 4:

This task is somewhat complimentary to the previous task. Because we’re going to have two different UI systems for navigation, and because there isn’t enough space to enable the dropdown menu features of the original website, we’re going to have to create another content area below the main navigation bar; a sub-navigation bar or sorts. We can then use Javascript/jQuery to activate functionality for this.

<!-- HEADER ZONE -->
<div class="container container-full-width page-container">
    <!-- MARKUP TRUNCATED -->
</div>
<div class="navbar-sub">
    <div class="navbar-sub-item" id="navbar-sub-search"><ul></ul></div>
    <div class="navbar-sub-item" id="navbar-sub-browse"><ul></ul></div>
    <div class="navbar-sub-item" id="navbar-sub-actions"><ul></ul></div>
</div>
#header #navbar-sub {display: none; /**position:absolute; top: 0;**/ height: 40px; padding: 0 10px; border-top: 1px dashed #A8E2FF; z-index: 9900;}
.mobi #header .navbar-sub-item ul{margin: 0; padding: 0; list-style-type: none;}
.mobi #header #navbar-sub-browse li{float: left; width: 28%; height: 40px; line-height: 40px; vertical-align: middle;}
.mobi #header #navbar-sub-browse li.wide{width: 44%;}
.mobi #header #navbar-sub-browse li.meetups, .mobi #header #navbar-sub-browse li.groups{float: left; display: none;}
.mobi #header #navbar-sub-actions li{float: left; width: 28%; height: 40px; line-height: 40px; vertical-align: middle;}
.mobi #header #navbar-sub-actions li#login{width: 23%;}
.mobi #header #navbar-sub-actions li#header-actions-1{width: 15%;}
.mobi #header #navbar-sub-actions li.list-your-space{width: 34%;}
.mobi #header #navbar-sub-actions li.list-your-space #list-your-space{margin-left: 0px; font-size: 0.8em; margin-top: 0;}
.mobi #header #navbar-sub-actions li#header-actions-1 a .caret{display: none;}

The Javascript code for enabling this sub-navigation bar functionality will go after our Restive.JS code. You can find the full code for this by looking at the final index.html file at the end of this tutorial.

<!-- Configure Restive.JS -->
<script>
    $( document ).ready(function() {
        $('body').restive({
            /** CODE TRUNCATED **/
        });
        /**
         * Sub Navbar Functionality Code Goes Here
         */
    });
</script>
Task 5:

The fifth task is concerned with re-aligning the AirBnB logo. On the original website, it is aligned to the left of the header zone. However, we’re going to need to have it centered.

<!-- HEADER ZONE -->
<div class="navbar-inner">
    <div class="container container-full-width page-container">
        <!-- MARKUP TRUNCATED -->
        <a href="/" class="brand airbnb">Airbnb</a>
        <!-- MARKUP TRUNCATED --> 
    </div>
    <!-- MARKUP TRUNCATED --> 
</div>
.mobi .navbar .brand {float: none; text-align: center; margin: 0 auto;}
Task 6:

For this task, we’re going to be enabling some responsive enhancements for the ‘hero’ zone. However, for this tutorial we are going to disable the “Sliding Background Image” feature. We can make this responsive, but just to simplify things we’ll skip that so we don’t make this exercise any longer. Instead we’ll take one of the existing images and fix that to the layout. To do this we replace ul#slideshow with div#slideshow-new and delete a.slideshow-scroll.slideshow-scroll-prev and a.slideshow-scroll.slideshow-scroll-next. We’ll also make some preliminary layout modifications to div.search-area.

<!-- HERO ZONE -->
<div id="hero" style="display:block;" data-native-currency="USD" class="">
    <div id="slideshow-new"></div>
    <!-- MARKUP TRUNCATED -->
</div>
img{max-width: 100%;}
.mobi #hero {height: 320px; width: 100%;}
#hero #slideshow-new {width: 100%; height: 500px; padding: 36px 0 0 0; background-image:url(../img/hero_background.jpg); background-repeat:no-repeat; background-position: 0 0; vertical-align:middle; background-size: 100% auto;}
.mobi #hero #slideshow-new {width: 100%; height: 320px; padding: 44px 0 0 0; background-position: -100px 0; background-size: auto 320px;}
.mobi #hero .row {display: block; width: 100%; margin-left: 0; margin-right: 0;}
.mobi #hero .col-11 {display: block; width: 100%; float: none; padding-left: 0; padding-right: 0;}
.mobi #hero .search-area {height: auto; padding-top: 60px;}
.mobi #blob-bg {width: 100%; height: 50%; background-size: 100%; top: 0; left: 0; right: 0; margin-left: 0; margin-top: 0; opacity: 1;}
.mobi .search-area h1 {font-size: 28px; text-shadow: 1px 2px 3px rgba(0, 0, 0, 1);}
.mobi .search-area h2 {font-size: 16px; text-shadow: 1px 1px 2px rgba(0, 0, 0, 1);}
Task 7:

This task is saddled with the responsibility of tweaking the main search bar. As is evident, it’s quite long and it won’t fit within the viewport of a phone device, but it probably will if we collapse its elements gracefully. And to make this happen, we need to make a few updates to some HTML components of the form, which will enable us to target them specifically via CSS

<!-- HERO ZONE -->
<form action="/s" id="search_form" class="custom show-search-options position-left form-inline">
    <div id="searchWrapper" class="input-wrapper">
        <!-- MARKUP TRUNCATED -->
    </div>
    <!-- MARKUP TRUNCATED -->
    <div id="guestWrapper" class="input-wrapper">
        <!-- MARKUP TRUNCATED -->
    </div>
    <!-- MARKUP TRUNCATED -->
</form>
.mobi #hero .form-inline {float: none; width: 100%;}
.mobi #hero .form-inline #searchWrapper{width: 100%; margin-right: 0; margin-bottom: 5px;}
.mobi #hero .form-inline #searchWrapper #location{width: 100%; height: 36px;}
.mobi #hero .form-inline #checkinWrapper{clear: left; width: 49%; margin-right: 2%; margin-bottom: 5px;}
.mobi #hero .form-inline #checkoutWrapper{width: 49%; margin-right: 0; margin-bottom: 5px;}
.mobi #hero .form-inline .checkin, .mobi #hero .form-inline .checkout{width: 100%; height: 36px; margin: 0;}
.mobi #hero .form-inline #guestWrapper{clear: left; width: 65%; margin-right: 5%;}
.mobi #hero .form-inline #guestWrapper select{width: 100%; min-width: 80%;}
.mobi #hero .form-inline #submit_location{width: 30%;}
Task 8:

This task is primarily concerned with the ‘Neighborhood Guides’ section. The section contains some text and an array of images laid out in a tile format.

I found this to be the most complicated of all the responsive enhancements because not only do we have to collapse the image tiles gracefully, they also have to remain responsive. Unfortunately, the images in the tiles were created from a sprite [not individual images via img tag], so the ol’ img{max-width: 100%;} trick isn’t going to work. However, I did manage to find some tips on making background image sprites responsive as well as resizing a div while maintain aspect ratios; I used that logic to get the result I wanted.

We do have to add some HTML to the <li> elements that serve as containers for the array of images. This dummy <div> element will be used to maintain the aspect ratio of the background image sprite.

<!-- CONTENT ZONE – LEVEL 1 -->
<div id="content-1" class="panel panel-dark row-space-4">
    <!-- MARKUP TRUNCATED -->
    <ul class="city-tiles list-unstyled two-wide-city-tiles">
        <li class="city-tile">
            <div class="dummy"></div>
            <div class="media-photo city-tile city-tile-mexico-city"></div>
            <!-- MARKUP TRUNCATED -->
        </li>
        <li class="city-tile">
            <div class="dummy"></div>
            <div class="media-photo city-tile city-tile-tokyo"></div>
            <!-- MARKUP TRUNCATED -->
        </li>
        <li class="city-tile">
            <div class="dummy"></div>
            <div class="media-photo city-tile city-tile-ny"></div>
            <!-- MARKUP TRUNCATED -->
        </li>
        <li class="city-tile">
            <div class="dummy"></div>
            <div class="media-photo city-tile city-tile-paris"></div>
            <!-- MARKUP TRUNCATED -->
        </li>
    </ul>
    <div class="referrals-tile">
        <div class="dummy"></div>
        <div class="referrals-tile-background">
            <!-- MARKUP TRUNCATED -->
        </div>
    </div>
    <!-- MARKUP TRUNCATED -->
</div>
.mobi #content-1 ul.city-tiles {float: none; width: 100%;}
.mobi #content-1 ul.city-tiles li {float: none; display:inline-block; position: relative; width: 100%; height: auto; margin: 0 0 15px 0;}
#content-1 ul.city-tiles li .dummy {display: none;}
.mobi #content-1 ul.city-tiles li .dummy {display: block; margin-top: 52%;}
.mobi #content-1 ul.city-tiles li a {position: absolute; top: 0;}
.mobi #content-1 ul.city-tiles li a h5 {padding-top: 55px;}
.mobi #content-1 ul.city-tiles li .city-tile{margin: 0 auto; width: 100%; height: 100%; /**padding-bottom: 52%;**/ background-size: 700%; }
.mobi #content-1 .city-tile-mexico-city {background-position: 16.66667% 0; background-size: 700%;}
.mobi #content-1 .city-tile-tokyo {background-position: 100% 0; background-size: 700%;}
.mobi #content-1 .city-tile-ny {background-position: 0 0; background-size: 700%;}
.mobi #content-1 .city-tile-paris {background-position: 50% 0; background-size: 700%;}
.mobi #content-1 .referrals-tile {float: none; clear: both; display: inline-block; position: relative; width: 100%; height: auto; background-size: 100%; }
.mobi #content-1 .referrals-tile h5 {padding-top: 45px;}
#content-1 .referrals-tile .dummy {display: none;}
.mobi #content-1 .referrals-tile .dummy {display: block; margin-top: 113%;}
.mobi #content-1 .referrals-tile .referrals-tile-background {position: absolute; top: 0;}
.mobi #content-1 .col-12 {float: none;}
.mobi #content-1 .row-space-6 {margin-top: 15px; margin-bottom: 30px;}
Task 9:

This task deals with the content just before the footer zone i.e. where we have ‘Travel’, ‘Host’, and ‘Trust and Safety’ headings. This is a pretty straightforward collapse operation where we make the elements arrange themselves in a vertical fashion as opposed to horizontally. We also added id tags to the zone <div> as an identifier.

<!-- CONTENT ZONE – LEVEL 2 -->
<div id="content-2" class="page-container page-container-fixed">
    <!-- MARKUP TRUNCATED -->
</div>
.mobi #content-2 .row {margin-left: 0; margin-right: 0;}
.mobi #content-2 .row .col-4 {padding-left: 0; padding-right: 0; width: 100%; margin: 0 0 15px 0;}
Task 10:

This is the final task – Phew! – and it deals with the footer exclusively. Again, a simple task of collapsing the layout. And we didn’t need to make any HTML additions or updates here.

.mobi #footer.row {margin-left: 0; margin-right: 0;}
.mobi #footer .col-3 {padding-left: 0; padding-right: 0; width: 100%; margin: 0 0 15px 0;}

Step 5: Upload and Run

So now that we’re done, we can test it all out.

I would encourage you to try both out using first your desktop browser and then your mobile browser [via the emulator]. You may also want to use your actual smartphone if you can, or at the very least BrowserStack if you’ve got it.

The Results

AirBnB Mobile website Screenshot

Being that I used the Mobile Emulator on Google Chrome DevTools the whole time, it was pretty easy to see how the updated AirBnB website looks in a simulated phone environment. However, I have two mobile devices at hand: an iPod Touch [4th Generation] and a Google Galaxy Nexus and I tested it on each one with virtually identical results on each one. How does it look on your own smartphone?

This tutorial lumped mobile devices into one big basket and that’s why we used the .mobi CSS rule prefix exclusively [even though we could be more specific]. With a little more effort, we can hone the website further to look a little different on tablets, being that tablets have much more room to work with, especially in landscape.

In Closing but Moving Forward

So we’ve taken a perfectly fine website that wasn’t natively responsive, and we’ve made it responsive in a number of steps that should be routine for most web designers. The whole process took me about 4 to 5 hours from start to finish, and required a few innocuous HTML markup updates and a total 70 lines of additional CSS markup.

Using Restive.JS:

  • Responsive web design workflows become significantly optimized because all responsive CSS markup is inline and more intuitively accessible, eliminating the divided attention challenges inherent with using media queries.
  • Testing updated websites on various mobile devices is no longer necessary; once it works on one mobile device, it’ll pretty much work on all of them.
  • Thanks to the Turbo Classes feature, you can make responsive enhancements specific to form-factor and orientation inline using CSS rule prefixes like .mobi.tablet [for tablets], .mobi.phone.landscape [for phones in landscape orientation], and so on.
  • Maintaining your responsive CSS markup will be much easier because it’s all in one place. No need to refactor markup in multiple ‘markup realms’ as you would probably have to do using media queries.

Responsive web design has to become a much more efficient process if it’s going to get the massive adoption we expect it to. A good way of achieving this is via a better and faster design workflow. A Web that is natively responsive will be a good thing for everyone, especially mobile users. One website down… a couple gazillion more to go!


The post How to Make Any Website Responsive appeared first on Speckyboy Design Magazine.

]]>
http://speckyboy.com/2014/04/24/make-any-website-responsive/feed/ 0
25 New Frontend jQuery Plugins http://speckyboy.com/2014/04/14/25-frontend-jquery-plugins/ http://speckyboy.com/2014/04/14/25-frontend-jquery-plugins/#comments Mon, 14 Apr 2014 09:31:11 +0000 http://speckyboy.com/?p=48006

In this post, we have put together some of the most popular frontend jQuery plugins that have been released recently. And, are also very easy to implement and configured within minutes. The jQuery plugins on...


The post 25 New Frontend jQuery Plugins appeared first on Speckyboy Design Magazine.

]]>


In this post, we have put together some of the most popular frontend jQuery plugins that have been released recently. And, are also very easy to implement and configured within minutes.

The jQuery plugins on this page are diverse: there are plugins that let you work with menus and scroll effects, and even some that will help you lazy load images and videos. While we have tried to compile most of the best jQuery plugins here, just in case you need more, be sure to check out our jQuery archives.

Frontend jQuery Plugins

Slidebars

Slidebars frontend app-style push-menu jquery plugins

Slidebars is a lightweight (2kb) plugin for creating an app-style push-menu. It uses hardware accelerated transitions where possible for quick and smooth animation, falling back to jQuery .animate() on non-supported browsers.

Slidebars →

Fluidbox

Fluidbox frontend Medium lightbox module jquery plugins

The Fluidbox plugin is a replication of the Medium.com lightbox module, with some added improvements. It handles higher resolution, linked images elegantly, such that it only preloads them when users click on the thumbnails.

Fluidbox →

SVGMagic

SVGMagic simple SVG fallback jquery plugin

SVGMagic is a simple SVG fallback plugin that finds SVG images on your site and creates PNG versions if the browser doesn't support them.

SVGMagic →

jQuery.keyframes

 front-end jquery plugins support multiple keyframes animation jQuery.keyframes

jQuery's animate() does not support multiple keyframes, this plugin helps you accomplish that. jQuery.keyframes generates and runs CSS3 keyframes with callback events.

jQuery.keyframes →

jquery.matchHeight.js

jquery.matchHeight.js is a more robust equal heights plugin for jQuery front-end

jquery.matchHeight.js is a more robust equal heights plugin for jQuery, by adding features and handling the edge cases where the others plugins and solutions tend to fail.

jquery.matchHeight.js →

nanoGALLERY

nanoGALLERY responsive touch-enabled easy to use image gallery plugin jquery

nanoGALLERY is a responsive, touch-enabled and easy to use image gallery plugin. It features multi-level navigation in albums, lightbox, many hover effects on thumbnails, slideshow, fullscreen, pagination, image lazy load, themes, pulling in Flickr/Picasa/Google+ photo albums, and much more.

nanoGALLERY →

jInvertScroll

jInvertScroll lightweight plugin horizontal parallax effect

jInvertScroll is a lightweight and extremely easy to setup plugin that allows you to move in horizontal with a parallax effect while scrolling down.

jInvertScroll →

jQuery fontIconPicker

fontIconPicker lightweight plugin simple icon picker

fontIconPicker is a lightweight plugin that allows you to include a simple icon picker (with search and pagination) within any form.

jQuery fontIconPicker →

HideSeek

HideSeek customizable jQuery plugin for live search

HideSeek is a simple, yet customizable jQuery plugin for live search.

HideSeek →

fullPage.js

fullPage.js fullscreen scrolling websites jQuery plugin

fullPage.js is a simple plugin to create fullscreen scrolling websites.

fullPage.js →

Responsive Tabs

Responsive Tabs A jQuery plugin that offers responsive tab functionality

Responsive Tabs is a jQuery plugin that offers super-easy to implement responsive tab functionality.

Responsive Tabs →

anoFlow

anoFlow feature-rich responsive lightbox gallery plugin

anoFlow is a feature-rich and responsive lightbox/gallery plugin.

anoFlow →

RowGrid.js

rowGrid.js images grid infinte scrolling frontend jquery plugins

rowGrid.js is a plugin for placing images on a grid (with support for infinte scrolling) similar to grids found on Google image search, flickr, Shutterstock and Google+ images.

RowGrid.js →

GifPlayer

GifPlayer plugin control play and stop animated gifs jquery

GifPlayer is a small plugin that allows you to control when to play and stop animated gifs.

GifPlayer →

jQuery Tilted Page Scroll

 frontend jQuery Tilted Page Scroll plugins

The jQuery Tilted Page Scroll allows you to create a beautilful and unique 3D tilted scrolling effect on your website. You should check out the demo!

jQuery Tilted Page Scroll →

Data-Img

Data-Img responsive image delivery jquery plugins

Data-Img is a simple plugin for dealing with responsive image delivery. It will replace the images from 'image src' or 'background-image url' depending on screen width.

Data-Img →

Flickerplate

Flickerplate responsive touch-enabled lightweight flick content

Flickerplate is a responsive, touch-enabled and lightweight (only 12kb) plugin that allows you to 'flick' through content. It does also need. Modernizr for touch detection and the jQuery.Finger library for touch events (both bundled).

Flickerplate →

Image Lightbox, Responsive and Touch-friendly

Image Lightbox Responsive Touch-friendly frontend jquery plugins

Image Lightbox, Responsive and Touch-friendly →

jquery.adaptive-backgrounds.js

extracts the dominant color from the images on your web page and magically applies the color to their parent jquery plugins

jquery.adaptive-backgrounds.js is a really cool plugin that extracts the dominant color from the images on your web page and magically applies the color to their parent.

jquery.adaptive-backgrounds.js →

BttrLazyLoading

BttrLazyLoading load images viewport scrolls plugin

BttrLazyLoading is a plugin that allows your web app to only load images within the viewport as the user scrolls. It also allows you to have different version of an image for four differents screen sizes: phones (<768px), tablets (=768px), desktops (=992px) and large Desktops (=1200px).

BttrLazyLoading →

CurvedText

 frontend jquery CurvedText align text curve

CurvedText is a simple jQuery plugin that allows you to align text on any curve.

CurvedText →

jQuery-Cropbox

jQuery-Cropbox image cropping frontend jquery plugins

jQuery-Cropbox is really useful plugin for in-place image cropping (zoom & pan, as opposed to select and drag).

jQuery-Cropbox →

Flip-Quote

jQuery Flip-Quote frontend jquery plugins

jQuery Flip-Quote creates a pull-quote from a text quote found in the document that flips once it's scrolled into view. It also has a click feature that scrolls into and highlights the quote origin on the document.

Flip-Quote →

Lazy Load XT

Lazy Load XT is a mobile-first, fast and extensible plugin for lazy loading of images and videos. It comes with build-in support for the jQueryMobile framework.

Lazy Load XT →

jquery.wanker.js

jquery.wanker.js frontend jquery plugins

jquery.wanker.js is a humourous jQuery plugin that reveals a public service announcement when people start excessively resizing their desktop browser as they try to see your responsive breakpoints. As they say 'The web is meant to be read, not squished!'

jquery.wanker.js →


The post 25 New Frontend jQuery Plugins appeared first on Speckyboy Design Magazine.

]]>
http://speckyboy.com/2014/04/14/25-frontend-jquery-plugins/feed/ 0
20 jQuery Typography Plugins http://speckyboy.com/2014/02/10/jquery-typography-plugins/ http://speckyboy.com/2014/02/10/jquery-typography-plugins/#comments Mon, 10 Feb 2014 12:46:18 +0000 http://speckyboy.com/?p=46516

In this round-up we have collected a selection of feature-rich jQuery typography plugins that will give you more control to precisely position and re-size each letter of your web-typography. We have also added in a...


The post 20 jQuery Typography Plugins appeared first on Speckyboy Design Magazine.

]]>


In this round-up we have collected a selection of feature-rich jQuery typography plugins that will give you more control to precisely position and re-size each letter of your web-typography. We have also added in a few plugins for animating your text, some plugins for controlling responsive type, and also a bunch of unique plugins that will recreate some fantastic text effects, that can usually only be created using a graphic editor.

FlowType.JS

FlowType.js is a jquery plugin that lets you configure the font-size and line-height ratios of your typography

FlowType.js lets you configure the font-size and line-height ratios of your typography, helping you improving their overall appeal. You can also specify maximum and minimum width thresholds to control FlowType.js.

FlowType.JS →

Squishy

Squishy is a useful plugin that will automatically resize your text to fit exactly into the container

Squishy is a useful plugin that will automatically resize your text to fit exactly into the container (with no extra work on your part). It comes with a series of options so that you can control the 'squishiness': maxSize, minSize, maxWidth and minWidth.

Squishy →

slabText

slabText is a plugin that will create big bold & responsive headlines

slabText is a plugin that will help you create those big, bold & responsive headlines that seem to be very popular at the moment. The script works by splitting your headlines into rows and then resizing each row to fill the available horizontal space.

slabText →

FitText

FitText will allow you to have scalable headlines on your responsive layouts

Similiar in functionality to Squishy above, FitText will allow you to have scalable headlines on your responsive layout that will fill the width of the parent element.

FitText →

responsiveText

responsiveText is a scalable headline plugin that will set font-sizes responsively

responsiveText is a scalable headline plugin that will set font-sizes responsively based on the container width.

responsiveText →

TypeButter

TypeButter allows you to set optical kerning for any font on your website

TypeButter allows you to set optical kerning for any font on your website. It comes packaged with Arial, Georgia, Helvetica, Times and Verdana, but if you need another font, you can just add your own.

TypeButter →

Hatchshow

Hatchshow jQuery Typography Text Plugins

Hatchshow →

Animated Typography Plugins

Textillate.js

Textillate.js is a fantastic plugin for applying amazing CSS3 animations to any block of text

Textillate.js is a fantastic plugin for applying amazing CSS3 animations to any block of text. You will also need lettering.js and animate.css to use this plugin.

Textillate.js →

funnyText.js

ffunnyText.js is a plugin that will allow you to create funny and crazy moving typography

funnyText.js is a plugin that will allow you to create 'funny and crazy moving' typography very easily.

funnyText.js →

Super Easy Text Rotator

Super Easy Text Rotator is a lightweight plugin that will allow you to add a simple rotating text to your website

Super Easy Text Rotator is a lightweight plugin that will allow you to add a simple rotating text to your website with little to no markup. Put every rotating words inside the <span class="rotate"></span> and separate it with a comma and the script will automatically cycle through each words in order.

Super Easy Text Rotator →

Lettering.js

Lettering.js  is a jQuery plugin that gives you a complete down-to-the-letter control of your web type

Lettering.js, similiar in functionality to funnyText.js above, is a jQuery plugin that gives you a complete down-to-the-letter control of your web type.

Lettering.js →

Jumble

Jumble is a plugin that will animate and jumble up the colors of your text headers

Jumble is a plugin that will animate and 'jumble' up the colors of your text headers. Choose a color range and set params for whether the shuffle is based on brightness or satuation hue.

Jumble →

Wrapping Text Plugins

CircleType.js

CircleType.js jQueryis a plugin for setting type on a circle Typography Text

CircleType.js is a plugin for setting type on a circle

CircleType.js →

Bacon

Bacon is a plugin that allows you to wrap your text around a bezier curve or a line

Bacon is a plugin that allows you to wrap your text around a bezier curve or a line.

Bacon →

jQSlickWrap

jQSlickWrap is a plugin for which allows you to easily and accurately wrap your text around the content of floated images

jQSlickWrap is a plugin for which allows you to easily and accurately wrap your text around the content of floated images.

jQSlickWrap →

Text Effects Plugins

No Vacancy

The simple novacancy.js plugin will give your text an amazing text neon golden effect

The simple novacancy.js plugin will give your text an amazing text neon golden effect.

No Vacancy →

Sci-Fi Text Effects

Sci-Fi Text Effect gives your text an animated sci-fi style effect

This plugin gives your text an animated sci-fi style effect.

Sci-Fi Text Effects →

Flipping Text

Flipping Text Text Effects jQuery Typography Text Plugins

Flipping Text →

Antiquify.js

Antiquify.js will antiquify your text jQuery Typography Text Plugins

This unique plugin will ‘antiquify’ your text. Randomly applied aberrations makes text look like it came straight off an old, antique printing press.

Antiquify.js →

…and finally…

jQuery Typography Troll

Typography Troll offers an easy way to confuse readers who try to distinguish which of several similar fonts you’re using (like Helvetica and Arial) by randomly assigning a font family to each character in the selected text.

jQuery Typography Troll →


The post 20 jQuery Typography Plugins appeared first on Speckyboy Design Magazine.

]]>
http://speckyboy.com/2014/02/10/jquery-typography-plugins/feed/ 0
50 Javascript Tools & Resources from 2013 http://speckyboy.com/2013/12/18/50-javascript-tools-resources-2013/ http://speckyboy.com/2013/12/18/50-javascript-tools-resources-2013/#comments Wed, 18 Dec 2013 11:28:04 +0000 http://speckyboy.com/?p=45651

Just as we focused on CSS a few days back, today we take a look at 50 of our favorite Javascript tools and resources from 2013. You will notice that this article does not include...


The post 50 Javascript Tools & Resources from 2013 appeared first on Speckyboy Design Magazine.

]]>


Just as we focused on CSS a few days back, today we take a look at 50 of our favorite Javascript tools and resources from 2013. You will notice that this article does not include any jQuery resources as we have already published a dedicated jQuery round-up post last week, you can check that out here.
But if you are looking for a standalone Javascript framework or library, then this is the place for you!

So, here we go, our 50 favorite Javascript tools and resources from 2013:

React

React is a JavaScript framework from Facebook for building user interfaces

React is a JavaScript framework from Facebook for building user interfaces.

React →

AdminJS

AdminJS -is a Backend-Agnostic Administration Framework

AdminJS is a client-side administration framework for interacting with your backend.

AdminJS →

Parallax – Lightweight Parallax Engine

Parallax a Lightweight Parallax Javscript Engine

Parallax is a simple, lightweight parallax engine that reacts to the orientation of a smart device.

Parallax →

Web Tracing Framework

Web Tracing Framework Rich tools for instrumenting, analyzing, and visualizing web apps

The Web Tracing Framework is a set of libraries, tools, and visualizers for the tracing and investigation of complex web applications.

Web Tracing Framework →

Grid Forms

Grid Forms are dense forms designed for use in applications that require lots of data

A JS/CSS framework, Grid Forms are dense forms designed for use in applications that require lots of data to be entered regularly.

Grid Forms →

Hopscotch – A Product Tour Framework

Hopscotch is A javascript Product Tour Framework

Hopscotch is a framework to make it easy to add product tours to their pages. Hopscotch accepts a tour JSON object as input and provides an API for the developer to control rendering the tour display and managing the tour progress.

Hopscotch →

Pedestal

Pedestal is a web application framework written in Clojure

Pedestal is a web application framework written in Clojure that aims to bring both the language and its principles to client and server-side development.

Pedestal →

Helios

Helios is an open-source framework that provides essential backend services for iOS apps

Helios is an open-source framework that provides essential backend services for iOS apps allowing developers to get a client-server app up-and-running in just a few minutes.

Helios →

RoughDraft.js

Quickly create and prototype a full interactive HTML mock-up with RoughDraft.js

Quickly create and prototype a full interactive HTML mock-up without duplicating markup, server-side loops/code, or having to source fake content (lorem ipsum text/images).

RoughDraft.js →

svg.js

svg.js is a lightweight library for manipulating and animating SVG

svg.js is a lightweight library for manipulating and animating SVG with no dependencies and aims to be as small as possible.

svg.js →

Midway.js

Midway.js makes it super easy to automatically center the responsive elements

Midway.js makes it super easy to automatically center the responsive elements on your websites.

Midway.js →

Perimeter.js

 Perimeter.js Javascript plugin and resource

Perimeter.js →

Rar.js

Using AJAX, File API & local access, rar.js provides a pure Javascript implementation of the RAR format, allowing you to extract or manipulate packed data client-side and server-side.

Rar.js →

WideArea

WideArea  is a lightweight JavaScript and CSS library to create an expandable textarea

Widearea is a lightweight JavaScript/CSS library to create an expandable textarea and to write large volumes of text easily.

WideArea →

Angular Chart.js

Angular Chart.js  is A Simple Chart.js Wrapper for Angular

Angular Chart.js →

HTML.js

HTML.js is an An Extensible Library To Help You Enjoy the DOM

HTML.js →

JSHint

JSHint is a tool for detecting errors in JavaScript code

JSHint is a tool for detecting errors in JavaScript code and enforce your team's coding conventions.

JSHint →

Flatdoc

Flatdoc is a small JavaScript file that fetches Markdown files

Flatdoc is a small JavaScript file that fetches Markdown files and renders them as full pages.

Flatdoc →

Skeuocard

Skeuocard progressively enhances credit card inputs to provide a skeuomorphic interface

Skeuocard progressively enhances credit card inputs to provide a skeuomorphic interface.

Skeuocard →

Ractive.js

Ractive.js is a JavaScript library for building reactive user interfaces

Ractive.js is a JavaScript library for building reactive user interfaces in a way that doesn’t force you into a particular framework’s way of thinking.

Ractive.js →

HTML-Inspector

HTML Inspector is a code quality tool to help you and your team write better markup

HTML Inspector is a code quality tool to help you and your team write better markup. It's written in JavaScript and runs in the browser, so testing your HTML has never been easier.

HTML-Inspector →

Simple Statistics

Simple statistics is a JavaScript library that does descriptive statistics

Simple statistics is a JavaScript library that does descriptive statistics, regression, and classification.

Simple Statistics →

Annyang

annyang is a tiny JS library that lets your visitors control your site with voice commands

annyang is a tiny JS library that lets your visitors control your site with voice commands. It supports multiple languages and has no dependencies.

Annyang →

favico.js

favico.js javascript for animating and Make a Use of Your Favicon

favico.js →

Snap.svg

The Snap.svg JavaScript library makes working with your SVG assets as easy

The Snap.svg JavaScript library makes working with your SVG assets as easy as jQuery makes working with the DOM.

Snap.svg →

Resumable.js

Resumable.js is JavaScript library for multiple simultaneous and stable and resumable uploads

Resumable.js is JavaScript library providing multiple simultaneous, stable and resumable uploads via the HTML5 File API

Resumable.js →

Sir Trevor JS

Sir Trevor JS is an intuitive editor for web content

Sir Trevor is rich content editing entirely re-imagined for the web: an intuitive editor for web content which does not presuppose anything about how it will be rendered.

Sir Trevor JS →

gif.js

gif.js is a JavaScript GIF encoder that runs in your browser

gif.js is a JavaScript GIF encoder that runs in your browser that uses typed arrays and web workers to render each frame in the background.

gif.js →

instano.js

instano.js allows you to instantly detect if JavaScript is disabled after the page is loaded

instano.js allows you to instantly detect if JavaScript is disabled after the page is loaded. It modifies the standard <noscript> tags so that the messages inside can be shown immediately whenever JS is disabled.

instano.js →

Countable.js

Countable is a function to add live paragraph-, word- and character-counting

Countable is a function to add live paragraph-, word- and character-counting to an HTML element.

Countable.js →

Packery

Packery is a JavaScript layout library that uses a bin-packing algorithm

Packery is a JavaScript layout library that uses a bin-packing algorithm. Layouts can be intelligently ordered or organically wild. Elements can be stamped in place, fit in an ideal spot, or dragged around.

Packery →

highlight.js

Highlight.js highlights syntax in code examples on any web page

Highlight.js highlights syntax in code examples on any web page. It will automatically detect a language and highlight it.

highlight.js →

Raw

Raw is an open web tool for creating custom vector-based visualizations

Raw is an open web tool for creating custom vector-based visualizations on top of the d3.js library.

Raw →

FastActive

FastActive is a JS snippet that makes websites and web apps feel as responsive as native apps

FastActive is a JS snippet that makes websites and web apps feel as responsive as native apps on touch devices.

FastActive →

RulersGuides.js

RulersGuides.js is a Javascript library which enables Photoshop-like rulers

RulersGuides.js is a Javascript library which enables Photoshop-like rulers and guides interface on a web page..

RulersGuides.js →

TogetherJS

TogetherJS adds collaboration features and tools to your website

TogetherJS is a free, open source Javascript library by Mozilla that adds collaboration features and tools to your website.

TogetherJS →

Medium Editor

Medium Editor is a clone of medium.com inline editor toolbar

Written using vanilla JavaScript, Medium Editor is a clone of medium.com inline editor toolbar.

Medium Editor →

Vex

Vex is a modern dialog library which is highly configurable

Vex is a modern dialog library which is highly configurable, easily stylable, and gets out of the way.

Vex →

Conditioner.js

Conditioner.js is Javascript library for loading and unloading behavior based on environment conditions

Conditioner.js is Javascript library for loading and unloading behavior based on environment conditions.

Conditioner.js →

Intern

Intern is a complete test stack for JavaScript designed to help you write and run consistent javascript

Intern is a complete test stack for JavaScript designed to help you write and run consistent, high-quality test cases for your JavaScript libraries and applications.

Intern →

Chart.js

Chart.js Simple HTML5 Charts using the canvas element

Simple HTML5 Charts using the canvas element.

Chart.js →

Intro.js

Intro.js offers better introductions for websites and features

Intro.js offers better introductions for websites and features with a step-by-step guide for your projects.

Intro.js →

Headtrackr

headtrackr is a library for real-time face tracking and head tracking, tracking the position of a users head in relation to the computer screen, via a web camera and the webRTC/getUserMedia standard.

Headtrackr →

Formbuilder.js

Formbuilder is a graphical interface for building webforms

Formbuilder is a graphical interface for building webforms. Think Wufoo or Google Forms, but a lightweight component that can be integrated into your application.

Formbuilder.js →

Superhero.js

Superhero.js is a collection of the best Javascript articles

Superhero.js is a collection of the best articles we've found on the topic.

Superhero.js →


The post 50 Javascript Tools & Resources from 2013 appeared first on Speckyboy Design Magazine.

]]>
http://speckyboy.com/2013/12/18/50-javascript-tools-resources-2013/feed/ 0
50 Most Useful jQuery Plugins from 2013 http://speckyboy.com/2013/12/11/jquery-plugins-2013/ http://speckyboy.com/2013/12/11/jquery-plugins-2013/#comments Wed, 11 Dec 2013 11:28:36 +0000 http://speckyboy.com/?p=45637

Today, just as we have published each of the past three years, we have the 2013 edition of our top 50 jQuery plugins that we feel are the most useful and most innovative from this...


The post 50 Most Useful jQuery Plugins from 2013 appeared first on Speckyboy Design Magazine.

]]>


Today, just as we have published each of the past three years, we have the 2013 edition of our top 50 jQuery plugins that we feel are the most useful and most innovative from this year.
2013 has been quite possibly the best year ever!

All of the time-saving plugins below will in one way or another deliver a specific solution to many of the design and development issues you may have.

And just to help you find exactly what you are looking for we have split the plugins into the following categories: Layouts, Navigation, Social & Sharing, Sliders & Carousels, Image Management, Forms, Typography & Text, and finally a selection of plugins that don’t quite fit into a particular category but are useful enough to stand alone.

Here we go,the most popular, most innovative and the most useful jQuery plugins from 2013:

You might also like to view the 50 most useful plugins from 2012 or from 2011.

Useful jQuery Plugins for Layouts

jQuery Nested – Create Multi-Column, Dynamic Grid Layouts

jQuery Nested allows you to create a completely gap-free multi-column, dynamic grid layout

jQuery Nested allows you to create a completely gap-free multi-column, dynamic grid layout.

jQuery Nested →

jResponsive – Super-Smooth Transition Layouts

jResponsive allows you to add a dynamically-resized layout to any page or element

jResponsive allows you to add a dynamically-resized layout to any page or element and customize the layout the way you want (with or without top, bottom, right or left navigation). It can be applied to a container element and will arrange its children in a layout that makes optimal use of screen space, by "packing" them in tightly.

jResponsive →

Salvattore

Salvattore is a library agnostic JS script that will help you organize your HTML elements

Salvattore is a library agnostic JS script that will help you organize your HTML elements according to the number of columns you specify, like jQuery Masonry.

Salvattore →

Rubberband – A Plugin for Adding Responsive Breakpoint Events

Rubberband allows scripts to act on media query changes in real time

Rubberband allows scripts to act on media query changes in real time by making use of the browser’s internal media query matching system, window.matchMedia.

Rubberband →

Navigation Plugins

FlexNav – Flexible, Device Agnostic Navigation

FlexNav is a mobile-first example of using media queries and jQuery to make a robust drop-down menu

FlexNav is a mobile-first example of using media queries and jQuery to make a robust drop-down menu. From the developer: It is a ‘device agnostic approach to complex site navigation with support for touch and keyboard sccessibility’.

FlexNav →

Sidr – Creating Facebook-Like Side Menus

Sidr is an easy to use plugin that will create a responsive Facebook-a-like side menu

Sidr is an easy to use plugin that will create a responsive Facebook-a-like side menu.

Sidr →

scrollNav.js – Scrolling Resposnive Side-Nav

scrollNav.js a Scrolling Resposnive Side-Nav jQuery plugins

scrollNav is a lightweight jQuery plugin that grabs your page's existing content, divides it up into logical sections and builds a customizable scrolling sidebar navigation.

scrollNav.js →

Flaunt.js – Responsive Navs with Nested Click-To-Reveal

Flaunt.js allows you to create a stylish responsive navigation with nested click to reveal

Flaunt.js allows you to create a stylish responsive navigation with nested click to reveal.

Flaunt.js →

jVanilla Menu

jVanilla Menu is a simple jQuery menu plugin

jVanilla Menu is a simple jQuery menu plugin. It takes an existing CSS drop-down menu, and adds enhancements such as animations, submenu levels and timeout delays to it.

jVanilla Menu →

jQuery Responsive Tabs

jThis is a jQuery plugin that provides responsive tab functionality

This is a jQuery plugin that provides responsive tab functionality, with the tabs transforming into an accordion when it reaches a CSS breakpoint.

jQuery Responsive Tabs →

scrollUp

ScrollUp creates a customisable Scroll to top feature

ScrollUp creates a customisable “Scroll to top” feature that will work with any website.

scrollUp →

Useful jQuery Social & Sharing Plugins

ClassySocial

ClassySocial is a plugin that lets your site visitors easily see what networks you belong to

ClassySocial is a plugin that lets your site visitors easily see what networks you belong to and visit them in a click of a button.

ClassySocial →

ContentShare

ContentShare lets you share the content from a page on a social network

ContentShare lets you share the content from a page on a social network. Instead of the default meta tags, it lets you specify and select what content you wish to share. As of now, it supports Facebook and Twitter, though you can easily add additional social networks.

ContentShare →

jQuery Github – A plugin to display your favorite Github Repositories

jQuery Github is A plugin to display your favorite Github Repositories

jQuery Github →

Sliders, Carousels and Galleries

slideToucher – Plugin

slideToucher is a content swiping touch enabled jQuery plugin

slideToucher is a content swiping touch enabled jQuery plugin with support for both vertical and horizontal swipes.

slideToucher →

Flexisel – Responsive Carousel Plugin

Flexisel is a responsive image carousel plugin with options specifically available for adapting the carousel

Flexisel is a responsive image carousel plugin with options specifically available for adapting the carousel for mobile and tablet devices.

Flexisel →

Swipebox – A Touchable jQuery Lightbox

Swipebox is a responsive jQuery lightbox plugin

Swipebox is a responsive jQuery lightbox plugin that features: Swipe gestures for mobile; Keyboard Navigation for desktop; CSS transitions with jQuery fallback; Retina support for UI icons.

Swipebox →

Smoothbox – Responsive Lightbox

Smoothbox is a simple, lightweight, and responsive jQuery lightbox script3

Smoothbox is a simple, lightweight, and responsive jQuery lightbox script by Kevin Thornbloom.

Smoothbox →

Photoset Grid – Arrange Images into a Flexible Grid

Photoset Grid is a simple jQuery plugin for arranging images into a flexible grid

Inspired by Tumblr’s photoset feature, Photoset Grid is a simple jQuery plugin for arranging images into a flexible grid.

Photoset Grid →

Owl Carousel

Owl Carousel is a touch enabled jQuery plugin that lets you create responsive carousel sliders

Owl Carousel is a touch enabled jQuery plugin that lets you create responsive carousel sliders.

Owl Carousel →

CarouFredSel

CarouFredSel turns any HTML elements into a carousel

CarouFredSel turns any HTML elements into a carousel. It is dual-licensed under MIT and GPL, and also has its own WordPress plugin.

CarouFredSel →

FilmRoll

FilmRoll is a lightweight and simple jQuery carousel plugin

FilmRoll is a lightweight and simple jQuery carousel plugin that centers the selected item on the page.

FilmRoll →

jQuery CollagePlus

jQuery CollagePlus is an image gallery plugin that arranges your images to fit exactly within a container

jQuery CollagePlus is an image gallery plugin that arranges your images to fit exactly within a container. It allows you to give the images CSS borders, and even define a target row height and padding between the images.

jQuery CollagePlus →

Block Slide

Block Slider is a modal window image gallery plugin for jQuery

Block Slider is a modal window image gallery plugin for jQuery that can be used to create a simple image slider.

Block Slide →

Nivo Lightbox

Nivo Lightbox is a small and responsive jQuery Lightbox plugin

Nivo Lightbox is a small and responsive jQuery Lightbox plugin. It comes with automatic content detection and features CSS effects and transitions.

Nivo Lightbox →

Magnific Popup – Truly Responsive Lightbox

>Magnific Popup is a fast, lightweight and feature-rich responsive lightbox plugin” /></p>
<p>Magnific Popup is a fast, lightweight and feature-rich responsive lightbox plugin with its focused on performance and providing the best experience for users on any device. It is also Zepto.js compatible.</p>
<p><a target=Magnific Popup →

Image Management Plugins

imageloader.js – A Plugin for Preloading Images

imageloader.js - A Plugin for Preloading Images

imageloader.js →

jQuery Alpha Image Plugin

The jQuery Alpha Image Plugin can change selected image colours to transparent

The jQuery Alpha Image Plugin can change selected image colours to transparent and offers the result as either an image or as imagedata.

jQuery Alpha Image Plugin →

imagefill.js

imagefill.js can be used to center the images and make them fill the container

imagefill.js can be used to center the images and make them fill the container.

imagefill.js →

Offreg

Offreg jQuery plugin turns your images into RGB prints

Offreg turns your images into RGB “prints”. All you need to do is to apply the plugin to any HTML element, and then provide an image SRC and insert offset value. On the downside, the rendering does not look impressive in Google Chrome.

Offreg →

Forms, Dropdowns, Tabs and Modals

Selectize.js

Selectize.js is a hybrid of text box and select box

Selectize.js is a hybrid of text box and select box. It can be used to display contact lists or country selectors.

Selectize.js →

EasyDropDown

the EasyDropDown jquery plugin turns elements into drop-down menus

EasyDropDown turns elements into drop-down menus that can be used for navigation or enhanced UI implementation.

EasyDropDown →

Minimalect

Minimalect is a select replacement for jQuery

Minimalect is a select replacement for jQuery. It offers keyboard navigation, choice filtering and even supports themes.

Minimalect →

typeahead.js – A Fully-Featured Autocomplete Library

typeahead.js is a fast and fully-featured autocomplete library

Inspired by Twitter’s autocomplete search functionality, typeahead.js is a fast and fully-featured autocomplete library.

typeahead.js →

jQuery Selectric – HTML Selects Customization

jQuery Selectric is a plugin for easy manipulation and customization of HTML selects

jQuery Selectric is a plugin for easy manipulation and customization of HTML selects.

jQuery Selectric →

Image Picker – Transforms <select> into a More User-Friendly Interface

Image Picker - Transforms <select> into a More User-Friendly Interface

Image Picker is a simple jQuery plugin that transforms a <select> element into a more user friendly graphical interface.

Image Picker →

jQuery Fullscreen Editor

jQuery Fullscreen Editor transforms text fields into customizable editors

jQuery Fullscreen Editor transforms text fields into customizable editors. You can use it on forms or even standalone. The plugin supports most modern web browsers and comes with two different transitions.

jQuery Fullscreen Editor →

Tabslet

Tabslet is a jQuery plugin for tabs with support for custom events, rotation and animation

Tabslet is a jQuery plugin for tabs. It supports custom events, rotation and animation and is compatible with most modern web browsers.

Tabslet →

bPopup – A jQuery Modal Pop-Up Plugin

bPopup is a lightweight modal popup jquery plugin

bPopup is a lightweight (only 1.49kb gzipped) modal popup plugin. The plugin doesn’t create or style your popup but provides you with all the logic like centering, modal overlay, events and more, giving you plenty of opportunities to customize as per your needs.

bPopup →

Moa Modal

Moa Modal is a jQuery modal plugin that comes with custom animations and positioning

Moa Modal is a jQuery modal plugin that comes with custom animations and positioning.

Moa Modal →

Sieve – Add an Interactive Search Filter to Any Content

Sieve allows you to quickly add an interactive search filter to any block of content

Sieve allows you to quickly add an interactive search filter to any block of content.

Sieve →

Typography & Text Plugins

FlowType.JS

the FlowType jquery plugin lets you configure the font size and line height ratios

FlowType.js lets you configure the font size and line height ratios, thereby improving the overall appeal of typography in your projects. You can also specify maximum and minimum width thresholds to control FlowType.js

FlowType.JS →

Squishy

Squishy is a jQuery plugin that automatically resizes text

Squishy is a jQuery plugin that automatically resizes text to exactly fit the container.

Squishy →

Succinct

Succint is a minimal jQuery plugin that can truncate multiple lines of text

Succint is a minimal jQuery plugin that can truncate multiple lines of text. It shortens your text to a given size, and then adds an ellipsis to its end.

Succinct →

Textillate.js – A Plugin for CSS3 Text Animations

Textillate.js is a jquery Plugin for CSS3 Text Animations

Textillate.js is a simple plugin for applying amazing CSS3 animations to any block of text.

Textillate.js →

…and all the rest…

CLNDR.js

 CLNDR.js

CLNDR.js is a jQuery plugin for creating calendars. But instead of generating the markup, it requires you to provide an Underscore.js HTML template. It takes your template and injects the calendar data into it.

CLNDR.js →

Snap.svg

The Snap.svg JavaScript library makes working with your SVG assets very easy

The Snap.svg JavaScript library makes working with your SVG assets as easy as jQuery makes working with the DOM.

Snap.svg →

jQuery-Mapael

Mapael is a jQuery plugin based on raphael.js that allows you to display dynamic vector maps

Mapael is a jQuery plugin based on raphael.js that allows you to display dynamic vector maps.

jQuery-Mapael →

FailSafe

plugins jquery FailSafe

FailSafe, as the name suggests, lets your application work smoothly in situations such as when you lose internet connectivity or run out of laptop battery. It can also disable elements that require an active internet connection or can drain your battery.

FailSafe →

Chardin.js

Chardin.js creates simple overlay instructions for web apps

Inspired by the recent Gmail composer tour, Chardin.js creates simple overlay instructions for web apps to demonstrate to your readers how to use your web app.

Chardin.js →

Bigfoot

Bigfoot is a jQuery plugin that creates exceptional footnotes

Bigfoot is a jQuery plugin that creates exceptional footnotes.

Bigfoot →

jQuery Pin

jQuery Pin will pin any element to the top of a container as you scroll down the page

jQuery.Pin will ‘pin’ any element to the top of a container as you scroll down the page. It can be easily disabled for smaller screen-sizes.

jQuery Pin →

PowerTip

PowerTip is a jQuery tooltip plugin with some advanced features

PowerTip is a jQuery tooltip plugin with some advanced features like hover intent testing, tooltip queueing, and support for complex data.

PowerTip →

jQuery Builder – Easily Build a Custom Version of jQuery

jQuery Builder allows you to easily build a custom version of jQuery

jQuery Builder allows you to easily build a custom version of jQuery that just includes the modules you need.

jQuery Builder →


The post 50 Most Useful jQuery Plugins from 2013 appeared first on Speckyboy Design Magazine.

]]>
http://speckyboy.com/2013/12/11/jquery-plugins-2013/feed/ 0