from Web Designer Wall - Design Trends and Tutorials http://webdesignerwall.com Making the design to be responsive is very easy as shown in my Responsive Design in 3 Steps tutorial, but maintaining the elements to look aesthetically balanced on all breakpoint layouts is an art. Today I'm going to share 5 of my commonly used CSS tricks along with sample cases for coding responsive designs. They [...]

Advertise here with BSA

from Ben Nadel ColdFusion, jQuery, And Web Development Feed @ BenNadel.com http://www.bennadel.com/ Several years ago, Brian Kotek introduced me to the concept of Object Calisthenics . Object Calisthenics is an exercise defined by Jeff Bay to help programmers think very critically about their application design choices in an object-oriented context. I attempted this exercise a long time ago; but, I was quickly flustered by my lack of understanding. Now, a few more years o ... Read More »

from Web Design Weekly http://web-design-weekly.com

Headlines

The Vendor Prefix Predicament

Most importantly, set a good example. Use web standards first and foremost in your sites, articles, and talks. When discussing or demoing experimental features or standards-in-progress, whether in one browser or many, be up front with warnings, and make it clear what’s shiny today may break tomorrow. (alistapart.com)

JavaScript Style Guides And Beautifiers

Addy Osmani takes you exploration into JavaScript style guides, specifically: their importance, style guides worth reviewing and tools that can assist in automated code beautification or style enforcement. (addyosmani.com)

Building with Content Choreography

Responsive Web Design allows us to change layouts and element appearance based upon the width and/or height of the destination device. There can be stumbling blocks along the way to a beautiful unified site that runs perfectly on all platforms. Jordan Moore explains one that has been teasing him for a while. (jordanm.co.uk)

Blog.SpoonGraphics Turns 5 Years Old! (blog.spoongraphics.co.uk)

Introducing app-UI (tricedesigns.com)

Articles

Modularity and Style Guides

If you’re familiar with SMACSS, OOCSS or BEM, you’ll understand the concept of creating reusable “blocks” or “modules”. These are patterns, both visually and in code, that can be reused and expanded upon when building web pages. Done right, time and complexity are significantly reduced. (dbushell.com)

Viewport Sized Typography

Chris Coyier, as always, is quick to blog about rad stuff. In this post he writes about the new CSS3 values for sizing things relative to the current viewport size. As always, a great read. (css-tricks.com)

dConstruct optimisation

A good post by Jeremy Keith about the optimisation of the new dConstruct site. Lots of tips and links to help out with your next build. (adactio.com)

The power of negative reviews

Zack King argues that negative reviews are an opportunity that businesses must embrace, for if they don’t, they may lose control completely. (netmagazine.com)

LinkedIn For iPad: using local storage for snappy mobile apps (engineering.linkedin.com)

How We Operate – The Potential Client (esbueno.noahstokes.com)

My Coding Style and Guidelines (drublic.de)

As Tablet Size Decreases… (lukew.com)

CCSS: The Good Parts (impressivewebs.com)

Tools / Resources

Five responsive web design pitfalls to avoid

Creating great responsive experiences requires a hell of a lot more than media queries. There are a number of nasty traps to avoid when making your site responsive. Brad Frost reveals five of the biggest ones and how to sidestep them. (netmagazine.com)

Sketch

Sketch is a professional vector graphics app with a beautiful interface and powerful tools. They have set out to build a better app for graphic designers. Not to copy, but rather to improve. Looks interesting… (bohemiancoding.com)

Chrome DevTools’ script Live Edit feature combined with breakpoint debugging (youtu.be)

Simple CSS Colour Management With SASS (blog.12spokes.com)

Tooling & The Webapp Development Stack (paulirish.com)

CSS Layout Gets Smarter With CALC( ) (webkitbits.com)

Inspiration

ShopTalk – 16 with Ian Stewart, a Theme Wrangler for Automattic (shoptalkshow.com)

Interactive Typography Effects with HTML5 (tympanus.net)

Roundup of single page websites (webdesignerdepot.com)

Texturise web type with CSS (netmagazine.com)

Last But Not Least…

Rad IE

Some months ago, Microsoft kindly asked Ricardo Cabello for a HTML5 experiment. Sadly, he never managed to sign and fax them the NDA agreement so it never happened. He always felt bad that he didn’t get to do anything for them. He finally released his work which is awesome! (mrdoob.com)

from Web Design Weekly http://web-design-weekly.com

Headlines

Responsive Touch Interfaces

Matrix Transforms WOW! Plus a load of other great tips. Awesome video by Flickr Frontend Engineer Stephen Woods. He shares his hard-won advice for building responsive touch-based interfaces using HTML5, CSS, and JavaScript. Make time for it. (yuiblog.com)

httpster.net

A curated showcase of shit-hot web design with a less-is-more bent. Its aim is to showcase excellent use of HTML & CSS — and favour progressive enhancement and mobile adaptive layouts — but the currators apologise in advance for including poorly coded stuff if it just looks so damn good. (httpster.net)

About normalize.css

Nicolas Gallagher give a clear and detailed post on why you should use normalize.css. Normalize.css is a small CSS file that provides better cross-browser consistency in the default styling of HTML elements. It’s a modern, HTML5-ready, alternative to the traditional CSS reset. (website.com)

We need to kill off the Local Storage API (paul.kinlan.me)

Shiny Demos (shinydemos.com)

Articles

Responsive Design, Device Experiences, or RESS?

