Design, CG Graphics & Inspiration

Web Design Digest No.1 (20 — 26 April 2013)

This is weekly Web Design Digest No.1. Оnce a week, we will publish a digest of the latest news, useful tools for web developers, freebies and many more cool stuff from the world of web design. Check this out every Friday.

Top 5 Posts

Thank God We Have A Specification!

This article is packed with a number of quirks and issues you should be aware of when working with CSS3 transitions. Please note that I’m not showing any workarounds or giving advice on how to circumvent the issues discussed.

Magic Numbers in CSS

Despite the super fun sounding name, magic numbers are a bad thing. It is an old school programming term for “unnamed numerical constant”. As in, just some number plunked into the code that is probably vital to things working correctly but are very difficult for anyone not intimately familiar with the code to understand what it is for. CSS is loaded with unnamed numerical constants, but they are usually paired with properties and in the context of a selector so there is little mystery. There are magic numbers in CSS though, and they are still bad.

2013 Font Trends

2013 brings the appearance of Font Trends that reflect the changing internet. Different trends in typography are constantly emerging, and we think that’s great over here at Creative Market. There are constantly new and cool typefaces emerging from talented designers, and we love being able to showcase their great work. After conducting some research and seeing what fonts are our top sellers, I compiled a list of currently trending fonts.

Fresh Freebies from Dribbble

We’ve decided to share some Dribble freebies among which you can find login forms, UI kits, icons, player widgets and other stuff. Use these resources to enhance your creations.

Simple YouTube Menu Effect from Codrops

A tutorial on how to recreate the effect of YouTube’s little left side menu. The idea is to slide a little menu icon to the right side while revealing some menu item list beneath.

Useful Bookmarklet

Useful Bookmarklets for Chrome, Mozilla Firefox, Safari & Internet Explorer

Bookmarklets are often used to shorten long URLs, translate web pages, save pages and do more & more more with just a single click… Here are some bookmarklets which can be useful…

Breakpoint Inspector

BreakpointInspector is a CSS media query bookmarklet. It displays the CSS media queries used on a page.

Viewport resizer – Responsive design bookmarklet

Viewport resizer is a browser-based tool to test any website’s responsiveness. Just save the bookmarklet, go to the page you want to test, click on your created bookmarklet and check all kinds of screen resolutions of the page.

The Printliminator

The Printliminator is a bookmarklet with some simple tools you can use to makes websites print better. One click to activate, and then click to remove elements from the page, remove graphics, and apply better print styling.

Responsive Webdesign

Clown Car Technique for Responsive Images

We can use media queries within SVG to serve up the right image. The beauty of the “Clown Car” technique is that all the logic remains in the SVG file. I’ve called it the “Clown Car” technique since we are including (or stuffing) many images (clowns) into a single image file (car).

Responsive drop shadows

Back in the ancient days of fixed-width web design, adding a drop shadow to an element used to be a matter of exporting an image containing the shadow from Photoshop and placing it as a background image on the element. Job done.

Cdding

Performance Checklist for the Mobile Web

Getting started with HTML5

Matt West explains the fundamental principles you’ll need to get going with HTML5. Never written a line of code before? Start here

Simple YouTube Menu Effect from Codrops

A tutorial on how to recreate the effect of YouTube’s little left side menu. The idea is to slide a little menu icon to the right side while revealing some menu item list beneath.

ARIA’s application role

Léonie Watson introduces ARIA’s application role, and explains how it works and under what circumstances it’s appropriate to use it

A Starting Point for Web Design

The Markup Framework is a collection of layouts, widgets, typographic styles and other UI components to use as a starting point for your own Web designs.

How to use HTML5 audio (part 1) – Video

Showing multimedia fallback content when no supported source is found

There is nothing more frustrating than things going wrong without you knowing what happened. Things breaking with a very obvious reason are not as bad. Say you drop your phone and you see the display smashed – there is no question why the touch interface doesn’t work any more. But when nothing happens and everything should be OK, we get very cross very fast.

Building a Google Maps Application with Updating Markers

If you dig beyond the basic “Show a map of X” and really examine the API, it is incredibly powerful. Recently, someone asked me an interesting question about Google Maps. Is it possible to use Google Maps to track moving items? I had worked with Google Maps and markers before, but I had never built a demo that included “live” markers that could move. In this article I’ll share the proof of concept I built that demonstrates this feature.

One less JPG

People often build beautiful sites with multiple easy-to-use JavaScript libraries. Then, when it comes to addressing frontend performance, suddenly those libraries are an enormous download that the users are forced to bear.

CSS3 Tips & Tricks

Intro to CSS 3D transforms

Ladies and gentlemen, it is the second decade of the second millennium and we are still kicking around the same 2D interface we got three decades ago. Sure, Apple debuted a few apps for OSX 10.7 that have a couple more 3D flourishes, and Microsoft has had that Flip 3D for a while. But c’mon, 2011 is right around the corner. That’s Twenty Eleven folks. Where is our 3D virtual reality? By now, we should be zipping around the Metaverse in super-sonic motorbikes.

Using tabindex with :focus

For those who have studied web site accessibility, this is probably old hat. Admittedly, I haven’t spent enough time thinking about accessibility, so this is one of those things I didn’t even realize until recently. So shame on me. :)

A Look at What’s Coming Up: CSS3 Flexible Boxes

Layout is probably the most important element when designing a website. When visitors understand your layout and feel like they can play with it, their experience becomes pleasant, they stay longer and will visit your site regularly. We’ve navigated through sites with high-quality content but darkened by very confusing design and a totally messed up layout. Our reaction is, of course, getting out of there as fast as we can.

