Links for today

Griddify, a Tiny Photoshop Panel for Guides and Grids

How to solve the hamburger icon problem

How to use the infinite scrolling trend, the right way

The Definition of User Experience (UX)

ShortcutMapper – Keyboard Shortcuts for Popular Apps – optimize and compress your images and photos

Export SVG for the web with Illustrator CC | Creative droplets

Pub/Sub JavaScript Object

smallworld.js It’s a (small utility for generating a) small world.

7 Patterns to Refactor JavaScript Applications: Service Objects

Using the HTML5 Gamepad API to Add Controller Support to Browser Games Simplest possible examples of HTML, CSS and JavaScript.

Injecting SVG With JavaScript

Hook.js – Pull to refresh. For the web.


Create Revealing Content Overlays With CSS3 Transitions

Links for the week

Designing In The Transition To A Multi-Device World

Carousel Interaction Stats

Character Codes — HTML Codes, Hexadecimal Codes & HTML Names

Why Responsive Web Design Has To Win Out

Improving Your Responsive Workflow with Style Guides

Offsetting an HTML element in a flexible container

Adding Network Functionality To Any .Net Application in 3 Lines of Code

How Do You Structure JavaScript? The Module Pattern Edition

All you need to know about CSS Transitions

5 APIs that will transform the Web in 2013

A JavaScript Security Flaw | Alex MacCaw

Revisiting JavaScript Objects

jQuery custom content scroller

Resize flash dynamically with javascript and actionscript

Write another jQuery plug-in, kill a unicorn

Parsley.js Javascript forms validation.Powerful, UX aware & Dead simple.

10 of the best polyfills

Design tips and tricks ,resources and Mobile Web Design for mobile devices, iPads and Iphone

Designing for the Mobile Web

The number of users browsing the Web from a mobile device continues to rise, yet most mobile web sites are still sub-par.

The thing is, creating a great web experience for users of mobile devices is much easier than you might think. In this article I’ll introduce seven fundamental steps that, if followed, will help you avoid the pitfalls that have caused many other mobile sites to fail. By the end of this article you’ll know exactly where to focus your efforts in order to build a successful mobile site.

A Guide to Mobile Web Design Tips and Tricks

mobile-web-mashHaving a mobile-optimized web site can really make your site stand apart from the pack. Even though smartphones like the iPhone and Google Android devices can display “the full web,” having a web page formatted for smaller screens and with features that can take advantage of a touch screen, geolocation, or address book functionality can make the mobile web browsing experience that much better.

How to serve the right content to mobile browsers

The modern web is viewed on many different devices, so it is getting increasingly important for us to think about how to create our web sites so that they will serve the right content to users, no matter what device they are using. We have many technologies at our disposal, including media types, media queries, and browser sniffing, but what’s the best way to handle this?

Return of the Mobile Stylesheet

The past couple of years have seen numerous new web-capable mobile devices arise, including Apple´s iPhone and its Safari browser, the creation of Google´s Android platform and Webkit-based browser, the rise of so called “full web” browsers (Nokia´s S60, Opera Mobile and Opera Mini, among others), the early development of Firefox´s mobile version, and more. These mobile browsers improve users´ experiences, giving them access to websites formerly off-limits to most mobile devices. Indeed, as a 2008 Nielsen Media Research report highlighted, mobile devices have increased traffic by an average of 13% across several popular websites.

Mobile Web Design Trends For 2009

Web designers know that the industry involves plenty of change, and continuous adaption and development of skills is required in order to stay up to date. In the past few years, one of the biggest areas of change has been the amount of Internet users who are accessing websites via phones and mobile devices. As a result, Web designers have a growing need to be educated in this area and ready to design websites that accommodate this audience.

Forms On Mobile Devices: Modern Solutions – Smashing Magazine

Mobile forms tend to have significantly more constraints than their desktop cousins: screens are smaller; connections are slower; text entry is trickier; the list goes on. So, limiting the number of forms in your mobile applications and websites is generally a good idea. When you do want input from users on mobile devices, radio buttons, checkboxes, select menus and lists tend to work much better than open text fields.