As more organizations realize they need to invest heavily in multi-device Web designs, the inevitable question of “how” comes up. Responsive Web design, separate sites, or something in between? Here Luke Wroblewski tries to simplify the decision. (lukew.com)

Responsive Navigation Patterns

As responsive design becomes more popular, it’s worth looking at the various ways of handling navigation for small screen sizes. Brad Frost (Mr Mobile Man!) gives a great overview of some of the more popular techniques for handling navigation in responsive designs. (website.com)

Capturing Audio & Video in HTML5

Audio/Video capture has been the “Holy Grail” of web development for a long time. For many years we’ve had to rely on browser plugins (Flash or Silverlight) to get the job done. Come on! HTML5 to the rescue. (html5rocks.com)

Responsive Summit – London

Elliot Jay Stocks does a great wrap up of the London Responsive Summit. He met with a small group of people to chat about the various tools, techniques, problems, and solutions surrounding the subject of responsive web design.(elliotjaystocks.com)

Addy Osmani’s tools he regularly find helpful (plus.google.com)

A Responsive Design Approach for Navigation. Part – 1 (filamentgroup.com)

Tools / Resources

Codiqa – Rapid Prototyping with jQuery Mobile

Build with 100% jQuery Mobile components. Take your idea, prototype your app, and output a high-quality, fully functional and standards-compliant jQuery Mobile website. No black-box code. No external libraries. No hassle. (codiqa.com)

Pull Down for Navigation

Mobile screen real estate is at a premium and one of the biggest problems to solve is how to display navigation when screen widths become quite narrow so Tom Kenny decided to have a look and see what he could come up with using some nifty CSS and a touch of jQuery. (website.com)

LESS-CSS3-Mixins

Comprehensive array of LESS mixins that allow you to use CSS3 features without having to worry about vendor prefixes. Awesome. (github.com)

Chaplin – an Application Architecture based on Backbone.js (github.com)

Breaking down onload event performance bookmarklet (6.7percentangel.com)

Essential Sublime Text 2 Plugins and Extensions (net.tutsplus.com)

A whole podcast full of Chrome DevTools news (javascriptjabber.com)

ChromeVox is a new screen reader for Chrome (chromevox.com)

Open source iconic fonts composer(nodeca.github.com)

Better Sass Docs (kaelig.fr)

Inspiration

Kickstarter projects that kick ass!

With projects on the innovative funding site breaking the $1million barrier, .net magazine select their favourite design-related projects to inspire your own efforts (netmagazine.com)

Chase Happiness (davegamache.com)

CSS3 Font Bird (martingauer.de)

Last But Not Least…

Vote for some #RWD threads!

Dress Responsively! What standards-loving, responsively-building, media-querying web citizens wouldn’t love some apparel which flies the flag of the future of the web? Get voting! (dressresponsively.com)

from Web development blog, news and tutorials - Developer Drive http://www.developerdrive.com

CSS3 offers a wealth of possibilities in terms of visual and interactive effects, even allowing you to create animated elements without the need for either Flash or JavaScript. In this tutorial we’ll go through the process of translating a page element using a CSS3 transform.

The translate function essentially moves an element by a specified distance along the X and Y axes. You do need to provide browser-specific code to create reliable transforms, but the technique is not particularly complex.

Create your Page

We want to start by creating a Web page with a simple element for demonstration. You can use the following HTML5 code:

I move

As you can see we have a page with a single element in it and an area for CSS code in the head section. The element has a class name for identification in CSS and a small amount of text, but you can put anything you want in yours.

Style the Element

So that we can see exactly where the element’s bounds are, let’s give it some basic styling properties in the CSS head section:

div.moves {
height: 200px;
width: 200px;
background:#0000FF;
color:#FFFFFF;
padding:10px;
}

View your page in a browser at this point so that you can see the change when you apply the translate transformation.

Apply the Translate

Inside the same CSS block for your “div.moves” element, add the following code to translate the element by a specified amount:

transform:translate(200px, 100px);

This is the generic version of the code, taking two parameters representing the amount of pixels to move the element along the X and Y axes. To cope with specific browsers, amend your code as follows:

/*General*/
transform:translate(200px, 100px);
/*Firefox*/
-moz-transform:translate(200px, 200px);
/*Microsoft Internet Explorer*/
-ms-transform:translate(200px, 100px);
/*Chrome, Safari*/
-webkit-transform:translate(200px, 100px);
/*Opera*/
-o-transform:translate(200px, 100px);

The code for each browser type has a simple prefix in front of the transform keyword. View your page in the browser and you should see the element change position 200 pixels across and 100 pixels down the page (as long as your browser supports these CSS3 properties). The translate transform can be passed parameters indicating a specific length as in this example, but can also take negative numbers or percentage values representing the length. The following code moves the element up and left:

transform:translate(-200px, -100px);

The following version uses percentage values:

transform:translate(20%, 10%);

Axis-Specific Methods

If you only want to move your element along one axis, you can use translateX or translateY, as in the following examples:

/*only along x axis*/
transform:translateX(200px);

/*only along y axis*/
transform:translateY(100px);

Make It Interactive

We’ve covered the basics of using the translate transform in CSS3, but the results are pretty boring at the moment. The beauty of being able to use these functions in CSS is that you will ultimately be able to create interactive animations in your pages using only HTML and CSS code. To demonstrate, alter your CSS as follows:

/*default properties*/
div.moves {
height: 200px;
width: 200px;
background:#0000FF;
color:#FFFFFF;
padding:10px;
}

