Webdesigninformer.com

Using CSS transitions can be quite fun. But what’s not fun is when you want to transition something that needs to use display:none or visibility:hidden (or really, any non-transitionable property). For example, let’s say you have a dialog. When the user clicks on the close button, you want the dialog to fade out — a simple transition from opacity:1 to opacity:0 . The problem is that the element is still there, even though you can’t see it… Read the rest here

Detection

SimpleBits Go to the source

One of the recurring themes at the Mobilism conference earlier this year—and more recently at the Breaking Development conference —was the subject of server-side user-agent detection. I posed the question in absurdum on the Mobilism browser panel : A useful tool for developers or spawn of Satan: which is it? It’s a contentious issue, as Alex’s strident defence illustrates. Personally, I’ve never been a fan but that’s mostly because of the long history of really, really bad UA-detection in the past. When I discussed this issue with Lyza we came to a détente, agreeing that there is nothing inherently wrong with server-side UA-detection: it’s what you do with it that counts. In their presentation at Breaking Development Bryan and Stephanie outlined the kind of detection that they have used. … Read the rest here

Adapted

There’s no doubt that employing a mobile first , responsive design approach to a new project is a wonderful way forward for many sites. I think the most exciting thing about seeing these best practices develop over the last few years is that it finally feels like web design. Finally. That we’re not designing sheets of paper that happen to be on screen. So yes, for new projects under the right circumstances a responsive plan is often the ideal… Read the rest here

Spin.js, a Loading Spinner Sans Images

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

Mobilism transcription

Cameron Moll Go to the source

Remember that mobile browser panel I moderated at the Mobilism conference in Amsterdam earlier this year? Well, I’ve had the whole thing transcribed. You can now: read the transcription , watch the video or listen to the audio . Enjoy! Tagged with mobilism panel conference mobile browsers transcription … Read the rest here

CSS Mask-Image & Text

CSS Mask-Image & Text : Here’s something I wasn’t aware of: Add a texture to HTML text using the CSS property mask-image and a transparent PNG. Currently works only in WebKit but degrades nicely for other browsers. Thanks, Trent. … Read the rest here

Mobilism browser panel

I spent the last few days in the beautiful surroundings of Amsterdam for Mobilism . ‘Twas an excellent affair: a well-organised, focused single-track conference. It may have helped that Amsterdam itself was looking bloody gorgeous for the duration. All the talks were great but I was particularly happy to finally hear Bryan and Stephanie Rieger having so often favourited their presentations on Slideshare . … Read the rest here

Questioning mobile browsers

I’m off to Amsterdam later this week for Mobilism , a design and development conference with a focus mobile devices . I won’t be giving a talk—there are far more qualified and talented people on the roster—but I will be moderating a panel. I love moderating panels . My panelists will be exemplars of that strange breed of supernerd, the browser maker. Specifically, the mobile browser maker. … Read the rest here

Font sizing with rem

Andy Budd Go to the source

Determining a unit of measurement to size our text can be a topic of heated debate, even in this day and age. Unfortunately, there are still various pros and cons that make the various techniques less desirable. It’s just a matter of which less-desirable is most desirable. There are two main techniques that are extolled: Size with px Size with em Let’s review these two approaches before I reveal the magical third. Sizing with px In the early days of the web, we used pixels to size our text. … Read the rest here

The app goldrush is over – it’s time to apply some business sense

The rise of smart devices like the iPhone and iPad has led to an application goldrush, with companies racing to stake their claims. In the early days we saw a few lucky pioneers strike gold with novelty apps. There were also a handful of independent developers and well-known brands that invested in user experience and captured the high end of the market. However, as with most goldrushes, the obvious targets were depleted very quickly. Digital prospectors are arriving to find a very different market, one rife with competition and few obvious deposits to mine. Furthermore, our appetite for apps seems to be dwindling as we fall back on a few must-have staples. … Read the rest here

Seeing the matrix()

