Webdesigninformer.com

Adactio Go to the source

Last week I described how I go about getting hold of mobile devices to test with at Clearleft . I finished by throwing open the door to any other web devs in Brighton who want to test on our devices: We’ve always had an open-door policy here, so if you want to pop around, use our WiFi, and test on our devices, you’re more than welcome. There was a great response from my fellow Brightonians offering to add some of their devices to the collection: @ adactio I have a Nokia N9 and a 3GS that I can share, if it’d be ok to leave them there? — Aegir Hallmundur (@aegirthor) April 30, 2012 @ adactio @ clearleft I’ve got a few phones that you don’t that I’m happy to leave in your capable hands. WP7, B2G, etc — Remy Sharp (@rem) April 30, 2012 Aegir popped ‘round yesterday and dropped off an iPhone 3GS and a very cute Nokia N9 . This morning I arrived in to the office to find that Aron had dropped off a Samsung Galaxy Tab… Read the rest here

Adactio Go to the source

In the final part of his series on responsive design in .net magazine, Paul talks about testing : The key thing to remember here is that any testing is better than no testing . Build up a test suite as large as you can afford, and find opportunities to test on other devices whenever you can. I agree wholeheartedly and I think that any kind of testing with real devices should be encouraged. I find it disheartening when somebody blogs or tweets about testing on a particular device, only to be rebuffed with sentiments like “ it isn’t enough .” It’s true—it isn’t enough …but it’s never enough. And the fact that a developer is doing any testing at all is a good thing. There are some good resources out there to help you get started in putting together a collection of test devices. … Read the rest here

Adactio Go to the source

.net Magazine is running a series of articles on their site right now as part of their responsive week. There’s some great stuff in there: Paul is writing a series of articles—one a day—going step-by-step through the design and development of a responsive site , and Wilto has written a great summation of the state of responsive images . There’s also an interview with Ethan in which he answers some reader-submitted questions. The final question is somewhat leading: What devices (smartphones/tablets) and breakpoints do you typically develop and test with? Ethan rightly responds: Well, I’m a big, big believer of matching breakpoints to the design, not to individual devices. If we’re after more future-proof responsive designs, we should stop thinking in terms of ‘320px’, ‘480px’, ‘768px’, or whatever – the web’s so much more flexible than that, and those pixels are a snapshot of the web as we know it today… Read the rest here

Eric Meyer Go to the source

Published this morning in A List Apart #344: an interview I conducted with Tantek Çelik , web standards lead at Mozilla, on the subject of Mozilla’s plan to honor -webkit- prefixes on some properties in their mobile browser. Even better: Lea Verou’s Every Time You Call a Proprietary Feature ‘CSS3,’ a Kitten Dies . Please—think of the kittens! My hope is that the interview brings clarity to a situation that has suffered from a number of misconceptions. I do not necessarily hope that you agree with Tantek, nor for that matter do I hope you disagree. While I did press him on certain points, my goal for the interview was to provide him a chance to supply information, and insight into his position. If that job was done, then the reader can fairly evaluate the claims and plans presented… 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

Adactio Go to the source

Aral recently released the videos from last September’s Update conference . You can watch the video of my talk if you like or, if video isn’t your bag, I’ve published a transcription of the talk . It’s called One Web, Many Devices and I’m pretty happy with how it turned out. It’s a short talk—just under 17 minutes—but I think I made my point well, without any um-ing and ah-ing. … Read the rest here

Adactio Go to the source

While I was in San Francisco for the last Event Apart of the year in December, Luke pulled me aside while he was preparing for his A Day Apart workshop on mobile web design. As befits the man who literally wrote the book on web forms and also wrote the the book on mobile-first design , Luke was planning to spend plenty of time covering input on mobile devices and he wanted my opinion on one of the patterns he was going to mention. Let’s say you’ve got your typical checkout form asking for credit card details. The user is going to need to specify the expiry date of their credit card, something that historically would have been done with select elements, like so: January February March April May June July August September October November December 2011 2012 2013 2014 2015 2016 2017 2018 2019 2020 With the introduction of the new input types in HTML5 , we can now just use input type=”month” . That’s particularly nice on mobile devices that support input type=”month” like Mobile Safari since iOS5. But the behaviour on non-supporting browsers would be to display just like input type=”text” …not ideal for inputting a date… Read the rest here

Adactio Go to the source

Dear Apple Claus, I’ve been a very good boy this year so I hope you don’t me asking for a little present. What I’d really like for Christmas is for you to fix that strange orientation scaling bug in Mobile Safari. Just in case you’ve forgotten about it, my friend Scott —who has been a very, very good boy this year (what with that whole Boston Globe thing)—put together a test page quite a while back to demonstrate the problem. Basically, if I set meta name=”viewport” content=”width=device-width, initial-scale=1.0″ then it means a pixel should be equal to a pixel: in portrait view, the width should be 320 pixels; in landscape view the width should be 480 pixels. But in Mobile Safari, if I move from portrait to landscape, the width jumps to a value larger than 480 pixels, which means the hapless user must double tap to bring the scale down to 1:1. … Read the rest here