/*on mouse hover*/
div.moves:hover {
/*General*/
transform:translate(200px,100px);
/*Firefox*/
-moz-transform:translate(200px,200px);
/*Microsoft Internet Explorer*/
-ms-transform:translate(200px,100px);
/*Chrome, Safari*/
-webkit-transform:translate(200px,100px);
/*Opera*/
-o-transform:translate(200px,100px);
}

Now the translation does not occur until you hover your mouse over the element, because we have moved the translation code into a CSS hover section.

Animate It

We’ve made the translation interactive, so let’s go a step further and animate it using a CSS3 transition. Add the following to the “div.moves” CSS block:

/*general version*/
transition: all 5s;
/*browser specific versions*/
-moz-transition: all 5s;
-ms-transition: all 5s;
-webkit-transition: all 5s;
-o-transition: all 5s;

You can optionally specify an easing property and a delay before the animation starts. Please note that your own browser may support some but not all of these CSS3 properties, particularly the transition effects – Opera and Chrome tend to be the most reliable in my experience.

Conclusion

It goes without saying that CSS3 properties are not yet reliable in terms of browser support. However, they do give an exciting glimpse into the future of Web development, in which the page markup itself will offer a far more engaging experience than ever before.

from Web Design Weekly http://web-design-weekly.com

Headlines

Mobile Web Resources

“Where do I go to learn about all this stuff?” An extensive list of helpful tools and resources that can help you create great mobile web experiences. Maintained by Brad Frost. AWESOME!!!! (mobilewebbestpractices.com)

Remote-Tilt

Testing motion events was never going to be an easy task. You have two options, both of which suck. Thats why Remy Sharp developed Remote-Tilt. By including a single line of JavaScript you can emulate device motion events. (remote-tilt.com)

Moving an element along a circle (lea.verou.me)

CSS Variables (W3C draft specification) (dev.w3.org)

Chrome for Android (chrome.blogspot.com.au)

Web Developer at Mozilla [JOB] (careers.mozilla.org)

Articles

Musings on Preprocessing

Chris Coyier has been using SASS for pretty much everything he has done recently. He explains his journey. From hold-ups, to trip-ups, to turn-offs. From apps and teams to workflows and syntax. (css-tricks.com)

Control image aspect ratios with CSS3

Making media display consistently on your site can be a problem, especially with multiple content authors. Opera’s Chris Mills shows you how object-fit and object-position can solve it. (netmagazine.com)

Why Developers Hate Your Designers Guts

It’s no secret designers and developers have been at each other since the distinction between the 2 was formed. It is time to put an end to this battle for pixel perfection vs. getting this site actually working in IE. (vaughanmoffitt.com)

Content strategy at Facebook

Facebook’s content strategists work on the large scale: 800 million users; more than 900 million pages, groups, events, and community pages; 250 million new photos uploaded every day. Earlier this month, Tiffani Jones Brown gave Contents Magazine a behind-the-scenes look at the growing Facebook CS team, how they work, and how the company thinks about content. (contentsmagazine.com)

Design the perfect URL (netmagazine.com)

Better numerical inputs for mobile forms (bradfrostweb.com)

Exactly how much CSS3 does your browser support? (lea.verou.me)

People to follow on GitHub (jakebresnehan.com)

Tools / Resources

Pears – common patterns of markup & style

Collect, test, and experiment with interface pattern pairings of CSS & HTML. Pears is an open source WordPress theme, enabling people like you to get your own pattern library up and running quickly. (pea.rs)

A Beginners Guide to HTML & CSS (learn.shayhowe.com)

jQuery Collapse Plugin (webcloud.se)

WP Function – Quickly build functionality for your next WordPress project (wpfunction.me)

Foldy960 – A responsive 960 grid from Paravel (github.com)

Bless CSS (blesscss.com)

Create — A new kind of web editing interface (createjs.org)

The Web Ahead with Divya Manian (5by5.tv)

HTML5 Boilerplate 3.0 is out! (html5boilerplate.com)

Modernizr 2.5: Supercharged for 2012 (modernizr.com)

yepnope.js 1.5 is live! (yepnopejs.com)

Inspiration

Robbie Manson: The Mindful Designer

We face a challenge: to ensure our design responses are informed more by our thinking than the tools we use. Absorbed by day-to-day execution, we can forget the importance of mistakes and accidents — of balancing intent with experimentation. (vimeo.com)

dConstruct 2011 talks (sweet resource) (dconstruct.org)

Amazing dynamic ASCII art (nkwiatek.com)

Last But Not Least…

Help make WDW become the raddest, most badass email newsletter to hit the inbox! (github.com/jakebresnehan)

from Web Design Weekly http://web-design-weekly.com

Headlines

Smashing Magazine (re-design)

Big move by the Smashing Magazine team. A huge task that was much needed and executed very well. If you haven’t dug into the code already, head over now and why you are there, give those guys a pat on the back. (smashingmagazine.com)

CSS Selector Performance has changed!

Nicole Sullivan dives back into CSS Performance. Focusing on Style Sharing, Rule Hashes, Ancestor Filters and Fast Path. (calendar.perfplanet.com)

Shop Talk – Chris Coyier and Dave Rupert’s new podcast. (shoptalkshow.com)

iOS-Orientationchange-Fix (github.com/scottjehl)

Articles

Seven things still missing from CSS

CSS has come a long way but it’s not perfect (yet). Molly Holzschlag, passionate standardista and open web evangelist, quizzed her peers to find out what they see as the most frustrating aspects of CSS. (netmagazine.com)

The contenteditable attribute

