Content Folding | CSS-Tricks

It's a good idea to keep an eye on techniques we can use in the (near) future. Chris Coyier shows us how we could use CSS Regions to somehow fold content on a more clever way that our current techniques allow us to.

css3 responsive

Douchebags, ebooks and decahedrons. is published on The Daily Nerd.
The Daily Nerd by Vasilis van Gemert is licensed under the Creative Commons Attribution 3.0 Unported license. Use it in another way? You can always ask.
Are you happy with the Daily Nerd? Buy an original Daily Nerd t-shirt!

Day one: Native vs web

Horace Dediu started the conference with a talk about David and Goliath: it’s always small, seemingly harmless newcomers that beat old established giants. By looking at the past he tried to predict the future. The most spectacular prediction he made was that Siri might be the next revolution on ways we get things into our devices after keyboard, mouse, and touch. I actually don’t believe that, it’s way too noisy and thus way too obtrusive. I don’t want to work in an office where people are constantly talking to their phone. I found Scott Jenson‘s prediction about input and behaviour based on nearby things much more appealing, but more on that on day two.

Peter-Paul Koch gave us a very clear overview of the mobile OS and browser landscape, a necessary talk, it is important to understand what’s happening around us. This was actually the first rather depressing talk: all decisions on mobile (web) seem to be made on the one hand by companies who don’t seem to give a fuck about their users and on the other hand by organizations that are rather slow. Yes, that’s depressing for an audience of 350 eager developers and designers who want to make great stuff. But the thing I found most depressing started with the talk that James Pearce gave.

Emulate

This was actually an excellent talk, James Pearce is a great presenter and a pleasure to listen to, I really enjoyed his talk. This somehow surprised me because in writing he can be quite annoying. He very much wants web technologies to be able to do the same great stuff that native technologies can do. At first he distinguished some practical disadvantages the web has: discovery, distribution and monetization of which in my opinion only monetization is a somehow valid point. A good point he made was that distribution and discovery are much easier for apps that give an answer to the question What apps do my friends use? Another interesting position he takes is that we should not support older browsers at all, that things like progressive enhancement and graceful degradation (two terms he spoke with patronizing disgust) are actually bad things and that they are holding back the web, stopping innovation. And in a way, of course, he’s right: the reason we still have to support IE7 and IE8 is because we support them. Users won’t upgrade if the web is not broken. But his main message is that we should try to make stuff that’s as great as the things we see in native apps. And that’s the biggest flaw in his story I think: the web is more than just apps, it can do things that apps can’t. But still, a great talk, but rather depressing to see that some things are still impossible, and will be impossible for a while.

The organization decided there should be room for inexperienced speakers so there were some fast tracks. I saw an informative talk about Youtube and how they made sure that videos can be played on all devices out there and a talk where someone was selling his product. I think the fast tracks were an unnecessary interruption of an otherwise excellent conference.

Things are broken

Jason Grigsby gave a very interesting presentation about smart TV’s. Interesting but depressing. The TV’s suck, their interfaces are crappy, resolutions are a mess. The browsers are rather good but there’s no way to detect that it’s a browser on a TV, so actually it is almost impossible to build a responsive website that also responds to the TV. As you can see, there’s a trend here: we want to build great stuff but it is all just so hard. That’s also the feeling I had after Heiko Behrens‘ talk about different platforms for using web technology on mobile: they all are good at some things but never really good enough for what they’re trying to achieve: emulating native apps. The first day was closed with a long panel discussion with mobile browser vendors. Boring, predictable answers by the panelists but nevertheless one of the highlights of the day thanks to the superb moderator Jeremy Keith who did a truly amazing job.

Day Two: The Web is great!

The feeling I had before the start of the first talk on day two was not too positive, and no, it had nothing to do with the beers I drank the night before. The talks and the ideas I had seen left me slightly depressed. Another day like this would probably result in me trying to find another job. But luckily the day started with a fantastic presentation by Scott Jenson who emphasized the things the web can do but native apps can’t do. One of the most important lessons in his talk was that we shouldn’t try to emulate native, we must focus on the things that make the web unique. There are two important things that make the web as powerful as it is: URLs and the fact that it works everywhere, on all devices. And especially that last fact, that the web can just work everywhere, wherever we are, on whatever device we have with us, is the core of Scott‘s thinking. All things will be connected and you can interact with all those things. He showed us concepts of notifications on the home screen of your phone of things that are near by instead of random messages by random apps that probably have nothing to do with where you are right now. A great and inspiring talk, I immediately wanted to start playing with these ideas (I need a Boot To Gecko phone now!). This talk left people inspired, the dip of the day before vanished right away, it was striking to see that even native focused people I spoke to were excited by this talk.

