Ce tutoriel fait partie de la Construire votre démarrage avec la série PHP sur Envato Tuts +. Dans cette série, je vous guide dans le lancement d’une startup du concept à la réalité en utilisant mes Planificateur de réunion application comme exemple de la vie réelle. À chaque étape du processus, je publierai le code de Meeting Planner sous forme d’exemples open source à partir desquels vous pourrez apprendre. J'aborde également les problèmes liés au démarrage des entreprises.

Applications mobiles contre le Web réactif

Stratégiquement, la construction d'applications mobiles pour Meeting Planner sur iOS et Android est logique, mais sur le plan financier, je n'ai pas encore mobilisé les ressources nécessaires. Mathew Ingram a récemment écrit dans Fortune que, en raison de la pléthore d'offres pour les utilisateurs de téléphones mobiles, "statistiquement, au moins, personne ne téléchargera votre application". Donc, bien que je puisse certainement améliorer l'expérience de Meeting Planner avec une application, sa probabilité d'être adopté n'a pas de sens immédiat avec mes ressources actuelles..

Cependant, il est extrêmement important de faire de Meeting Planner une expérience Web exceptionnelle sur les appareils mobiles..

Dans l'épisode d'aujourd'hui, je passerai en revue et commenterai les modifications visant à y apporter exactement ce que nous souhaitons: faire de notre application Web un site Web plus réactif, facilement utilisable sur les appareils mobiles et les tablettes. Consultez les résultats (sur votre téléphone ou votre tablette)!

L'un des défis de la programmation de l'épisode d'aujourd'hui est que je ne suis ni un concepteur ni un codeur CSS. Certains jours, je sens que je ne devrais même pas me coder moi-même; chez Microsoft, j’étais responsable de groupe, c’est-à-dire que nous avions des graphistes, un laboratoire d’utilisabilité complet, CSS n’existait pas, etc..

Avant de commencer ce travail, je me suis senti intimidé d’essayer d’apprendre des requêtes dans les médias, des points de rupture et des CSS spécialisés. Ce n’est pas un sujet pour lequel je suis habile, c’est beaucoup de temps et très minutieux. Pourtant, dans les 48 heures, tout s’est mis en place rapidement et de façon magnifique. Si vous parcourez le bas de l’histoire, vous verrez combien peu de lignes de CSS ont finalement été nécessaires pour tous les changements. Soudainement, alors que je commençais à parcourir Meeting Planner sur mon téléphone, je devenais enthousiasmée par la réussite de la nouvelle expérience Web réactive..

Franchement, cela m'a fait sentir qu'une application mobile dédiée n'est tout simplement pas nécessaire pour le moment. Nous pouvons développer notre audience avec l'expérience Web mobile pour le moment, en particulier lors des phases critiques à venir des phases alpha et bêta..

En attendant, si vous n'avez pas encore essayé Meeting Planner, planifiez votre première réunion à partir de votre téléphone ou de votre tablette. Je participe aux commentaires ci-dessous, alors parlez-moi de votre expérience! Vous pouvez également me joindre sur Twitter @reifman. Je suis toujours intéressé par les nouvelles demandes de fonctionnalités et les suggestions de didacticiels..

Pour rappel, tout le code pour Meeting Planner est écrit dans le framework Yii2 pour PHP. Si vous souhaitez en savoir plus sur Yii2, consultez notre série parallèle Programmer avec Yii2.

L'état actuel du mobile

Pour commencer, j'ai parcouru l'état actuel du service de planification de la réunion avec mon téléphone iOS et pris des captures d'écran de l'application initiale. Ce n'est pas terrible, mais ce n'est pas génial. Passons en revue ce que j'ai trouvé.

La page d'accueil

La page d’accueil a bonne allure, même si, d’un point de vue esthétique, j’aimerais que le texte principal, "Faciliter la planification", se déchire un peu différemment, c’est-à-dire sur trois lignes de longueur à peu près égale. Cependant, Bootstrap gère bien le menu déroulant et le reste de la page fonctionne de manière fonctionnelle:

La page d'inscription