Over the weekend, Aaron Gustafson and I created a tool for anyone who wants to resolve a series of CSS transforms into a matrix() value representing the same end state. Behold: The Matrix Resolutions . (You knew that was coming, right?) It should work fine in various browsers, though due to the gratuitous use of keyframe animations on the html element’s multiple background images it looks best in WebKit browsers. The way it works is you input a series of transform functions, such as translateX(22px) rotate(33deg) scale(1.13) . The end-state and its matrix() equivalent should update whenever you hit the space bar or the return key, or else explicitly elect to take the red pill. … Read the rest here

Respond

Yesterday I documented the way I invoke media queries on Huffduffer while making sure that desktop versions of Internet Explorer get the layout styles. There’s an alternative way of serving up layout styles to IE that doesn’t involve splitting up your stylesheets. Supersmart Scott Jehl has written a handy script called Respond that’s a textbook example of a browser polyfill : A polyfill, or polyfiller, is a piece of code (or plugin) that provides the technology that you, the developer, expect the browser to provide natively. Flattening the API landscape if you will In the case of Respond, you just need to make sure that you close every min/max-width media query declaration block with a comment: /*/mediaquery*/ The script then executes those blocks if the specified conditions are met. … Read the rest here

Windows mobile media queries

When I met up with Malarkey right before An Event Apart in Seattle he told me about a quick bit of guerrilla testing he had been doing. He popped into a store selling Windows Phone 7 devices and started surfing the web. Specifically, he started looking at sites using responsive design like Jon ’s and Colly ’s. Most of the sites he looked at displayed the desktop layout instead of adapting to the smaller dimensions of the screen. That’s because the rendering engine for Windows Phone 7—some bastard hybrid of IE 7 and IE6—doesn’t support media queries. So if you’re using media queries to undo width and float declarations, the media queries won’t be executed… Read the rest here

Absolutely Positioned Textareas

One method that I’ve been using quite a bit for positioning elements is setting them absolute and using left, right, top and bottom values to lock inner elements relative to an outer container. I like using this technique because padding will not cause any positioning issues like using width can—especially when widths need to be percentage-based. textarea { position: absolute; left: 5px; top: 5px; right: 5px; bottom: 5px; } I tried positioning a textarea using this technique and everything looked fine in Webkit but the moment I went to check it in other browsers, I was surprised to find it wasn’t respecting the right and bottom values. Yes, the element was absolutely positioned. And yes, the left and top values were working fine. … Read the rest here

Keyboard Accessibility for Web Applications

One of the things I really enjoyed working on (and continue to enjoy working on) is keyboard access in the new Yahoo! Mail. As a fan of using the keyboard, I wanted to make sure that using Mail felt natural and was easy to move around the application. This is much harder than it looks because we have to establish a balance between a web page model and an application model. Todd Kloots, from the accessibility team at Yahoo!, and I had a number of discussions to establish a consistent pattern that could be applied to all widgets within a page and could be applied to all products that we were building. It was important to establish a consistency in design and a consistency in implementation… Read the rest here

Inconsistent Transitions

Here’s an interesting little test case for transitions . Obviously you’ll need to visit it in a browser that supports CSS transitions, and additionally also CSS 2D transforms. (I’m not aware of a browser that supports the latter without supporting the former, but your rendering may vary.) In Webkit and Gecko, hovering the first div causes the span to animate a 270 degree rotation over one second, but when you unhover the div the span immediately snaps back to its starting position. In Opera 11, the span is instantly transformed when you hover and instantly restored to its starting position when you unhover. … Read the rest here

Same As It Ever Was

I recently became re-acquainted with a ghost, and it looked very, very familiar. In the spring of 1995, just over a year into my first Web gig and still just over a year away from first encountering CSS, I wrote the following: Writing to the Norm No, not the fat guy on “Cheers.” Actually, it’s a fundamental issue every Web author needs to know about and appreciate. Web browsers are written by different people. Each person has their own idea about how Web documents should look. … Read the rest here

CSS3 Tests