Hi guys, I'm currently working on the redesign of the iVelhop application that needs a little refresh. It's an application that helps you to find "iVelhop" bike stations around your in Strasbourg.

I'm struggling with the "route button". It's the button on the right of each overview. It's function is to show the user the route from his current geographic location to the iVelhop station he selected.

The "old" button was a little flat, and I'm not quite sure it worked. I've made two version of the application, one without the label and on with the "itinéraire" label (which means "route" in French). I'm not quite sure either of them work well so I'm really open to feedback concerning this particular part of the application. The color code is the following :

• purple = a boutique
• green = they are bikes available on this station
• orange = no bike available for this station

Thanks a lot :)

The version without the label :

The version with explicit label

Version 3 with a relooking of the icon

Another attempt at creating the icon

I'm teaching mobile optimization at the university and preparing some slides for the students. This one is a quote by Josh Clark about content : "Content is like water, Content’s going to take many forms". The original quote was from Bruce Lee, but I really like how Josh Clark put it into the "content strategy" context. I wanted to illustrate this in an image. I admit that I'm not if I should quote Josh Clark or Bruce Lee here.

I'm not quite good at typography, so you're feedbacks would be welcome on this little project :)

A little update after the first feedback :

After a little bit of rework and the help of a design friend

Hi guys,

I'm creating a responsive WordPress template, and I saw in the codex the wp_is_mobile. I'm running some tests, but I don't have all the devices, so if you don't mind helping, all you have to do is click on the link from a mobile / tablette, then tell me if there is the "Mobile" line writen in read. It would be great if you also could provide information about your device, OS and browser version. I update the data, so you can see which devices work and don't. I hope to send the WordPress team the data then so that they can improve the detection

Thanks :)

I was working on a jQueryMobile app using nice icons, and when I tested it on iPhone 4S it looked ugly because of the retina display. I then figured out a way to use retina images only for device that supports it in my css image replacement techniques, and I thought I will share the love. This technique uses the media-query pixel-ratio combined with some background-resize property.

It's most certainly not bulletproof, and they might be other ways to do it, so I'd love to know how other wedesigners deal with this issue so please feel free to share your technics in the comments here (or on the post).

As I promissed in this post I created a nice tutoriel to explain how you could use the CSS3 :target pseudo class to create a nice double login/subscribe form. The idea is quite simple : creating two forms in HTML, hiding the second form with CSS, and displaying it when a link is targeted. This is of course only a demo, but it shows a little bit what can be done in the future in CSS and used to be done in JavaScript.

(also you can have fun forking the code on github ^^)

I wanted to play around with CSS3 new pseudo class and was wondering what I could do with some :target when I tought it could be used to display/hide a form. The :target pseudo class is used with anchor urls, but with a little hack on it, it can be used to toogle the visibility of an element. I'll also add a nice bouncing effect on the transition between the two forms. This is a screenshot in the browser (chrome) of the full CSS3 HTML5 form, I only used an iconic font and a little data-icon trick to display the icons.

It's the second version of the form, it used to be a drop down form, but having drop down + a double form animation was a little bit too much, so I made it all cleaner. I'm open for some changes and improvements, so feel free to give your feedbacks :)

I'll write a tutorial when the form will be finished to explain some of the tricks used here.

I've been playing around with JqueryMobile for a while now, and a friend of mine who is an iOs developer said that he would never use non nativ apps like JqueryMobile, because they look totally ugly and incomplete. I tried to prove him wrong, creating a demo app for my students that did not look too much like the original JqueryMobile design. Here are the screenshots of the web-application in the browser. The user can choose a restaurant based on the food served, the town and other user ratings of the restaurant.

So, do you also think that JqueryMobile app still look ugly ? Would (did) you use it for a project ?

The demo app is available as a tutorial on Noupe you can see and download files from them and the code on github

The idea was pretty simple : I wanted to create a pure html5 / css3 contact form, without using any images, and here is the result. Go and take a look at the demo (with chrome, safari or firefox)

The trick : I used some gradients, some :before and :after pseudo-classes and an icon font to add the little pictos to the labels. This is an experiment, it should not be used on live websites since it has some browser compatibility issues and uses code that's still in the W3C working draft.

I also used some of the new html5 form goodness (placeholder, new input types like mail, etc).

I wrote a tutorial for onextrapixel explaining all the code of this form that will be published soon, so I'll give you the link if you are interrested.

Edit : the tutorial is out on Onextrapixel :)

ps : they are transitions on the pictos, but since I'm using a transition on a :before element, only Firefox 8+ will support it.

This is a social icon pack I created for my personal use on my portfolio. The icons exist in 49×51 px, 77×80 px and 102 x 104px and I recently added the dribbble icon (did not need it before).

This is a work in progress, I'm not quite satisfied with the G+ icon, the red part looks like it's on top of the others, but I swear it is not in Photoshop. Any idea ? I'd add some icons, but the big question is : what kind of icons would designers need then ? I was thinking of WordPress maybe, and behance, your opinion ?

Feel free to download it .

This is my first attempt in creating an icon pack with so many icons.

The pack was created for a client. The icons will be used in a CSS framework library as GUI elements for his end-users. Untill now, he was using icons from different packs gather on internet, but he wanted something with some unicity. The icons all have a 1px border with a 1px radius, in a darker color thant the one used for the middle. They also have a -45 ° gradient starting from top-left. The client needed them in 32 and 16px. The php elephant in 16px was particularly hard one.

I saw many icon packs made using Photoshop, but I'm more comfortable using Illustrator with the pixel preview for such a job. Plus the icons are rescalable, in case the client will one day need a bigger version. Do you have any thoughts on using Illustrator or Photoshop for icon design ? What would be the best choice for you ? (and why ?)

Created for Aenoa Systems