Ein Blick in das Design für mobile Geräte

Als das erste iPhone auf den Markt kam, eroberte es die Tech-Welt im Sturm. Seitdem ist es fast 5 Jahre her und der Smartphone-Markt hat an Popularität gewonnen, wobei sogar Microsoft mit seinem Windows 7-Betriebssystem und seinen Partnern in den Wettbewerb geraten ist. Bei so vielen Internetnutzern, die heutzutage auf ihrem Smartphone sind, ist es vernünftig zu erwarten, dass die Anzahl der mobilen Websites aggressiv ansteigt.

Das Design für das mobile Web ist jedoch ein völlig anderer Vorgang mit dem üblichen Webdesign. Unsere Websites sind für große Bildschirme ausgelegt, im Vergleich dazu ist die Bildschirmgröße des Smartphones jedoch viel zu klein, was zu lästigen Usability-Problemen führt. Neue Designstandards und -praktiken sind für ein besseres Design mobiler Websites mit reibungsloser Benutzererfahrung dringend erforderlich.

In diesem Handbuch möchten wir eine benutzerfreundliche Website für mobile Browser des Smartphones erstellen. Ich werde über die besten Vorgehensweisen und das nützliche Entwicklertool für Sie sprechen, um eine bessere mobile Website zu erstellen!

Planen einer starken Benutzererfahrung

Wenn Sie eine mobile Website erstellen, ist es wichtig, dies zu tun Denken Sie immer an Ihre Benutzer, Ihre Website wird letztendlich so gestaltet und erstellt, dass die Nutzer sie genießen können. Es ist durchaus üblich, dass Benutzer erwarten, dass sich eine mobile Website ähnlich wie die Desktop-Umgebung verhält die Benutzererfahrung freundlich halten sollte beim Erstellen einer erfolgreichen mobilen Website Ihr Hauptaugenmerk sein.

Es gibt viele Usability-Konzepte, die für Ihre Benutzer zu beachten sind. Diese Überlegungen beinhalten Bildschirmgröße, Inline-Bilder, Hyperlinks, Schriftgrößen, und Seitennavigation. Wir haben über mobiles Usability-Design für Sie geschrieben, um Ihre Website für bessere Benutzerfreundlichkeit zu schnitzen. Neben dem Guide musst du immer halten Sie sich für neue Ideen auf dem Laufenden um deine Seite zu verbessern.

Wenn Sie ein starkes Benutzererlebnis planen, sollten Sie dies auch tun Überlegen Sie, wie ein Benutzer mit Ihrer Website interagiert. Auf einem Desktop kann Ihre Website mit einer Maus und einer Tastatur interagiert werden, auf einem Smartphone jedoch klopfen, schnippen, und Wischen ihren Weg auf Ihrer Website. Sie müssen die Site wahrscheinlich so gestalten, wie es die Benutzer können Greifen Sie mit diesen physischen Bewegungen problemlos auf die Site-Informationen zu.

Seiten kurz und süß halten

Das Fleisch und die Kartoffeln einer Website sind die Seiteninhalt. Jede Ihrer Webseiten enthält erhebliche Mengen an nützlichen Informationen für Ihre Benutzer wie Texte, Fotos oder Videos. Sie finden auch Nachrichtenartikel und Blogbeiträge, die auf einigen Seiten laufen. Dies kann helfen, Text aufzuteilen, wird jedoch für mobile Geräte nicht als Technik empfohlen erfordert mehr Seitenladevorgänge, was auf der Benutzerseite mehr Wartezeit bedeutet.

Sofern dies nicht unbedingt erforderlich ist, empfehle ich Halten Sie Ihren Seiteninhalt kurz. Sie sollten auch darüber nachdenken, ob es schön aussieht Styling der Schrift auf eine viel größere Größe und vielleicht bewegte Bilder beiseite. Durch die vollständige Anzeige Ihrer Inhalte wird natürlich die Aufmerksamkeit auf sich gezogen, ganz zu schweigen davon, dass die Optimierung das Scannen der Seiten wesentlich vereinfacht. Dies ist auch der Grund, warum a einspaltiges Layout passt perfekt auf die rechnung.

In den meisten Fällen laden mobile Browser die Webseiten nicht so schnell wie Desktop-Browser. Dies könnte Ihre Leser ärgern. Deshalb müssen Sie dies tun Optimieren Sie den Inhalt und die Website für das Laden von Inhalten mit hoher Geschwindigkeit. Du kannst entweder verkürzen Sie den Artikel, während Sie den vollen Inhalt behalten, oder einfach unnötige Bilder entfernen. Konzentriere dich auf Einfachheit statt auf Schönheit.

