Friday, 20 February 2015

WHY YOU SHOULD TO BE WEB CONTENT AGNOSTIC

You cannot design without content. It’s a mantra repeated by designers worldwide, it’s a plea in countless emails to clients, it’s a cornerstone of responsible design.


This is because design is about solving problems. If content were a pill, design would be the sugar coating.


However designing with content is contrary to the direction the Web is moving in, and may even be damaging for your clients…


The myth of designing content


The truth is, you aren’t designing with actual content.


Let’s leave aside the idea that clients don’t deliver content on time — plenty do, and those that don’t simply need you to project manage — for the sake of discussion, let’s assume you begin the design process with a nice shiny email from your client with comprehensive content attached.


You’re still not designing the actual content, because the nature of content on the Web is that it’s transient.



changes in content should not necessitate a redesign



When was the last time you worked on a website that didn’t run on a CMS? Did you think the company just wanted to keep their phone numbers up to date? Companies don’t change their phone numbers. What they do is let the VP of marketing run riot with the WordPress login the first weekend your back is turned.


Content on the Web is always temporary. Natural changes in content should not necessitate a redesign.


We’ve sold ourselves the myth of designing content because it syncs nicely with our view of good design being invisible. However, with this approach what we’re really designing is a single iteration of content, the lifecycle of which is undetermined. Designing content is damaging for clients if we allow ourselves to be seduced by the idea that we’re working with fixed content.


Think of being content agnostic as responsive design, from the other direction: whilst still respecting content, we accept that it’s substantially unknowable and so our designs must adapt to whatever content is inserted.


Designing dummy content


Unless you’re typesetting an academic essay written entirely in latin, then lorem ipsum will not be representative of your content, and most web designers rightly avoid it. However, it’s wrong to say that dummy content serves no purpose. Dummy content can be valuable if it’s prototypical of site content. Ideally it will have three characteristics:


  • it will be the same language as your content;

  • it will be the approximate length and rhythm as your content;

  • it will be on a similar subject to your content.

These three characteristics will ensure you encounter the same problems in your design process, as your actual content will when live.


Take for example a staff biography. Provided you know that it’s written in English, is the résumé of a senior manager with an engineering background, and will be a single paragraph of no more than 100 words, then you can design that element. Staff bios are frequently updated, and staff turnover is often high. Any solution you provide needs to be robust enough to adapt to these kinds of changes, or it’s not fit for purpose.


Our work isn’t theoretical, but that doesn’t mean we need actual content to design. What we need are content models: accurate prototypes that allow us to explore design issues, without the restrictions of ‘final’ copy.


Design precedes content


When we expect content to change, we have to design not content, but placeholders for content.


Take a look at a newspaper. It is a practical impossibility that the entire content be designed each night. Thousands of lines and hundreds of columns are slotted into a pre-designed structure. When the structure doesn’t fit the content, it’s the copy that is padded or truncated; not the design. Pt size on inserts can be tweaked, images can be scaled, but in general terms the design of a newspaper dictates its content.


Happily we don’t face the same issue on the Web; we have scrolling. However, similar problems online are resolved with similar solutions.


The Guardian newspaper has just launched an excellent responsive redesign of its website. When designing headlines, they’ve worked to ensure that a five word headline sits comfortably alongside a fourteen word headline. The approach is successful because the team at The Guardian have designed the site, not for content, but for a range of potential content. There are restrictions — you couldn’t insert a fifty word headline — but the solution is flexible enough to handle content growth.


theguardian

Because content is liable to change, design will inevitably precede content. The solution to this problem is to adopt a content agnostic approach using techniques such as Samantha Warren’s Style Tiles to design for models of content that are robust enough to survive in the wild.


Design is content


We know from eye-tracking research that the only time your content is read is when it’s parsed by Googlebot. Most human beings never read websites, they barely look at websites. You and I might, but we’re the exception. Most humans scan a page quickly, click something that looks interesting and repeat the process until they land on an approximation of what they were looking for.


And so, the client’s core message isn’t conveyed by content, it’s conveyed by brand. The colors, type, imagery and a few snatches of content here and there, are what most users base decisions on.


This is the main reason micro-copy is proving to be such a vital part of web design: you won’t make a sale with the opening paragraph of your ‘About Us’ page, but you might with the privacy statement above your contact form.



