Category archives: css

 

 

What’s new for designers, April 2012

Read more
 

The April edition of what’s new for web designers and developers includes new web apps, jQuery plugins, blogging platforms, coding resources, productivity and business tools, responsive design resources, and some really great new fonts. Many of the resources below are free or very low cost, and are sure to be useful to a lot of designers and developers out there. As always, if we’ve missed something you think should have been included, please let us know in the comments. And if you have an app or other resource you’d like to see included next month, tweet it to @cameron_chapman for consideration. Story Wheel Story Wheel is a new app that lets you take your Instagram photos and tell the story behind them. Just connect it to your Instagram account, then record your story, and create a nostalgic slideshow you can share with the world. TriggerApp TriggerApp is a project, team, and client management app that includes invoicing. It’s cloud based and powerful, yet incredibly easy to use. Anchor CMS Anchor CMS is a PHP5-based content management system created specifically for art-directed blogging. It has a powerful but simple theming engine, an uncluttered admin interface, and is completely free. Ingrid Ingrid is a fluid, lightweight CSS layout system that makes it easier to design re-flowing responsive layouts. It’s extendable and easy to implement, and doesn’t get in the way of your creativity. Instagram for Android Instagram has long been available for iOS, and it’s definitely among the top apps Android users seemed to want their own version of. Now it’s here: Instagram for Android. It’s a fast and fun way to share your photos. Just take a picture, choose a filter, and then post to Instagram (you can share to Facebook, Twitter, and Tumblr, too). 15Five 15Five is a web app that makes it easy for upper-level management to keep track of what their employees are doing, without being obtrusive. Employees just take 15 minutes at the end of each week to write a report that can be read in 5 minutes. The reports can then be condensed into a single report for the CEO (or other top-level managers). Billable Billable is probably the easiest to use invoicing app on the market. Just edit the invoice that appears on the screen when you load the page, and then either save it (you can only save the current invoice, from what I gathered), export it as a PDF, or print it. Invoicebus Invoicebus is an easy to use app that lets you create invoices and quotes via a WYSIWYG editor. It supports all currencies and partial payments, lets you email docs or save them as PDFs, send payment reminders and get alerts when a client views a document you sent, and more. There’s a free plan that allows up to 3 clients, or paid plans for more. Wookmark jQuery Plugin Wookmark is a jQuery plugin for creating dynamic column grid layouts that automatically rearrange based on the browser’s viewport. Just download the JS file, include it on your site (along with jQuery), and run it on your content. From there, you can adjust the container, offset, and itemWidth. Adipoli jQuery Image Hover Plugin Adipoli is a simple jQuery plugin that gives you a variety of transitions for hovering over images. There are more than 20 transitions available, including grayscale to color, popouts, and many more! Backstretch Backstretch is a jQuery plugin for adding a dynamically resized background image to your pages. It resizes as the browser viewport changes, making it ideal for responsive designs. PageScroller PageScroller lets you add animated page targets to your website for smooth scrolling between content. You can choose to have left or right side nav, top nav, and next and previous buttons, and it comes with eight elegant skins! Rhinoslider Rhinoslider is a flexible jQuery slider/slideshow plugin. It offers multiple effects, each of which can be applied to run in different directions. New effects can be created by adjusting the settings of existing effects. CSS3 Responsive Slider CSS3 Responsive Slider is an image slider/carousel that resizes automatically based on the browser viewport, all without JavaScript! It works in Firefox, Chrome, Opera, and Safari, with partial support in IE9. Fontomas Fontomas is an icon font generator that makes it easy to create a font that only contains the icons you want to use. Just select your icons, rearrange them, and then save. You can even load fonts (SVG/Cufon) from your own computer. Intype Intype is a text editor for Windows that offers advanced editing features like smart column selection, snippets, and multi-selection. Extension bundles let you add snippets, themes, or even language grammars (there are several already supported, including HTML, JavaScript, CSS, PHP, Ruby, and more). SearchMeme SearchMeme is a free jQuery plugin that generates a small search button that expands into a text box when clicked on. Place it in your sidebar, your header, or anywhere else on your site. SnipSave SnipSave lets you create an account and save code snippets from anywhere. You can then edit or delete those code snippets from the easy-to-use interface. Akordeon Akordeon is a free, lightweight jQuery plugin for creating accordion layouts. It’s fully customizable and can display large chunks of content in a limited space. Morris.js Morris.js is a lightweight library that makes it easy to draw time-series graphs that actually look good, using jQuery and Raphael. Via.Me Via.Me is a new way to share photos, videos, stories, and sounds. There’s a web interface as well as an iOS app, and you can sign up with Facebook or Twitter. Noty Noty is a jQuery plugin for creating alternative alert and other notification messages (such as success, error, and confirmation). Notifications can be placed in a variety of areas, and the API allows you to customize the text, animation, speed, buttons, and more. PSDCovers With PSDCovers , you can create 3D product mockups in Photoshop using your 2D designs. You just choose and download the product shot you want to use, locate the appropriate Action, run “Step 1″ to create a template, position and scale your 2D design on that template, and then run “Step 2″ to generate the 3D result. Comcure Comcure offers forever free backups for your website. Just set up the automatic backups, and then forget about it. Comcure will run backups according to schedule, and will email you if there’s ever an issue. It even backs up your MySQL databases, and your backups will be stored at two of their five worldwide datacenters! Slidedeck2 Slidedeck2 is a WordPress content slider. It lets you create photo and video galleries, post sliders, social feed sliders (for Google+, Instagram, and Twitter), and more. OK The Creative Finder The Creative Finder has a new look. And along with it they’ve added more features, including new account types, mobile portfolios, and more. Breezi Breezi is a new website builder that makes it easy to design, edit, and launch beautiful websites in minutes. One of Breezi’s best features, and what sets it apart from most other website builders, is that it has exceptionally well designed templates to get you started. And through the end of April, when you sign up for a new site, you’ll get it free! Twitter Follow Box Twitter Follow Box adds a facebook-like box style widget for Twitter. It’s a simple jQuery plugin, but has enough options to customize the widget to match your site’s design. Nagasaki (free) Nagasaki is a free typeface designed by Sasha Iacob, inspired by the ’57 poster “Hiroshima”, which was designed by Wim Crowell. It’s perfect for posters, flyers, and other pieces where you need a big, bold display font. Sablon Type (free) Sablon Type is based on din-bold outlines using the add and subtract circles around the edges. It’s a handmade EPS font that’s licensed for both personal and commercial use. Average (free) Average is a new, free Google Web Font designed by Eduardo Rodriguez Tunni. It’s a serif font that was created after extensive research into text typeface families from various periods in history. Bobber (free) Bobber is an alternative slab serif typeface with its own distinct style. The font is available as an .ai archive. Henry (free) Henry is an all-caps, vintage style typeface based on vintage cars and fonts from the 1960s. Silver Fake (free) Silver Fake is a free slab serif typeface. It’s simultaneously modern and retro, with unique letterforms and some alternatve characters. Hem and Haw ($25) Hem and Haw is a stitched sans serif display typeface, designed by Ray Larabie for Stella Roberts Fonts. It was rebuilt from the former freeware design “Stitchen”, now with a more complete character set, including punctuation and currency symbols. Taco Wagon ($15) Taco Wagon is a distressed display font inspired by Mexican hand-painted lettering. It includes a separate file for the drop shadow, so that it can be colored independently. Sunset Strip ($79) Sunset Strip is a pretty script font designed by Jason Walcott for Jukebox Type. It includes a full collection of characters, including alternates. Sanchez ($126) Sanchez is a slab-serif typeface that strongly resembles Rockwell, except with rounded edges. It includes 12 variants, and is the first display typeface family from Linotype. Sansational ($139) Sansational is a display sans serif typeface that includes six variants. It’s a casual font, with a playful touch, designed by Jason Walcott for Jukebox Type. Written exclusively for WDD by Cameron Chapman . Know of a new app or resource that should have been included but wasn’t? Let us know in the comments! Design and sell your first iPhone game – only $59! (reg. $249) Source

 

