We need more than better tools

This is a post about something that I’ve been thinking about a lot lately: What do we need as web professionals in order to become more efficient and, hopefully, happier when coding web sites or web apps?

The first thing you may hear as an answer to this question is “better tools”. While this answer can be backed up with lots of data I don’t think that this is the right answer. I started doing web sites in the late 90′ and back then Homesite from Allaire was one of the best HTML editors and my favorite tool. Soon after heavier tools have emerged. Almost fifteen years later we have pretty much the same tools: light-weight tools (vi, Sublime, and so forth) and complete IDEs (like Eclipse) with some others in between.

So you have to have lots of imagination to invent a new tool that doesn’t fit in the existing categories. If the answer is not a better tool than what is?

Well, let’s step back for a second and look at what the current web development process looks like. And to simplify a bit let’s consider these two types of developers (it is a stretch  but stay with me):

  1. Newbies. People who just started modern web development. Contrary to what you may think these people are not necessary newbies in programming in general – they can be Java enterprise developers for example. What they have in common is that they have to find their way through a “million things” (tools, best practices, frameworks, libraries, browser inconsistencies, different JavaScript versions, different CSS versions, and so forth) all in the name of building a “simple” modern web site.
    It is amazing that the complexity involved in building a web page that runs across devices and browsers can beat the complexity required for building the back end for a website or an iOS app.
  2. Veterans. These people know the best practices, they know the “cool” frameworks, they’ve found “the best tools”. And yet they are not necessarily without worries. Updating the JavaScript libraries and the dependencies is not that trivial for a live product, nor is making sure that each time you change something you properly test it (unit testing, function testing). At the end of the day, they spend too many cycles on things that are not “fun”.

As you can see the challenges one faces when doing web development are not only in the realm that a tool typically covers. I’ve seen at least two examples that showed me that the solution is not that far fetched and there is life after all :).

The first one is, hold your breath :D, PhoneGap Build. Trust me, I am not mentioning this because I work for Adobe. Everyone who does mobile developing using the native tools/frameworks for multiple platforms knows that is not a walk in a park. You need a Mac for iOS development/packaging, a Windows machine for Windows Phone, and different IDEs and so forth. PhoneGap Build handles this complexity and let’s you focus on coding the app using open web technologies. The packaging is done in the cloud.

The second one is even more interesting. This comes from Paul Irish’s presentation at Google I/O 2012. If you haven’t seen it, please do yourself a good deed and do it. Now. Pay attention to project “Yeoman” (this is presented in the second part of the presentation). The main idea behind this is that you should go from idea to prototype in less than 10 minutes. Under the hood it uses a bunch of tools/libraries (Compass, RequireJS, Jasminte, PhantomJS, etc) and tries to minimize the friction that you typically experience when using them by making the installation in a new site seamless and so on.

In conclusion I don’t think that it is about a better tool. It is about a better process and workflow that may integrate a number of tools, services, and scripts. And this “thing” should take care of as many things as possible automatically. The bright side is that there are signs that this is possible. It is just a matter of time as more and more bright people change their focus from building libraries and frameworks for doing X or Y to building better working environment for general web development.

Making my blog mobile friendly

Yesterday night I finally managed to finish something I’ve been planning to do for a while: change my WordrPress based blog theme to one that adheres to the “responsive design” philosophy.

After doing this I figured that it would be (potentially) helpful to write a post and urge others to make their blogs mobile friendly. Especially if you are running a WordPress based blog, it is not that difficult.

Why in the name of all HTML tags would you want to make your blog mobile friendly?

Well the answer is quite simple: because more and more people end up doing serious reading on their mobile devices. If you’ve been attending mobile conferences lately, you know that the days when we thought people tended not to use their mobile devices for anything serious are gone. People not only do complex task on their phones but they read too. And when the mobile phone is the only device at hand and you are stuck in some place without a computer you want to and you do spend time with your phone.