Right after this talk Stephen Hay presented his thoughts on the new web designers workflow, a subject many agencies are struggling with today. I’ve seen many talks by Stephen Hay, they’re all good, but this one was simply amazing. What he showed us are the ten steps he takes to create a design and he told us to just pick and choose whatever we need from it. Not all his steps are useful in all agencies but some of his lessons should be mandatory material for all designers: design from the content out, structure it first, don’t make wireframes, use the talent of the people in your organization (not just the talent of the interaction designer), start designing in the browser as soon as possible, manage the expectations of your clients and document everything.

Brighton

The next three talks had one thing in common, the people who presented them are from Brighton. It’s incredible, the amount of talent that lives in that town. Remy Sharp gave a some tips on how to test your websites on mobile, he showed some different emulators and some very promising tools he’s developing. For those of us who have been developing sites for mobile phones, yes, it is slowly getting easier. Seb Lee-Deslisle presented his incredible PixelPhones project where he turns the entire audience into a huge screen by using their telephones. Highly entertaining and above all unbelievable, the man is a genius. Jeremy Keith moderated a second panel, this time about APIs and he tried to find the answer to the question why it takes so long to get access to some features of some devices. The answers were slightly less boring than the answers in the browser panel but Jeremy Keith was right when he warned me during the break that it would not be as entertaining.

Finishing touch

Up until now all talks were good, some were even amazing but the best talks, in my opinion, were still to come. Jake Archibald stole the show with his instant classic talk about AppCache. A subject that at first seems to be pretty easy but which is extremely hard to get right. Unfortunately the only mistake the organization made was to give Jake just half an hour for his presentation, it should have been the full fifty minutes, it was incredibly funny, intelligent and most important: understandable: we can now start using AppCache, thanks to his talk and his article.

After such an amazing talk it’s hard to keep the audience’s attention. Brad Frost gave a decent talk about a future friendly web which would have been OK on last years Mobilism but which felt a bit outdated. It was a good summary of the articles that have been published about responsive design but I assume that by now this is common knowledge for this specific audience.

One of the highlights was the talk Lyza D. Gardner gave about content. In a beautiful and intelligent presentation she taught us some important lessons about textual content, about the future of content and about what we should do with it. The most important lesson I learned was that we should probably be publishing our articles in Markdown (doing it right now) instead of in HTML. Yes, HTML will be around for a long time but there are other important formats that should be supported and a language like Markdown can easily be ported to (most of) those. Let’s keep our content accessible for future visitors.

Brian Fling had the honour to close the conference with an inspiring and practical talk about the ethos of mobile design. He actually gave away the secrets to what makes a successful app successful: anthropology, technology and design. If you invest enough in those, chances are high your app is successful. If you don’t chances are high your app disappears into the dungeons of the app stores. He gave some beautiful examples of great apps for different Desknot devices. Inspiring but not specifically a mobile web talk.

Conclusion

Mobilism 2012 was again an important conference and it managed to keep up the high standard it set for itself last year, and that’s a good thing. The over all message was not as exuberant as last year, there were definitely some dark messages, but that might indicate that this specific profession, The Mobile Web, is growing up and that answers are being found.

Mobilism 2012 is published on The Daily Nerd.
The Daily Nerd by Vasilis van Gemert is licensed under the Creative Commons Attribution 3.0 Unported license. Use it in another way? You can always ask.
Are you happy with the Daily Nerd? Buy an original Daily Nerd t-shirt!

Better keyboard navigation

I believe there are many good reasons to use skip links but there are definitely other ways to make content accessible for keyboard users. Here's a nice proof of concept by Thierry Koblentz that uses that tab-key to tab from section to section and the arrow keys to navigate to links inside those sections. Feels intuitive once you find out how it works (yes, I know, that's somewhat, but not entirely contradictionary) and it clearly shows the importance of styling :focus states.

accessibility css html keyboard

Keyboard, pixels and goats. is published on The Daily Nerd.
The Daily Nerd by Vasilis van Gemert is licensed under the Creative Commons Attribution 3.0 Unported license. Use it in another way? You can always ask.
Are you happy with the Daily Nerd? Buy an original Daily Nerd t-shirt!

inspiring toilets

People obviously find it inspiring to look at the offices of famous web people. What strikes me is that most of these offices are rather small. Bruce Lawson realized there are more small rooms that might inspire you and launched this next successful tumblrblog.

inspiration