Jack Osborne explains now with the contenteditable attribute, things have got a whole lot easier. In this article, he tells you what the attribute is for, how it works, and how we can take things further. (html5doctor.com)

Are vendor prefixes hurting the web?

There’s been a lot of controversy about vendor prefixes lately, but what do the .Net panellists think? (netmagazine.com)

Sublime Text 2 Tips and Tricks (Updated) (net.tutsplus.com)

Google Web Fonts, now more compressed (googlecode.blogspot.com)

How to name a web browser (by those who have) (blogs.msdn.com)

Responsive Data Table Roundup (css-tricks.com)

Climbing the Ladder in the Web Industry (thinkvitamin.com)

Profiling CSS for fun and profit. Optimization notes (perfectionkills.com)

Tools / Resources

Backbone Fundamentals

Addy Osmani has started a ‘Free’ work-in-progress book for developers of all levels. Lets all help him finish it! (addyosmani.com)

PXLoader – A JavaScript Preloader for HTML5 Apps (thinkpixellab.com)

Build Conference Videos (buildconf.com)

New High-Quality Free Fonts (smashingmagazine.com)

Faster button styling with SASS (netmagazine.com)

Fullscreen Background Image Slideshow with CSS3 (tympanus.net)

HTML5 Reference Poster (xhtml-lab.com)

Inspiration

Fine Goods Market

A hypertext boutique featuring fine goods crafted by Rogie King. Beautifully executed! (finegoodsmarket.com)

The Latest Apps Built with PhoneGap (phonegap.com/apps)

A good list of podcasts by Max Wheeler. (Not all tech related) (makenosound.com)

A Christmas tree made out of form elements! Old, but Awesome. (hakim.se)

Cut the Rope – Behind the scenes video (cuttherope.ie)

iPhone 4 in pure CSS3! (tjrus.com/)

Last But Not Least…

Photoshop in the Browser! (Chrome) (visualidiot.com)

from Web Design Weekly http://web-design-weekly.com

Headlines

Dabblet

Lea Verou once again has been coding like crazy!! This time she has developed an interactive CSS playground for all to enjoy. Happy experimenting! (lea.verou.me)

Icons with Fonts and Data- Attributes

Traditionally, bitmap formats such as PNG have been the standard way of delivering iconography on websites. They’re quick and easy, and it also ensures they’re as pixel crisp as possible. Jon Hicks give a great overview of why web fonts are taking over. (24ways.org)

WordPress 3.3 “Sonny” (wordpress.org)

Shortest possible valid (X)HTML documents (mathiasbynens.be)

Internet Explorer to auto-update (netmagazine.com)

Killa slides about polyfills, cross-browser HTML5 and feature detection (addyosmani.com)

Articles

25 Secrets of the Browser Developer Tools

Over the last few years there has been one tool that has helped out every web developer more than any other – the browser developer tools. Working in harmony with the web browser, the developer tools allows us to manipulate DOM elements, CSS styles, JavaScript and other useful information from the same window often in real time. (andismith.com)

Six CSS Layout Features To Look Forward To

A few concerns keep bobbing up now and then for Web developers, one of which relates to how to lay out a given design. Developers have made numerous attempts to do so with existing solutions. Divya Manian explains the six layout proposals that are relevant to us and how they will help developing websites in the future. (smashingmagazine.com)

Chrome 15 Becomes World’s Most Popular Browser

Google’s Chrome 15 has become the most popular web browser version worldwide for the first time on a weekly basis, according to StatCounter. Paul Irish had some wise words to add…

The funny thing about the “Chrome 15 is top browser” headlines is that they are already out of date. Chrome 16 shipped Tuesday and by the end of the week nearly all 200M Chrome users will have it. So Chrome 15 is about to go from the #1 browser to having fewer users than IE6 in a matter of days. I couldn’t be happier. (statcounter.com)

Fluid grids, orientation & resolution independence

If you’ve spent any time building responsive websites with fluid grids, you will have encountered the shock of seeing your beautiful portrait layout distort when viewed in landscape mode (or vice-versa). (responsivenews.co.uk)

Software Architects Need More Respect: Hacker Culture Is Overdone (bernardlunn.wordpress.com)

The Secret Lives of Links (lukew.com)

The Problem With CSS Pre-Processors (millermedeiros.com)

How to make a web standards proposal (sites.google.com)

Tools / Resources

10 LESS CSS Examples You Should Steal for Your Projects

The Design Shack hooks you up with ten incredibly useful LESS snippets that you can drop into your projects today. (designshack.net)

Jeffery Way started compiling a huge list of HTML5 tools, folks, and sites to pay attention to. Please freely add to it. (openetherpad.org)

2011 in review: 15 web conference talks you need to watch (netmagazine.com)

TextMate 2.0 Alpha (macromates.com)

Inspiration

Taking Stock – John O’Nolan’s thoughts.

There are far too many talented people squandering their time arguing over whether or not an ‘a’ tag should always be inside a ‘p’ tag, rather than using their powers to instigate positive change in both the web… and the world. (john.onolan.org)

Small Studio (smallstudio.com.au)

The HTML5 Game Lab – Helps fund projects for the new open web games industry. (gamelab.bocoup.com)

35 Icon Design Tutorials for Photoshop (vandelaydesign.com)

Grid­lover (gridlover.net)

HTML5 and CSS3 Advent 2011 (html5advent2011.digitpaint.nl)

The Single Lane Superhighway (chromeexperiments.com)

Last But Not Least…