Now, a couple of years ago a colleague told me that I should take good care of my mobile users and add support for a mobile theme. This made me instantly anxious as (for no particular reason) I pretty much hated the mobile.somesite.com version of all sites. It always felt alien, remote, and a little bit fake.

Nevertheless I swallowed it and I added a mobile pack theme to my blog. Then I erased this from my mind. Last year, while reading a blog post on my phone I noticed that the blog looked almost the same as the desktop version and it was a WordPress blog. So, you can understand why I felt like yelling “Eureka!” as loud as possible.

DIY is something I like a lot but not when it comes to building software. I’ve done my share of libraries, frameworks, and code generators so I don’t feel that every now and then that I should re-invent the wheel just to prove that I exist.

This is why I was so happy to have a bunch of themes to choose from. Twenty Eleven, Responsive, and Blaskan made it on my short list. In the end I decided to go with Twenty Eleven.

Are we there yet? Not yet my son!

Once I was happy with my choice (the theme to go with) I started to tweak my blog a little bit more. Some of the changes were design related, others content related.

From a design point of view I wanted to change the font size. I felt that the default size, even on a desktop was a bit too small. As someone who has to wear glasses and uses  Cmd + “+” quite frequently to bump up the font size in the browser or mail client I thought that it would be something nice to have. So in the stylesheet I changed the font size from 100% to 105%. Why 105%? Well I tested various values on a bunch of devices and desktops and 105% worked the best.

Bumping up the text size for paragraphs and friends left me with the text size of the headers a bit to small. This was a bit strange because I was expecting to find another percentage based value. Instead it was hardcoded to 26 pixels. After some trial and error I ended up with 170% as the best value.

The final touch was to change to the maximum width of the site. The default option was 1000 pixels which I think is too small for today’s computers. I changed this to 1120 pixels and I was done.

That was the design. What about the content? From a content point of view I’ve done two things. First, I added some more widgets on the sidebar. By default the theme has two widgets: archives and site login. I wanted to have categories, blog roll, upcoming events, and about me.

The second thing I wanted to change was to take out some of the content in order to speed up loading and rendering. My eyes were firmly set on the social sharing features. I had a bunch of plugins for sharing the posts on Twitter, Facebook, and Google Plus. These plugins load a bunch of resources (images, CSS, scripts), which adds time to both loading and rendering. Especially on slower mobile connections this was painfully slow.

Now, making your blog content easier to share is a good thing isn’t it? It looks like online marketing 101. Well, I don’t think that this is always true. If your blog is a technical one and you write good content then you should trust that your users are perfectly capable of copying and pasting the blog post URL into a Twitter message window or Facebook page.

Conclusions

In conclusion, don’t be as lazy as I was in regard to making your blog mobile friendly in a responsive design way. Especially if you use the WordPress platform, things are not that complicated.

And while doing this take a look at your current content and decide if you really need all those little plugins that are adding weight and rendering time to your page.

About Frameworks

I wanted to steam out of my system for a while. So here I go. As I’ve been talking to people about web development I noticed that lots of people are relying on frameworks to do their work. While there is nothing bad (nor good for that matter) in using a framework I think that it is important to know and understand the trade offs. Because there are.

Now, every popular technology has lots of frameworks that make programmer’s life easier. If you look at web development, the client-side part of the business, you know there are literally hundreds of frameworks. From the mighty jQuery to all the other small or big UI frameworks, highly specialized frameworks (like those for data visualization), and so forth. There are “frameworks” who help you overcome some of the pitfalls and verbosity of JavaScript (see CoffeeScript).

And this is a really good thing. As, at the most basic level a framework helps you to be more productive by not reinventing the wheel.

However, every time you pick up a particular framework (or most likely a combination of frameworks when talking about front-end development for web) you limit yourself. And this is exactly where the things start to fall apart.

