Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Yii
Code

Erstellen Sie Ihr Startup: Verbesserung des mobilen Webs

by
Difficulty:IntermediateLength:LongLanguages:
This post is part of a series called Building Your Startup With PHP.
Building Your Startup: The Dashboard Foundation
Building Your Startup: Issue Tracking and Feature Planning

German (Deutsch) translation by Wei Zhang (you can also view the original English article)

Final product image
What You'll Be Creating

Dieses Tutorial ist Teil der Building Your Startup with PHP-Serie auf Envato Tuts +. In dieser Serie führe ich Sie durch die Einführung eines Start-ups von der Idee zur Realität mit meiner Meeting-Planer-App als ein echtes Beispiel. Bei jedem Schritt werde ich den Meeting-Planer-Code als Open-Source-Beispiele veröffentlichen, von denen Sie lernen können. Ich beschäftige mich auch mit Startproblemen, wenn sie auftauchen.

Mobile Apps im Vergleich zum Responsive Web

Strategisch ist der Aufbau von mobilen Apps für Meeting Planner auf iOS und Android sinnvoll, aber finanziell habe ich die Ressourcen dafür noch nicht erhöht. Mathew Ingram schrieb kürzlich in Fortune, dass aufgrund der Fülle an Angeboten für mobile Nutzer "statistisch gesehen zumindest niemand Ihre App herunterladen wird". Obwohl ich die Meeting Planner-Erfahrung sicherlich mit einer App verbessern könnte, ist die Wahrscheinlichkeit einer Einführung bei meinen aktuellen Ressourcen nicht unmittelbar sinnvoll.

Es ist jedoch äußerst wichtig, Meeting Planner zu einem großartigen Web-Erlebnis auf mobilen Geräten zu machen.

In der heutigen Folge werde ich Änderungen besprechen und diskutieren, die darauf ausgerichtet sind, genau das zu tun - im Wesentlichen unsere Web-Anwendung zu einer reaktionsschnellen Website zu machen, die auf mobilen Geräten und Tablets leicht nutzbar ist. Sieh dir die Ergebnisse an (auf deinem Smartphone oder Tablet)!

Eine der Herausforderungen für die heutige Episode war, dass ich kein Designer oder CSS-Programmierer bin. An manchen Tagen habe ich das Gefühl, ich sollte mich nicht einmal selbst programmieren; Bei Microsoft war ich Group Program Manager, d. h. wir hatten Grafikdesigner, ein voll besetztes Usability-Labor, CSS gab es nicht, usw.

Als ich mich dieser Arbeit zuwandte, fühlte ich mich eingeschüchtert, Medienabfragen, Breakpoints und spezialisiertes CSS zu lernen - es ist kein Thema, mit dem ich vertraut bin, und es ist zeitaufwendig und sehr detailorientiert. Doch innerhalb von 48 Stunden kam alles schnell und schön zusammen. Wenn Sie bis zum Ende der Geschichte scannen, werden Sie sehen, wie wenige CSS-Zeilen letztendlich für alle Änderungen benötigt wurden. Als ich plötzlich auf meinem Telefon nach Meeting Planner suchte, freute ich mich darüber, wie gut das neue responsive Web-Erlebnis funktionierte.

Ehrlich gesagt, hatte ich das Gefühl, dass eine dedizierte mobile App gerade nicht notwendig ist. Wir können unser Publikum vor allem durch die kritischen bevorstehenden Alpha- und Beta-Phasen mit dem mobilen Web-Erlebnis aufbauen.

Wenn Sie Meeting Planner noch nicht ausprobiert haben, können Sie Ihr erstes Meeting mit Ihrem Telefon oder Tablet planen. Ich nehme an den Kommentar-Threads teil, also erzähl mir von deiner Erfahrung! Sie können mich auch auf Twitter @reifman erreichen. Ich bin immer an neuen Feature-Anfragen und empfohlenen Tutorial-Themen interessiert.

Zur Erinnerung: Der gesamte Code für Meeting Planner ist in das Yii2 Framework für PHP geschrieben. Wenn Sie mehr über Yii2 erfahren möchten, schauen Sie sich unsere Parallel-Serie Programmierung mit Yii2 an.

Der aktuelle Mobilstatus

Zu Beginn durchforstete ich den aktuellen Zustand des Meeting Planner-Dienstes mit meinem iOS-Telefon und erstellte Screenshots der ersten Anwendung. Es ist nicht schrecklich, aber es ist nicht großartig. Lass uns überprüfen, was ich gefunden habe.

Die Startseite

Die Homepage sieht gut aus, obwohl ich ästhetisch wünschen würde, dass der Haupttext "Making Scheduling Easy" etwas anders, d. H. Auf drei Linien mit annähernd gleicher Länge, bricht. Bootstrap verwaltet das Dropdown-Menü jedoch gut und der Rest der Seite funktioniert funktional:

Meeting Planner Responsive Web - Home Page

Die Anmeldeseite

Abgesehen von dem ästhetischen Layout und der linken Randkonsistenz der Überschrift ist die Anmeldeseite im Grunde funktional:

Meeting Planner Responsive Web - Signup Page

Planen von Besprechungen

Sobald die Person beginnt, Besprechungen zu planen, muss die aktuelle Indexseite verbessert werden. Es gibt zu viele Spalten. Das Thema ist zerquetscht. Vielleicht sind die Informationen, die ich hier ausgewählt habe, nicht unbedingt notwendig. Und natürlich sind die Befehlsoptionen nicht in Sicht. Die Seite muss für Mobilgeräte wichtiger angepasst werden.

Meeting Planner Responsive Web - Meetings List

Andere Seiten funktionieren gut, z. B. die neue Besprechungsanfrage für ein Thema. Mobilen Benutzern wird jedoch wahrscheinlich kein Textarea-Feld angeboten, um eine längere Nachricht einzugeben, in der das Meeting vorgestellt wird:

Meeting Planner Responsive Web - New Meeting Subject Form

Das Hinzufügen von Teilnehmern wird auch mit den Bootstrap-Erweiterungen, die wir verwenden, etwas dysfunktional:

Meeting Planner Responsive Web - Add a Person Form

Und die Planungsansichten für Orte und Zeiten beginnen zu brechen. Auch hier bietet das Desktop-Design zu viele Details und zu viele Optionen für Mobilgeräte:

Meeting Planner Responsive Web - When Times Form with Switches

Andere Gebiete

Die Places-Seite funktioniert funktional, benötigt jedoch ein verbessertes Layout der Schaltflächen. Und vielleicht wird diese Funktionalität für mobile Benutzer nicht benötigt.

Meeting Planner Responsive Web - Add Places Form

Ähnlich verhält es sich mit der Desktop-Registerkarte und dem Fotolayout auf Mobilgeräten. Es muss auch überdacht werden:

Meeting Planner Responsive Web - Profile Settings

Lösungen entwickeln

Sicherlich gibt es viele Bereiche der Website, die verbessert werden können. Einige Bereiche müssen für mobile Anwendungen überdacht werden, andere müssen minimiert und andere nur ästhetisch angepasst werden. Lass uns zur Arbeit gehen.

Unterschiedliche Ansätze

Ich hatte praktisch keine Erfahrung mit Medienabfragen und Breakpoints, als ich mit dieser Aufgabe begann. Vor ein paar Tagen verschob ich mich in das, was ich für einen unbekannten Morast fürchtete. Ich begann mit einer Übungsanalyse, um meinen Redakteur zu ärgern:

Scherzen half mir, das mentale Eis in meinem Kopf zu brechen. Ich bin immer verfügbar und sichtbar für Envatos redaktionelle Götter.

Es gab eine Reihe von Bereichen, die ich in Betracht zog:

  • Vereinfachung der Funktionalität, insbesondere bei der Planung von Besprechungen
  • Identifizieren der kritischen Informationen, die für Mobilgeräte angezeigt werden sollen
  • Verbergen einiger Funktionen auf Mobilgeräten wie Elemente, Spalten und Menüoptionen
  • Arbeiten mit Medienabfragen und Breakpoints
  • Konzentrieren Sie sich auf die wichtigsten Bereiche für die Alpha-Version

Ein hilfreiches Konzept, auf das ich im Web immer wieder stieß, war "Design for Mobile First". Leider bin ich alt und habe das nicht gemacht. Aber es war hilfreich, jede Seite mit diesem Thema zu überdenken: Mobile First.

Zum Beispiel musste der Meeting-Index mit vier Tabellenspalten gehen und war auf Portrait-Telefonen desorientierend.

Ich habe mich immer wieder gefragt, wie ich alle Seiten von einem Telefon aus gestaltet hätte.

Auf Medienabfragen aufwärmen

Dropdown-Menüs

Ich brauchte etwas Anstrengung, um mein Zögern zu überwinden, in tiefes CSS einzutauchen. Zum Aufwärmen begann ich, die Dropdown-Menüs zu minimieren und den Umfang der mobilen Funktionen zu vereinfachen.

Für den Moment habe ich beschlossen, eine einzige grundlegende Medienabfrage für kleinere Geräte zu erstellen und diese für die gesamte Site zu verwenden. Hier ist Frontend / Site.css:

Änderungen vorzunehmen erwies sich als relativ einfach. Für jeden Menüpunkt, den ich auf dem Handy verstecken wollte, musste ich nur eine CSS-Eigenschaft hinzufügen, z. menuHide.

Hier ist die menuHide-Eigenschaft, die zu /frontend/views/layouts/main.php hinzugefügt wurde:

Plötzlich hatte das Dropdown-Menü weniger Komplexität:

Meeting Planner Responsive Web - Responsive Dropdown Menu

Nach und nach wurde mir klar, dass die Vereinfachung und Reduzierung der Funktionalität im mobilen Web die beste Erfahrung schaffen würde. Benutzer können immer auf ihren Desktop zurückkehren, um auf andere Funktionen zuzugreifen, zumindest für den Moment. Dies wäre auch eine Gelegenheit, während der Alpha- und Beta-Phase Feedback von Menschen zu erhalten.

Semmelbrösel

Das Standardlayout von Yii enthält ein Breadcrumb-Widget, das über Composer geladen und schwerer anzupassen ist. Ich habe mit dem Hinzufügen von CSS experimentiert, um das erste Element und den ersten "/" Teiler zu verstecken:

Meeting Planner Responsive Web - Desktop Breadcrumbs

Es dauerte einige Zeit, aber ich vertiefte mich tiefer in CSS, z. N-Kind-Inhalt und baute mein Vertrauen auf:

Ich hatte keine Ahnung, dass CSS Inhalte verändern könnte.

Hier ist das Ergebnis:

Meeting Planner Responsive Web - Responsive Breadcrumbs

Verbesserter Tastenabstand für Fingerspitzen

Als Nächstes habe ich CSS hinzugefügt, um zusätzliche Padding für Schaltflächen auf Mobilgeräten bereitzustellen, um Fingerspitzen-Druckmaschinen weniger fehleranfällig zu machen. Hier sehen Sie beispielsweise die Schaltflächen zum Senden und Abbrechen auf Desktopgeräten:

Meeting Planner Responsive Web - Default Button Spacing Desktop

Dies ist das CSS, das ich verwendet habe und begann, verschiedene Schaltflächen und klickbare Symbole auf der Website hinzuzufügen:

So sieht dieses Formular auf Mobilgeräten aus - beachten Sie die neue Auffüllung zwischen Senden und Abbrechen:

Meeting Planner Responsive Web - Enhanced Button Spacing

Responsive Textumhüllung

Meeting Planner Responsive Web - Home Page with Text Wrap

Die Erstellung der Startseite, "Scheduling Made Easy", hat tatsächlich etwas mehr Zeit in Anspruch genommen. Letztendlich fügte ich dem Text ein <br /> tag hinzu und versteckte es standardmäßig, wenn es nicht auf dem Handy war. Aber ich musste auch ein Leerzeichen in einem span-Tag mit der itemHide-Klasse hinzufügen.

Hier ist das CSS für .rwd-break. Es ist standardmäßig ausgeblendet und erscheint nur in Responsive-Displays, bricht den Header-Text so, wie ich es möchte.

Ohne den Tag-Bereich des Bereichs würde der Text ohne richtige Zentrierung brechen.

Vereinfachen der Konferenzliste

Als ich "mobile first" mehr und mehr dachte, wurde mir klar, dass der telefonbasierte Benutzer nicht alle Funktionen auf meinen Seiten benötigt. Sie benötigen nicht alle Registerkarten, sie benötigen keine Tabelle mit Daten zu Besprechungen, und sie benötigen nicht alle Optionen der Symbolschaltfläche. Für die Meeting-Seite müssen sie lediglich in der Lage sein, Besprechungen zu öffnen (sie können Besprechungen auf der Seite der Besprechungsansicht selbst abbrechen).

Ich habe die Betreff- und Teilnehmerspalten in einer einzigen vertikalen Spalte zusammengefasst, und das Ergebnis sieht viel besser aus.

Meeting Planner Responsive Web - Responsive Meeting List

In /frontend/views/meeting/index.php habe ich auf zwei der vier Tabs .tabHide hinzugefügt:

Und in /frontend/views/meeting/_grid.php habe ich die Spalte neu strukturiert, um Betreff und Teilnehmer zu kombinieren:

Das Verstecken der ActionColumn erforderte ein wenig Recherche, sieht aber so aus:

Letztendlich vereinfachten diese Änderungen die Desktop-Oberfläche im Prozess der Verbesserung der mobilen.

Die große Herausforderung: Terminplanung

Meeting Planner Responsive Web - Existing When Times Planning Form

Die für mich am schwierigsten zu bewältigende Aufgabe bestand darin, die obige Seite für die Terminplanung von Besprechungen für Mobilgeräte anzupassen. Es war ein Durcheinander an Telefonen, und ich war entmutigt. Unabhängig davon habe ich mir immer Gedanken darüber gemacht, wie ich diese Schnittstelle für mehrere Teilnehmer in Zukunft übernehmen könnte - reaktionsfähige Anforderungen könnten dies nur noch schwieriger machen.