Ihre Kernnavigation ist der Lebensretter für Besucher, die sich zwischen den Seiten bewegen möchten. Auf einem mobilen Gerät werden Bildschirmverknüpfungen von Natur aus viel kleiner angezeigt und sind daher viel schwieriger zu erreichen. Eine wesentliche Änderung zur Lösung dieses Problems ist die Maximieren Sie die Schriftart und den Platz für Ihre Navigationslinks, vielleicht den gesamten Blockbereich einnehmen. Alternativ kannst du Entwerfen Sie die Navigationsleiste so, dass sie der Registerkartenleiste der echten iPhone-Anwendung entspricht, wie der oben gezeigte.

Mobile CSS-Stile erstellen

Nun, da wir wissen, wie die mobile Website für eine bessere Lesbarkeit und Benutzerfreundlichkeit optimiert werden kann, wäre es gut, über CSS-Stile zu sprechen. Jedes CSS-Stylesheet enthält viele Selektoren mit Eigenschaften, die sich auf Schriftarten, Größen, Positionierungen und Anzeigeeinstellungen beziehen. Wenn es um Mobile geht, sollten Sie aufpassen wie deine Blöcke zusammenpassen.

(Bildquelle: Smashing Magazine)

Ein Bereich zum Einstieg ist zu Setzen Sie die Wrapperbreiten Ihrer Site in Prozent zurück. Es ist üblich, Pixel als Einheit für die Positionierung, Zeilenhöhe, Schriftgröße und Breite der Breite zu verwenden. Wenn Sie jedoch mit Mobile arbeiten, möchten Sie, dass Ihre Seiten verwendet werden Flüssigkeit und Übergang zwischen jedem Gerät natürlich. Durch das Festlegen von Container-Divs auf 100% Breite wird der Inhalt zugelassen füllen Sie leicht zwischen Hoch- und Querformat, ohne über den Rand zu fließen.

Wenn Sie zu den Personen gehören, die Ihr gesamtes Layout umstrukturieren möchten, sollten Sie dies unbedingt tun alles mit einem treffen zurücksetzen. Ebenfalls Absätze, Überschriften und Navigationslinks sollten alle auf gesetzt sein Bildschirmsperre; So erhalten Sie dieses lineare Druckgefühl. Positionieren Sie die Ränder und die Auffüllung neu, um Aufblähen aus Ihrem Layout zu entfernen. Vermeiden Sie Tabellen wenn möglich, da diese zu fehlerhaften Ergebnissen zwischen Geräten führen.

Große Bilder sind auch ein Problem zwischen Geräten. Die meisten Ihrer Website-Bilder werden größer als 480px und Sie möchten möglicherweise nicht, dass der Container beschädigt wird. Die erste Option ist zu Stellen Sie ihre Breite auf 100% ein, damit die Größe der Bilder natürlich geändert werden kann. Das ist sicherlich möglich Erstellen Sie verschiedene Bildsätze für Ihre Website und rendern sie je nach Browser-Agent anders, aber ehrlich gesagt, fügt dies einfach mehr Werke auf Ihrer Seite hinzu, also versuchen Sie es Verwenden Sie die Technik nur, wenn sie wirklich benötigt wird.

Gestaltung von Websites für das iPhone

Der mobile Marktanteil ist ziemlich groß und geteilt, aber Apple hat mit seinen iDevices ein großes Stück vom Kuchen. Sowohl das iPhone als auch das iPad sind mobile Internetgeräte mit integrierter Touchscreen-Funktion. Sie verfügen über denselben Standard-Webbrowser, Safari und eine Vielzahl anderer Optionen.

Für iPhone-spezifische Websites müssen Sie die Bildschirmgröße festlegen. Die feste Bildschirmgröße ist auf festgelegt 320px für 480px für ältere iPhone-Modelle und 640px von 960px für iPhone 4 und iPhone 4S.

iPhone-Bildschirme sind auf Platz beschränkt. Du solltest haben ein Inhaltsblock, der sich so lange erstreckt, wie er benötigt wird. Elemente in einer einzelnen Spalte beibehalten wird dir Kopfschmerzen ersparen und ein fließendes Layout zulassen “ausfüllen” sowohl im Hoch- als auch im Querformat. Dazu müssen Sie wahrscheinlich eine andere Vorlage entwickeln und prüfen, ob Ihre Besucher ein iPhone verwenden. Das kleine PHP-Snippet sollte gut funktionieren:

Grundsätzlich zieht die Logik unser globales an $ _SERVER Variable für den HTTP-Agenten und prüft, ob das Wort “iphone” erscheint überall. Wenn ja, wissen wir, dass unser Besucher ein iPhone verwendet, und von dort können wir etwas anderes HTML oder sogar ein ganz neues Vorlagenlayout erstellen! Das könnte man auch gewöhnen Fügen Sie ein iPhone-spezifisches Stylesheet hinzu, Ändern Sie den Seitentitel, entfernen Sie Bilder oder fast alle dynamischen Effekte.