Why am I saying this? As you grow used to some particular frameworks when you start a new project or maybe you add something to an existing one you tend to make the problem you want to solve fit the frameworks you chose. This means that you started with a problem you have to solve and (in theory) an infinite number of methods to tackle that problem. Because you insert the frameworks in these equation, you tend to limit your self a priori to a limited number of solutions (those provided by the framework). And this is how you tend to change the initial problem you wanted to solve, in order to be able to fit the framework. And this is bad, obviously.

In a perfect world you’d know all the frameworks and  CSS/JavaScript/HTML so you can make the best choice for the task you have to complete. In the real world you end up using more and more the frameworks you know and to rely less and less on “pure” CSS/JS/HTML solutions. And this can bite you pretty hard especially when you move from web desktop projects to mobile web projects. Due to the lack of performance on these mobile devices, the browsers tend to be much slower. Thus the frameworks can perform poorly or even not to work at all (see SVG based data visualization tools and Android devices).

So what am I saying here? In a nutshell I advocate to spend at least the same time for polishing your HTML/JS/CSS skills as the one you spend learning and using frameworks. Because, remember, any framework introduces a new abstracting layer between you and the platform you are writing code for.

In practice, at least what I’ve seen is that most senior developers know how to find the balance between relying heavy on frameworks or writing their own libraries/frameworks perfectly suited for the project at hand. Junior developers tend to go all the way either for reinventing the wheel or using the same framework for everything.

Appliness or French “magique” at its best

My fellow evangelist Michaël Chaize was quite busy lately doing some strange alchemy experiments that involved high command of DPS, the art of charming people, UXD, and many more I am afraid to name.

And the result is even tastier than a French croissant in a Spring morning in the 18th arrondissement of Paris (which is Montmartre, if you didn’t know). Which shouldn’t come as a big surprise because although Michaël didn’t invent the croissant, he is very French.

What is Appliness? In a nutshell, Michaël used Adobe Digital Publishing Suite to create the first digital magazine for web application developers. It has lots of interesting topics (jQuery Mobile, PhoneGap, BackBone,…). You can download the magazine for your iPad or Android tablet (it is free by the way). If you want to contribute to this magazine go to http://appliness.com and if you want to learn more about the project read Michaël’s post.

Later Update: Just got an email from Michaël saying that my post is epic. I guess some of the “magique” did rub off on me :)

My thoughts on Windows Phone

A friend of mine, Ray Camden, has recently posted his thoughts on Windows Phone. As his impressions are quite different from mine I thought I should give it a try and explain what Windows Phone felt like to me.

I had the chance to play with it at Barcelona Mobile World Congress. Right near our booth was the Microsoft booth. There were four devices running the latest Windows mobile OS (I can’t remember all four devices but I’m pretty sure they included Nokia, HTC, and Samsung).

What I really liked was the sheer speed of the device. I couldn’t sense any lag everything was running fast and smooth. This doesn’t mean that this will be the case for anything or everything running on the device – remember I tried just the default apps.

Then, I liked the fact that they went for something different that doesn’t look like Android or iOS or anything else I played with.

Unfortunately, this is exactly why I could not say that I’d love to use it regularly. To me, the two biggest mistakes or drawbacks are:

  1. Using the apps tiles from the home screen to display notifications. As I was firing up the screens from sleep mode on these phones I couldn’t help feeling that all those notifications were competing for my attention. At a minimum I’d say they are distracting.I could be biased but when I unlock my Android screen I know exactly what I want to do (like checking email or send a message). Although there are notifications in the Android’s title bar they are not screaming in your face.
    Compared to this, the dozens of Windows tiles were like a school of piranhas and by the time I was finished dodging them I’ve already forgotten what I wanted to do.

    After my second attempt using the phone I realized that this phone doesn’t feel like a business or knowledge worker type of phone but like a device for a college kid who only cares about keeping “in synch” with all his friends.

  2. As I was playing with different apps on the phone I realized that something was odd. After a couple of seconds I realized that there was too much animation going on, things were flying on the screen or flipping over onto something else, and it was all a bit too much.