Well, this is the last weekly round up for the year. I feel it’s been an awesome 25 issues so far and with every issue I am blown away with the energy and effort everyone in the web community is putting in to making the web radical!

The next few weeks will be quite hectic I am sure for both you and I and will require some down time. Be sure to drink lots of beer, unplug (from your computer) and enjoy the festive season because 2012 is going to be off the HOOK!!

The next instalment should be arriving in your inbox around mid January.

Have a good one! JakeyB

from Ben Nadel ColdFusion, jQuery, And Web Development Feed @ BenNadel.com http://www.bennadel.com/ As of now, all of my experimentation with modular JavaScript application architecture has been exclusive to client-side code. That is, it involves Views and Controllers, but no real sense of any Model that is tied to a persistent data store. As I've started to think about experimenting with the Model facet of client-side MVC (Model-View-Contr ... Read More »

from Ben Nadel ColdFusion, jQuery, And Web Development Feed @ BenNadel.com http://www.bennadel.com/ A little while back, I started looking at RequireJS as away to organize and modularize my JavaScript code . And, while I am still getting my feet wet in modular JavaScript web application development, I can tell you that I have really enjoyed using RequireJS - and, that I plan to continue to integrate it into my development process. The asynch ... Read More »

Here’s a challenge for the new year: use each month as an opportunity to try out a new web technology.

Set yourself small, achievable projects to work on and use 12412.org as a support group. We will all help to motivate each other and join in to offer help where we can.

Tagged with
web
technology
challenge
12412
learning

View source.

Tagged with
web
singleserving
http
viewsource
browsers

A good round-up of what web development means today …and what web developers need to do to keep pace.

Tagged with
web
development
mobile
responsive
typography

s mobile devices have continued to evolve and spread, so has the process of designing and developing Web sites and services that work across a diverse range of devices. From responsive Web design to future friendly thinking, here's how I've seen things evolve over the past year and a half.

If you haven't been keeping up with all the detailed conversations about multi-device Web design, I hope this overview and set of resources can quickly bring you up to speed. I'm only covering the last 18 months because it has been a very exciting time with lots of new ideas and voices. Prior to these developments, most multi-device Web design problems were solved with device detection and many still are. But the introduction of Responsive Web Design really stirred things up.

Spot. On.

The great thing about the web is linking. I don’t care how ugly it looks and how pretty your app is, if I can’t link in and out of your world, it’s not even close to a replacement for the web. It would be as silly as saying that you don’t need oceans because you have a bathtub.

Tagged with
web
apps
native
mobile
links
linking
hypertext
hyperlinks

A call-to-arms for web developers combined with a handy list of projects you can get involved in.

Tagged with
development
opensource
standards
projects
community

Most photo editors out there come with basic editing options and different kinds of filters, but PsykoPaint, a free web app, does something totally different. You can change photos into amazing and creative paintings by using stylish brushes. All functionalities can be accessed, except the layer functionality, which only becomes available after registration. However, you can log in with your Facebook account to save images, share them online or create e-cards. Just upload a photo and start painting on top of it. The web app supports multiple types of brushes and styles that you can choose from, and also lets you save paintings on your computer for later use.

PsykoPaint has three basic modes, Good Old painting, Paint A Photo and Try A Sample. You can upload a photo from your system. Once uploaded, change the dimensions of the photo by using the slider and click Paint to start painting your photo.

Different types of brushes are available, which can be accessed from the bottom left corner. You’ll notice that some brushes are named after famous artists, such as Van Gogh and Degas. There many other creative brush styles as well, including Butterflies, Ribbons, Fireworks etc. In addition to that, when you mouse over a a brush type, you will be able to preview its effect in a tiny box, and you can also change the size and opacity of each brush with sliders.

A click on Details option in the brushes menu launches preferences to change a brush’s shape. A total of ten different customization options are available.

Use the Color options to adjust the Colorfulness, Color, Brightness and Contrast. Furthermore, you can also choose a Color tint. Zooming in and out is done with the scroll wheel or slider displayed at the bottom of the page. You may undo and redo any changes as well.

Once you’re done, click File. Here you will find Export Image, Share Online, Create a Card, Save Project and New Project. Exporting the picture has three options, Thumbnail, Full-size & Watermark, out of which Full-size is paid.

It also allows you to send an e-card to your friends and family by simply adding an email address and a name. Card styles can also be modified.

PsykoPaint is one creative web app that lets you change your photos into gorgeous paintings, all in a fun and easy way. Give it a shot, and let us know what you think.

Visit Psykopaint

Related Articles:Turn Your Family Vacation Photos Into HD Video Slideshows
UnitedStyles: Design Stunning Outfits & Get Doorstep Delivery [Web]
iPiccy: Yet Another Web App To Edit, Beautify And Share Photos

liked items / from Adactio
This thread on whether HTML5 Boilerplate should include Respond.js by default (and whether the CSS should take a small-screen first approach) nicely summarises the current landscape for web devs: chaotic, confusing …and very, very exciting.

Tagged with
re

The Heads-Up Grid is an overlay grid for in-browser website development, built with HTML + CSS + JavaScript.

Good design and good markup provide structure to content. Good markup is a fundamental part of good design: beautiful on the inside, beautiful on the outside. HTML and CSS give another venue to provide structure to content in the native language of the web, and learning these guides decisions by surfacing the affordances of the medium.

Tagged with
html
design
web
markup
css

In July of 2011, I presented a Fireworks session at D2WC called Wireframing and Prototyping for Mobile using Adobe Fireworks. I was so pleased to see a very full room of attendees. Even happier to note that many were not current Fireworks users.