what we’re really designing…is the framework within which to create content, not the content itself



With the rise of SaaS, designers are increasingly finding that their design work, visual, UX, and strategic, is taking on the role of content. As the Web continues to move away from passive content delivery, to active content creation, design becomes increasingly important as the primary means of communicating.


A product designer doesn’t need to know what words a pen will write in order to design it. He needs to know the general use — whether it will be a brush pen, fountain pen, or rollerball — but the words that it will write are irrelevant to the design process.


The Web is increasingly becoming a place of content creation. We can provide parameters — a maximum 140 characters being the obvious example — but what we’re really designing, whether we do it for clients or their customers, is the framework within which to create content, not the content itself.


Conclusion


The myth that we’re designing content is rooted in print design, when content was final as soon as it was dispatched to the printers. Designing content for the Web requires that we embrace the inherent transient nature of our content, or risk limiting the content’s potential by imposing a rigid design on it.


As the definition of what consitutes a website continues to evolve, design will continue to function as content, and content will continue to perform as a design solution. What we design is not a site’s content — which is transient — but rather its aims, its values, its aspirations; what we design is (for want of a better word) its soul.


Far from being decoration, a content agnostic approach forces us to produce a robust design solution that doesn’t impose itself on future content.


Design precedes content. Content in the absence of design is not content, it’s a brief.



WHY YOU SHOULD TO BE WEB CONTENT AGNOSTIC

3 COOL CSS3 IMAGE HOVER EFFECTS

On the modern web there are numerous techniques that can be used to create interesting interactions, but the simplest and most elegant is usually CSS, and specifically the additions that came with CSS3.


Back in the old days, we had to rely on JavaScript for this kind of effect, but thanks to ever-increasing support for CSS3 across browsers, it’s now possible to set up effects like these without any scripting at all. There are sadly still browsers (IE9 and below) that don’t support CSS3, so you’ll either need a fallback for legacy browsers or to treat the effect as a progressive enhancement.


Today, we’re going to look at how we can apply cool, but neat hover effects to show and hide images captions.


If you’d prefer to follow along with the code, you can download the files here.


Demo 1


The first demo is our simplest: the image will fly to its right to reveal the caption.



The markup


For our first demo’s HTML we will use an unordered list and then wrap the caption and the image inside it. Note that we will also add the class demo-1 and effect inside the unordered list tag. The markup will look like this:



<ul class="demo-1 effect">
<li>
<h2>This is a cool title!</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nost.</p>
</li>
<li><img class="top" src="images/image1.jpg" alt=""/></li>
</ul>


The CSS


For our CSS we will set relative positioning for our demo-1 class and then set up the width and height. We will also hide the overflowed elements. I’ve also put some basic styles for my h2 and p tags as well as my image tag. Now for our effect class we will set the positioning to absolute and giving it a margin of -15px to the top and bottom. We will use CSS3’s transition to create a smooth effect. Our CSS looks like this:



.demo-1 
position:relative;
width:300px;
height:200px;
overflow:hidden;
float:left;
margin-right:20px;
background-color:rgba(26,76,110,0.5)

.demo-1 p,.demo-1 h2
color:#fff;
padding:10px;
left:-20px;
top:20px;
position:relative

.demo-1 p
font-family:'Lato';
font-size:12px;
line-height:18px;
margin:0

.demo-1 h2
font-family:'Lato';
font-size:20px;
line-height:24px;
margin:0;

.effect img
position:absolute;
margin:-15px 0;
right:0;
top:0;
cursor:pointer;
-webkit-transition:top .4s ease-in-out,right .4s ease-in-out;
-moz-transition:top .4s ease-in-out,right .4s ease-in-out;
-o-transition:top .4s ease-in-out,right .4s ease-in-out;
transition:top .4s ease-in-out,right .4s ease-in-out

.effect img.top:hover
top:-230px;
right:-330px;
padding-bottom:200px;
padding-left:300px


Demo 2


Our second demo will show the image sliding down. This means when you hover your mouse over the image the caption will be revealed above it.



The markup


For our second demo’s html, we’ll use very similar markup to our first demo. But this time we will use demo-2 as the class, and add the zero class:



<ul class="demo-2 effect">
<li>
<h2 class="zero">This is a cool title!</h2>
<p class="zero">Lorem ipsum dolor sit amet.</p>
</li>
<li><img class="top" src="images/image1.jpg" alt=""/></li>
</ul>


The CSS


Our CSS will be almost the same as the first demo, except that this time we will move our image downwards by settings the property bottom to -96px. We’ll also use CSS3’s transition to create a smooth effect:



.demo-2 
position:relative;
width:300px;
height:200px;
overflow:hidden;
float:left;
margin-right:20px;
background-color:rgba(26,76,110,0.5)

.demo-2 p,.demo-2 h2
color:#fff;
padding:10px;
left:-20px;
top:20px;
position:relative

.demo-2 p
font-family:'Lato';
font-size:12px;
line-height:18px;
margin:0

.demo-2 h2
font-size:20px;
line-height:24px;
margin:0;
font-family:'Lato'

.effect img
position:absolute;
left:0;
bottom:0;
cursor:pointer;
margin:-12px 0;
-webkit-transition:bottom .3s ease-in-out;
-moz-transition:bottom .3s ease-in-out;
-o-transition:bottom .3s ease-in-out;
transition:bottom .3s ease-in-out

.effect img.top:hover
bottom:-96px;
padding-top:100px

h2.zero,p.zero
margin:0;
padding:0


Demo 3


For our last demo, we’ll create a flipping card effect. This means when you hover your mouse on the image it will spin it around on its axis to reveal the description.



The markup


For our last demo markup, we’ll use a different structure. First, we’ll use the HTML5 figure element along with a figure caption tag inside it. We’ll also use the demo-3 class for our unordered list:



<ul class="demo-3">
<li>
<figure>
<img src="images/image1.jpg" alt=""/>
<figcaption>
<h2>This is a cool title!</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nost.</p>
</figcaption>
</figure>
</li>
</ul>


The CSS


In our CSS, we will set the figure image to a relative position and then hide the backface-visibility. We’ll also use the rotateY transform: -180 degrees for figcaption and then change it to 180 degrees for the hover of both the image and caption:



.demo-3 
position:relative;
width:300px;
height:200px;
overflow:hidden;
float:left;
margin-right:20px

.demo-3 figure
margin:0;
padding:0;
position:relative;
cursor:pointer;
margin-left:-50px

.demo-3 figure img
display:block;
position:relative;
z-index:10;
margin:-15px 0

.demo-3 figure figcaption
display:block;
position:absolute;
z-index:5;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box

.demo-3 figure h2
font-family:'Lato';
color:#fff;
font-size:20px;
text-align:left

.demo-3 figure p
display:block;
font-family:'Lato';
font-size:12px;
line-height:18px;
margin:0;
color:#fff;
text-align:left

.demo-3 figure figcaption
top:0;
left:0;
width:100%;
height:100%;
padding:29px 44px;
background-color:rgba(26,76,110,0.5);
text-align:center;
backface-visibility:hidden;
-webkit-transform:rotateY(-180deg);
-moz-transform:rotateY(-180deg);
transform:rotateY(-180deg);
-webkit-transition:all .5s;
-moz-transition:all .5s;
transition:all .5s

.demo-3 figure img
backface-visibility:hidden;
-webkit-transition:all .5s;
-moz-transition:all .5s;
transition:all .5s

.demo-3 figure:hover img,figure.hover img
-webkit-transform:rotateY(180deg);
-moz-transform:rotateY(180deg);
transform:rotateY(180deg)

.demo-3 figure:hover figcaption,figure.hover figcaption
-webkit-transform:rotateY(0);
-moz-transform:rotateY(0);
transform:rotateY(0)



3 COOL CSS3 IMAGE HOVER EFFECTS

Wednesday, 18 February 2015

WHAT’S NEW FOR DESIGNERS, FEBRUARY 2015

In this month’s edition of What’s new for designers and developers, we’ve included lots of new apps for design teams, portfolio resources, new design tools, JavaScript resources, resources for startups, new podcasts, new mobile apps, and much more. And as always, we’ve also included some awesome new free fonts!


Almost everything on the list this month is free, with a few high-value paid apps and tools also included. They’re sure to be useful to designers and developers, from beginners to experts.


