Home News L’importanza del responsive web
L’importanza del responsive web PDF Stampa E-mail
Mercoledì 29 Aprile 2015 11:00

L’importanza del responsive web

Negli ultimi anni, l’introduzione dell’HTML5 ha rivoluzionato la piattaforma web. Molti sviluppatori si sono dedicati allo sviluppo di applicazioni più o meno complesse, sfruttando l’accoppiata vincente HTML5 – JavaScript.

Grazie a questi linguaggi, semplici e snelli, è stato possibile introdurre e sviluppare il concetto di responsive web. Si tratta di una tecnica di web design che consente di realizzare siti in grado di riadattarsi in maniera automatica a qualsiasi dispositivo, sia esso uno schermo di un PC, un tablet o uno smartphone.

Il responsive web rappresenta dunque un elemento molto importante nel moderno web, in quanto mai come oggi le connessioni sono così variegate: la navigazione da PC resta un must, ma sempre più utenti utilizzano il proprio smartphone o tablet per connettersi alla Rete. La tecnica del design responsive web non fa altro che migliorare l’accessibilità ai contenuti da parte degli utenti, organizzando la disposizione delle informazioni in maniera ottimale a seconda dello schermo.

Proprio su questo argomento Matthew Carver, web design e sviluppatore, ha scritto un libro dal titolo “The responsive web”, all’interno del quale fornisce una piccola introduzione al web moderno, per poi concentrarsi sull’importanza del web responsive.

Il libro è diviso in tre sezioni. La prima sezione è incentrata sul perché esiste il web responsive e su quali sono le caratteristiche dei moderni web browser che consentono ai siti internet di essere reattivi. Viene anche introdotto il concetto di mobile-first, che pone alla luce quanto sia importante in fase di progettazione, focalizzare l’attenzione prima di tutto sul design mobile, per poi passare in un secondo momento alla grafica per desktop.

La seconda sezione fornisce spunti utili per i webmaster, offrendo consigli su come presentare le idee ai propri clienti e su come sviluppare un design responsive in maniera responsabile, utilizzando le tecniche moderne come ad esempio la web typography.

Nella terza e ultima sezione, Carver scende nel dettaglio presentando soluzioni avanzate ed efficaci per ottimizzare il proprio sito responsive web, e soluzioni per risolvere problematiche legate ai nuovi browser.

L’importanza del responsive web per Matthew Carter

Matthew Carter è stato intervistato qualche giorno fa da InfoQ circa lo sviluppo del web responsive e la sua importanza per sviluppare un web accessibile.

Carter durante l’intervista ha confermato che esistono delle difficoltà che gli sviluppatori potrebbero incontrare nello sviluppo di un sito dal design responsive web. L’ideale sarebbe poter avere a disposizione un laboratorio completamente attrezzato con ogni tipologia di dispositivo, ma naturalmente non tutti gli sviluppatori ne posseggono uno. In ogni caso ci sono degli strumenti che vengono in aiuto, come ad esempio Chrome e i suoi strumenti di sviluppo che consentono di emulare la dimensione dello schermo di qualsiasi dispositivo. Inoltre, molto utili potrebbero essere Compass, abilissimo nel generare sprite al volo e Live Reload, capace di rendere l’intero processo di sviluppo del front-end molto più veloce.

Riguardo a Bootstrap e Foundation, i framework più utilizzati attualmente nel mondo del web per la progettazione del front-end, Carver conferma quanto essi possano rappresentare al momento una reale necessità per gli sviluppatori, sebbene tiene a precisare che, dopo averli sperimentati in ambienti di produzione, questi risultano a volte piuttosto restrittivi. È sempre bene quindi partire da questi framework per sviluppare una base e poi concentrarsi sulla personalizzazione.

Ad oggi, secondo Carver è molto importante sviluppare un design responsive web e ogni sviluppatore dovrebbe essere in grado di progettarlo al meglio. Alla domanda come vedi il responsive web nel futuro, Carver afferma che attualmente ci sono tutti gli strumenti necessari per poter pensare in futuro di sviluppare siti web in grado di soddisfare le esigenze di ogni singolo utente in termini di preferenze personali nel design, tempo di connessione, ambiente e così via.

Chiunque lo voglia può consultare l’intervista per infoQ in lingua ufficiale che riproponiamo di seguito.

Modern developers face incredible challenges with myriad browsers and devices. What advice can you give for developers struggling to keep up?

First of all, I would say keep at it. I think the state of “struggling to keep up” is common among passionate developers. Our industry moves way too fast for anyone to truly live on the bleeding edge without having a very focused, niche practice. If you feel like you’re struggling to keep up, then you’re likely doing your job pretty well.

Secondly, there’s so many great ways to emulate devices and browsers. It would be great to have a fully stocked device lab with all the up-to-date tablets and mobile phones, but it’s simply not a reality for a lot of developers. Luckily there’s some alternatives.