Wenn es um neue Styles geht, gibt es einen einfacheren Weg. Wie bereits erwähnt, ist die maximale Bildschirmgröße für das iPhone 960px. Daher können Sie mit neuen CSS3-Medienabfragen Styles direkt in das Stylesheet Ihrer Site einfügen nur Anzeige auf dem iPhone. Unten ist ein kleiner Beispielcode:

@media screen und (max-device-width: 960px) / * iPhone css * / 

Das funktioniert da CSS kann jetzt Browsing-Agenten und ihre Eigenschaften erkennen. Die maximale Bildschirmbreite ist eine der Eigenschaften, die auch erkannt werden kann.

All-in-All Mobile-Websites für iPhone-Geräte sind nicht allzu schwierig zu entwerfen, es gibt einfach zu viele Beispiele, z. B. CSS, iPhone. Halten Sie sich mit dem Lernen beschäftigt und hab keine Angst davor Experimentieren Sie mit neuen Techniken im UI-Design.

Mobile jQuery-Skripting

Die Mehrheit der Front-End-Webentwickler ist mit der jQuery-Bibliothek vertraut. Es bietet eine fantastische Abkürzung für das Kodieren von Effekten, Animationen, Dropdown-Menüs und eine Vielzahl weiterer Funktionen im Browser. Mit der Ankündigung von jQuery Mobile wird es noch beeindruckender. Es ist nicht empfohlen, direkt in die Tech zu springen und laden Sie Ihre Website überall mit Effekten, aber zu Testzwecken kann die erweiterte Funktionalität sehr gut funktionieren.

jQuery Mobile unterscheidet sich ein wenig von jQuery Mobile, da es Ihnen eine umfassende Umgebung bietet, auf der Sie aufbauen können. Wenn Sie mit ihren Dateien arbeiten, sind dies nicht nur JavaScript, sondern auch CSS-Stile für Schaltflächen, Links und Übergangseffekte. Sie schreiben immer noch Webseiten im HTML-Code, aber das Team von jQuery Mobile hat dies lieferte viele optionale UI-Designfunktionen. Mit diesem Framework können wir jedoch eine Menge tun Das Framework befindet sich noch in der Beta, Bleiben wir bei den einfachen Effekten.

Ein kleines Tutorial im DevGrow-Blog enthält einige großartige Beispiele. Die offizielle Website bietet auch Demos zum Ausprobieren. Beachten Sie, dass wir das HTML-Attribut verwenden, Datenübergang um Animationseffekte mit einem der vordefinierten Werte hinzuzufügen. Dazu gehören Slide, Pop, Flip, Fade usw. Sehen Sie sich das kleine DevGrow-Beispiel an, um einen Eindruck dieser Effekte zu erhalten.

Die Effekte und Übergänge sind ziemlich ordentlich, und die Tatsache, dass Sie eine vollständige mobile Schnittstelle streng mit jQuery erstellen können, ist auch für diese Plattform ein großer Schritt nach vorne. Mit der Plattform nur in der Beta-Version würde ich jedoch nicht empfehlen, Ihre gesamte mobile Website mit zu erstellen ihre Bibliothek, vor allem mit der Tatsache, dass es Zum Zeitpunkt des Schreibens nicht von allen gängigen Smartphones unterstützt (besonders Windows Phone 7), aber mit der Zeit wird es sicherlich besser.

Letztendlich empfehle ich Ihnen, sich mit diesem neuen mobilen Framework vertraut zu machen Vor Live für jedes Projekt bereitstellen.

Hilfreiche Tools für Entwickler

Mobile Entwickler prüfen nicht nur Codierungs- und Designressourcen. Es besteht auch eine große Nachfrage nach Softwaretools und IDEs, ganz zu schweigen von leistungsfähigen mobilen Frameworks. Web-Entwicklung ist eine schwierige Aufgabe, die viel Engagement erfordert, aber die Verwendung zusätzlicher Tools wird Ihre Arbeit erheblich erleichtern.

Opera Mobile Emulator

Suchen Sie nach einer Möglichkeit, zu überprüfen, wie Ihre mobile Website dargestellt wird? Dies kann sehr schmerzhaft sein, wenn Sie kein Smartphone mit Internetzugang haben. Oder Sie möchten nicht einfach Ihr Smartphone verwenden, um die Website jedes Mal zu testen, wenn ein Update auf Ihren Server übertragen wird. Opera Mobile Emulator ist eine fantastische Software, um Ihre mobile Website zu testen.