Encore une fois, mis à part l'aspect esthétique du titre et la cohérence de la marge de gauche, la page d'inscription est fondamentalement fonctionnelle:

Réunions de planification

Une fois que la personne commence à planifier des réunions, la page d'index actuelle doit être améliorée. Il y a trop de colonnes. Le sujet est écrasé. Peut-être que les informations que j'ai choisi d'afficher ici en premier lieu ne sont pas essentielles. Et, bien sûr, les options de commande ne sont pas visibles. La page doit être ajustée pour le mobile de manière plus significative.

D'autres pages fonctionnent bien, telles que la nouvelle demande de réunion pour un sujet. Cependant, les utilisateurs mobiles ne souhaitent probablement pas se voir proposer un champ textarea pour saisir un message plus long présentant la réunion:

L'ajout de participants devient également un peu dysfonctionnel avec les extensions de bootstrap que nous utilisons:

Et les vues de planification pour les lieux et les heures commencent à se dégrader. Encore une fois, la conception du bureau offre trop de détails et d’options pour le mobile:

Autres endroits

La page Lieux fonctionne de manière fonctionnelle mais nécessite une mise en page améliorée des boutons. Et peut-être que cette fonctionnalité n'est pas nécessaire pour les utilisateurs mobiles.

De même, l'onglet de bureau et la mise en page des photos se brisent sur le mobile. Il faut aussi repenser:

Développer des solutions

Certes, de nombreuses zones du site peuvent être améliorées. Certaines zones doivent être repensées pour la mobilité, certaines minimisées et d'autres simplement ajustées esthétiquement. Mettons-nous au travail.

Différentes approches

Je n'avais pratiquement aucune expérience des requêtes avec les médias et des points d'arrêt lorsque j'ai commencé cette tâche. Quelques jours auparavant, j'avais trop tardé à plonger dans ce que je craignais d'être un bourbier inconnu. J'ai commencé par une requête de média d'entraînement pour taquiner mon éditeur:

@media only life et (niveau d'énergie maximal: 60%) et (ratio de caféine: 2) .editorBossperson available-to: false; visible-to: false;  

Les plaisanteries m'ont aidé à briser la glace mentale dans ma tête. Je suis toujours disponible et visible pour les dieux éditoriaux d'Envato.

J'ai commencé à envisager un certain nombre de domaines:

• Simplifier les fonctionnalités, notamment avec le processus de planification de réunion
• Identifier les informations critiques à afficher pour le mobile
• Dissimulation de certaines fonctionnalités sur les appareils mobiles, telles que des éléments, des colonnes et des options de menu
• Travailler avec les requêtes de médias et les points d'arrêt
• Rester concentré sur les domaines les plus importants de la version alpha

Un concept utile que je rencontrais sans cesse sur le Web était "Design for Mobile First". Malheureusement, je suis vieille école et je ne l'avais pas fait. Mais il était utile de repenser chaque page avec ce thème: Mobile First. 

Par exemple, l'index de réunion avec quatre colonnes de table devait disparaître et était désorienté sur les téléphones portrait.

Je n'arrêtais pas de me demander comment j'aurais conçu toutes les pages pour pouvoir fonctionner à partir d'un téléphone..

Échauffement aux requêtes multimédia

Menus déroulants

Il m'a fallu un certain effort pour surmonter mes hésitations à plonger dans les CSS profondes. Pour m'échauffer, j'ai commencé à minimiser les menus déroulants et à simplifier l'étendue des fonctionnalités mobiles..

Pour le moment, j'ai décidé de créer une requête multimédia de base unique pour des périphériques plus petits et de l'utiliser sur l'ensemble du site. Voici frontend / site.css:

/ * ----------- écrans mobiles ----------- * / @média uniquement l'écran et (min-device-width: 320px) et (max-device-width: 667px) et (-webkit-min-device-pixel-ratio: 2) / * masque les éléments de menu déroulants et les éléments de pied de page * / .itemHide, li.menuHide display: none; visible: faux; 

Faire des changements s'est avéré être relativement simple. Pour tout élément de menu que je voulais masquer sur un mobile, je devais simplement ajouter une propriété CSS, par exemple. menuMasquer.

Ici se trouve le menuMasquer propriété ajoutée à /frontend/views/layouts/main.php:

$ menuItems [] = ['label' => 'Compte', 'items' => [['label' => Yii :: t ('frontend', 'Places'), 'url' => ['/ place / yours '],' options '=> [' class '=>' menuHide '],], [' label '=> Yii :: t (' interface ',' Amis '),' url '=> [' / ami '],' options '=> [' class '=>' menuHide '],], [' label '=> Yii :: t (' frontend ',' Profile '),' url '=> [' / user-profile '],' options '=> [' class '=>' menuHide '],], [' label '=> Yii :: t (' interface ',' Coordonnées '),' url '= > ['/ user-contact'], 'options' => ['class' => 'menuHide'],], ['label' => Yii :: t ('frontend', 'Settings'), 'url '=> [' / user-setting '], //' options '=> [' class '=>' menuHide '],], [' label '=> Yii :: t (' frontend ',' Rappels ' ), 'url' => ['/ rappel'], 'options' => ['class' => 'menuHide'],], ['label' => Yii :: t ('frontend', 'Logout' ). ' ('. \ common \ components \ MiscHelpers :: getDisplayName (Yii :: $ app-> utilisateur-> id).') ',' url '=> [' / site / logout '],' linkOptions '=> [ 'data-method' => 'post']],],]; echo Nav :: widget (['options' => ['class' => 'navbar-nav navbar-right'], 'items' => $ menuItems,]);

Soudain, le menu déroulant présentait moins de complexité:

Peu à peu, j'ai réalisé que simplifier et réduire les fonctionnalités du Web mobile créerait la meilleure expérience. Les gens peuvent toujours retourner sur leur bureau pour accéder à d'autres fonctionnalités, du moins pour le moment. Ce serait également l’occasion de recueillir les réactions de personnes au cours des phases alpha et bêta..

Chapelure

La disposition par défaut de Yii comprend un widget de fil d'Ariane qui est chargé via composeur et plus difficile à personnaliser. J'ai expérimenté l'ajout de CSS pour masquer le premier élément et le premier séparateur "/":

Cela a pris un peu de temps mais m'a permis de plonger plus profondément dans CSS, par exemple. Nième enfant content, et construit ma confiance:

/ * supprime la maison et / du fil d'Ariane * / ul.breadcrumb li: premier enfant, li.tabHide display: none; visible: faux;  ul.breadcrumb li: nth-child (2) :: before content: ";

Je ne savais pas que CSS pourrait modifier le contenu.

Voici le résultat:

Espacement amélioré des boutons pour les doigts

Ensuite, j'ai ajouté CSS pour fournir un rembourrage supplémentaire aux boutons sur le mobile afin de rendre les pressions du doigt moins sujettes aux erreurs. Par exemple, voici les boutons d'envoi et d'annulation sur les ordinateurs de bureau:

C’est le CSS que j’ai utilisé et commencé à ajouter à divers boutons et icônes cliquables sur le site:

 / * espacement du doigt pour les boutons * / a.icon-pad padding: 0 5px 0 2px;  .button-pad padding-left: 7px;  

Voici à quoi ressemble ce formulaire sur mobile: notez le nouveau remplissage entre Soumettre et Annuler:

Habillage de texte réactif

Rendre l'en-tête de la page d'accueil, "Planification simplifiée", s'est avéré prendre un peu plus de temps. Finalement, j'ai ajouté un 
marquer le texte et le masquer par défaut lorsque vous n'êtes pas sur mobile. Mais je devais aussi ajouter un espace dans une balise span avec le itemHide classe.

Voici le CSS pour .rwd-break. Il est masqué par défaut et apparaît uniquement dans les écrans responsive, brisant le texte de l'en-tête comme je le souhaite.. 

.rwd-break display: none;  / * ----------- affiche les écrans ----------- * / @media uniquement et (min-device-width: 320px) et (max-device-width : 667px) et (rapport de -webkit-min-device-pixel: 2) … rwd-break display: block; 

Sans l'espace de balise span, le texte se briserait sans un centrage approprié.

Simplification de la page de liste de réunions

En pensant de plus en plus au "mobile d'abord", j'ai compris que l'utilisateur basé sur le téléphone n'avait pas besoin de toutes les fonctionnalités de mes pages. Ils n'ont pas besoin de tous les onglets, du tableau de données sur les réunions et des options de boutons d'icône. En fait, pour la page de réunion, ils doivent simplement pouvoir ouvrir des réunions (ils peuvent annuler des réunions à partir de la page d'affichage de la réunion elle-même)..

J'ai combiné les colonnes sujet et participant en une seule colonne verticale et le résultat est bien meilleur.

Dans /frontend/views/meeting/index.php, j'ai ajouté .tabHide à deux des quatre onglets:

 
 
Planification
 
Confirmé
 
Passé
 
Annulé
 

Et, dans /frontend/views/meeting/_grid.php, j'ai restructuré la colonne pour combiner le sujet et le participant:

if ($ mode == 'coming' || $ mode == 'past') echo GridView :: widget (['dataProvider' => $ dataProvider, // 'filterModel' => $ searchModel, 'columns' => [['label' => 'Détails', 'attribut' => 'type_reunion', 'format' => 'raw', 'valeur' ​​=> function ($ model) // à faire - supprime le code hérité lorsqu'il est soumis n'existait pas si ($ model-> subject == ") return '
 $ model-> id]). '">'. $ model-> getMeetingHeader (). '
'. $ model-> getMeetingParticipants ($ model-> id).'
';  else return '
 $ model-> id]). '">'. $ model-> subject. '
'. $ model-> getMeetingParticipants ($ model-> id).'
'; ,],

Cacher le ActionColonne exigé un peu de recherche, mais ressemble à ceci:

['class' => 'yii \ grid \ ActionColumn', 'header' => 'Options', 'template' => 'view décliner annuler', 'headerOptions' => ['class' = > 'itemHide'], 'contentOptions' => ['class' => 'itemHide'], 'buttons' => ['view' => function ($ url, $ model) return Html :: a ('', $ url, [' title '=> Yii :: t (' frontend ',' view '),' class '=>' icon-pad ',]); , 'décliner' => fonction ($ url, $ model) return ($ model-> status == $ model :: STATUS_SENT)? Html :: a ('', $ url, [' title '=> Yii :: t (' frontend ',' declin '),' class '=>' icon-pad ',]): ";,' cancel '=> fonction ( $ url, $ model) return ($ model-> status == $ model :: STATUS_SENT || $ model-> status == $ model :: STATUS_CONFIRMED)? Html :: a ('', $ url, [' title '=> Yii :: t (' frontend ',' cancel '),' data-confirm '=> Yii :: t (' frontend ',' Êtes-vous sûr de vouloir annuler cette meeting? '),' class '=>' icon-pad ',]): ";,]],

Au final, ces modifications ont simplifié l’interface du bureau dans le processus d’amélioration de la mobilité..

Le grand défi: planification des réunions

La tâche de loin la plus difficile pour moi a été d’adapter la page de planification des réunions ci-dessus pour mobile. C'était un gâchis au téléphone et j'ai été découragé. Séparément, je me suis toujours inquiété de la manière dont j'adopterais cette interface pour plusieurs participants dans le cadre des besoins futurs, ce qui pourrait compliquer les choses..

Mon utilisation de l'extension Bootstrap Switch Widget de Kartik pour Yii a ses propres limites en ce qui concerne la modification de la présentation. Placer ces éléments dans des colonnes de tableau a bien fonctionné, mais rendre les colonnes réactives n’était pas aussi simple avec les requêtes multimédia..

Certes, comme je l’ai montré avec la page de liste de réunions ci-dessus, il est facile de masquer des colonnes, mais modifier l’emplacement n’est pas si important..

J'ai commencé par m'éloigner d'une conception de table horizontale pour afficher les options de temps et de lieu et adopter un style vertical, de type portrait. Et, apparemment, les tables et les colonnes ont leur propre capacité à encapsuler avec HTML5 et CSS sans requêtes multimédia. 

Vous pouvez voir la page de plan de réunion vide et améliorée ici:

Chaque vue partielle nécessitait des colonnes CSS supplémentaires pour que les dispositions de grille Bootstrap prédéfinies fonctionnent correctement, par ex. col-xs4 gauche et col-xs-8 droite. Voici un exemple:

  
 
 
Quoi
 
  $ model-> id], ['class' => 'btn btn-primaire glyphicon glyphicon-pencil', 'title' => 'Éditer']); ?> 
 
 
 

