Instead of creating static wireframes & static JPEG mockup, this approach calls for building prototypes directly in HTML and CSS. This has several advantages:

Welcome on Brush King : Free Photoshop Brushes

Normalize vs Reset
It’s worth understanding in greater detail how normalize.css differs from traditional CSS resets.

Normalize.css preserves useful defaults

Resets impose a homogenous visual style by flattening the default styles for almost all elements. In contrast, normalize.css retains many useful default browser styles. This means that you don’t have to redeclare styles for all the common typographic elements.

When an element has different default styles in different browsers, normalize.css aims to make those styles consistent and in line with modern standards when possible.

Normalize.css corrects common bugs

It fixes common desktop and mobile browser bugs that are out of scope for resets. This includes display settings for HTML5 elements, correcting font-size for preformatted text, SVG overflow in IE9, and many form-related bugs across browsers and operating systems.

One of my least favorite parts about layout with CSS is the relationship of width and padding. You're busy defining widths to match your grid or general column proportions, then down the line you start to add in text, which necessitates defining padding for those boxes. And 'lo and behold, you now are subtracting pixels from your original width so the box doesn't expand.

Ugh. If I say the width is 200px, gosh darn it, it's gonna be a 200px wide box even if I have 20px of padding. So as you know, this is NOT how the box model has worked for the past ten years. Wikipedia has a great history of this box model.

Anyway, I have a recommendation for your CSS going forward:

/* apply a natural box layout model to all elements */
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
This gives you the box model you want. Applies it to all elements. Turns out many browsers already use border-box for a lot of form elements (which is why inputs and textareas look diff at width:100%;) But applying this to all elements is safe and wise.

In the real world, responsive design is nothing new. Products adapt to our needs. Technology monitors local environments to adjust lighting, temperature and even physical spaces. But what about web? In designing with words, the desire to bind content to a device has been around as long as there have been books. Mark will take you from desire to implementation, from theory to practice. How can we build upon what we know from literally hundreds of years of responsive design practice to define a new era of online publishing? An era where we strive for the same level of human / technology connection that started with the monks.

I’ve been recently working on optimizing performance of a so-called one-page web app. The application was highly dynamic, interactive, and was heavily stuffed with new CSS3 goodness. I’m not talking just border-radius and gradients. It was a full stack of shadows, gradients, transforms, sprinkled with transitions, smooth half-transparent colors, clever pseudo-element -based CSS tricks, and experimental CSS features.

Aside from looking into bottlenecks on Javascript/DOM side, I decided to step into the CSS land. I wanted to see the kind of impact these nice UI elements have on performance. The old version of the app — the one without all the fluff — was much snappier, even though the JS logic behind it hasn’t changed all that drastically. I could see by scrolling and animations that things are just not as quick as they should be.

Was styling to blame?

Fortunately, just few days before, Opera folks came out with an experimental “style profiler” (followed by WebKit’s ticket+patch shortly after). The profiler was meant to reveal the performance of CSS selector matching, document reflow, repaint, and even document and css parsing times.

As 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.

Have you ever heard the phrase “Content is King”? Being a Web developer, and therefore having a job that’s often linked to content creation, it’s likely you have. It’s a fairly overused but true statement about what draws visitors to a site.

From a Web developer’s perspective, however, some may argue that speed is king. More and more, I’m starting to favour that stance. In recent years many experienced front-end engineers have offered their suggestions on how we can improve the user experience by means of some performance best practices.

Unfortunately, CSS seems to get somewhat overlooked in this area while many developers (for good reason) focus largely on JavaScript performance and other areas.

In this post, I’ll deal with this often overlooked area by introducing you to the concept of object oriented CSS and how it can help improve both the performance and maintainability of your Web pages.

The ‘tiny screen first’ boilerplate extension*

‘320 and Up’ prevents mobile devices from downloading desktop assets by using a tiny screen’s stylesheet as its starting point. Try this page at different window sizes and on different devices to see it in action.

Welcome to the home of the 978 and counterpart grid systems.