In the end I think it is refreshing to see someone who doesn’t follow other’s steps. At the same time it is a pity that they went overboard with reinventing everything. My first experience with the phone made me think that it is not for me or I am not in its target audience.
What is your experience with Windows Mobile Phone?

Note: I may be biased as I’ve been using iPhone and Android phones for the past five years.

About users and modern browsers

During one of the Q&A sessions we had at the Adobe WebUp #2 event I was surprised to see so many people defending quite aggressively the idea of building web sites/apps for the common denominator (in other words making sure that everything works in IE6).

Well, just to be clear there is nothing wrong with building a web site or application that supports IE6. What I think is wrong is when you get so comfortable with this mindset that you don’t even question the need of supporting IE6. And this is the very reason I was actually surprised to see defending the support for IE6 in the name of the user.

Just off the top of my head I can give you three simple examples where supporting old browsers doesn’t add any benefit:

  • You build a web site or application for enterprise or something that will be consumed behind a firewall. In this scenario you are free to choose whatever HTML features you want to use because you can control the web browser of the users. So you can enforce the use of modern browsers.
  • You build a mobile web site or application. Although there are stats suggesting that the mobile landscape is not only about iOS and Android, I think that for most businesses this is what they mean when talking about mobile web sites. Obviously both iOS and Android have great support for HTML5 and CSS3 features so you are “liberated” to use whatever you want.
  • Finally, you’re working on an existing project and the analytics you have suggest that your customers don’t use older browsers.
And even if your users demand support for older browsers maybe it is worth taking a look at some of the polyfills/shims/fallbacks for shiny new features available for older browsers and use progressive enhancement.

Am I wrong? Have you seen this in practice? Talk back!

Pictures from MWC12 floor

As my duty at Adobe’s booth started only in the afternoon, I used the first part of the day to walk around and get a sense of the show. Here are some pictures I took with my phone camera.

First, the Adobe booth. I was surprised by the number of people coming right from the opening hours. I was expectecting people to be more interested in all the new cool devices. Instead there were lots of people all over the place.

One of the biggest booths around is Google’s. I think they are using the same booth they had last year. Nevertheless it is impressive. You can see there are lots of people.

Some press guys resting before their next interview.

Next, the Microsoft Windows Phone booth. I played a bit with some HTC and Nokia devices. I am sure I am biased, but I will say it anyway: the devices are fast. No doubt. But somehow I don’t get the UI. Probably all the years I’ve been using iOS and Android devices…

Right near our booth there is the HTC booth. I have to check them out as it seems they announced a crazy powerful new phone, HTC One X.

That phone is powered NVidia’s Tegra 3 chip. So here is NVidia booth:

As with any show there are lots of characters :)

It’s lunch time, which means the crowd is starting to move outside.

That’s it for today. Now I have to run for my booth duties.

Later Update: This is the only conference where I’ve seen only men queueing in front of the rest rooms. It must be divine retribution I guess:

Photoshop Touch for iPad and Barcelona Mobile World Congress 2012

The Mobile World Congress has started this morning and one of big announcements is Adobe’s release of Adobe Photoshop Touch app for iPad 2. This tool offers core Photoshop features plus some features uniquely tailored to the mobile medium like sharing. What’s more is that this is just the first step. Photoshop Touch is part of a family of six touch apps – the rest of the suite will come to iPad later this year. You can see the app here.

If you are at the MWC then make sure you drop by our booth in Hall 1. You can play with the app on our devices and you can see how it is already being used by professionals.

There were two other announcements this morning related to digital publishing and video. If you are a developer, maybe this type of announcement  is not your cup of tea, but nevertheless they are important because digital publishing and video publishing are growing.