Yes, I did say happy. The reason is simple. I want people to know what they’re missing out on.  As you might be noticing, I’m a big Fireworks fan. Huge, even.

My original goal with this session was to focus on some sample prototypes and wireframes, but based on the crowd and many of the questions fired at me, I changed the slant slightly and talked more about how many of the Fireworks built-in features are designed to save you time, without sacrificing quality. Time is money as they say. Projects are quoted on estimated number of hours, so the sooner you can complete a wireframe or a prototype, the sooner you can move forward to actually wiring up the actual application, and the happier everyone is.

The sooner students can learn how to achieve optimum results in less time, the more employable they are.

As usual, I had way more content than I needed or had time to use, so I’ve posted the files (including brief slide deck, a couple tutorials and LOTS of assets) on my web site.

Aside from using Fireworks pages to mock up wireframes and prototypes, FW also has many other built-in features that can really help with any kind of prototyping, especially mobile.

A couple things I really wanted to get to in my session but ran out of time were:

Exporting layers to files
Batch processing for mobile

In this tutorial we’ll look at exporting layers to files.  I’ll also be releasing a new tutorial that will cover batch processing the new files created from this tutorial.

Design Elements for Mobile
Let’s say you’re not building a mock up. Let’s say you’re focused on application icons for that mock up. Or other common visual elements like logos. How can Fireworks help?

Layers or Pages can definitely help. In my example I’ve used layers to place different icons for a variety of D2WC speakers.

Figure 1 - Completed icon file

But it all started with a single icon design. In this case I created an icon for my good friend and fellow speaker/educator, Tom Green. As you can see from the final version above, the icon went through some design changes, but the general look and feel remain the same.

This simple design consists of 4 objects:

Outer rounded rectangle with gradient fill and inner glow (for depth)
Inner rounded rectangle for stroke accent
2 text blocks, one for each letter. I used separate text blocks so I had complete control over positioning of each letter.

It took me longer to decide what I was going to do than it took to create the icon.

Creating New Iterations

Once the first icon was built, I went to the Layers panel and dragged the entire layer to the New/Duplicate Layer icon at the bottom of the panel, to duplicate all the contents of the layer in a brand new layer.
Holding down the Shift key, I tapped the right arrow key several times until the contents of the new layer were positioned away from the contents of the original layer.
Then I deselected the objects by clicking outside the canvas area. With nothing active on the canvas, the Properties panel displays a button called Fit Canvas.
I clicked on that button and Fireworks automatically resizes the canvas to fit both icons.
I repeated this process of duplicating and moving layers until I had 8 layers, visually separated from each other.
Then one more click to fit the canvas to the images on the canvas.

Pretty cool! Also note that if you scale an object or objects on the canvas smaller that the original size, you can use the Fit Canvas button to shrink the canvas as well.

Then, once I had all those duplicates, I selected the various vectors and change the gradient colors, stroke colors, text colors from the Properties panel. Now that’s all well and good, but all those icons are in ONE file. I needed 8 separate files, and I wanted to keep my editable version, too. No problem.

Exporting Layers to Files
Using this export workflow, I can export flattened versions of each icon as a separate graphic.

First I went to the Optimize panel and changed the global optimization settings from the default GIF format to PNG32. (When the canvas is transparent, exporting as PNG32 from Fireworks creates a flattened bitmap with a transparent background – handy if your graphic is not a rectangle.)
I saved the file as a Fireworks PNG file for future editing.
Then – the cool part – I chose File > Export.
I selected a destination folder from the main Export window, not worrying about the file naming.
From the Export list, I chose Layers to Files.
I clicked on the Options button and made sure that the File Type is set to Use document optimize settings.
Back in the main Export window, I pressed the Export button.

A few seconds later, I had a folder containing eight flattened PNG files with transparent backgrounds. But my editable versions of all those files still resided in a single file. Cool, in my view.

Conclusion
You might be wondering why I used layers instead of pages. Basically, this method worked for me because I could see all the icon iterations at the same time, making it easy for me to compare and tweak the designs. Using pages instead of layers would have given me a smaller Fireworks PNG file in terms of dimensions, but I would have had to switch from page to page to check icons. That said, if you’re more comfortable using pages for this type of work, there is no reason not to. Fireworks does, after all, include an export workflow for Pages to Files.

Batch processing adds even more power to this workflow, because I can create custom Batch processing scripts to export the original files in multiple sizes. In the next tutorial, we’ll dive into Batch Processing in Fireworks.

As you may know, I accepted an appointment to the W3C’s Technical Architecture Group earlier this year. Last week was the first face-to-face meeting that I attended, hosted in the Stata Center at MIT. As you can tell from the agenda (which was in fact revised as we went along) it was a packed three days.

What I intend to do here is to briefly report on the major areas that we discussed and give a tiny bit of my own personal take on them. In no way should any of what I write here be judged as revealing the official opinion of the TAG, it’s just me saying what I think, and I’m not going to go into anything in depth because they’re all incredibly gnarly and contentious topics and I’d not only be here all year but also end up in a tar pit.

Role of the TAG

Usefully for me as a newcomer, our first session was about the ongoing role of the TAG. The TAG occupies a unique position within the W3C. According to its charter it was set up

To improve the effectiveness of Working Groups, to reduce misunderstandings and overlapping work, and to improve the consistency of Web technologies developed inside and outside W3C

The TAG ultimately has three routes to do this:

