Pinboard: bookmarks for viljami tagged 'webdesign'

RSS

viljami + webdesign 557

« earlier

[close]

select: none ‧ this page ‧ all pages no items selected

mark as read ‧ unread ‧ private ‧ public ‧ add stars ‧ remove stars ‧ delete

tag: add or remove tag

THIS IS BOILERPLATE confirm ‧ cancel

CSS3 Patterns, Explained

Many of you have probably seen my CSS3 patterns gallery. It became very popular throughout the year and it showed many web developers how powerful CSS3 gradients really are. But how many really understand how these patterns are created? The biggest benefit of CSS-generated backgrounds is that they can be modified directly within the style sheet. This benefit is void if we are just copying and pasting CSS code we don’t understand. We may as well use a data URI instead.

css css3 graphics patterns webdesign
january 2012 by viljami

copy to mine

Taking your web sites and apps offline with the HTML5 appcache
html5 appcache offline manifest webdesign from delicious
july 2011 by viljami

copy to mine

Mobile-First Responsive Web Design
mobile webdesign responsive design usability from delicious
july 2011 by viljami

copy to mine

Mobilizer

Preview mobile websites, design mockups, and local HTML on Mac or PC (Preview on iPhone 4, Palm Pre, HTC Evo, and Blackberry Storm, with more devices on the way)

mobile tools development webdesign iphone from delicious
july 2011 by viljami

copy to mine

Bricss
css css3 webdesign html5 blog from delicious
july 2011 by viljami

copy to mine

CSS Prism by Ryan Berg

ENTER THE URL OF ANY CSS FILE TO VIEW AND MODIFY ITS COLOR SPECTRUM

css color tools webdesign design from delicious
july 2011 by viljami

copy to mine

A Whole Bunch of Amazing Stuff Pseudo Elements Can Do
css webdesign css3 design tips from delicious
june 2011 by viljami

copy to mine

Responsive Data Tables

Quite good method to make a data table responsive:

css mobile tables design webdesign from delicious
june 2011 by viljami

copy to mine

HTML EMAIL BOILERPLATE v 0.4 updated 5/12

