Webdesigninformer.com

Adactio Go to the source

There’s been quite a brouhaha over the past couple of days around the subject of standardising responsive images. There are two different matters here: the process and the technical details. I’d like to address both of them. Ill communication First of all, there’s a number of very smart developers who feel that they’ve been sidelined by the WHATWG . Tim has put together a timeline of what happened : Developers got involved in trying to standardize a solution to a common and important problem. The WHATWG told them to move the discussion to a community group. … Read the rest here

Eric Meyer Go to the source

A couple of weeks back I wrote about customizing your markup , but I got an important bit wrong and while I’ve corrected the post, I wanted to clear up the error in detail. I said that you wrap portions of your document (or the whole thing) in an element element and use the customized element inside. This is incorrect , and actually a very bad idea. In fact, you define your customized elements using an element element and then use the customized elements later in the document. Something like this: <element extends="h1" name="x-superh1"> </element> <h1 is="superh1">UltraMegaPower!!!</h1> <h1>Regular Old Power</h1> The line break inside the element element isn’t required—I just threw it in for clarity. … Read the rest here

Eric Meyer Go to the source

I’ve been messing around with native calculated values in CSS, and there’s something a bit surprising buried in the value format. To quote the CSS3 Values and Units specification : Note that the grammar requires spaces around binary ‘+’ and ‘-’ operators. The ‘*’ and ‘/’ operators do not require spaces. In other words, two out of four calculation operators require whitespace around them, and for the other two it doesn’t matter. … Read the rest here

Adactio Go to the source

South by Southwest has become a vast, sprawling festival with a preponderance of panels pitched at marketers, start-ups and people that use the words “social media” in their job title without irony. But there were also some great design and development talks if you looked for them. Samantha gave a presentation on style tiles , which I unfortunately missed but I’ll be eagerly awaiting the release of the audio. I also missed some good meaty JavaScript talks but I did manage to make it along to Jen ’s excellent introduction to HTML5 APIs . Andy ’s talk on CSS best practices was one of the best presentations I’ve ever seen. He did a fantastic job of tackling some really important topics… Read the rest here

Adactio Go to the source

A year and a half ago, Eric wrote a great article in A List Apart called Prefix or Posthack . It’s a balanced look at vendor prefixes in CSS that concludes in their favour: If the history of web standards has shown us anything, it’s that hacks will be necessary. By front-loading the hacks using vendor prefixes and enshrining them in the standards process, we can actually fix some of the potential problems with the process and possibly accelerate CSS development. So the next time you find yourself grumbling about declaring the same thing four times, once for each browser, remember that the pain is temporary. It’s a little like a vaccine—the shot hurts now, true, but it’s really not that bad in comparison to the disease it prevents. … Read the rest here

Snook Go to the source

I was making a change to a page that needed to pull from a remote API and make changes to various parts of the page. Sounds like the time to pull out jQuery and Ajax, doesn’t it? Instead, I just used old fashioned JavaScript. Actually, I used new fashioned JavaScript. Browsers haven’t stood still in the advent of libraries and frameworks. As a result, we can take advantage of those features when we need to bake in a little extra… Read the rest here

Eric Meyer Go to the source

Right in the middle of AEA Atlanta—which was awesome , I really must say—there were two announcements that stand to invalidate (or at least greatly alter) portions of the talk I delivered. One, which I believe came out as I was on stage, was the publication of the latest draft of the CSS3 Positioned Layout Module . We’ll see if it triggers change or not; I haven’t read it yet. The other was the publication of the minutes of the CSS Working Group meeting in Paris , where it was revealed that several vendors are about to support the -webkit- vendor prefix in their own very non-WebKit browsers. Thus, to pick but a single random example, Firefox would throw a drop shadow on a heading whose entire author CSS is h1 {-webkit-box-shadow: 2px 5px 3px gray;} . As an author, it sounds good as long as you haven’t really thought about it very hard, or if perhaps you have a very weak sense of the history of web standards and browser development… Read the rest here

Hicksdesign Go to the source

There are a few apps that I’m particularly enjoying using at the moment, so I thought I’d share in case any of them are news to you: Choosy Choosy does a seemingly simple task, and does it very well. For a start, it provides a central preference pane to choose your default browser, but its main thrust is letting you choose which browser to open a link in. You can do this either manually via a chooser display (right), or automatically depending on order of preference. My favourite feature is ‘behaviour rules’. For example, I get emails from Opera’s internal bug tracking system, and I always want to open these in Opera, no matter what my default browser is at the time. … Read the rest here

Snook Go to the source

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

Adactio 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

SimpleBits Go to the source

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

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

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

Cameron Moll Go to the source

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

Adactio Go to the source

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

Adactio Go to the source

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

Snook 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

Andy Budd Go to the source

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

Eric Meyer Go to the source

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

Adactio Go to the source

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