by providing specific advice on issues that are brought to its attention
by writing documents on basic web architecture principles that go through community review, particularly through the general review of the W3C standards track and become Recommendations
by advising the W3C Director (Tim Berners-Lee) about what he should do on the extremely rare occasions when there are issues that he is supposed to adjudicate on

In none of these cases is there anything that binds the people receiving the advice of the TAG, or reading Findings or Recommendations made by the TAG, to accept them or do anything about them. The power and authority of the TAG depends solely on the quality and utility of its arguments, which is how it should be in my opinion.

Client-Side Application State

The first technical session was about client-side application state and was a review of the Identifying Application State draft that T.V. Raman began before he left the TAG and that Ashok Malhotra has been working on since. This should in the next few months or so be published as a TAG Finding (though it is currently on the Recommendation track).

This work is essentially about documenting the different ways in which you can identify application state within a URI, why that’s a useful thing to do, and some of the pitfalls of using hash URIs to do so. Most of the discussion was about details to do with wording within the document. One thing I thought particularly interesting was the point that URI-based application state is relevant in all ‘active content’, not just in HTML; for example, scripting in SVG or in PDFs bring the same considerations.

Buffer Bloat

Over lunch on Monday we listened to and discussed a presentation by Jim Gettys on buffer bloat. Basically (and all the errors here are introduced by me), TCP/IP is designed to route around network blockages, but it can only do so if it detects them quickly. When you have big buffers in place, as in the case of all modern operating systems and hardware, blockages aren’t detected quickly; they’re only detected when the buffers fill up. Then buffers empty and the data has to be sent again. The net result is that connections get really slow, not just for upload or download but for both, not just for you but for everyone using the network.

Jim talked about how this is exacerbated by the large amount of web traffic and the design of HTTP, particularly the lack of use of HTTP pipelining (whereby several HTTP requests and responses are sent over one long-term connection), because it leads to lots of small messages which can’t be handled effectively. There’s lots more about this on his blog.

Jim also talked about the failure of certificate authorities and how we should be looking at distributed protocols using digitally signed data, pointing us in particular to CCNx.

Fragment ID Semantics

First thing Tuesday was a session that I led on fragids, in particular the problems that are arising out of the mime type registration of +xml types (3023bis) clashing with those that are used for, say, images, and what happens when these come together in something like SVG.

The same issues arise whenever you have documents with types that ‘inherit’ fragid semantics from two directions. For example, XHTML documents are XML documents, so constraints on +xml mean you shouldn’t use interpreted fragids (eg hash-bangs) on them, but they are also ‘active content’ which makes interpreted fragids useful. Similarly, in linked data you shouldn’t really use a hash URI to mean a Person with a primary resource that provides as a response an XML document with embedded RDFa, because according to XML fragid semantics, such a URI should point to an XML element.

Basically the use of fragids has grown markedly outside their original scope and these situations aren’t really covered in the specs. I am now tasked to create a document that describes the issues and suggests ways forward. So that will be fun.

Telcon with IAB

The second session on Tuesday was a telcon with the IAB which has a similar role within the IETF as the TAG does within the W3C. This was a bit of a ‘getting to know you’ session, covering the work of the two groups on:

versioning and extensibility
security
privacy, including Do Not Track

and talking about opportunities to meet and work together on various topics like these.

URI Definition Discovery and Metadata Architecture

The afternoon session on Tuesday was spent on Jonathan Rees’s work on the Architecture of the World Wide Semantic Web, which covers, amongst other things, what people in semantic web circles call httpRange-14. At core, this is about the kinds of URIs we can use to refer to real-world things, what the response to HTTP requests on those URIs should be, and how we find out information about these resources.

Jonathan has put together a document called Providing and discovering definitions of URIs which covers the various ways that have been suggested over time, including the 303 method that was recommended by the TAG in 2005 and methods that have been suggested by various people since that time.

It’s clear that the 303 method has lots of practical shortcomings for people deploying linked data, and isn’t the way in which URIs are commonly used by Facebook and schema.org, who don’t currently care about using separate URIs for documents and the things those documents are about. We discussed these alongside concerns that we continue to support people who want to do things like describe the license or provenance of a document (as well as the facts that it contains) and don’t introduce anything that is incompatible with the ways in which people who have been following recommended practice are publishing their linked data. The general mood was that we need to support some kind of ‘punning’, whereby a single URI could be used to refer to both a document and a real-world thing, with different properties being assigned to different ‘views’ of that resource.

Jonathan is going to continue to work on the draft, incorporating some other possible approaches. It’s a very contentious topic within the linked data community. My opinion is while we need to provide some ‘good practice’ guides for linked data publishers, we can’t just stick to a theoretical ideal that experience has shown not to be practical. What I’d hope is that the TAG can help to pull together the various arguments for and against different options, and document whatever approach the wider community supports.

Can publication of hyperlinks cause copyright infringment?

The first session on Wednesday was another session that I led, discussing the Publishing and Linking on the Web draft that Dan Appelquist and I have been working on.

The aim of this document is to explain the tensions between terms that are commonly used in legal documents such as “possession”, “adaptation” and “distribution” and the way that publication works on the web, in which multiple servers may have copies of the same document (because they cache copies to make the ‘net go faster), automated agents may make changes to those documents (such as compressing or resizing documents, or merging Javascript) and people may refer others to those documents through linking.

We’re particularly keen to argue that linking to something is not the same thing as distributing it. The web’s power arises through its links, so it’s important that people are able to link to something without being worried about what happens when/if the domain they link to is taken over by something illegal.