Rendre les formulaires de planification des horaires et des horaires sensibles était le plus difficile. J'ai expérimenté et finalement réussi à utiliser des colonnes de tableau qui s'emboîtent naturellement lorsque la fenêtre de contenu (ou le périphérique) se réduit. 

J'ai également éliminé l'affichage du statut du participant dans sa propre colonne avec des commutateurs désactivés. Vous ne pouvez pas les modifier. Pourquoi les afficher en tant que commutateurs? Au lieu de cela, j'ai créé un résumé textuel du statut de vos participants pour les lieux et les heures. Voici le code pour getWhenStatus ():

fonction statique publique getWhenStatus ($ meeting, $ viewer_id) // récupère un tableau indiquant le statut textuel des heures de réunion pour $ viewer_id // Acceptable / Rejeté / Pas de réponse: $ whenStatus ['text'] = []; $ whenStatus ['style'] = []; foreach ($ meeting-> meetingTimes as $ mt) // statut de construction pour chaque fois $ acceptableChoice = []; $ rejetéChoix = []; $ unknownChoice = []; // à faire - ajoutez meeting_id à MeetingTimeChoice pour les requêtes triables pour chaque requête ($ mt-> meetingTimeChoices en tant que $ mtc) if ($ mtc-> user_id == $ viewer_id) continue; switch ($ mtc-> status) case MeetingTimeChoice :: STATUS_UNKNOWN: $ unknownChoice [] = $ mtc-> user_id; Pause; case MeetingTimeChoice :: STATUS_YES: $ acceptableChoice [] = $ mtc-> user_id; Pause; case MeetingTimeChoice :: STATUS_NO: $ rejetéChoix [] = $ mtc-> utilisateur_id; Pause;  $ temp = "; // à faire - mettre à jour pour plusieurs participants // à faire - intégrer le paramètre actuel de cet utilisateur dans le paramètre de style if (count ($ acceptableChoice)> 0) $ temp. = 'Acceptable to'. MiscHelpers :: getDisplayName ($ acceptableChoice [0]); $ whenStatus ['style'] [$ mt-> id] = 'succès'; else if (nombre ($ rejetéChoice)> 0) $ temp. = 'Rejeté par '.MiscHelpers :: getDisplayName ($ rejetéeChoice [0]); $ whenStatus [' style '] [$ mt-> id] =' danger '; autre if (count ($ unknownChoice)> 0) $ temp. = 'Pas de réponse de' .MiscHelpers :: getDisplayName ($ unknownChoice [0]); $ whenStatus ['style'] [$ mt-> id] = 'warning'; $ whenStatus ['text'] [$ mt- > id] = $ temp; return $ whenStatus;