Featured Mobile App Makers | – Home of the Finest Mobile App Makers

Quick Tips for Creating a Mobile Optimized Site

Last year mobile web usage increased 148% worldwide. In the near future as smarthpones become more and more ubiquitous this number will continue to shoot up. As a developer, the time has arrived for you to seriously consider whether you should begin accommodating your mobile audience.

5 Can´t-Miss Usability Tips for Mobile Website Designs

Finding your way around a majority of the mobile websites that exist has become a nightmare with the lack of proper usability being implemented into their designs.

This has caused the quality of designs (especially the mobile usability factor) to decrease on a larger scale when compared to the sites that not only practice good mobile aesthetics, but allow their users a smooth transition between the regular site to an enticing experience on their mobile devices.

Because of the instability in a lot of the mobile web design information that is being distributed on the web, a lot of websites have very poor mobile interface designs. Below, we’re going to cover a few simple, yet prominent steps to designing a much more effective interface and increasing the quality of a mobile websites usability.

40 Detailed and High Quality Mobile Phone .psd Source Files

psd source files are truly amazing and unique resources – not only do they showcase the talents of the artist, but they also offer the opportunity to dig deeper and discover how they were created. They give you the chance to learn, unlike tutorials which are step-by-step, with a .psd file you roll your sleeves and you get your hands dirty delving into its inner workings.

Whether it is for learning new techniques, for wireframing your latest mobile app or if you are just curious about the design, all of the .psd files below have one thing in common – They are highly detailed and of the highest quality. Thanks to all the artists.

Coding for the mobile web

Good evening — in this article I will aim to demystify the world of mobile web development, or in other words, developing web sites so that they will provide an acceptable user experience on mobile devices. I’ll run through how “the mobile web” differs from the normal web, the basics of techniques you can employ to make your sites work sucessfully on both mobile and desktop browsers, some general DOs and DON’Ts for mobile web design, and numerous resources where you can go to find out more information.

A web standards approach for delivering content beyond the desktop

Much has been written about mobile devices. Plenty has been written about developing websites for the so-called “standards era” of the web. However, little has been written about the two colliding. This resource aims to fill that void.

Determine iPhone orientation using CSS

With the beta of Firefox 3.5 showcasing 35 new features over 35 days, the article on CSS3 media queries stuck out, the orientation detection really got my attention and immediately put my thought process to mobile devices, in my case the iPhone. I thought this is great maybe this has been snuck into the iPhone 3.0, unfortunately for us it wasn’t. That didn’t stop me and I got thinking about how it could be done if at all on the iPhone without using JavaScript.

Showcase of Designs Optimized for iPhone

Over the last couple of years, mobile devices have managed to gain mainstream popularity. With iPhone, making mobile Web applications finally usable by broad masses, web design can now be applied to mobile applications as well. In this post we are focusing on designs that are specifically optimized for mobile devices, in particular iPhone.

iPad CSS Layout with landscape / portrait orientation modes

The iPad has finally launched in Australia today, hooray! I will probably get one soon so I can continue to optimise my CSS layouts for as many devices as possible. But in the mean-time I will continue using the iPad emulator that comes with the iPhone SDK.

Prototyping for the iPhone using Fireworks

So, you are a designer. A concept-, interaction- or visual designer and you use Adobe Fireworks for sketching, wireframing, visual design and of course prototyping. Great choice. I have been working with this program for many years. I think it is the most efficient tool for creating anything based on pixels and consisting of more than one screen. In this post I use Fireworks CS3, but you won’t have any problems creating something simular using CS4.

Optimizing Web Content for the iPhone

The first step in optimizing web content for iPhone OS is to separate your iPhone OS-specific content from your desktop content and the next step is to tailor the web content for iPhone OS. You might want to follow these steps even if iPhone OS is not your target platform so your web content is more maintainable in the future.