Webdesigninformer.com

Snook Go to the source

It is once again that time of year where I reflect on the year that has passed and contemplate the year the come. Professionally On a professional level, this has been a fantastic year but still not without its ups and downs. This year capped my second and final year with Yahoo!. Yahoo! has been a great experience for me and exposed me to an environment that I hadn’t worked in before. I was able to work with large teams on a large scale across multiple products. To know that I had a big part to play in the success of those projects is very rewarding. … Read the rest here

Snook Go to the source

I hesitate putting this information out there as I’m not sure what its relevance is. I merely note it as interesting, especially in light of gender inequality in our field. In number crunching the people who have purchased a SMACSS e-book or site membership, I’ve noticed that the numbers are heavily skewed in one direction: 94.5% of the purchases are by men. That means only 5.5% of purchases were by women. I wonder if there is anything in the way that I’ve presented the information that has turned women off from buying the book. Since I market the book under my personal ‘brand’, especially via Twitter, I wonder if my particular following is also heavily skewed towards men (I suspect it is). … Read the rest here

SimpleBits Go to the source

Yesterday, a copy of my latest book arrived in the mail, the Third Edition of Bulletproof Web Design . The first edition came out back in 2005, and I’ve been revising it every few years. This latest edit was a bit larger than the 2nd because so much has changed. HTML5, CSS3, Responsive Web Design—all of these things dovetail nicely into the core bulletproof concepts from the original book. If you have the 2nd edition, the new version is likely not a necessary upgrade (New Riders probably loves me for saying that). Meaning, the guidelines for building flexible websites are still there, but a lot of the code and some of the examples have been brought up to speed. … Read the rest here

Hicksdesign Go to the source

Todays 24ways article is Displaying Icons with Fonts and Data- Attributes , taken partly from Chapter 6 of the upcoming Icon Handbook , but rewritten to fit to the 24ways format. Instead of using the traditional route of PNG s, web fonts offer a scalable and resolution independent solution. Combined with HTML5 data attributes, you can create one CSS rule to style them all in one go. This article covers both the advantages and disadvantages of the technique. Thanks must go to Drew Wilson who helped me understand how to use data attributes. He created Pictos the excellent icon font used in the article, and his experience in making Pictos was a valuable source of research… Read the rest here

Adactio Go to the source

On the eighteenth day of last year’s 24 ways, Paul Hammond wrote a great article called Speed Up Your Site with Delayed Content . He outlined a technique for loading some content — like profile avatars — after the initial page load. This gives you a nice performance boost. There’s another situation where this kind of delayed loading could be really handy: mobile-first responsive design. Responsive design combines three techniques: a fluid grid flexible images media queries At first, responsive design was applied to existing desktop-centric websites to allow the layout to adapt to smaller screen sizes… Read the rest here

Andy Budd Go to the source

I first came across the concept of the Lean Start-up® three years ago while speaking at the Web 2.0 Summit in New York. I’d finished my duties and there was little else of interest on the schedule so I dropped into a panel discussion about start-ups. One of the panellists—a chap called Eric Reis—explained how he’d been involved in two start-ups. One had been a catastrophic failure while the other a moderate success. As Eric began to recount his story I found myself nodding along with recognition and agreement. His previous start-up had taken too long to build and by the time it was ready they’d almost run out of money. … Read the rest here

Snook Go to the source

I was at Adobe MAX this week, where we got to see all of the new and exciting things coming from Adobe. I got to present my talk on CSS twice and, as promised, here are my slides from that: … Read the rest here

Eric Meyer Go to the source

For very little reason other than I was curious to see what resulted, I’ve compiled a list of various CSS modules’ version histories, and then used CSS to turn it into a set of timelines . It’s kind of a low-cost way to visualize the life cycle of and energy going into various CSS modules. I’ll warn you up front that as of this writing the user interaction is not ideal, and in some places the presentation suffers from too much content overlap. This happens in timelines where lots of drafts were released in a short period of time. … Read the rest here

Snook Go to the source

With all my work at Yahoo!, I’d been thinking more and more about CSS architecture. I really sat down and took the time to analyze my process. What’s the most flexible but straightforward way to do it? How does this fit in with the team process and how does this work in comparison to how other people are doing it? I started making notes and eventually started writing up my thoughts… Read the rest here

Snook Go to the source

I don’t think I’m the first person to come up with this idea but figured I’d document it. If you’re unfamiliar with the Yellow Fade Technique, make your way over to the 37signals article that ushered in the design effect that was all the rage for awhile. This is the same thing but using CSS animations. /** * Quick fade on target to attract user attention */ :target { -webkit-animation: target-fade 3s 1; -moz-animation: target-fade 3s 1; } @-webkit-keyframes target-fade { 0% { background-color: rgba(0,0,0,.1); } 100% { background-color: rgba(0,0,0,0); } } @-moz-keyframes target-fade { 0% { background-color: rgba(0,0,0,.1); } 100% { background-color: rgba(0,0,0,0); } } Just a short and sweet blog post. You can go back to work now. … Read the rest here