Voici à quoi cela ressemble sur le bureau - notez la disposition en paysage des lignes de texte et des commutateurs:

Et voici la version mobile, plus portrait et empilée sans requêtes multimédia:

À titre d'exemple, voici le CSS pour la manière dont j'ai codé les colonnes du tableau dans le panneau When (times):

table.table-list width: 100%;  table.table-list td.table-list-first float: left; affichage: en ligne; largeur: auto;  table.table-list td.table-switches largeur: auto; Flotter à droite; affichage: en ligne; rembourrage en haut: 10px;  .switch-pad padding-left: 7px;  .smallStatus font-size: 90%; couleur: gris; style de police: italique; 

Et voici le code pour ce formulaire partiel de /frontend/views/meeting-time/_list.php:

    
  
 
  commencer, $ timezone)?> id] <> ") ?> 
 id]; ?> 
  
 
  
 
 
  
 
 1) if ($ model-> status == $ model :: STATUS_SELECTED) $ value = $ model-> id;  else $ value = 0;  if ($ isOwner || $ participant_choose_date_time) // la valeur doit correspondre pour que switch soit activé echo SwitchInput :: widget (['type' => SwitchInput :: RADIO, 'nom' => 'sélecteur de temps', 'items' => [['value' => $ model-> id],], 'value' => $ value, 'pluginOptions' => ['size' => 'mini', 'handleWidth' => 60 , 'onText' => ' choisissez ',' onColor '=>' success ',' offText '=>''], // $ whenStatus [' style '] [$ model-> id],' labelOptions '=> [' style '=>' taille de police: 12px '],]); ?> 
 
 
 
  
 
    