Earlier this year I gave a talk (slides) outlining the latest and greatest in mobile performance, including a bit of my own unscientific research into carrier latency and bandwidth thanks to boomerang.js.
I realized that interest in mobile performance has exploded recently, especially with Steve Souders announcing his focus on mobile, and I thought it was time for an update, this time in blog form. Also, my old slides have been somewhat embarrassing. For some strange reason, at the time I wanted to give S5 a try – that outdated, ancient, not-performant slideshow framework. The result is a slideshow on performance that loads slowly… doh! (incidentally, I recommend deck.js as an alternative).
In any case, it was time for a roundup of mobile performance best practices, in blog form. I’m not sure if it’s properly called a manifesto, but it is what it is! Onward!

Recently at Mark Boulton Design, we’ve been working on a redesign of the global visual language for a large sports network. Like many web sites delivering news and editorial content, they rely on advertising for their revenue — either through multiple ad slots on the page, or from video pre-rolls.
Early on in the project, we discussed Responsive Web Design at length. From an editorial and product perspective, it makes perfect sense. Who wouldn’t want their content adapting to a device their reading it on? Who wants to pinch-zoom again and again? From a business and product perspective, we’ve seen this from multiple clients who want to take advantage of certain interactions on certain devices — swiping for example — for users to better engage with the content in a more native way. All good. And then advertising comes along and things get challenging.
Here’s the problem as I see it:
A large number of sites rely on advertising for revenue. Many of those sites will benefit from a Responsive Web Design approach.
Web advertising is a whole other industry.
Ad units are fixed, standardised sizes.
They are commissioned, sold and created on the basis of their size and position on the page
Many ads are rich (including takeovers, video, pop-overs, flyouts and interactions)

There are those points in every interactive designer’s career when he becomes fed up with producing the same set of graphics all over again for every website he designs. It could be the social network icons, gallery arrows or any number of his «signature» butterflies for the footer of each of his projects. Similar for interactive developers that have to slice the same GIFs and PNGs each time art-director asks them to.

Until now. We want creative people to spend time on creative things. So we came up with the typeface that includes all frequently used iconographics and symbols. Although, the idea is not hot-baked — Webdings and Windings have been around for quite a time — all of them have a lot of unnecessary and sometimes actually scary symbols.

Web Symbols is a set of vector html-compliant typefaces, so it might be used in any size, color and browser (okey, mostly — but IE7 for sure).

An explanation of the CSS animation on Apple's iPhone 4S webpage

The "phone stage" (blue-bordered box) contains all 6 "slides" of the animation sequence and has a transition css property with a duration and timing function (a cubic bezier curve). For the phone stage to cycle from one slide to the next, its css transform property is updated with new translate and rotate values. At the end of the cycle, the phone stage's transition duration is temporarily set to 0ms while slide 6 resets to slide 1.

This demo only works in recent versions of safari, chrome, firefox, and opera. In the real version, the caption for each slide animates separately and the site degrades well in older browsers.

En skärmbild med exempel på hur liten ytan själva artikeln tar och resten är bara fluff och annonser.

If you are anything like me, then as a designer you are also probably a bit of a curmudgeon, though perhaps you consider it perfectionism – and justifiably so. You have honed a specific workflow you adhere to because that is what works, dang it. Woe unto anyone who suggests you are not doing things in the best possible way, right? Yes, exactly! Except, well… no.

I believe my first reaction to Wynn Netherland, when he told me I ought to try Sass and that perhaps I would see a boost in productivity, was something along the lines of: “Bah, get off my lawn” — a reference to the cantankerous character played by Clint Eastwood in Gran Torino.

I came to realize that his suggestion was not a subtle way of saying “I know something you don’t know” (though he did), but more of a friendly nudge towards greater efficiency. He was just being a good neighbor, so to speak.

So, I am writing this post in an attempt to get designers out there (who are also already CSS savvy) to try Sass and Compass. I aim for this to be the article I wish I had read when I was first contemplating Sass but (at the time) did not consider it worthwhile. I could not have been more wrong.