Adobe’s solution for digital publishing (AKA creating beautiful digital magazines and newspapers for tablets) has served more than 16 million publications for the past 12 months. Using anonymous data collected across these publications we distilled them to:

  • 68% of readers are paying for the content
  • 48% of readers explore the interactive features (web views, audio and video clips, slide shows, and image sequences
  • 56% of readers spent 25 minutes to 2.5 hours reading digital titles each month. What is even more important is the trend: this time has increased more than 70% over the last six months.

Project Primetime was announced today too and it is all about delivering and monetizing video content. Nothing new so far, right? Well, here is where the interesting things come together: Primetime helps you use a single, end-to-end workflow, to create a TV-like experience for premium video and ad content and distribute this to all major Web connected devices: iOS devices, Android devices, and of course desktop computers. It supports live streaming, linear, and on demand streams and for all of them you can insert ads with complete control.

Again, if you are at MWC come to our booth and you can find out more. There are presentations on all these topics.

Finally, here is a picture of the main entrance this morning:

Happy New Year!

I intended to write this post last month. But because the last two months were so busy, in the end I could find neither the time nor the energy to write. So here I go with my first post in 2012 that partially talks about 2011.

Speaking of the previous year, I’d like to extend a big thank you to all my readers and followers. Knowing that people will read your posts and send feedback is like fuel for engines. Next, I’d like to say thank you and applaud all the community leaders who worked so hard to organize events. I know firsthand the hard work needed to put together an event. You guys did an amazing job in 2011. I feel both proud and lucky being able to be part of some of the events you organized around the world.

People asked me what the highlights of 2011 were for me. Many things come to mind, but once I boiled them down they distilled  down to only two:

  1. Adobe AIR and Flex demonstrated that development for multiple mobile platforms can be both fun and efficient. Indeed, what started as a promise back in 2010 grew to an amazing platform in less than a year.
  2. Adobe increased investment and effort in HTML/CSS/JavaScript. The last part of 2011 only accelerated a process that started long ago and produces things like: CSS Regions and Exclusions, CSS Shaders, Dreamweaver support for jQuery and PhoneGap, contributions to WebKit and jQuery Mobile. The PhoneGap and Typekit acquisitions cemented these trends and set up a perfect scene for more things to come moving forward.

What about me (I know, I know it’s a bit too much :D)? Well, I couldn’t be happier to tell you the truth! I am still having the time of my life and enjoy every bit of my job :) I’ve been doing evangelism for almost four years and I’m looking forward to many more. However 2012 marks a change regarding what my focus will be: I will focus more and more on HTML, JavaScript, and CSS. And I have to confess that I’m excited. First, because this is how I started to make money programming years ago (HTML/JavaScript/CSS and server-side technologies). And second, I think Adobe is extremely well positioned on moving forward the web standards and HTML authoring/services tools.

What about Flex, AIR, and Flash Player? Despite what some people are saying I think they will be doing great. The runtimes are pushed harder and harder because Adobe wants to make the Flash Platform the game console of the web. This means that even if you are not in the gaming industry your Flash apps will benefit. What about Flex? I think the Flex framework is mature, it has a great community around it, and it is used for big enterprise projects and consumer apps. Having said that I think that the Flex framework will be relevant as long as the community wants it to be. Because if the community doesn’t believe in it and stops using it then it doesn’t matter what Adobe does and who’s behind it. I will surely keep an eye on what you guys will be doing :).

I wish you a Happy New Year!

Adobe Touch Apps are available now

We just launched the Adobe Touch Apps part of the Adobe Cloud. You will find the six apps in the Android Market with one of them being available for iOS too (iOS versions will follow). Just as a quick reminder the six apps are: Collage, Debut, Ideas, Kuler, Photoshop Touch, and Proto.

I think this is great because it was about time we had more apps for tablets that can be used to create digital content. So far developers and companies were extremely good at creating apps for consuming existing content on tablets. As I said many times it is a pity not to be able to create content on your tablet device. I think that with the Adobe Touch apps we are going in the right direction: you can start working on a prototype while you are commuting and all you have is your tablet. Once you get to your computer you can continue your work on the same file. And the synch process between your computer and tablets devices is transparent; it happens auto-magically.

You can read more about these apps here.