If we’ve missed something that you think should have been on the list, let us know in the comments. And if you know of a new app or resource that should be featured next month, tweet it to @cameron_chapman to be considered!


 


Concepts


Concepts is a sketching app for iOS that features infinite canvas and a minimalist interface. It includes zoom, infinite undo, and the responsive Fluid Ink Engine.


concepts

 


Trov


Trov is a personal inventory app for mobile, that includes features to automatically store information about your stuff. While it’s built for keeping track of what you own personally, it’s also useful for keeping track of the stuff you have for your business.


trov

 


PopKey


PopKey is an animated GIF keyboard for iPhone. It includes a library of GIFs, as well as the ability to use your own.


popkey

 


Aurelia


Aurelia is a next-generation JS framework for empowering your creativity. It’s modular, simple, and testable, with modern architecture and two-way databinding, among other features.


aurelia

 


Papaly


Papaly is a link manager that lets you create boards of your favorite content, to either share or keep private. You can import links, discover new content, and connect your social media accounts.


papaly

 


AndroidLibs


AndroidLibs is a collection of libraries for Android app development. Libraries are sorted by category, or you can search to find what you need.


androidlibs

 


ContentTools


ContentTools is a simple service for creating interacive content for your website. It includes creation tools for shareable content, tools to embed on your website, and analytics for tracking engagement and interactions. There’s a 14-day free trial, and then plans start at $25/month.


contenttools

 


Isso


Isso is a commenting server that’s similar to Disqus. Comments can be written in Markdown, and you can import comments from Disqus and WordPress, hassle-free.


isso

 


StockSnap.io


StockSnap.io is a free stock photo site with photos that are free from copyright restrictions. You can search for photos, or browse by date, views, or number of downloads.


stocksnap

 


MailChimp Pattern Library


The MailChimpPatternLibrary includes a huge variety of design patterns that were developed as a result of MailChimp’s switch to a responsive app. It includes patterns for navigation, form elements, typography, and more.


pattern library

 


Developer Tea


DeveloperTea is a podcast series that limits its episodes to just 10 minutes. It’s engineered to be highly-focused and short, so you can check out episodes on your tea (or coffee) break.


developer tea

 


Pixlrbrowser


Pixlrbrowser is a quick way to find designers’ websites. Just click on a portfolio to launch in preview mode, or submit your portfolio for consideration.


pixlrbrowser

 


Illustrio


Illustrio is a marketplace that lets you upload illustrations that people can customize before purchasing and downloading, making your designs more valuable.


illustrio

 


Campfires.io


Campfires.io is a collection of interviews with your favorite designers. They share insights, tips, and behind-the-scenes stories for you to learn from.


campfires.io

 


Hipster Logo Generator


The HipsterLogoGenerator is a fun app that lets you create your own hipster-style logo. It includes base shapes, swag, personalization, and more.


hipster logo generator

 


The UX Reader


TheUXReader was originally created as a fundraiser for the non-profit RailsBridge, but has now been made available for free. It’s a collection of the most popular articles from MailChimp’s UX Newsletter, plus extra exclusive content.


the ux reader

 


Kredo


Kredo is a creative network for photographers, designers, artists, and illustrators. The app is free to download, and includes sharing functions, high resolution images, external display support, and more.


kredo

 


Materialize


Materialize is a responsive front-end framework that’s based on Material Design. It has a focus on UX, speeds up development, and it’s easy to work with.


materialize

 


Underdog


Looking for a job at a leading startup? Underdog lets you quickly apply to New York City’s leading startups in just 60 seconds, with other cities coming soon.


underdog

 


Trippeo


Trippeo is a simple business travel and expense management app. Track your trip expenses, use it as a business trip concierge to keep everything in one place, and even synchronize your calendar to generate expense reports based on your schedule.


trippeo

 


Vivaldi


Vivaldi is a new browser, currently available as a technical preview. It features quick commands, notes, speed dials, and tab stacks, among others.


vivaldi

 


The Design Sprint


TheDesignSprint, from Google Ventures, is a five-day process for working through design, prototyping, and testing ideas. It combines business strategy, innovation, behavior science, design thinking, and more.


the design sprint

 


Mixmax