Meine Verwendung von Kartiks Bootstrap Switch Widget Erweiterung für Yii hat seine eigenen Grenzen, wenn es um das Ändern des Layouts geht. Die Platzierung dieser Elemente in Tabellenspalten funktionierte gut, aber die Anpassung von Tabellenspalten war bei Medienabfragen nicht so einfach.

Sicherlich, wie ich oben auf der Seite mit der Besprechungsliste gezeigt habe, ist das Ausblenden von Spalten einfach, aber das Ändern der Platzierung nicht so sehr.

Ich begann damit, mich von einem horizontalen Tischdesign wegzubewegen, um Zeit und Ort zu zeigen und zu einem vertikalen Portraitstil zu wechseln. Offensichtlich haben Tabellen und Spalten ihre eigene Fähigkeit, mit HTML5 und CSS ohne Medienabfragen zu arbeiten.

Sie können die verbesserte leere Meetingplanseite hier sehen:

Meeting Planner Responsive Web - Responsive New Plan a Meeting Form

Jede Teilansicht erforderte zusätzliche CSS-Spalten, damit vordefinierte Bootstrap-Gitter-Layouts gut funktionieren, z. links col-xs4 und rechts col-xs-8. Hier ist ein Beispiel:

Es war am schwierigsten, die Formulare und die Zeitplanung auf die Formulare anzugleichen. Ich experimentierte und gelang es schließlich, Tabellenspalten zu verwenden, die sich natürlich umschlingen, wenn das Inhaltsfenster (oder das Gerät) schrumpfte

Ich habe auch eliminiert Teilnehmerstatus in einer eigenen Spalte mit deaktivierten Schaltern zu zeigen - Sie können sie nicht ändern, also warum sie als Schalter zeigen? Stattdessen habe ich eine textliche Zusammenfassung des Status Ihrer Teilnehmer für Orte und Zeiten erstellt. Hier ist der Code für getWhenStatus():

So sieht es auf dem Desktop aus: Beachten Sie das Landschaftslayout der Zeilen von Text und Optionen:

Meeting Planner Responsive Web - Desktop Layout of Times and Places Form

Und hier ist die mobile Version, mehr Portrait und gestapelt ohne Medienabfragen:

Meeting Planner Responsive Web - Final Responsive Meeting Planning Form

Als Beispiel, hier ist das CSS für die Art, wie ich die Tabellenspalten im Panel "Wann (Zeiten)" codiert habe:

Und hier ist der Code für dieses Teilformular aus /frontend/views/meeting-time/_list.php:

Das Beste an diesen Änderungen in der Besprechungsansicht ist, dass sie die UX-Entwurfsherausforderung für zukünftige Besprechungen mit vielen Teilnehmern vereinfachen. Unabhängig von der Anzahl der Personen in einer Besprechung bleibt die Ansicht im Wesentlichen die gleiche wie oben Im Wesentlichen hat dies die größte Hürde für mich bei der Ausweitung auf mehrere Teilnehmer-Meetings - UX-Design - gelöst.

Was kommt als nächstes?

Ich hoffe, es hat Ihnen Spaß gemacht, mitzuarbeiten, während ich an den Details des responsiven Webdesigns arbeite. Als der Code und die visuellen Änderungen auf der Site zusammenkamen, war ich sehr zufrieden und beeindruckt von der geringen CSS-Leistung. Zusammen können Sie es hier sehen:

Meine zukünftigen Design-Bemühungen werden beginnen "Wie sollte das auf dem Handy aussehen?"

Wie bereits erwähnt, arbeite ich fieberhaft daran, Meeting Planner für die Alpha-Version vorzubereiten. Ich konzentriere mich hauptsächlich auf die wichtigsten Verbesserungen und Funktionen, die das Alpha-Release reibungslos funktionieren lassen.

Ich verfolge jetzt alles in Asana, worüber ich in einem anderen Tutorial schreiben werde; es war unglaublich hilfreich. Es sind auch einige interessante neue Features auf dem Weg.

Ich fange auch an, mich mehr auf das bevorstehende Sammeln von Investitionen mit Meeting Planner zu konzentrieren. Ich fange gerade an, mit WeFunder zu experimentieren, basierend auf der Implementierung der neuen Crowdfunding-Regeln der SEC. Bitte beachten Sie unser Profil. Darüber werde ich in einem zukünftigen Tutorial noch mehr schreiben.

Während Sie auf weitere Episoden warten, planen Sie Ihr erstes Meeting (von Ihrem Telefon aus!). Ich würde es auch schätzen, wenn Sie Ihre Erfahrungen in den Kommentaren teilen und ich bin immer an Ihren Vorschlägen interessiert. Sie können mich auch auf Twitter @reifman direkt erreichen. Sie können sie auch auf der Meeting Planner-Support-Website veröffentlichen.

Achten Sie auf kommende Tutorials in der Build Your Startup With PHP-Serie.

ähnliche Links

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.