Starting a Responsive Web Project


It is not the strongest of the species that survives, nor the most intelligent, but the one most “RWD” to change.


The workflow:

RWD can change your mind. We will start with a workflow, this workflow must be created on steps. We must be choosing these breaking points carefully:

Start with the small screen first, then expand until it looks like shit. Time for a breakpoint! -Stephen Hay


Screen Shot 2014-02-18 at 12.42.54

The environments:

The devices can change; the capabilities of the devices can change. It makes a lot of sense to called ‘environments’ instead and start talking about features instead brands.

You will never test enough.


Which devices should I target?
Maybe the answer is none of them; may be few of them. Remember all the projects are different. There is no ideal number for them, just keep this simple, as a rule.

RWD is not just Mobile Web or Laptop Web or Tablet Web, or Desktop Web… Responsive is about one product, which can run across the Web, on every environment capable to connect to the Web service.

We may need some statistics from the server log about devices accessing to the web, devices they want to pointing at, devices we think are the most important for customer, etc. Nevertheless if we are thinking on testing purposes we tend to use: 320px, 480px, 768px and 1024px, but remember this is not creating a project to “adapt” or “respond” to some environments; this is a “future proof” solution (if that exists).

2012-01-12 12.00.53

The future is in your hands: Future proof

Future proof is an interesting concept, mean your development will support all next generation of device. Yeah, LOL. This is not possible to achieve. A rather to say “Future Ready” instead.

“To say that responsive design is going to solve all your problems from here still eternity is unrealistic, Linda Bustos”. “While responsive design is certainly a great way to scale your website efficiently and use a single code base, we don’t know what the future has in store.

Is not about brands. We are about to create a ‘future proof’ solution.

Instead call them ‘iPhone’, ‘iPad’, ‘Desktop’ and ‘Console’ I rather to call them: ‘Small’, ‘Medium’, ‘Large’ and ‘Extra-Large’ instead. The content needs to be able to “fluid” through all these environments, also we can consider screen size is a capability.

Think about how the water flow on a river, there are not sharp corners. These breakpoints are going to be like the forms of the river, our channel where our fluid elements are going to pass through.


Checking other RWD projects breaking points (using Responsive Inspector Chrome Plugging):




We need to see performance as design:

Across all these years working on RWD project there is a common factor, the lack of Responsive Web Design wireframes.

A well-done Responsive Web Design Website core is a Content First Responsive Design.
Fluid components:

Design needs to be liquid enough to receive and adapt to the new environment. We can force it and create them but that is to say you need to build these corners, we need tools and materials. These things can be possible but that means extra code.

We need to keep the content fluid; all the elements must be flexible enough to understand the change of the environment.


Is not about to create a huge Website and Hide part of it on Small:

You need to Content First and your design needs to help you on this course. Hide element is very handy but don’t abuse of this resource.


All is about Performance:

Performance is the key, is the path for any Responsive Web. Responsive Web principles are just the beginning. Here is where we start our work. I’m seeing everyday different RWD websites that download a lot of media content wasting my 3G broadband. The majority of these sites have the same bad things in common: large media content, large JS and CSS libraries and a lot of these websites could have been optimised if they were designed with a Mobile First approach.

Because our device is capable of 3G/4G or even Wifi it doesn’t mean we are going to be at that speed the whole time.

One of the most important point of Responsive Web Design is you must consider it as just a good start, then you needs to be Content First and Progressive Enhancement.

We must start from the minimum layout version we can create a “core”, on top of that the resources can be loaded conditionally and asynchronous depending on the capabilities or type of the environment, load proportional images instead px, load the media depending on your screen with, etc.

Build you own LAB

There are many devices in the market right now, and is not going to be better. Devices and sizes are out of the range, we cannot test in all of them, but we can test on the most populars: Based on server logs, markets trends, company goals, etc. you can create a nice testing lab.

My personal Testing LAB


Be pro-active, you can help:

Please, join the on-line Image Community Group and W3C Community.  Also, please have a look at my Conferences and Blog Articles regarding RWD image performance, and stay updated about latest news @leolaneseltd


Above all, enjoy and have fun

RWD is not a silver bullet, is using some new ideas and some old ideas. But it makes code more fun!


Want to chat about this? @leolanese

Leave a Reply

Your email address will not be published. Required fields are marked *

* Copy This Password *

* Type Or Paste Password Here *