Mixmax makes your Gmail way more useful, with faster meeting scheduling, read receipts on emails, and email templates, among other features.


mixmax

 


AppVirality


AppVirality](http://www.appvirality.com/) is a growth hacking toolkit for mobile apps. Just enter your App Play Store URL to get started.


appvirality

 


Brand24


Brand24 lets you keep track of your brand online. They monitor over 22,000 brands of all sizes, including companies like Panasonic and Ikea, as well as startups.


brand24

 


Pushforms


Pushforms are mobile forms that work natively on Android, iOS, and offline. You can integrate the data with more than 300 applications, or send it to your servers.


pushforms

 


Usersnap


Usersnap makes it easy to get understandable bug reports to make collaborating with colleagues and clients easy. You get visual feedback directly from your site with the Usersnap feedback widget.


usersnap

 


Siteleaf


Siteleaf is a cloud-based content management system that lets you publish anywhere. It supports FTP, SFTP, Amazon S3, GitHub Pages, and Rackspace Cloud Files, keeping your data independent of their service.


siteleaf

 


Kibako


Kibako is a Mac app for sharing screenshots, images, and more. Your files are stored securely in your S3 or Dropbox, and you can even add support for screen recording and custom sharing domains.


kibako

 


Clef


Clef offers secure two-factor authentication without passwords or tokens. It’s affordable and incredibly usable.


clef

 


AnyPerk


AnyPerk is a perk and reward system for your employees. You can provide meaningful perks like preferred pricing for hundreds of products and services, easy-to-use rewards for noteworthy achievements, and analytics to track it all.


anyperk

 


Abacus


Abacus is a simple way to manage and pay business expenses. Features include real-time expenses, fast deposits to your bank account, receipt forwarding, and more.


abacus

 


JotForm Theme Store


The JotFormThemeStore gives you inspired, creative, stunning form themes that fit your needs. It has a comprehensive selection of forms, with form design for every purpose. You can even sell your own themes to make money.


jotform theme store

 


Thirsty Dog


ThirstyDog is a free hand drawn typeface, designed by Simon Stratford. It was created using Faber Castell Pens, ink nibs, and a pot of ink before being digitized.


thirsty dog

 


Cluster Font Family


The ClusterFontFamily comes with a variety of hand-drawn fonts, including shadowed versions. It’s free for personal and commercial projects with attribution.


cluster font family

 


Moon


Moon is a simple, rounded typeface that comes in two weights: light and bold. It’s free for personal use, with paid commercial licenses available.


moon

 


Everlie


Everlie is a handwritten font with a whimsical, feminine quality.


everlie

 


Bruss


Bruss is a brush-style font with uppercase and smallcaps character sets.


bruss

 


Fonesia


Fonesia is a fun font that comes in three different weights: light, regular, and bold; with full character sets for each.


fonesia

 


Metropolis


Metropolis is a free typeface with an art deco look.


metropolis

 


Alif


Alif is an Urdu-inspired typeface, inspired by how combining the letters, forms the unique written language.


alif

 


Betty


Betty is a tattoo-inspired typeface. There are two fonts that come with ligatures, swashes, and alternates.


betty

 


Poniente


Poniente is a western-inspired typeface with a full uppercase character set, plus numbers and punctuation.


poniente


WHAT’S NEW FOR DESIGNERS, FEBRUARY 2015

Sunday, 15 February 2015

QUICK & EASY WAY TO IMPLEMENT DRAG N SHARE WITH JQUERY


You must have seen the drag to share functionality on Mashable that lets visitors share the content on popular social networks intuitively. Just drag one of the images in an article and you’ll be able to share the article on your favorite social network by dropping the dragged image over its icon. Even, Nettuts has written a nice tutorial on how to implement this functionality into your website using jQuery. But here is a much elegant solution to achieve the drag n share effect using jQuery with just a line or two of JavaScript code.


Get the prettySociable Plugin


To implement this functionality, you will need the prettySociable jQuery plugin written by Stéphane Caron. Download and extract the plugin, it contains everything you need to get up and running with drag n share.


Include the Required Files


To add drag n share to a page, add reference to jquery and prettySociable in your page’s head tag. The plugin folder also includes images and css folders in addition to js folder. You’ll need them too as css folder contains styles necessary for drag n share elements and images folder contains icons for various social networks. Here’s the complete code you need to add into the head tag.




  1. <link rel=“stylesheet” href=“css/prettySociable.css” type=“text/css” media=“screen” charset=“utf-8″ />

  2. <script src=“js/jquery-1.3.2.min.js” type=“text/javascript” charset=“utf-8″></script>

  3. <!–[if lte IE 6]><script src=”js/DD_belatedPNG.js” type=”text/javascript” charset=”utf-8″></script><![endif]–>

  4. <script src=“js/jquery.prettySociable.js” type=“text/javascript” charset=“utf-8″></script>



The js folder also includes DD_belatedPNG.js which is used to fix PNG transparency issues in IE6 or older. You need to include that too.


Define Draggable Links


Now to add drag n share to your web page, add an anchor tag <a href="#" > with another attribute rel="prettySociable".


Initialize prettySociable


After you have added the rel attribute, you need to initialize the script. Add this single line of code, just above the </body>




  1. <script type=“text/javascript” charset=“utf-8″>

  2.     // Init prettySociable

  3.     $.prettySociable();

  4. </script>



Check out your page in browser and you should get drag to share functionality working nicely.


Customizing the Default Settings


Customizing the Shared Information


When you add rel=”prettySociable” on an anchor tag with its href=”#”, this will share the URL of the current web page and use the title and meta description in head tag to display the tooltip on drag. But if you need to share a different URL instead of the current web page, specify a URL in the href attribute. Also you can customize the tooltip information which is shown on dragging. You can specify custom title and description in the rel attribute in this way. rel="prettySociable;title:custom title;excerpt:custom excerpt;"


Customizing the Sharing Panel


By default prettySociable supports eight social networks but you can customize the social networks and their icons to your requirement. For that you’ll need to pass a settings object to prettySociable function. Here’s the complete settings object




  1. $.prettySociable(

  2.                 animationSpeed: ‘fast’/* fast/slow/normal */

  3.                 opacity: 0.90, /* Value between 0 and 1 */

  4.                 share_label: ‘Drag to share’/* Text displayed when a user rollover an item */

  5.                 share_on_label: ‘Share on ‘/* Text displayed when a user rollover a website to share */

  6.                 hideflash: false/* Hides all the flash object on a page, set to TRUE if flash appears over prettySociable */

  7.                 hover_padding: 0,

  8.                 websites: 

  9.                     facebook : 

  10.                         ‘active’true,

  11.                         ‘encode’:true// If sharing is not working, try to turn to false

  12.                         ‘title’‘Facebook’,

  13.                         ‘url’‘http://www.facebook.com/share.php?u=’,

  14.                         ‘icon’:‘images/prettySociable/large_icons/facebook.png’,

  15.                         ‘sizes’:‘width’:70,‘height’:70

  16.                     ,

  17.                     twitter : 

  18.                         ‘active’true,

  19.                         ‘encode’:true// If sharing is not working, try to turn to false

  20.                         ‘title’‘Twitter’,

  21.                         ‘url’‘http://twitter.com/home?status=’,

  22.                         ‘icon’:‘images/prettySociable/large_icons/twitter.png’,

  23.                         ‘sizes’:‘width’:70,‘height’:70

  24.                     ,

  25.                     delicious : 

  26.                         ‘active’true,

  27.                         ‘encode’:true// If sharing is not working, try to turn to false

  28.                         ‘title’‘Delicious’,

  29.                         ‘url’‘http://del.icio.us/post?url=’,

  30.                         ‘icon’:‘images/prettySociable/large_icons/delicious.png’,

  31.                         ‘sizes’:‘width’:70,‘height’:70

  32.                     ,

  33.                     digg : 

  34.                         ‘active’true,

  35.                         ‘encode’:true// If sharing is not working, try to turn to false

  36.                         ‘title’‘Digg’,

  37.                         ‘url’‘http://digg.com/submit?phase=2&amp;url=’,

  38.                         ‘icon’:‘images/prettySociable/large_icons/digg.png’,

  39.                         ‘sizes’:‘width’:70,‘height’:70

  40.                     

  41.                     //add more social networks here

  42.                 ,

  43.                 tooltip: 

  44.                         offsetTop:0,

  45.                         offsetLeft: 10

  46.                     ,

  47.                 popup: 

  48.                     width: 900,

  49.                     height: 500

  50.                 ,

  51.                 callback: function() /* Called when prettySociable is closed */

  52.             );



The settings object is self explaining. You can specify which websites to use and also the icons to use for each website in the websites parameter. You can enhance this drag n share script even further by using a shortened URL in the anchor tag’s href attribute.




QUICK & EASY WAY TO IMPLEMENT DRAG N SHARE WITH JQUERY

Saturday, 14 February 2015

50 INCREDIBLE FREEBIES FOR WEB DESIGNERS, FEBRUARY 2015

Amazing designers and developers release new projects every day, that make us excited, inspired, and often more than a little impressed.


Today we’re continuing our monthly roundup of the best free resources for web designers with a collection that includes plugins, galleries, icons, WordPress themes, templates and more tools than you can use in a month. If this collection is anything to go by, 2015 is shaping up to be an awesome year for web design resources. Enjoy!


Icono


A set of icons created with pure CSS, avoiding the need for SVG, fonts or anything else.


Icono

Flat Text Icons


A modern collection of icons with a completely flat look, portraying all kinds of writing and stationery items.


Flat Text Icons

Nexus 6 Templates


Eight different mockups to showcase your designs in a Nexus 6 smartphone, including smart objects for easy handling.


Nexus 6 Templates

Flat UI Color Palette for Sketch


Get the right tones for your next Sketch project by applying this cool color palette.


Flat UI Color Palette for Sketch

Apple Watch UI Kit


A UI kit for Adobe Illustrator that will allow you to create all kinds of designs and mockups for the device.


Apple Watch UI Kit

App Screens Perspective Mockup


A good-looking mockup for showing your next app or design with an interesting, multi-screen perspective.


App Screens Perspective Mockup

Nexus 5 Wireframe


A neat resource for wireframing Nexus 5 content in Photoshop.


Nexus 5 Wireframe

Publica UI Kit


An elegant component-based UI kit available in both Photoshop and Illustrator formats. It’s mostly black and white, staying neutral and open to any changes you want to make.


Publica UI Kit

Material Design UI Kit


Use this set of design elements to produce interfaces following Google’s Material design philosophy.


Material Design UI Kit

IPhone Gold UI Kit


A glamorous set of UI elements to go along with the gold version of Apple’s smartphone.


IPhone Gold UI Kit

Baikal UI Kit: Samples


The free version of the Baikal UI kit including samples of the many elements available in the full version.


Baikal UI Kit: Samples

Shapes Transparent UI Kit


A beautiful UI kit featuring transparencies in order to provide a sharp, modern appearance.


Shapes Transparent UI Kit

Reis Font


A superb hand-made font for titles and big text. Available in TTF and OTF formats.


Reis Font

KINO 40 Font


A free handwritten font for personal and commercial use.


KINO 40 Font

Panton


A modern-looking font family fit for headlines and offering four free weights.


Panton Font

Bakersfield Font Family


An entire font family offering two of the most common weights completely free of charge.


Bakersfield Font Family

Sunday Font


A quirky hand-drawn font created as a means to combine illustration and lettering.


Sunday Font

PH CV Template


A template for a multipurpose vCard in PSD format. You can place all of your information in the 11 files included.


PH CV Template

Travel Website Landing Page PSD


An interesting design for a travel-oriented website, fully editable in Photoshop.


Travel Website Landing Page PSD

Foliac Portfolio PSD Template


A clean and modern template for your next portfolio website coming in PSD format.


Foliac Portfolio PSD Template

FitLife One Page PSD Template


A complete template for creating websites with a fitness-oriented purpose, whether it’s a gym, club, trainer, etc.


FitLife One Page PSD Template

Fontana WordPress Theme


A content-focused WordPress theme with a simple layout and various widgets for search, Flickr, videos and more.


Fontana WordPress Theme

Enlightenment WordPress Theme


A simple and multi-purpose theme featuring a clean, simple layout, screen wide slider, portfolio section, and more.


Enlightenment WordPress Theme

Creativs: PSD and HTML5 Website Template


A complete template for people involved in creative projects, coming in both PSD and HTML5 versions.


Creativs: PSD and HTML5 Website Template

Oleose: Mobile App Landing Page


A good-looking landing page for your latest app release. Completely responsive and built with Bootstrap 3.


Oleose: Mobile App Landing Page

CSS3 Flat Icons


A highly-detailed set of icons including shadows and bright colors, developed with nothing but CSS3.


CSS3 Flat Icons

Flat Firefox


A simple design that uses pure CSS, portraying a Firefox window in an entirely flat design.


Flat Firefox

Pure CSS3 Tabs


A simple and smooth tabbed navigation created with nothing but CSS3.


Pure CSS3 Tabs

Expanding CSS3/JQuery Panel


An interesting set of panels in multiple colors and shapes. It uses CSS3 and a bit of jQuery to work.


Expansing CSS3/JQuery Panel

Animated Share Button


A nicely animated social sharing button using CSS and jQuery.


Animated Share Button

100 Tourism and Travel Icons


A pretty big set of icons related to travel and tourism, offered in PNG and SVG formats.


100 Tourism and Travel Icons

CSS Avatars


An interesting set of highly-detailed avatar smileys created entirely with CSS.


CSS Avatars

Dillinger: Online Markdown Editor


Edit HTML5 on the cloud using desktop or mobile devices and save your content offline with this AngularJS powered editor.


Dillinger: Online Markdown Editor

Convert your PHP web application to Windows, Mac and Linux


Develop applications in PHP, HTML, JavaScript and CSS and then run them natively on Windows, Mac and Linux.


Convert Your PHP Web Application to Windows, Mac and Linux!

Build a custom online calculator


Create your own calculators online with this open source project, on both desktop and mobile.


Build a Custom Online Calculator

Postatic: everything you need to start your community


A tool for creating your own community site with a Hacker News-like approach.


Postatic: Everything You Need to Start Your Community

CSS Gradient Animator


Switch from one gradient to another using soft animations and customizing speed and angles, using pure CSS.


CSS Gradient Animator

Tuxedo.js


A framework packed with features, built on React and Flux.


Tuxedo.js

MINI 2


A mega simple PHP application for quick and basic projects.


MINI 2

Compare CSS preprocessors


Compare the three main CSS preprocessors (Less, Sass and Stylus) to see which one fits your projects better.


Compare CSS PREprocessors

CSS Triggers


A fantastic reference sheet to know what additional changes are triggered by changing various CSS properties.


CSS Triggers

Bedrock


A tool that will speed up the process of creating Express servers without worrying about configuration.


Bedrock

Dropzone.js


A smooth library for creating drag and drop upload interactions, including image previews and interesting hover effects.


Dropzone.js

Labelauty jQuery Plugin


Give your checkboxes and radio buttons a stunning look thanks to this jQuery plugin.


Labelauty JQuery Plugin

WOW.js: reveal animations when scrolling


Trigger animations as soon as the user scrolls through a section of your site and customize aspects such as delay, style, length and more.


WOW.js: Reveal Animations When Scrolling

TextAssist (jQuery, HTML/CSS, JavaScript)


Provide custom options to users that highlight a particular section of text.


TextAssist (jQuery, HTML/CSS, JavaScript)

LazySizes


A lazy loader for images, iframes, widgets and more, including responsive elements. Apply different loading techniques depending on your project.


LazySizes

CSS3-Powered Hover Effects


Apply a wide amount of CSS hover effects to the elements in your project using Sass, LESS and CSS.


CSS3-Powered Hover Effects

Snabbt.js


A fantastic JavaScript library that will allow you to make straightforward animations for your project’s elements.


Snabbt.js

Plottable.js


Create beautiful, colorful and interactive charts to integrate in your web projects


Plottable.js

Chroma.js


Use this JavaScript library in order to manipulate color in a variety of ways.


Chroma.js

Flickity: amazing gallery tool


This tool lets you create galleries that work on any device, allowing users to flick through them with either their fingers or a mouse.


Flickity: Amazing Gallery Tool

Deck.js


A very useful library for the creation of HTML presentations. They can be controlled with keyboard or touch gestures for easy navigation.


Deck.js


50 INCREDIBLE FREEBIES FOR WEB DESIGNERS, FEBRUARY 2015