Welcome to the HTML Email Boilerplate. This website and its sample code creates a template of sorts, absent of design or layout, that will help you avoid some of the major rendering problems with the most common email clients out there — Gmail, Outlook, Yahoo Mail, etc. While not plug and play (you know, you'll have to do some work ;-), it will provide some helpful examples and snippets that will keep your email design rendering as true-to-form as possible.

email html webdesign boilerplate css design template tools development newsletter from delicious
june 2011 by viljami

copy to mine

A List Apart: Articles: Fluid Images
css webdesign design fluid images from delicious
june 2011 by viljami

copy to mine

Dose (screen) size really matter?

There’s an interesting debate happening in the world of mobile design at the moment. In one camp we have the “nativists” who believe that the best mobile experiences are tailored to a particular device. These are the people focused on creating platform specific mobile apps and mobile websites. Then we have the “universalists” who believe in the “one web”, a place where all content and services can be delivered to multiple devices through the same URL.

design mobile web webdesign from delicious
june 2011 by viljami

copy to mine

CSS Gradients for IE6-10, Safari 4+, Chrome 2+, Opera 11.1+,...

#example1 { 
/* fallback */ 
background-color:#063053; 
/* chrome 2+, safari 4+; multiple color stops */ 
background-image:-webkit-gradient(linear,left bottom,left top,color-stop(0.32,#063053),color-stop(0.66,#395873), color-stop(0.83,#5c7c99)); 
/* chrome 10+, safari 5.1+ */ 
background-image:-webkit-linear-gradient(#063053,#395873,#5c7c99); 
/* firefox; multiple color stops */ 
background-image:-moz-linear-gradient(top,#063053,#395873,#5c7c99); 
/* ie 6+ */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#063053', endColorstr='#395873'); 
/* ie8 + */ 
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#063053', endColorstr='#395873')"; 
/* ie10 */ 
background-image: -ms-linear-gradient(#063053,#395873,#5c7c99); 
/* opera 11.1 */ 
background-image: -o-linear-gradient(#063053,#395873,#5c7c99); 
/* The "standard" */ 
background-image: linear-gradient(#063053,#395873,#5c7c99); 
}

css css3 gradient gradients webdesign from delicious
june 2011 by viljami

copy to mine

Ethan Marcotte: The Responsive Designer’s Workflow

Design is the method of putting form and content together.

design css responsive ux webdesign web mobile usability workflow content html5 alistapart development media-queries from delicious
may 2011 by viljami

copy to mine

Hand-drawn Web Icon Set
icons free icon design webdesign from delicious
april 2011 by viljami

copy to mine

App Sites

Showcase of great iPhone, iPad & Mac app websites

iphone inspiration mac design webdesign from delicious
april 2011 by viljami

copy to mine

a columns, rows and midpoints panel for Photoshop CS4 & CS5
photoshop grid plugin design webdesign from delicious
april 2011 by viljami

copy to mine

Sass - Syntactically Awesome Stylesheets
css sass ruby webdesign editors from delicious
march 2011 by viljami

copy to mine

Designing Faster with a Baseline Grid | Teehan+Lax

Quite nice PSD baseline grid from the Teehan+Lax fellows here: Will definitely give it a try in next design project.

grid design webdesign grids layout from delicious
march 2011 by viljami

copy to mine

Adobe Flash FLA to HTML5

"Wallaby" is the codename for an experimental technology that converts the artwork and animation contained in Adobe® Flash® Professional (FLA) files into HTML. This allows you to reuse and extend the reach of your content to devices that do not support the Flash runtimes. Once these files are converted to HTML, you can edit them with an HTML editing tool, such as Adobe Dreamweaver®, or by hand if desired. You can view the output in one of the supported browsers or on an iOS device.

html5 flash adobe tools converter development html conversion webdesign video tool apple apps javascript from delicious
march 2011 by viljami

copy to mine

jQuery Waypoints

Waypoints is a small jQuery plugin that makes it easy to execute a function whenever you scroll to an element. Infinite Scrolling, Sticky Elements/menu, Scroll analytics.

jquery javascript scroll webdesign plugins plugin webdev scrolling from delicious
february 2011 by viljami

copy to mine

The Mobile context

We can't make assumptions about the context, based on device. Mobile != low download speed, Context != intent

mobile design ux context webdesign from twitter
february 2011 by viljami

copy to mine

CSS drop-shadows without images

Various CSS drop-shadows using pseudo-elements

css css3 shadow webdesign box-shadow from delicious
february 2011 by viljami

copy to mine

GLYPHICONS

a library of precisely prepared monochromatic icons and symbols, created with an emphasis on simplicity and easy orientation.

icons design free vector icon iphone illustrator webdev webdesign resources web development graphics minimal buy css graphic ico from delicious
february 2011 by viljami

copy to mine

Sandboxed IE Browsers from Spoon

Spoon.net removed their sandboxed IE browsers last year, but Paul Irish was kind enough to post them again. It’s a great way to test different versions of Internet Explorer on a single Windows computer or virtual machine.

ie testing development browser webdesign ie6 ie7 IE8 tools browsers webdev windows css web debugging javascript test apps design explorer freeware from delicious
february 2011 by viljami

copy to mine

The Bright (Near) Future of CSS

This article is an excerpt from Eric Meyer’s recent book Smashing CSS, published by Wiley in cooperation with Smashing Magazine.

css3 css html5 webdesign tutorials from delicious
february 2011 by viljami

copy to mine

Less.js Will Obsolete CSS

If you design websites you may have heard of interesting tools called CSS pre-processors. A couple of great ones are LESS and SASS. I helped Alexis, the creator of LESS with the design of the language and built the public site.

css javascript less webdesign framework js webdev programming development from delicious
january 2011 by viljami

copy to mine

CSS - text-overflow

The text-overflow declaration allows you to deal with clipped text: that is, text that does not fit into its box. The ellipsis value causes three periods to be appended to the text.

css overflow css3 web ellipsis text design webdesign layout reference android code iphone mobile mobileweb from delicious
january 2011 by viljami

copy to mine

iScroll

The overflow:scroll for mobile webkit. Project started because webkit for iPhone does not provide a native way to scroll content inside a fixed size (width/height) div. So basically it was impossible to have a fixed header/footer and a scrolling central area. Until now.

iphone javascript ipad mobile scroll css webkit webdev scrolling android development jquery library css3 ios touch js fixed ui code tools html5 web webdesign position drag from delicious
january 2011 by viljami

copy to mine

10 Tips for New iPhone Developers
iphone development mobile tips webdesign from delicious
january 2011 by viljami

copy to mine

iUI: iPhone User Interface Framework

iUI is a framework consisting of a JavaScript library, CSS, and images for developing advanced mobile webapps for iPhone and comparable/compatible devices.

iphone javascript ui development css web programming ajax framework mobile webdesign webdev safari library apple design tools interface opensource gui web2.0 code html software google js from delicious
january 2011 by viljami

copy to mine

iWebKit

iWebKit is a file package designed to help you create your own iPhone, iPod Touch and iPad compatible website or webapp.

iphone framework webdesign apps css mobile software webkit ipad app graphic library template tool from delicious
january 2011 by viljami

copy to mine

Autopopulating text input fields with JavaScript
javascript forms accessibility css webdesign from delicious
january 2011 by viljami

copy to mine

LiveView for iPhone & iPad

LiveView - a specialized remote screen app intended as a tool to help designers create graphics for mobile apps

iphone design prototyping development ipad tools mac ui software interface app mobile osx tool prototype application mockup gui interaction macosx webdesign testing from delicious
january 2011 by viljami

copy to mine

Little Big Details

RT @mieky: Love it. RT @jorilallo: Little Big Details – Nice blog about how small things matter in UIs

design ui inspiration ux webdesign from twitter
january 2011 by viljami

copy to mine

Media Queries

- a collection of responsive web designs

webdesign design css inspiration showcase from twitter
january 2011 by viljami

copy to mine

HTML(5) and text-level semantics

html5 markup html semantics web webdesign development from delicious
january 2011 by viljami

copy to mine

CSS background image hacks

Emulating background image crop, background image opacity, background transforms, and improved background positioning. A few hacks relying on CSS pseudo-elements to emulate features unavailable or not yet widely supported by modern browsers.

css css3 background hacks image webdesign images backgrounds sprites tips tutorial webdev hack icons opacity design graphics inspiration markup resources from delicious
january 2011 by viljami

copy to mine

LukeW | Device Classes & Responsive Design

Two techniques to design for multiple devices & how they actually complement each other. cc/@beep

webdesign webdev development usability responsive adaptive web mobile ux devices from twitter_favs
january 2011 by viljami

copy to mine

Nike Better World

Beautiful execution. Scroll down mate, scroll down :)

html5 inspiration webdesign design nike css scrolling scroll javascript from delicious
january 2011 by viljami

copy to mine

Fluid Images

working with non-fixed layouts can be more difficult once you introduce fixed-width elements into them. By default, an image element that’s sized at, say, 500px doesn’t exactly play nicely with an container that can be as large as 800px, but as small as 100px. What’s a designer to do?

css fluid images javascript webdesign layout design image web resize tips liquid from delicious
january 2011 by viljami

copy to mine

Moving Mouseover Highlight
jquery css css3 ui webdesign from delicious
january 2011 by viljami

copy to mine

How do you navigate content on the iPad? Scroll or flip?

In 1987, the biggest neck beards in tech held conference on the Future of Hypertext and there were two camps “Card Sharks” and “Holy Scrollers” and they had an epic fight over the following question: Should you scroll or flip pages on the screen? Who won the fight?

ipad design usability ux ui interface scroll ia typography webdesign mobile multitouch touch interaction scrolling article gesture iphone navigation apple information columns flip ixd web
december 2010 by viljami

copy to mine

Pure CSS3 box-shadow page curl effect

css3 css webdesign shadow box-shadow design curl code html effects page box tutorials howto tutorial html5 web development webdev paper tips inspiration
december 2010 by viljami

copy to mine

Using the WebFont Loader to Make Browsers Behave the Same

fonts typography javascript @font-face css3 css webdesign design font browser browsers typekit compatibility web development google api crossbrowser font-face loading howto jquery
december 2010 by viljami

copy to mine

Ben the Bodyguard. Coming soon to iPhone® and iPod touch®

Scrolling awesomeness! (via @paloheimo)

inspiration design iphone illustration scroll app innovation webdesign html html5 animation css fun css3 web javascript interactive privacy apps security website scrolling
december 2010 by viljami

copy to mine

iPhone and iPad now support TrueType font embedding. This is huge!!!

iphone ipad typography fonts font html5 ios css mobile webdesign @font-face css3 programming safari design type
november 2010 by viljami

copy to mine

XHTML Character Entity Reference

XHTML character entity reference (that's actually quite good)

xhtml reference html character encoding web webdesign entity cheatsheet webdev design tools typography code css development entities characters xml programming unicode resources fonts w3c standards coding internet ajax
november 2010 by viljami

copy to mine

The Secret Law of Page Harmony

design layout typography grid book inspiration theory art books tutorial graphic article webdesign print page templates publishing resources reference ui writing
november 2010 by viljami

copy to mine

Backbone.js

Backbone supplies structure to JavaScript-heavy applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing application over a RESTful JSON interface.

javascript framework mvc jquery js library programming webdev development web ajax webdevelopment code frameworks webdesign opensource events
november 2010 by viljami

copy to mine

Sencha Animator - a desktop application for creating CSS3 animations

css3 animation html5 css tools software javascript development webdesign tool generator design flash application mobile web app html webkit iphone android ui windows webdev apps
november 2010 by viljami

copy to mine

Regexpal — a JavaScript regular expression tester

regex javascript regexp tools programming development tool online ajax test testing web webdev reference code software webdesign coding free browser web2.0 debug js
november 2010 by viljami

copy to mine

Selectivizr - CSS3 pseudo-class and attribute selectors for IE 6-8

selectivizr v1.0.1 is out. Fixes @import without url(), relative urls (disappearing css images) & IE8's [*=""] selector

css3 javascript ie css ie6 jquery selectors tools ie7 webdesign compatibility webdev IE8 browser library js hack development selector resources explorer html5 plugin web tool emulator webdevelopment
november 2010 by viljami

copy to mine

The 1140px CSS Grid System/Framework · Fluid down to mobile

A 1140px wide, 12 column grid, Fluid all the way down to a mobile version.

css grid framework webdesign fluid layout mobile design html grids css3 development web templates webdev browser resources columns code tools frameworks tool responsive mobileweb
november 2010 by viljami

copy to mine

Pure Css Line Graph

css graph chart webdesign visualization design charts html
november 2010 by viljami

copy to mine

Accessibility is Not a Feature

There are a bunch of things that are not features. Performance is not a feature, internationalization is not a feature, and accessibility is not a feature.

accessibility webdesign law management slideshow usability userexperience webdev
november 2010 by viljami

copy to mine