We often get potential clients innocently ask us “What does a website cost?” and as we're sure you can appreciate, often it's not a simple matter working that out.

A website can have many components, these are just some of the things that can go into making a website to illustrate why it's simply not possible to give a figure off the top of our heads and that building a great website requires thought, planning and a partnership between client and agency.

Not all of the things on this page are needed on every website but we hope it gives potential clients a little more insight into what can be involved then we're happy.

Bootstrap is a toolkit from Twitter designed to kickstart development of webapps and sites.
It includes base CSS and HTML for typography, forms, buttons, tables, grids, navigation, and more.
Nerd alert: Bootstrap is built with Less and was designed to work out of the gate with modern browsers in mind.

A decade ago I started a web design company. We grew and grew, and after ten years of hard work, I’ve finally been able to get rid of it.

Don’t get me wrong – we were successful, had fun and did good work. At our peak we had over 200 clients and 15 full time staff, making us the largest such company in our city. We’ve worked on great projects for some big name clients and we even made some money too.

Little by little however, the years ate away at my soul. This year we finally left it all behind and moved onto our own products, and I’ve never been happier.

So this is why.

Ethan Marcotte established the idea of responsive web design in his 2010 A List Apart article of the same title.  Succinctly, responsive web design is device-agnostic content presentation. A responsive design looks great on a desktop monitor, a tiny phone screen or a large format display.  This brief paper first details where responsive web design fits in the front end design stack. Then it will describe how a responsive web design is constructed.

The IAB Ad Unit Guidelines are intended for marketers, agencies and media companies for use in the creating, planning, buying and selling of interactive marketing and advertising.  The IAB’s Ad Sizes Working Group meets on a bi-annual basis to review proposed new ad units and issue updated voluntary guidelines as appropriate.  The process whereby these new units are reviewed and considered can be downloaded here.

Publishers
These voluntary guidelines provide a framework for advertising inventory and web page design. The goal is to reduce and simplify the amount of work for agencies that may be faced with having to create several assets of a similar size for different publishers, e.g. 300x95, 300x100, 300x105 pixels.  The recommended file weights and animation lengths are specifically for animated in-page display ads, typically using an authoring program such as Adobe Flash or appearing as animated GIFs.  For creative guidelines for Rich Media ad formats, such as “peelbacks” and “transitionals” (previously referred to as “over-the-page” units), please see the IAB Rich Media Guidelines.
 
You are encouraged to examine the standardized units and consider them for inclusion into your product offerings.
 
Agencies & Advertisers
As you expand and utilize greater creativity in your interactive messaging, these Guidelines suggest various units that are being introduced or offered by various publishers.  Please consult your partners to understand their full creative specifications.
 
We also encourage agencies to use the IAB Creative Spec Database as a simple, easy-to-use centralized source of interactive advertising creative specifications.

NOTE: All dimensions are in pixels.

Now lets take a look at creating forms using HTML5. While browser support isn't 100% yet that we can forgo Javascript, we are getting close. There are now standard field attributes to recognize an email address input, placeholder text, autofocus and more.

Once you have created your barebone form it is time to style it with CSS. Add some gradients to the fields, create a nice image free button and use some nice font.

To prepare for our upcoming Navigation Design seminar, we've been running user studies of various navigation features. As always, some test poorly. Also as always, the more faddish features — such as tag clouds — exhibit major usability problems.

Luckily, other Web trends fare well in user testing because they have inherently good usability and match user behaviors and goals. Indeed, one particular navigation design — the mega drop-down menu — tested well enough that I want to encourage its wider use.

Given that regular drop-down menus are rife with usability problems, it takes a lot for me to recommend a new form of drop-down. But, as our testing videos show, mega drop-downs overcome the downsides of regular drop-downs. Thus, I can recommend one while warning against the other.

Funka Nu har publicerat ett gäng ikoner som är fria att användas på en webbplats för att användaren ska känna igen sig (t.ex. en utskriftsikon).