Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

Responsive Web Design

No description
by

Emilien Siegrist

on 19 January 2015

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of Responsive Web Design

Sommaire
Introduction
Qu'est-ce que le Responsive Web Design ?
Architectures applicatives (Natives VS Web)
Méthodes de développement
Pourquoi développer en Responsive Web Design ?
Comment développer en Responsive Web Design ?
Quand développer en Responsive Web Design ?
Conclusion
Responsive Web Design
Responsive Web Design

HEG Arc – Haute Ecole Arc – Gestion

Emilien Siegrist
2011-2015
Travail personnel de la filière en Informatique de gestion

Méthodologies
Qu'est-ce que le Responsive Web Design ?
Méthode de développement Web visant à servir un même document HTML sur de multiples navigateurs et appareils afin de garantir que le design soit aussi portable et accessible que possible.

Basé sur trois principes :
Grille flexible
Médias flexibles
Media queries
Pourquoi développer en Responsive Web Design ?
Technologique
HTML5
CSS3
Economique
Homogénéité (amélioration de l'expérience utilisateur)
Meilleure visibilité (SEO)
Diminution des coûts de maintenance
Développement
URL unique
Aucune redirection nécessaire
Libération des ressources
Meilleure évolutivité
Meilleure portabilité
Architectures applicatives
Méthodes de développement
Introduction
Qu'est-ce que le Responsive Web Design ?
Origines :
Terme inventé par Ethan Marcotte
W3C apporte les
media queries
Objectifs :
Portabilité
Accessibilité
Expérience utilisateur
Amélioration progressive
Conclusion
Le Responsive Web Design a pour seules limites l'évolution du Web et la créativité humaine !
Comment développer en Responsive Web Design ?
Maquette
Elaboration d'une maquette statique de l'application sur une grille exprimée en pixel !
Grille flexible
Points de rupture
Médias flexibles
Media queries
Démarche
Conversion des valeurs statiques en pourcentage afin que le contenu s'adapte à son contenant !
Définition des tailles d'écrans pour lesquelles la mise en page sera revue.
Mise en place des requêtes de médias selon les points de rupture pour permettre une optimisation du contenu selon la taille du navigateur.
Dimensionnement des médias afin qu'ils ne débordent pas de leur contenant.
Quand développer en Responsive Web Design ?
Critères de freins :
Accessibilité
Protection des données
Ressources matérielles nécessaires (E/S)
Ressources disponibles (humaines, temps et financières)
= Visibilité
= Performance
= Interopérabilité
cible / contexte = résultat
480/960=0.5
960px
480px
0.5*100=50%
@media screen and (min-width: 1024px)
@media screen and
(max-width: 320px)
@media screen and
(max-device-width: 768px)
img,
embed,
object {
max-width: 100%;
}
Technologies
Thème prêt à l'emploi
Framework
Content Management System

Java
JSP et Servlet
JSF
Full transcript