Cameron Moll Go to the source

A Farewell to CSS3 Gradients : Alex Walker: While the idea of programmable gradients is great, using them is seriously messy. Even in perfect-​​browser-​​utopia, gradients are consciously limited to rudimentary linear or radial application. You certainly can’t combine them, or make them contour a shape or anything useful like that…. In short, [CSS gradients are] a blunt instrument with cranky syntax and patchy support. … Read the rest here

Eric Meyer Go to the source

In the course of experimenting with some new artistic scripts to follow up “ Spinning the Web “, I ran across an interesting interaction between positioning and transforms. Put simply: as per the Introduction of the latest CSS 2D Transforms draft , a transformed element creates a containing block for all its positioned descendants. This occurs in the absence of any explicit positioning of the transformed element. Let’s walk through that. … Read the rest here

Cameron Moll Go to the source

Designers vs Coding : Frank Chimero, a relatively recent convert to HTML/CSS: 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. … Read the rest here

Cameron Moll Go to the source

Spin.js, a Loading Spinner Sans Images : Uses CSS3 to render the animation, falling back to VML for Internet Explorer (all the way back to IE6). 2.8K of total code and supported by newer versions of most browsers. /via @ jc … Read the rest here

Adactio Go to the source

Right after I wrote about combining flexbox with responsive design —to switch the display of content and navigation based on browser size—I received an email from Raphaël Goetter . He pointed out a really elegant solution to the same use-case that makes use of display:table . Let’s take the same markup as before: <body> <div role=”main”> <p>This is the main content.</p> </div> <nav role=”navigation”> <p>This is the navigation.</p> <ol> <li><a href=”#”>foo</a></li> <li><a href=”#”>bar</a></li> <li><a href=”#”>baz</a></li> </ol> </nav> </body> The source order reflects the order I want on small-screen devices (feature phones, smart phones, etc.). Once the viewport allows it, I’d like to put that navigation at the top. I can do this by wrapping some display declarations in a media query: @media screen and (min-width: 30em) { body { display: table; caption-side: top; } [role="navigation"] { display: table-caption; } } That’s it… Read the rest here

Snook Go to the source

I’ve been thinking quite a bit about CSS architecture these days. One thing in particular that has crossed my mind is how to handle certain situations. For example, we want to hide content on the page and then reveal it (or vice versa). In JavaScript, this is relatively straightforward: get an element, and apply a class or remove a class to change the state of the element. … Read the rest here

Cameron Moll Go to the source

Hiring: Front-End Designer/Developer at Roland : I’ve played a number of Roland keyboards over the years (I play only a little piano, and mostly by ear). The touch-sensitivity nearly rivals that of a real piano. And I swoon over their V-Drum kits every time I’m in a music shop, equally matching the sensitivity and touch of a “real” kit. This is a contract position in Los Angeles and involves work on the company’s web properties, including mobile. jQuery/HTML/CSS know-how a must. … Read the rest here

Cameron Moll Go to the source

Content Choreography : I’m a little late linking to this, but no matter. Trent Walton, on the topic of responsive/adaptive layouts and how content architecture should be examined with scrutiny by all team members: The production model of passing a site down the assembly line from design to development to launch seems to be an inefficient approach for responsive & adaptive site design. I think the Paravel method of gathering around a table & slugging every decision out until launch lends itself to the level of reiteration necessary for these projects. We’ve found that the best way forward is to pull all members of a team together to design, build, test and evaluate in multiple quick rounds. And of course, Trent’s editorial artwork is terrific, as always. … Read the rest here

Hicksdesign Go to the source

It’s all too often the case that as soon as a project is finished, I’m on to the next one in the queue, without any time to stop. I’m sure others know this feeling – there’s no time to reflect and blog about the work you’re doing. So here starts the catch up… Back in April, a project I was involved in was finally launched, the new Identity and website for Five Details , previously known as ExtendMac, whose “Flow”: FTP client won a Runner up prize in the prestigous Apple Design Awards in 2008. Brian Amerige, who created Flow was getting ready to release a new iOS app called Seamless to coincide with the relaunch, and Hicksdesign were bought on board to create a new identity and website. After a few different explorations, we settled on the simple logo of the 2 ‘D’ shapes that together form a ‘5’ in the negative space: The logo has white and orange variants, working on either a white or dark background, as well as ‘layered’ version, for use in backgrounds: Brian and I discussed suitable type treatments, and I felt that LFT Etica was the right fit for this project… Read the rest here

Cameron Moll Go to the source

A Whole Bunch of Amazing Stuff Pseudo Elements Can Do : Like it says. … Read the rest here