Integrating Google Calendar with your website

Read more
 

Google Calendar is a great tool to embed in your site, and it’s incredibly easy to do using an iFrame. Before I go into further styling for the Calendar, I’ll quickly go through how to embed your Google Calendar anywhere into your site. You can embed a live calendar for other to edit along with you, or privately edit it whilst all visitors can see your updates to events as they happen. All this is done with Google’s trademark simplicity and ease of use, however if you wish to use CSS to further style your calendar, you’ll need to spend a little time tweaking with trial and error to get it to your liking. First, you need to select the calendar which you wish to embed on your site under the ‘Calendars’ tab of your settings page. The iFrame code is available on the following page, as shown below, however you can further customize the calendar within Google. In the interface you are given, you can adjust basic settings, such as title, colors, and what elements to display. The iFrame code above will update as you make changes to the settings. Once you’re happy with you basic settings, you can drop the code anywhere you want in your site, since it’s simply HTML. The settings offered by Google are only basic, however, and so for it to fit the unique style of your site, you’ll want a bit of extra editing power. Unfortunately adding CSS rules to the parent document doesn’t work, even when adding an !important directive to each rule. The reason for this is twofold: 1. The host document and the document in the iFrame are completely separate. This seems an obvious statement to make but quite easy to overlook none the less. 2. The document in the iFrame is hosted on a separate domain (Google.com) which of course means that most browsers will block any attempt made from another domain to modify content within that document. Looking at the iFrame code from earlier, you can see the a snippet of code, similar to the following: https://www.google.com/calendar/embed?src=u3o22apdee61g5k1qised1d56k%40group.calendar.google.com&ctz=Europe/London This is where

 

Our favorite tweets of the week Apr 2 – Apr 8, 2012

Read more
 