Der Emulator unterstützt um 20 mobile Profile wie Samsung Galaxy S, HTC Desire und sogar Tablets wie Motorola Xoom. Es ist auch möglich das einzustellen Angepasste Lösung und Pixeldichte für intensive Testzwecke. Das Beste ist, dass Sie nicht zu viel Konfigurationsarbeit machen müssen, nur ein paar Klicks machen und Sie können loslegen.

Der Download ist kostenlos und die Software kann sowohl in Mac OS X als auch in Windows ausgeführt werden. Ihre Entwickler arbeiten hart daran, geeignete Webstandards zu entwickeln und ihre mobile Rendering-Engine zu optimieren. Ich empfehle ihre anderen Entwickler-Tools, wenn Sie nach zusätzlichen Tools suchen, die Sie dabei unterstützen.

PhoneGap

Über HTML5 wurden nicht viele APIs entwickelt, um solide mobile Anwendungen zu erstellen. Vor allem in der mobilen Landschaft fehlen solche Websites, weshalb PhoneGap die Nische so gut füllt. Ihre Plattform lässt Sie leicht Erstellen Sie HTML5-basierte Apps als native Anwendungen auf 6 verschiedenen Plattformen.

Der Prozess funktioniert, indem Sie Ihren Code zuerst komprimieren und durch das Anwendungs-Framework von PhoneGap übergeben. Von dort aus können Ihre Apps einen großen Teil des mobilen Marktplatzes erreichen, einschließlich Android, iOS, Windows Phone 7 und BlackBerry.

Wenn Sie etwas verwirrt sind, machen Sie sich nicht zu viel Sorgen. Ihre Support-Seiten beschreiben den Prozess übersichtlich und bieten Links zu hilfreichen Ressourcen. Die bereits entwickelten Apps wurden in einem schönen Portfolio im Bibliotheksstil zusammengestellt. Schauen Sie sich die vollständige Apps-Sammlung an, die Sie mit Screenshots nach Geräten sortieren können.

Aptana Studio

Die Aptana-Website ist der erste Ort, um mehr über ihre Entwicklungswerkzeuge zu erfahren. Die neueste Suite-Version, Aptana 3.0.3, bietet eine vollständig integrierte IDE für Webentwicklung, CSS-Stile und Verschachtelung von HTML-Tags. Das Beste daran: Aptana ist vollständig kostenlos herunterladen! Sie bieten Pakete für alle drei großen Betriebssysteme (einschließlich Linux) an, was für Entwickler eine große Bequemlichkeit darstellt.

Das Besondere an Aptana ist, wie schnell Sie eine kleine Webanwendung entwickeln und Ihr Design testen können. Die Studio Suite ermöglicht es Ihnen Entwickeln und testen Sie schnell eine Webanwendung, die über Ruby on Rails, PHP, Python oder einfach über HTML / CSS ausgeführt wird, und ihre Code-Hervorhebungsfunktionen wurden kürzlich verbessert enthalten neue HTML5- und CSS3-Tag-Bibliotheken. Es enthält auch eine Git-Integration, ein integriertes Terminal, einen Code-Debugger und eine Handvoll weiterer Funktionen.

Mobile GUI-Kits und -Symbole

Was wäre das Web ohne herumliegende Werbegeschenke? Für Webdesigner steht die Bedeutung der Benutzeroberfläche an erster Stelle. Einfache GUIs sind schwer zu bekommen und nur die kreativsten Designer haben funktionierende Lösungen gefunden.

Es gibt jedoch viele kostenlose und dennoch qualitativ hochwertige Ressourcen, die Sie als Webdesigner testen können. Diese GUI-Kits sind hauptsächlich für Adobe Photoshop oder Fireworks konzipiert, wo Sie sich um Elemente bewegen und diese als flache Bilddateien exportieren können.

Icons sind eine sehr nützliche Ressource. Designer erstellen kostenlose Sets und bieten sie häufiger als je zuvor online an. Eine solche Website Glyphish bietet sowohl kostenlose als auch professionelle Icons. Diese Designs basieren auf einem einzigen Design, das für mobile Vorlagen und App-Designs verwendet werden kann.

Unsere Sammlung von Prototyping-Vorlagen für mobile Geräte wird Ihnen auf dem Weg der Website- und Anwendungsentwicklung eine große Hilfe sein. Sie sollten erst mit der Codierung beginnen, wenn Sie über eine starke grafische Benutzeroberfläche verfügen, und mit diesen Web-Kits können Sie den richtigen Weg einschlagen.

iOS 5 GUI Kit

Vektorelemente der iPhone-Benutzeroberfläche

iPhone App Icon Kit

Drahtgitter-Magnete (Bausatz)

Android-Benutzeroberfläche