Dan and I are going to continue to work on this document in response to various suggestions around organisation and terminology, with a view to getting some ‘friendly legal experts’ to look it over and then seeking wider review. The intention is for it to eventually become a Recommendation as this will give greater weight to it as a document for a legal audience.

API Minimisation and Client-Side Storage

There were then a couple of short sessions.

Dan talked about API Minimisation, which is the design principle that to increase privacy we should design APIs that enable people requesting information to say exactly what information they need, and return only that rather that everything known about a think. Dan’s put together an draft and should be calling for review for it soon.

Ashok then led discussion on client-side storage and we brainstormed around some of the architectural/design issues about which we might want to write if we were to put together a document. This work is at a very early stage.

TAG Priorities

After lunch, we had a session on TAG priorities where we discussed which of the various pieces […]

Over time, every web developer gathers a collection of tools — useful libraries, code snippets, reference materials and images that get re-used over and over. They make life easier by shortening development time and handling common, often mundane tasks. This frees up time and brain power for more complex tasks.
In this post, we’ll take a look at a small collection of boilerplates, templates and resets that you can incorporate into your workflow. They simplify the process of setting up a new project by providing a clean slate and often useful utilities.
1. HTML5 Boilerplate Arguably the most popular HTML5 "starter templates" out there, HTML5 Boilerplate aims to provide a cross-platform, future-proof HTML/CSS and JavaScript base template for web development.
In addition to cross-browser normalization and graceful degradation, Boilerplate also includes more advanced options for caching, JavaScript profiling, unit testing and handling of AJAX events.

2. Boilerplate Mobile If you're doing mobile app development, you may also want to check out HTML5 Boilerplate Mobile; a specialized version of the main boilerplate with additional features and functionality specifically for mobile web development.
Boilerplate Mobile includes additional code to assist with viewport optimization, improved font rendering, quickly adding home screen icons and cross-platform support across a number of mobile devices.

3. HTML5 Reset HTML5 Reset is a more lightweight base template that gives developers a clean slate to work with while setting and taking care of some cross-browser issues, such as CSS inconsistencies and IE-specific CSS rules.
The HTML5 Reset developers also provide a blank WordPress theme using their system, which can be uses in building custom WordPress templates from the ground up. Both flavors of the reset provide clean, semantic code and tons of flexibility.

4. YUI2 CSS Reset Yahoo's YUI2 CSS Reset is a set of drop-in stylesheets to begin your next project. The reset eliminates cross-browser inconsistencies in element rendering so that you can explicitly declare your own rules for these elements.
A useful tool in ensuring cross-browser design consistency, the reset is fully documented with lots of great examples and large community backing.

5. Eric Meyer's CSS Reset An oldie but a goodie, Eric Meyer's CSS Reset was one of the first templates to make the rounds and gain popularity. This popular reset has now been updated for HTML5.
Designed to be generic in nature, this stylesheet gives you the bare minimum, but in some ways also provides the most flexibility. It removes default rules set by the browser, eliminating inconsistency and leaving you with a completely clean slate to work with. All browsers are on even footing.

6. Starkers Starkers is a "completely naked," bare-bones WordPress HTML5 starter theme. The theme gives you a blank canvas to build upon, removing unnecessary code and providing clean, semantic markup for WordPress as well as support for menus, dynamic components, custom sidebar widgets and more.
Starkers also implements the YUI2 CSS Reset mentioned earlier, so all of the setup is done for you. All you have to do is start building.

7. Roots Roots is another WordPress starter theme that takes things just a bit further. Built upon Starkers, HTML5 Boilerplate and the Blueprint CSS framework, Roots gives you a robust set of tools for rapid theme development while incorporating tried and true technologies for ensuring cross-browser support for CSS and HTML 5.
Other Roots features include some bundled jQuery plug-ins (Cycle, Fancybox, etc.), an SEO-optimized robots.txt file and support for easy integration of social media content from Facebook and Twitter. Roots has a larger footprint than some other "blank slate" WordPress themes but if you're interested in quickly building large, robust, and full-featured WordPress sites, it's definitely worth a look.

More About: boilerplate, CSS, dev & design, HTML5, resets, template, web, Web Development
For more Dev & Design coverage:Follow Mashable Dev & Design on TwitterBecome a Fan on FacebookSubscribe to the Dev & Design channelDownload our free apps for Android, Mac, iPhone and iPad

It can be difficult to move from a static, pixel-based design approach to an elastic, relative method. Properly implemented, however, elastic design can be a viable option that enhances usability and accessibility without mandating design sacrifices.

A

We web designers get excited about the littlest things. Our friends in the print world must get a kick out of watching us talk about finally being able to achieve layouts on the web that they’ve taken for granted for years. Let’s face it: it’s easie

Typography is a sadly neglected aspect of the web design process, an oversight traditionally blamed on the technical limitations and unpredictability of the medium. While it is true that the web may not offer designers the same typographic freedom as prin

Blueprint is a CSS framework, which aims to cut down on your CSS development time. It gives you a solid CSS foundation to build your project on top of, with an easy-to-use grid, sensible typography, and even a stylesheet for printing.

JSDoc is a tool that parses inline documentation in JavaScript source files, and produces an documentation of the JavaScript code. This is typically in the form of HTML (example), but XML and XMI (UML) export are also supported. JSDoc is based on the (ver

The Best Directories of Free Open Source Web Design Templates There are tons of free design template directories on the net, but sorting through all of them can be a very tedious process. Instead, we suggest that you start with these four, which we consid