Every week we tweet a lot of interesting stuff highlighting great content that we find on the web that can be of interest to web designers. The best way to keep track of our tweets is simply to follow us on Twitter , however, in case you missed some here’s a quick and useful compilation of the best tweets that we sent out this past week. Note that this is only a very small selection of the links that we tweeted about, so don’t miss out. To keep up to date with all the cool links, simply follow us @DesignerDepot Parallax Scrolling: An Introduction http://su.pr/1ASut4 The Importance of White Space: Take a Breath Already! http://ow.ly/a1aNZ Get rid of that mess: 10 Plugins to Help Spring Clean Your WordPress Blog http://ow.ly/a1aL4 Icon fonts are awesome, but.. http://ow.ly/a1czO 8-Bit Video Games Can Teach Us About Design And UX. Here’s what: http://ow.ly/a1cER Mark Powell takes his drawing skill to vintage envelopes & the result is stunning http://ow.ly/a1bXO Birth of a Book: a tour of Smith Settle’s handmade bookbinding process http://ow.ly/a3r23 *Its growth is then up to us Foresight.js gives webpages a future-preview ability http://ow.ly/a3pDH Seoul-based Studio fnt has an incredible body of work with clean, but powerful results http://ow.ly/a3tSj The ethics of SEO – what’s your status? http://ow.ly/a4tDX The Key To Keeping Designers Happy – Facebook Has It http://ow.ly/a4JJx Typography Shop has some cool stuff for designers and typophiles. Check them out! http://might.ly/a4dHI Drop Caps: Historical Use And Current Best Practices With CSS http://ow.ly/a4Ltn *Inspiring read Up and Running With Custom Post Types http://su.pr/2JZDMR Can You Guess The 8 Reasons Why Users Don’t Fill Out Sign Up Forms? http://ow.ly/a6kPq Webkit CSS properties allows you to enhance the look of your web pages where possible. Check it out: http://ow.ly/a6lgl Matt Needle shows you how to transform an iconic image into a visually striking, unique print http://ow.ly/a6nIk Fool.js – awesomeness & fun http://ow.ly/a7ig9 Mhm, mhm, you’re goona like this http://ow.ly/a7poT Easy WordPress pagination without plugins Astounding collection of Minimalist Movie Posters http://ow.ly/a7qXU How Ford Engages Customers With Social Media http://ow.ly/a7sbj *great insights from a connoisseur Want more? No problem! Keep track of all our tweets by following us @DesignerDepot Arnold Samuels Art Deco Font – only $14! Source

 

Techniques for creating modal windows

Read more
 