Browsers, maps and books. is published on The Daily Nerd.
The Daily Nerd by Vasilis van Gemert is licensed under the Creative Commons Attribution 3.0 Unported license. Use it in another way? You can always ask.
Are you happy with the Daily Nerd? Buy an original Daily Nerd t-shirt!

I’m really looking forward to how this is going to work out, how it’s going to blend into Smashing Magazine and how this bigger (much bigger) audience will react. We’re still looking for a good name (Smashing Nerds sounds a bit aggressive, don’t you think?) so if you have any suggestions, let me know.

Elsewhere too. is published on The Daily Nerd.
The Daily Nerd by Vasilis van Gemert is licensed under the Creative Commons Attribution 3.0 Unported license. Use it in another way? You can always ask.
Are you happy with the Daily Nerd? Buy an original Daily Nerd t-shirt!

A List Apart: Articles: Application Cache is a Douchebag

Jake Archibald wrote this definite article about Application Cache with all the info you need about appCache. Yes, AppCache is hard. But it's also easy to get thanks to Jake's pleasant style. (If you're offended by the word douchebag in the title and refuse to read it because of it, tough shit, you're missing out on some crucial information for modern webdevelopers). An absolute must read.

offline mobile cache caching

Cache, polyfills and privacy. is published on The Daily Nerd.
The Daily Nerd by Vasilis van Gemert is licensed under the Creative Commons Attribution 3.0 Unported license. Use it in another way? You can always ask.
Are you happy with the Daily Nerd? Buy an original Daily Nerd t-shirt!

Mobilism 2012

Today is your last change to buy a ticket for Mobilism 2012, the mobile web development conference in Amsterdam. If you want to meet people like Scott Jenson, Seb Lee-Deslisle, Lyza Gardner, Stephen Hay, Jason Grigsby and many many more, this is your last change (this year). This link will give you a 10% discount.

mobile conference

Tickets, tips and tags. is published on The Daily Nerd.
The Daily Nerd by Vasilis van Gemert is licensed under the Creative Commons Attribution 3.0 Unported license. Use it in another way? You can always ask.
Are you happy with the Daily Nerd? Buy an original Daily Nerd t-shirt!

Performance aspects of Google’s HTML/CSS Style Guide | Zoompf

Google published a HTML and CSS Style Guide with some assumed best practices. Zoompf took a critical look at the tips that Google gives from a preformance prespective. A very good read this is! Good to see that Zoompf and Google disagree on some things (I disagree on others, of course).

styleguide code performance

Crap, speed and hyphenation. is published on The Daily Nerd.
The Daily Nerd by Vasilis van Gemert is licensed under the Creative Commons Attribution 3.0 Unported license. Use it in another way? You can always ask.
Are you happy with the Daily Nerd? Buy an original Daily Nerd t-shirt!

Gimme Bar : Front end styleguides

Style guides should be the core of every serious site. If you don't know what they should look like, here's some help: Anna Debenham collects style guides.

styleguide frontend

Sketching, scrolling and generating. is published on The Daily Nerd.
The Daily Nerd by Vasilis van Gemert is licensed under the Creative Commons Attribution 3.0 Unported license. Use it in another way? You can always ask.
Are you happy with the Daily Nerd? Buy an original Daily Nerd t-shirt!

Monster Swell » Blog Archive » A full Twitter index in your Thinkup

Alper explains how you can get a full Twitter index, not just the last 3200 tweets that Twitter usually gives you access to. Only works if you live in the EU.

twitter privacy ownership

Batteries, content and maps. is published on The Daily Nerd.
The Daily Nerd by Vasilis van Gemert is licensed under the Creative Commons Attribution 3.0 Unported license. Use it in another way? You can always ask.
Are you happy with the Daily Nerd? Buy an original Daily Nerd t-shirt!

Kiki is looking for a worm while I say what I see

Cast: Vasilis

Tags: worm, wurm and lui

Cast: Vasilis

Tags:

We bekijken eens de diertjes op de bank en kijken of er een patroon te vinden is in de naamgeving. Op de achtergrond het geluid van een stofzuiger.

Cast: Vasilis

Tags: kiki, papa, dieren, poedel, rups, koe, hond, stofzuiger, eenhoorn and narwal

We didn't go to Chanioti on a holiday this year so there is no movie of Kiki walking from the sea to our house. But – since I am a very very traditional man – I made a movie of Kiki walking in Greece. On a sunny morning we were walking through the outskirts of Molyvos towards town to get some bread.

Cast: Vasilis

Tags: greece, molyvos, lesvos, kiki, walking, sun and song