Chrome in its developer tools offers a sort of emulator that frames the viewport relative to a device size, so you can choose to emulate the screen size of any number of devices. It’ll also spoof things like touch controls so you can get a pretty good sense of what to expect in mobile and tablet browsers right in Chrome. Installing the Android SDK will install the official emulator and Xcode comes with an emulator for iOS devices.

What are your thoughts on frameworks such as Foundation or Bootstrap? Where do they fit into the developer’s toolbox?

 I was pretty soft on them previously. In The Responsive Web I discuss Foundation in detail and offer it as a great prototyping tool, but recently I’ve been experimenting with it in production environments. The most common argument against is that they can be bloated or restrictive to the design. I feel like they represent a real need in the process though.

Site builds are getting more and more complex as we stretch our legs and start using the web to do more and more real-world problems, so when you set out with a site build sometimes you’re not sure where you’ll end up. Having a framework like Foundation in place offers a prefabricated solution that frees you up from solving the immediate problem, like “what do buttons look like on the site” and lets you move into more complex problems such as “is there a better way to implement this button”. I still end up customizing 70-80% of the framework, but using Foundation or Bootstrap as a starting point saves a ton of time.

What do you say to critics who say that responsive causes bandwidth and memory issues (on mobile)?

I think that’s a valid criticism in a sense. The simple fact of the matter is that in web development there has never been a large scale solution offered that hasn’t in one way or another been controversial. Has there ever been a solution to a web development problem that wasn’t followed by a swarm of critics? Look at Swift right now. Apple has more cash reserves than some countries and has spent years building a language to improve iOS development and immediately there criticism over how well it compiles. Face it, as developers we’re a critical lot and if you want to know how failing to embrace change works out online, go talk to a Flash developer.

Bandwidth and memory exist in a budget and in order to accomplish tasks you must spend that budget. Developers might over spend in those budgets for a myriad of reasons but it’s not a valid reason to dismiss responsive design as a whole. That’s just silly. There’s this old saying “A shoddy carpenter blames his tools”. Responsive design is a tool to solving the problem of device parity on the web. Device fragmentation is a reality on the web and just because responsive design isn’t perfect doesn’t mean it’s worth abandoning.

Integrated browser tools (F12, etc.) continue to advance in functionality and complexity. What improvement excites you the most about these tools? What parts are most useful to responsive devs?

I think the movement to build tools is pretty incredible still. I know it’s a little old hat, but gulp and grunt have made the development process so much more efficient, by leaps and bounds. Compass’s ability to generate sprites on the fly is incredible and tools like Live Reload make the whole front-end development process light years faster.

 How will we see the responsive web change in the future?

That’s a hard question. In the appendix of The Responsive Web I have a chapter on what I call “Context Aware Design”. This idea, that interface should adapt deeply to a user’s environment and patterns, is something that I found was already being discussed at Code and Theory as a “Responsive Philosophy”. To me, just that fact that this same concept was cropping up independently from each of us, both looking at the same problem, proves to me that there’s something there.

I think we have all the tools in place to offer a deeper connection to UI for web users that incorporates their personal preference, environment, time, and personality into interface design.

What are your thoughts on tools like Macaw and Brackets when designing and coding?

They are great. I don’t know that I would use either in production at the moment, but any tool that helps designers get exposed to the fluctuations in space that are common in responsive design is great. The ability to manipulate and move the drawing space in a design helps designers articulate their ideas closer to the literal browser. I find more and more arguments towards designers using a more fragmented tool set, instead of the one application to rule them all approach of Photoshop.

What was your main motivation for writing the book?

 I wanted to create something to resolve what I saw as the biggest issue in modern web design, collaboration between disciplines. My hope was to writing something that a designer could read and come away from empathizing with the challenges of a developer and a developer could read and empathize with the challenges of design. I care deeply about the web and I believe passionately that we can use the web to make lives better but that can only happen if we first develop systems to solve problems and make these solutions usable for average people.

A great developer might can come up with a great new way to search for homes to buy that cuts costs dramatically, but if it relies entirely on a command line interface, does it do anyone any good? Alternatively, a designer might come up with a beautiful interface pattern but if the software under it doesn’t work, who cares? We need people with these skills to communicate for things to move forward and I hope my book can help that to some degree.

How do you think responsive design has impacted the work done by today’s web developers?

I think it’s inside of every function on the process. You can’t ignore users device preferences and I think responsive design has found its place in the development workflow. To me, it’s the default process and I find myself having to justify not including responsive layouts by default.

 

Tutorial

Vuoi approfondire degli argomenti specifici? Segui i miei tutorial, per dubbi o domande contattami.

Vai ai tutorial

Flickr

Guarda le mie foto su Flickr. Hai bisogno di foto particolari? Vuoi imparare a fotografare? Contattami
flickr_logo

Servizi Online

Vuoi predisporre il tuo sito web personalizzato? Hai bisogno di aiuto o consulenza?

Acquista i servizi online

Contattami

Per approfondimenti o informazioni su corsi di formazione o lavori contattami.

Richiedi uno scambio link con il mio sito.