La meilleure chose à propos de ces changements de vue de réunion est qu'ils simplifieront le défi de conception UX pour les réunions futures avec de nombreux participants. Quel que soit le nombre de personnes présentes à une réunion, la vue restera fondamentalement la même que ci-dessus. En gros, cela a résolu le plus gros obstacle qui m'empêchait de m'adapter à plusieurs réunions de participants: conception UX.

Et après?

J'espère que vous avez apprécié le fait de suivre les étapes de la conception Web réactive. Au fur et à mesure que le code et les modifications visuelles apportées au site ont été fusionnés, je me suis senti extrêmement satisfait et impressionné par le peu de CSS nécessaire. Pris ensemble, vous pouvez le voir ici:

.rwd-break display: none;  table.table-list width: 100%;  table.table-list td.table-list-first float: left; affichage: en ligne; largeur: auto;  table.table-list td.table-switches largeur: auto; Flotter à droite; affichage: en ligne; rembourrage en haut: 10px;  .switch-pad padding-left: 7px;  .smallStatus font-size: 90%; couleur: gris; style de police: italique;  .setting-label label, #preferences label font-weight: normal;  / * ----------- affiche les écrans ----------- * / @media uniquement et (min-device-width: 320px) et (max-device-width : 667px) et (-webkit-min-device-pixel-ratio: 2) / * masque les éléments du menu déroulant et les éléments de pied de page * / .itemHide, li.menuHide display: none; visible: faux;  / * supprime les liens home et / de breadcrumb * / ul.breadcrumb li: premier-enfant, li.tabHide display: none; visible: faux;  ul.breadcrumb li: nth-child (2) :: before content: "; / * Espacement du doigt pour les boutons * / a.icon-pad padding: 0 5px 0 2px; .button-pad padding- left: 7px; .rwd-break display: block;

Mes futurs efforts de conception commenceront par "À quoi cela devrait-il ressembler sur mobile?"

Comme mentionné, je travaille actuellement avec acharnement pour préparer Meeting Planner à la libération d'alpha. Je me concentre principalement sur les principales améliorations et fonctionnalités qui faciliteront la publication de la version alpha.

Je surveille tout dans Asana maintenant, ce que je vais écrire dans un autre tutoriel; ça a été incroyablement utile. Il y a aussi quelques nouvelles fonctionnalités intéressantes toujours sur leur chemin. 

Je commence également à me concentrer davantage sur les efforts de collecte d’investissements à venir avec Meeting Planner. Je commence tout juste à expérimenter WeFunder sur la base de la mise en œuvre des nouvelles règles de la SEC en matière de financement participatif. S'il vous plaît envisager de suivre notre profil. Je vais aussi écrire plus à ce sujet dans un prochain tutoriel.

Encore une fois, en attendant d'autres épisodes, planifiez votre première réunion (à partir de votre téléphone!). Aussi, je vous serais reconnaissant de partager votre expérience ci-dessous dans les commentaires, et vos suggestions m'intéresseront toujours. Vous pouvez également me joindre directement sur Twitter @reifman. Vous pouvez également les publier sur le site de support de Meeting Planner..

Surveillez les prochains tutoriels de la série Construire votre démarrage avec PHP.

Liens connexes

• Planificateur de réunion
• La page We Funder du planificateur de réunion
• Programmation avec Yii2: Mise en route
• L'échange de développeurs Yii2