Adactio Go to the source

I’m in Belfast right now for this year’s Build conference , so I am. I spent yesterday leading a workshop on responsive enhancement —the marriage of responsive design with progressive enhancement; a content-first approach to web design. I spent a chunk of time in the afternoon going over the thorny challenges of responsive images. Jason has been doing a great job of rounding up all the options available to you when it comes to implementing responsive images: Responsive IMGs, Part 1 , Responsive IMGs, Part 2 —an in-depth look at techniques, Responsive IMGs, Part 3 —the future of the img element. Personally, I have two golden rules in mind when it comes to choosing a responsive image technique for a particular project: The small image should be default. Don’t load images twice (in other words, don’t load the small images and the larger images)… Read the rest here

Snook Go to the source

From my presentation at StarTech , here are my slides. Fake it ’til you make it shows some code and examples on how to make a web app look more like a native mobile application. This can provide a way to build quick prototypes or to build using familiar technologies. … Read the rest here

Jason Santa Maria Go to the source

by Mike Monteiro It’s January of 1979 and we’re sitting inside the Plymouth Fury outside an AM/PM Mini Market in North Philadelphia. My father’s loyalty to Chrysler automobiles may be the defining commitment of his life. The blue Fury had replaced the black Valiant, which was even bigger. In three years it will be replaced by a Volaré station wagon, perhaps a nod to the suburban family life he continually promised my mother. … 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

Adactio Go to the source

After giving my language-centric talk at the Breaking Development conference I found it interesting to listen out for the terms that attendees and speakers were using to describe desktop-centric websites. Some of the adjectives I heard were: full site, standard site, regular site. Once again, I think that this kind of language can constrain our approaches to web design and development. In truth, a mobile site should be the standard, full, regular site; you can still go ahead and add more stuff for the desktop environment, but to think of it as the canonical instantiation isn’t helpful. It hinders our ability to think in a mobile-first responsive manner. … Read the rest here

Adactio Go to the source

The Breaking Development conference is wrapping up here on spacecraft Opryland One . It’s been a wonderful experience. The conference itself was superbly curated—a single track of top-notch speakers in a line-up that switched back and forth between high-level concepts and deep-dives into case studies. I hope that other conferences will take note of those key phrases: “single track”, “curated”, “top-notch speakers” (see also: An Event Apart , dConstruct , Mobilism ). I opened the show with a talk that sounds controversial: There Is No Mobile Web . … Read the rest here

Adactio Go to the source

The Brighton Digital Festival kicked off with a one-two punch of geek conferences: dConstruct and Update . Update was a labour of love from Aral who worked hard to put together an eclectic, slick event. It was mostly aimed at iOS developers but there was a lot of other stuff in there too, including a range of musical performances. Some speakers, like Matt Gemmell and Sarah , talked specifically about iOS design and development while others, like Cennydd , spoke of broader issues. In my opinion the most important talk of the day was delivered by Anna who laid bare the state of Britain’s education system—and by extension, Britain’s future… Read the rest here

Cameron Moll Go to the source

Golden Grid System: A ‘Folding’ Grid for Responsive Design : Joni Korpi, who developed the system: 16 columns sounds a bit much for anything other than huge widescreen monitors. This is where the folding, inspired by the DIN paper system and Unigrid, comes in. The 16 columns can be combined, or folded , into 8 columns for tablet-sized screens, and into 4 columns for mobile-sized ones. This way Golden Grid System can easily cover any screen sizes from 240 up to 2560 pixels. … Read the rest here

Hicksdesign Go to the source

Working with Steve Pearce and Mark McLaughlin from Skype, and genius animator Julian Frost , Hicksdesign has updated the complete set of Emoticons for its desktop and mobile clients. Currently released in the Windows and Android versions, Mac and iOS will follow later. The brief was simple, update the Emoticon set, providing multiple sizes (20,30,40,60,80px), but retain the style that is already familiar to millions of users worldwide. The original set was designed by Priidu Zilmer and only existed in one size – 19px. An odd numbered grid can allow you to centre elements better, but the decision was taken to start at 20px to allow more straightforward enlargement. This meant some of the basic proportions of the eyes to head had to be changed… Read the rest here

Hicksdesign Go to the source

Working with Steve Pearce and Mark McLaughlin from Skype, and genius animator Julian Frost , Hicksdesign has updated the complete set of Emoticons for its desktop and mobile clients. Currently released in the Windows and Android versions, Mac and iOS will follow later. The brief was simple, update the Emoticon set, providing multiple sizes (20,30,40,60,80px), but retain the style that is already familiar to millions of users worldwide. The original set was designed by Priidu Zilmer and only existed in one size – 19px. … 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

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