Modal windows are most commonly described as anything that captures the user’s attention, and doesn’t allow them to return to the previous state until they interact with the object in question. Now, that is a bit convoluted and I think it is better addressed with a few examples of websites that use the technique really well. One of those is Build It With Me which does it really well. If you head on over to their site and click on Sign Up, you will see a very literal example of when a modal box just works. Often times when working with modals they are used to clean up user interfaces and try to enhance the user’s experience—but it is important to remember that sometimes they do the exact opposite. Consider annoying websites with too many JavaScript popups, or spam sites that actually confirm that you want to leave the site. That is ridiculous, and sites that do these things are absolutely a no-go, so make sure you know how to use modal dialogues before going forward with the implementation. To give you a better example of how to do them right, we will talk theory—then afterwards we will get into examples to show you how to implement them into responsive design. So let’s jump right into some theory. Modal theory The basic theory of the user interface element for modals can be rather intertwined with other UI theorems that we will only tangentially touch on here. Basically, what we are looking at is a necessity that we have where we need a user to click on a specific section of the site, and to focus particularly on only that section until the completion of the task that section offers. Now, this could be used for many different things such as user logins, form elements, download pages, or it could be to simply display a photo and look at that photo’s comments. Facebook uses this to help you focus on interaction when you click on a photo, but of course they allow you to cycle through the photos there as well. You can click on them, and then it takes away all the ability to interact with the main page until you either click outside of the modal box or click the “x” to return. Basic modal theory though is very interesting, and really relies on those principles we just touched on. Let’s walk through a use-case so you can get a better idea of when and why to use one. Let’s say that you run a website where the users can register and login to their storage that they have rented from you (online storage). Well, you as a company are pretty incredibly reliant on those users having a great flow from landing on your homepage to logging in. As that is one of the most important things your site offers, you would want the user to feel compelled to login and actually make it incredibly easy for them to do so. Due to that you may have a large sign in link on your homepage, or an actual section for them to do so on the homepage, perhaps in the header. Though the problem with those are, that in the latter case, the user isn’t pointed to the login in anyway, and in the former the user isn’t compelled to make a decision. Now, I don’t condone forcing users to do anything but gently nudging them is perfectly fine—and that is what I meant by ‘compelled’. So what you could do is a have a login link that pulls down a modal window with the login form right there on it. That way they never have to navigate away from the homepage and then navigate back (via the example we stated a moment ago), and they also are 100% aware of what they are supposed to do inside of the modal. It is a very nice way to go about helping users understand what is happening and why it is happening. I have to say, I have used it myself for clients and the retention rate from homepage landing to login has increased by 35% in the past that I have seen. And those certainly aren’t numbers to shake a stick at; they are really valuable and clearly defined metrics on how much a simple modal window can increase retention and decrease bounce rate. Coding a basic modal window Let’s dive right into some code, but for now disregard what sort of modal type we are going to use and all the technicalities, and let’s just focus on the core basics. The HTML, the CSS, and the jQuery (which is a bit of how, but we will get into that later) is what we are going to focus on for now. You can see a demonstration of the finished product here . The HTML Elements First of all we are going to want to code up our modal div’s, and the link so that we can call it and get it to show up on screen when the user clicks. Again, the links are going to be what points anyone who clicks to our modal (upon said click) and the divs will be the base of the modal window for both the jQuery and CSS to interact with. The link is going to look like this: Simple Window Modal The reason it has a name attribute is because that is an element we are going to be using to call from our jQuery, so that we can call individual links and not all the links on our site. Now for the div, and content inside of our modal. This could easily be a login form, or anything really—but for now I just have a simple text area and a link to close it. Modal Window Close The reason we have a mask is so that we can toss in some nice usability and dim the entire screen when the modal gets called so that it helps the user focus on whatever content is inside of the modal, until they decide to leave. And then we close the div. The class being set to close is another attribute we are going to call from our jQuery, but let’s leave that be for now. Lastly we toss in a jQuery link into the head section of our HTML document so that we can render the latest jquery pack, because after all this code down below is based on jQuery. What we are doing here so far probably means very little to the onlooker, but the HTML actually houses the information we want the user to see once a modal is activated, so it is rather important. It could be a form element, or a link, or a series of links, or a list, or pretty much anything—but to simplify things I have included only some text. Again, what is going on is we are giving a name for the modal (in the form of a div ID) so that we can at a later point call that ID and tell it to display on the screen. That is pretty much it. We are using a sub-div though so that we actually have content that is visible. The first div calls the window, the second div displays the content. The CSS elements When working with CSS in modals the most important thing to remember is that you only want the text inside your modal to display upon a user interaction. So you don’t want it to show up on the page until the user has done something to initiate it. So the CSS we are going to use is going to hide the content until it is displayed via our jQuery and then render the text inside the child div. Let’s dive in and talk about what is going on in detail, afterwards. #mask { position:absolute; left:0; top:0; z-index:9000; background-color:#000; display:none; } #box .window { position:fixed; left:0; top:0; width:440px; height:200px; display:none; z-index:9999; padding:20px; } #box #dialog { width:375px; height:203px; padding:10px; background-color:#ffffff; } The “mask” section is probably the most interesting. Here we are setting an absolute positioning on the entire screen so it masks the whole monitor in black when the dialog model comes up. The z-index is set so that we are forced to interact with it no matter where we scroll on the page. Then I just set a simple padding so that we can have some bumper actions because we are using responsive jQuery to set this. The #box.window is setting the visibility to anything in the child div below it to hidden—so that is why it isn’t available to be seen until we allow it. The width and height are set, and the display is set to none—this way people can’t interact outside of the box until they interact within it, which is a pretty common feature of a dialogue box . The absolute position is telling the modal where to go, no matter what, on any screen that displays it (before being resized, which we will talk about later). Then we use a z-index so that no matter how they scroll on the page they see that viewable element only. The overall system is rather fool-proof and is a systematic way of making sure a user does indeed interact with our element. Then again, though, this is why it is so important to only use these sorts of things when you feel they are absolutely appropriate. The #dialog child div of #box is simply setting the system up for the content inside of it. So in this case we are using a white background, because we have set the mask div to be black once the background kicks in. This is a pretty simple bit, and it is pretty self-explanatory. Now that we have that all set up, let’s hop on down to the jQuery and see what actually makes this modal work, and why. The jQuery elements Let’s dive right in, except this time we will be using comments within the code to explain it as we go, and keep in mind – this is where the responsive modal comes into play. This is certainly where the magic happens, so to speak. $(document).ready(function() { //select all of the “a” tags with name equal to modal, so that we can differentiate between normal links and links that we want to activate a modal $(‘a[name=modal]‘).click(function(e) { //Cancel the default link behavior e.preventDefault(); //Grab the “a” tag var id = $(this).attr(‘href’); //Grab the screen height and width var maskHeight = $(document).height(); var maskWidth = $(window).width(); //Set height and width to mask to fill up the whole screen $(‘#mask’).css({‘width’:maskWidth,’height’:maskHeight}); //transition effect. This gives our modal window a nice blurred background and has a nice transition on it, so that it isn’t so choppy. $(‘#mask’).fadeIn(1000); $(‘#mask’).fadeTo(“slow”,0.8); //Get the window height and width var winH = $(window).height(); var winW = $(window).width(); //Set the popup window to center $(id).css(‘top’, winH/2-$(id).height()/2); $(id).css(‘left’, winW/2-$(id).width()/2); //transition effect $(id).fadeIn(2000); }); //if close button is clicked $(‘.window .close’).click(function (e) { //Cancel the link behavior e.preventDefault(); $(‘#mask’).hide(); $(‘.window’).hide(); }); //if mask is clicked $(‘#mask’).click(function () { $(this).hide(); $(‘.window’).hide(); }); $(window).resize(function () { var box = $(‘#box.window’); //Get the screen height and width var maskHeight = $(document).height(); var maskWidth = $(window).width(); //Set height and width to mask to fill up the whole screen $(‘#mask’).css({‘width’:maskWidth,’height’:maskHeight}); //Get the window height and width var winH = $(window).height(); var winW = $(window).width(); //Set the popup window to center box.css(‘top’, winH/2 – box.height()/2); box.css(‘left’, winW/2 – box.width()/2); }); }); This code seems quite complex, and it actually rather is—but at the same time it is only one way to do this. That is what is interesting about JavaScript/jQuery programming in general: they often have different ways to do the exact same thing. This is a statement towards how complex and complete the language of JavaScript actually is. There are a lot of other ways to do this, so please if you’d like to represent your way please do so in the comments I’d love to talk about it with you. I mean, heck, you could even do this in all CSS3—but we won’t get into that now as it isn’t yet as widely supported as jQuery is. Doing it the way we are doing it here gives us a ton more control over the final product and a lot of functionality built in, as well as some usability and design parts that are really important. For instance, we are getting the fade to black and transitional overlay for the modal window, and we are also getting the ability to close the modal window—which we wouldn’t get if we did a super simple function to show this process. Also the responsive element is what is really important here, in my opinion. Go ahead and toss all this code into an HTML page and then re-size it. Wrap the CSS in tags, and the jQuery in tags in the head then toss the HTML in the body—and you are all set. Re-size the page after doing all that and you will see that the modal actually changes locations based on how big the page is, and it tries to stay roughly centered. So if you were on a Macbook Air with it’s 13 or 11inch screen’s it’d look very similar to if you were on a 27inch iMac. I hope that helped you get a better understanding of Modal Windows, and their best usages. Remember to not overdo it, and to use it as a way to enhance rather than necessitate and you will be just fine. They are a beautiful tool, and one that many sites you probably never even realized employ for almost everything. So go ahead and buckle down, and learn some JavaScript to reproduce this great effect! I mean, there couldn’t be a better time. What are you waiting for? Dain Miller is a freelance web designer and developer based out of Madison Wisconsin. He is mainly focused on building products in the online education space, and he has a passion for responsive design. You can follow him on twitter at @_dain . What are the best examples of modal windows you’ve seen? What’s your favorite technique for creating them? Let us know in the comments! The Photoshop Styles Bundle (over 400+ styles) – only $25! Source

 