ptb/flexgrid: a flexbox-based CSS grid in 3.6k

ptb/flexgrid is a next-generation web page layout framework based on flexbox: the CSS Flexible Box

Native CSS feature detection via the @supports rule

With browsers of varying degrees of standards support still in use for browsing the Web (from decent modern browsers, to old rustbuckets like IE6), we are pretty comfortable with the idea of sending different code to different browsers to provide different-but-still-acceptable user experiences. This is done in a variety of ways, but generally it relies on the rather error-prone browser detection, or the cleverer and more robust feature detection.

JavaScripts

PathFinding.js

PathFinding.js – visualization algorithms for finding ways

Stealing the users back button with the History API

Gruber posted a video of a website that does some dodgy history insertion. Go to tgdaily.com let it load (it has horrible perf so give it a bit) and click back and you’ll notice that you get taken back to exitjunction.com with tgdaily as a query. Insert rage face here. Once past rage face open dev tools and investigate.

FPSMeter

imple JavaScript library for sexy, fast, and themable FPS meter.

jQuery Builder

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

Sly – JavaScript library for one-directional scrolling

Sly is a JavaScript library for advanced one-directional scrolling with item based navigation support. It can be used as a simple scrollbar replacement, as an advanced item based navigation tool, or as a great navigation and animation interface for parallax websites. This is achieved by a powerful & developer friendly API that provides a bunch of very useful methods giving you control over everything.

Intention.js – DOM manipulation based on an html attribute spec

The interface to define differences between documents should be in HTML. The manipulation of attributes is a better way to restructure a page than media queries, because relying on CSS/HTML document flow patterns to change the hierarchy of a design is not sufficient to convey appropriate information. Intention.js allows for dynamic html restructuring, so that the html for a given context transforms into an ideal state for that structure.

The concepts of WebGL

This post is not going to be yet another WebGL tutorial: there already are enough great ones (we list some at the end). We are just going to introduce the concepts of WebGL, which are basically just the concepts of any general, low-level graphics API (such as OpenGL or Direct3D), to a target audience of Web developers.

Hand.js: a polyfill for supporting pointer events on every browser

How about being able to write a single code base for handling mouse, pen, touch in your web site that will work across all modern browsers? Here is a polyfill that will help you use Pointer Events and offer users a great experience on your site independently of the modern browser they are using.

Web Desing

USABILITY CHECKLIST

Catch common usability problems before user testing.

Pixel Perfect Precision™

This is great pdf book for webdesigners, how to create pixel-to-pixel design.

Repurposing Photoshop For The Web

Like any overzealous teenager aspiring to be a Web designer back in 1999, I found myself in an “Electronic Design” class, behind the wheel of one of those old-school aqua iMacs. If you found yourself in a similar situation, chances are you were given Adobe Photoshop as your vehicle for designing the Web. For me, it was version 6.0.

Mobile: Never Use Native Drop-Downs for Navigation

Many responsive mobile sites are using native drop-downs (as in: a select tag) for main navigation and many plugins have been developed for this specific purpose, yet our usability research shows that this is a poor strategy. On the tested m-commerce sites that used native drop-downs for navigation, the test subjects showed decreased control and overview of the menu items.

How to Shape Text Fields in Photoshop | Treehouse Quick Tip

Facebook Reveals New Logo

Facebook has rolled out a new logo, and given some of its other icons an update for the first time in years.

2013 Font Trends

2013 brings the appearance of Font Trends that reflect the changing internet. Different trends in typography are constantly emerging, and we think that’s great over here at Creative Market. There are constantly new and cool typefaces emerging from talented designers, and we love being able to showcase their great work. After conducting some research and seeing what fonts are our top sellers, I compiled a list of currently trending fonts.

Android cheatsheet for graphic designers

Graphic designers aren’t programmers and sometimes don’t know how to properly prepare graphic assets for developers. This simple cheatsheet should help them to do their job better, and to simplify developers’ lives.

Trending Now: Designing With Video Backgrounds

Using video, though, does come with its challenges and may not work for every project. But use of video backgrounds is beginning to really take off. Here’s a primer on what you need to know to get started. (And make sure to check out the sites below to see just how the videos look in action.)

WebDesign Freebies

Fresh Freebies from Dribbble

We’ve decided to share some Dribble freebies among which you can find login forms, UI kits, icons, player widgets and other stuff. Use these resources to enhance your creations.

10 Free Useful Incoming Call PSD Files For Mobile Designer

In this post we bring you an assortment of 10 free useful incoming call psd files to use on your smartphones app – have a look and use the best!

PSDDD

PSDDD is a collection of resources from Dribbble for the creative professional.

Bamq Typeface – Free download

Typeface design inspired by the modern minimalist architecture. It has geometric shapes and big spaces.
BAMQ Family set composed by the styles: Regular and Bold.

A Collection Of Cool and Free Graffiti Fonts

Beautiful examples of free graffiti fonts for your delight. If you have graffiti inspired design projects you may check the below free graffiti fonts.

8 Beautiful and Free Flat Icon Sets

Useful flat icon sets for your projects.

22 Sets of Free Icon Fonts For Designers and Developers

In this post we have gathered 22 sets of free icon fonts to use in your design projects.Icons fonts have become very popular among designers in the last 2 years.

Thanks for reading. Yours Splashnology

You might also be interested in..

Visit WebDesign Showcases on Increateble

  • Zfort Group,
  • April 30, 2013

SHARE THIS POST

The article has been written by the Zfort Group, an IT Outsourcing Services Company. Zfort Group specializes in top-notch IT outsourcing services since 2000.

Subscribe for the hottest posts

Subscribe to our email newsletter for useful tips and freebies.