Our favorite tweets of the week Mar 19-Mar 25, 2012

Read more
 

Every week we tweet a lot of interesting stuff highlighting great content that we find on the web that can be of interest to web designers. The best way to keep track of our tweets is simply to follow us on Twitter , however, in case you missed some here’s a quick and useful compilation of the best tweets that we sent out this past week. Note that this is only a very small selection of the links that we tweeted about, so don’t miss out. To keep up to date with all the cool links, simply follow us @DesignerDepot Tablet Computers: Fad Or Future? http://ow.ly/9Jbnh The Art of Content Marketing http://ow.ly/9JbHJ *Cool article via @ smashingmag By 2050, 70% Of The World’s Population Will Be Urban. Is That A Good Thing? http://ow.ly/9JbLO Great Graphic Design by Muggie Ramadani, a Design Studio from Denmark http://ow.ly/9Jc9b W+K Shanghai Creativity Test – nice video you’ll enjoy seeing http://ow.ly/9JchN Hmmm: Science Says Creativity And Dishonesty Go Hand-In-Hand http://ow.ly/9LCsK Percolate is tying to get into the heads of some curators in this very creative video: http://ow.ly/9LFQs Demons, devils, vampires, monsters – face it, creepy brands are appealing http://ow.ly/9LEoo Surprisingly Functional: The World’s First Gesture-Based Calculator http://ow.ly/9N8pe *We want this! What Americans Would Give Up For The Internet: Alcohol, Exercise, Showers, Sex http://pinterest.com/pin/267682771571910449/ Check out this cool tutorial about a new responsive navigation http://ow.ly/9Ne1M (thanks @ tkenny ) Check out the work of Marcelo Schultz, some wonderful typography pieces http://ow.ly/9N9dJ The Elements Of Navigation http://ow.ly/9Nfpt *Great read Awesome Inspiration: Beautifully Made Process Diagrams http://ow.ly/9NqQ5 Have you ever wondered how much code should web designers need to know? http://ow.ly/9Op1b Weird And Wonderful, Yet Still Illegible http://ow.ly/9Op7v *Inspiring read on typography Box CSS is a framework based on box-sizing and is also something that you might find interesting http://ow.ly/9Q9Ej The Extinction of the Scrollbar http://ow.ly/9PNcW *Great article by @ uxmag Design the New Business: a love story http://ow.ly/9PHX4 It’s easy to get caught up in the big picture. But what about the design in small spaces? http://ow.ly/9QaNf Surrealism & great slow motion in the best footage from the later Shuttle launches http://ow.ly/9Qbig Want more? No problem! Keep track of all our tweets by following us @DesignerDepot 12 Business and Portfolio WordPress Themes – only $17! Source

 

10 of the coolest CSS3 and CSS effects

Read more
 

We all know it and we all love it, and of course by now you probably already know I am talking about CSS and CSS3. Actually, we should probably take a moment to thank CSS3 before going any further for speeding up the load times for all of your favorite sites.

 

What’s new for designers, March 2012

Read more
 

The February edition of what’s new for web designers and developers includes new web apps, frameworks, jQuery plugins, icons, productivity tools, responsive design resources, and some really great new fonts. Many of the resources below are free or very low cost, and are sure to be useful to a lot of designers and developers out there. As always, if we’ve missed something you think should have been included, please let us know in the comments. And if you have an app or other resource you’d like to see included next month, tweet it to @cameron_chapman for consideration. Osmosis Osmosis is a simple app for managing your client questionnaires in a way that makes it easier to interact with your clients and gather the information you need from them. It’s made to fit into your workflow while still being easy to use for your clients. MockVault MockVault is a web app for getting approval from clients for your designs. It guides them through the design you’ve created, making it easier for them to review and approve. Trajectory Trajectory is a new app for managing software projects. It makes it easy to write user stories, track bugs and to-dos, while also facilitating discussion. The Responsinator The Responsinator lets you test any live website for responsiveness on a variety of mobile devices, including tablets and e-readers. All you have to do is enter a URL. Font Awesome Font Awesome is an icon font designed specifically for use with Twitter Bootstrap. It includes over 150 icons, is free for commercial use, offers infinite scalability, and is screen reader compatible. TOC Need a table of contents for your website? TOC is a jQuery plugin that does just that. It’s completely customizable, automatically highlights the current section, and is extremely lightweight. Simple Green SimpleGreen is an icon pack for sustainable businesses. The free version includes 48 environment and social icons, while the paid version includes 200 icons. Codiqa Codiqa is a tool for rapidly creating mobile app prototypes. It’s drag-and-drop jQuery interface makes it quick and easy to build what you need, and it also includes tools for sharing those prototypes. Iubenda Iubenda lets you quickly and easily generate a privacy policy for your website. Just add services, insert the owner, embed the policy, and show the result. Curtain.js Curtain.js is a plugin for creating a web page with multiple fixed panels that unroll with a curtain-rising effect. Navigation is done via keyboard, scrollbar, or your mousewheel. Wonderflux Wonderflux is a new free WordPress theme framework that lets you rapidly create WP themes. It’s licensed under the GPLv2, so you can use it on unlimited client, personal, and commercial sites. Centratissimo Centratissimo is an all-centered, auto-resizable layout. It includes smooth scrolling between pages and dynamic resizing, along with some other neat features, all done with jQuery. Turn.js Turn.js is a jQuery plugin for creating page-turning transitions with HTML5. It uses hardware acceleration, works on tablets and smartphones, is lightweight (only 6K), and is easy to manipulate. jQuery Org Chart jQuery Org Chart is a plugin that lets you render tree-like structures with nested elements. Data is entered in a nested unordered list, making it incredibly easy to use. bgStretcher II bgStretcher is a jQuery plugin for adding a full-page background image that proportionally resizes to fill the entire window area. It’s unobtrusive and simple to setup, and works with all modern browsers. Hogan.js Hogan.js is a JavaScript templating engine developed by Twitter. It’s only 2.5K, and was developed against the mustache test suite (so all the specs for that hold true for Hogan.js). Entypo Entypo is a set of more than a hundred pictograms, available as an OpenType font, a web font, and vector EPS. It’s Creative Commons Attribution-Share Alike licensed, so you can use it on personal and commercial projects. Prefix Free Prefix Free processes your code to add the current browser’s prefix to any CSS code, so you can use only un-prefixed CSS properties in your code. It works in IE9+, Opera 10+, Firefox 3.5+, Safari 4+, and Chrome. Zoomooz Zoomooz is a jQuery plugin for making any element on your website zoomable. It’s supported by all modern browsers and has detailed settings options. Underscore.js Underscore.js is a utility-belt library for JavaScript that gives you a lot of the functional support you’d expect from Ruby or Prototype.js without extending any of the built-in JavaScript objects. It provides over sixty functions that support the usual functional suspects, including map, select, invoke, as well as more specialized ones. Socialico Socialico is a set of 74 social media icons, combined with a single weight font. Lowercase letters show the icons in a circle, while the capital letters of the same alphabet show the icons without the circle. Warm Framework The Warp Framework provides a set of tools for developing cross-platform themes. It currently supports Joomla and WordPress, and can be extended to work with other systems. It makes it possible to create themes that are easily portable between supported systems while retaining all features. Glisse.js Glisse.js is a responsive and customizable jQuery photo viewer. Transitions between images are entirely assumed by CSS3. Collusion Collusion is a Firefox add-on that lets you see all the third parties that are tracking your movements online. In real time, it shows how that data creates a spiderweb of interaction. Cyfe Cyfe is an all-in-one business dashboard that lets you see an overview of your entire business in real time. View data from Google Analytics, Salesforce, AdSense, MailChimp, Amazon, Facebook, WordPress, Zendesk, Twitter, and more from a single location! jQuery HTML5 Placeholder Plugin This jQuery HTML5 Placeholder Plugin adds cross-browser support for the HTML5 placeholder attribute functionality via jQuery. It has a couple of customization options and usage is very straightforward. FanMix FanMix is a “social inbox” that lets you manage all of your conversations online from a single inbox, just like email. Probably the most useful feature is the ability to search across your entire social history. Adobe Photoshop Lightroom 4 Lightroom 4 was just released and includes some great new features. It includes new adjustment controls to maximize dynamic range from cameras, as well as new and improved auto adjustments. The upgrade is $79, while the full version is $149. Geared (name your price) Geared is a distressed slab serif typeface with a style reminiscent of athletic t-shirts. It comes with four unique weights: thin, regular, bold, and extrabold. Abraham Lincoln (name your price) Abraham Lincoln has perhaps the best tagline of any typeface: “Tall. Skinny. Honest.” It was inspired by the proportions of its namesake and the advertisements and playbills of the 1800s. Sedgwick Co (free) Sedgwick Co is an uppercase slab serif typeface inspired by the city of Wichita, KS. It’s both classic and modern, and reminscent of western-style fonts. Web Serveroff (free) Web Serveroff is a modern, condensed sans serif typeface. It comes in both regular and italic styles. Kommisar ($16.25) Kommisar is loosely based on the Trajan capital in Rome and influenced by Father Edward Catich, an American sign painter and lettering artist. It’s contemporary, but with a decidedly antiquarian look. Yeti ($5) Yeti is a display typeface, hand-drawn with a hint of calligraphy. It supports multiple languages and even comes with some graphics and web icons. Intro (free) Intro is a free geometric font from FontFabric. The letterforms are mostly created based on simple geometric shapes — triangles, circles, and squares. Written exclusively for WDD by Cameron Chapman . Know of a new app or resource that should have been included but wasn’t? Let us know in the comments! How to learn iOS Programming – 55% Off! Source

 

How to optimize your CSS

Read more
 

Keeping your CSS files small and organized is very important, especially if you’re going to spend any time editing your site in the future, (or if others are gonna be using the code i.e. clients). Helpfully, there are a number of different techniques which can be utilized to aid organization and size of your CSS files in order to make them more streamline. Having more streamlined CSS will save you time and stress in the long run so it’s important to get it right. Firstly, keeping a single stylesheet, normally named style.css, is a good place to start in the organization of your CSS. Having a single stylesheet for the majority (if not all) of your website keeps everything together in one place which makes the editing process more streamlined. Code in Style In order to keep your CSS files more streamline it is important to start by using a good code editor, such as TextWrangler on Mac, or Notepad++ on Windows. This has a number of key benefits. As well as being easy to use, a program such as TextWrangler also color-codes different parts of code which helps in the coding progress. This is very useful for making sure that every style you have defined is spelled correctly as the style won’t change color unless it is recognized by TextWrangler as a CSS style. Tabs is another good feature of TextWrangler allowing you to keep open more than one file at a time which makes cross-checking easier. To further streamline your CSS files it is a good idea to establish a set layout that is used throughout all your CSS stylesheets. Perhaps the most commonly used technique is to define the ID or class (using # or . respectively) then an open bracket { followed by an indented new line to begin styling, as so: #header { width:500px; height:250px; } By following this commonly used technique your stylesheet will be more organized and easier to code. The following techniques will all be aided by making sure that your layout is consistent throughout your CSS files. Organize by Location With any site the number of CSS IDs and classes used can easily reach a large number, so it is vital that your CSS stylesheet is well organized. One of the techniques that is extremely useful is to order your IDs and Classes by where they appear on the website itself. For example; placing the CSS styling for the header towards the top of the stylesheet and the Styling for the footer towards the bottom. By keeping this consistent across all the websites you code whenever you open a stylesheet you have created you will know exactly where to look to find the style you wish to edit. Also, to further aid organization of styles it is wise to name your elements with obvious names such as Header, Footer, Sidebar, Main Content etc., which allows you to work out what each piece of styling refers, further aiding organization. If elements change purpose, though, make sure that their names reflect the changes; having an element named Header that is at the bottom of the page can become very confusing and makes ordering by location a more daunting task. CSS Comments This leads onto using CSS comments within your stylesheets. Although not always used, CSS comments to be very helpful to distinguish different parts of the stylesheet. If you have structured your stylesheets with styles relating to the header towards the top and vice versa, then you can utilise CSS comments to mark the start and end of differing sections such as the header and footer or the main content elements. Using CSS comments is simple. Anywhere within the stylesheet start the comment with /* and then be sure to end the comment with */ . Crucially, anything within the comment, be it code or text, will not be parsed by the browser, which makes CSS comments very useful for leaving notes and descriptions relating to various parts of the stylesheet. Perhaps a further two uses for CSS comments could be to leave comments for your clients, so should they wish to make further edits to their site in future they have a guide in place to help. Also, there may be differing styles for the same ID or class that you wish to preserve for potential use or for testing. Instead of labeling IDs and classes with a 2 at the end, e.g. header2 , stopping that styling from being parsed simply wrap what would be header2 in /* and */ . As well as keeping your stylesheet more organized, as using the ‘2 technique’ can easily become messy, this technique also aids in the creation of different versions of styling within the stylesheet in an unobstructive way

 

8 tools to make your website for free

Read more
 

It’s the truth that sometimes we have to and want to produce web sites on a budget. It’s also true that sometimes we may just want to put up and create some sites for fun, so we don’t want to spend a ton of money on them. Well fortunately, that’s where the web comes in. There are so many great technological advances that allow us to create and put up websites, not just on a budget but for free. From web design to development, there are all-free services that allow us to create PROFESSIONAL web sites, not just template-based sites reminiscent of the late 90s. Today, we’ve picked 8 of the best sites to help you make your site—that’s right—everything is web-based and FREE. The design For many of us who are designers, we may start out with the design of the web site. It helps us visualize what we want where and gives us an idea how everything is going to be set up and work. Now many times designers will use programs such as Adobe Photoshop or Adobe Fireworks to create a layout. Below are three photo editing apps that I think are worth a try. Phoenix by Aviary What the developers say: “From basic image retouching to complex effects, Phoenix delivers the key features of a desktop image editor with the simplicity and accessibility of a web-based application.” What everyone is saying: The way that Phoenix is presented to us is as a tool that is great for image manipulations and adjustments and similar. The great thing about Phoenix is it has many of the features that are found familiar in Photoshop, but are much simpler. Everything that is necessary is there and is a bit more intuitive than more complex software like Photoshop or even Gimp. An added plus: Phoenix is created by Aviary, which has a plethora of other web based applications, such as a vector design application and video effects application. You are able to save your files on Aviary (as long as you’re a registered user) and you can easily open projects between applications. This is great for any designer or illustrator who wants to take their vector creation and make a website layout out of it. You are also able to import and work with PSD files. The drawbacks of this application are there aren’t a ton of filters. This doesn’t matter much if you are just making basic changes to photos (crop, transform, etc.), but if you are here to create a more complex layout or design, you may want to try a different application. Also, Aviary saves your work by default under a Creative Commons license, so unless you make changes there, you are going to be sharing your work all over. It can also publish your work for all to see through the Aviary network, if you choose to. Editor by Pixlr.com What the developers say: “ Pixlr Editor is a free online photo editor with a prefessional touch. Fix, adjust and filter your images…” What everyone is saying: Pixlr Editor pretty much presents itself as the online Photoshop. This application isn’t as easy to understand as the previous, Phoenix. There are so many features and filters in this Editor that are unique to this program, most for editing and retouching images. It would be very hard to use this application from scratch unless you have some knowledge about photo retouching, as well as some Photoshop knowledge. The sophistication of this application allows for more image heavy layouts and complex designs. There are plenty of filters and adjustments that help customize the looks of your images and design. There aren’t a lot of draw backs here, other than it’s a lot more complicated than most online applications, but because of that, there is a lot more customization that can be done. Unfortunately, you are unable to open and edit PSD files. However you are not required to have an account in order to save the files you create with Pixlr Editor—you can save them right on your hard drive. Splashup What the developers say: “ Splashup, formerly Fauxto, is a powerful editing tool and photo manager. With the features professionals use and novices want, it’s easy to use, works in real-time and allows you to edit many images at once. Splashup runs in all browsers, integrates seamlessly with top photo-sharing sites, and even has its own file format so you can save your work in progress. “ What everyone is saying: This application is a nice mix between the simplicity of Phoenix and the sophistication of Pixlr Editor. It seems to be an application that is close to—but not quite—a Photoshop copycat. I would actually say it isn’t as intuitive, as all the tools and buttons are not the same and it can get kind of confusing. However, that does not change the power of the designing capabilities. The biggest drawback I found with Splashup is that it is built with Flash. It’s not a huge deal, but it can probably suck up a lot of memory and go through many bugs and glitches. Also again, I didn’t find it as intuitive and easy to use as the other programs, mainly because of the Flash implementation and difference in some buttons. The bottom line, though, is Splashup is fully capable to design a web layout. Unfortunately again, this program does not import PSD files, but you also don’t need to have an account to save files. You can save them onto your hard drive as well as an array of other places (such as Flickr, Photobucket, etc.). Sumo Paint What the developers say: “ Sumopaint is

 

Mozilla Labs Apps set to allow developer submissions for Mozilla Marketplace at MWC

Read more
 

Been keeping up with Mozilla Labs’ Apps project? Today the company’s focused on developers, with pleasing news if you’ve been looking to get your app’s feet wet in it. In the coming weeks at Mobile World Congress , the Firefox maker will finally open its self-titled Marketplace’s doors for app submissions. If you’re unfamiliar, Mozilla’s been working to create an “operating system- and device-independent market,” based on its own APIs, HTML5 and other open source materials. The end result will be the ability to use said apps without being locked down by your devices and their respective app stores. The store is set to open up for consumer consumption later in the year, so now’s your chance to reserve your software’s spot and name on the list. More details await in press release after the break and at source link below, while you get your code ready. Continue reading Mozilla Labs Apps set to allow developer submissions for Mozilla Marketplace at MWC Mozilla Labs Apps set to allow developer submissions for Mozilla Marketplace at MWC originally appeared on Engadget on Wed, 22 Feb 2012 14:19:00 EDT. Please see our terms for use of feeds . Permalink Mobile Burn | The Mozilla Blog | Email this | Comments