Es war einmal, ungefähr eine Stunde von meinem jetzigen Wohnort entfernt, arbeitete ein Webdesigner, der seine Photoshop-Comps und Layouts mit fester Breite liebte. Und ich möchte das Ende nicht verderben, aber dieser Designer war ich.

Dann, als ich mich um mein eigenes Geschäft kümmerte, wurde die Web-basierte kreative Gemeinschaft berserk über dieses neumodische Konzept namens "Responsive Design". Wie jeder junge, helläugige, buschige Profi tun würde, untersuchte ich. Immerhin sollte das neueste, neueste Ding immer wenigstens flüchtig betrachtet werden.

Was ich jedoch entdeckte, ließ mich bestürzt zurück. Ein böser Mastermind namens Ethan Marcotte hatte eine entfesselt heimtückischer Plan um Webdesigner härter arbeiten zu lassen! Sein Buch ließ die Leute schimpfen und schwärmte darüber, wie wir "mobile Nutzer berücksichtigen" und "unsere Websites auf so vielen Plattformen wie möglich arbeiten lassen sollten" ... die Heiden.

Natürlich widerstand ich so lange ich konnte. Ich habe hart und mutig gegen diese Flut von gutem Verstand und klugem Geschäft gekämpft; aber es war alles umsonst. Dann fiel ich auf Ausreden zurück: "Aber ich habe keine mobilen Geräte zum Testen!" Und das, liebe Leser, ist der Punkt. Es stellt sich heraus, dass Sie nicht unbedingt einen brauchen.

Im Laufe der Zeit habe ich mir ein paar grundlegende Richtlinien ausgedacht, die Ihnen, wenn Sie sich ohne ein Mobiltelefon oder ein Tablet finden, helfen werden, Websites zu gestalten, die auf den meisten mobilen Browsern ohnehin gut aussehen.

Haftungsausschluss: Sie sollten mir nicht zuhören, wenn ...

... Sie bauen etwas Größeres als eine kleine, inhaltsorientierte Website. Große Websites und anwendungsorientierte Websites sollten unbedingt auf tatsächlichen mobilen Plattformen getestet werden. Ich meine, sicher, Sie könnten es wahrscheinlich vortäuschen, aber ich würde es nicht empfehlen.

Wenn Sie mit unbekannten Variablen arbeiten, ist es am besten, die Dinge dumm zu halten. Ja, ich rufe die fast klischeehafte KISS-Regel an, weil es funktioniert.

Recherchiere

Ohne ein Rack voller Smartphones und so weiter, müssen Sie sich darauf verlassen, was andere Leute wissen. Glücklicherweise wurde viel Zeit und Energie darauf verwendet, die Fähigkeiten der beliebtesten mobilen Browser zu untersuchen und zu vergleichen.

Finden Sie heraus, was Ihre Zielgruppe ist, und finden Sie heraus, welche Art von Browser sie verwenden. Wie immer ist Google dein Freund. Dann müssen Sie nur noch Statistiken erstellen.

Wenn der Großteil Ihres mobilen Zielmarktes Android / iOS in der einen oder anderen Form verwendet, haben Sie Glück! Ihre Standard-Browser (und die beliebtesten Alternativen wie Firefox) sind größtenteils modern. Erweiterte Layout-Techniken, grundlegende CSS3-Effekte, jQuery ... diese werden alle wahrscheinlich recht gut rendern.

Wenn Ihre Zielgruppe jedoch andere Plattformen verwendet, müssen Sie genauere Nachforschungen anstellen und herausfinden, was sie tun können und was nicht.

Was machen Sie nun, wenn Sie wenig oder gar keine Informationen über Ihre Benutzer haben? Versuchen Sie zumindest herauszufinden, wo sie sind. Die meisten Websites haben zumindest eine allgemeine Region, aus der die meisten ihrer Nutzer stammen. Hol dir die Statistiken für diese Region.

Wenn das alles nicht klappt, entwerfen Sie das Worst-Case-Szenario.

Fang hier an

Um Ihre Arbeit ein wenig einfacher zu machen, fand ich eine Website mit einem ziemlich detaillierten Vergleich dessen, was die beliebtesten mobilen Browser tun und nicht unterstützen. Schau es dir an mobilehtml5.org .

Und natürlich ist das immer beliebt caniuse.com

Erwägen Sie die Verwendung von Frameworks

Ich weiß, dass einige Designer darauf schwören, für jedes Projekt einen spezifischen Code zu entwickeln, aber wenn man blind arbeitet, ist es praktisch unmöglich, das Rad neu zu erfinden. Frameworks, die bereits auf mobilen Plattformen getestet wurden, ersparen Ihnen viele Rätselraten.

Vermutung ist schlecht. Vermeide es.

Nun, ich habe natürlich nicht jedes Framework ausprobiert oder getestet, also müssen Sie eines finden, das das tut, was Sie wollen, und es recherchieren und es mit den Fähigkeiten Ihrer beabsichtigten mobilen Plattform vergleichen. Dennoch gibt es ein paar, mit denen du anfangen könntest:

Spülbecken-Rahmen

Dies sind die, die Sie wahrscheinlich von ganz oben nennen können. Sie zeichnen sich durch ihre Komplexität aus. Sie bringen Layoutsysteme, UI-Elemente und jQuery-Plugins in einem leistungsstarken Paket zusammen.

Die bekanntesten davon sind Bootstrap und Stiftung . Ich werde nicht die Mühe machen, sie hier zu vergleichen, also gehen Sie voran und Google "Bootstrap vs. Foundation", wenn Sie weitere Informationen benötigen. Alles, was Sie wirklich wissen müssen, ist, dass in jedem Framework jede Komponente von einer ziemlich großen Fangemeinde ausgiebig getestet wurde und für Mobilgeräte bereit ist.

Mid-Frame-Rahmen

Diese versuchen nicht alles für dich zu tun, sondern geben dir genug, um loszulegen. Dies macht die Anpassung der Dinge ein wenig einfacher, aber die Erstellung und / oder Gestaltung von komplexeren UI-Elementen liegt bei Ihnen.

Diese Kategorie umfasst Skelett , WENIGER Rahmen 4 und so weiter…

Layout-Nur-Frameworks

Das ist eigentlich meine persönliche Lieblingskategorie. Ich bevorzuge es, mit einem leeren Bildschirm und einem Layout-System zu beginnen, das mir erlaubt, die Art von Website zu erstellen, die ich will, ohne viel CSS zu überschreiben, oder zu versuchen, bestimmte Teile eines gegebenen Frameworks zu extrahieren.

UI-Element-Frameworks

Diese Frameworks scheinen sich größtenteils nicht mit der Layout- oder Seitenstruktur zu befassen. Sie bieten eine einfache Möglichkeit, um ausgefallene, für Mobilgeräte kompatible Anwendungsschnittstellenelemente hinzuzufügen (lesen Sie: Widgets).

Ich habe nur eine getestet, aber meine Forschung sagt, dass die drei besten (oder zumindest beliebtesten) Frameworks in dieser Kategorie sind jQuery Mobile , KendoUI , und Wijmo .

Umfassende Zugänglichkeit

Es zeigt sich, dass Barrierefreiheit nicht nur für farbenblinde oder völlig blinde Menschen gilt. Viele der älteren mobilen Browser sind in ihren Fähigkeiten so eingeschränkt, dass es so aussieht, als würde man mit allen deaktivierten CSS und Javascript surfen.

In diesem Fall sollten Sie unbedingt sicherstellen, dass Ihre Website unter diesen Bedingungen verwendbar ist. Schalten Sie all diese schönen Dinge aus und stellen Sie sicher, dass es für Nutzer immer noch möglich ist, die Ziele der Website ohne sie zu erreichen.

Verwenden Sie Emulatoren

Geräteemulatoren sind normalerweise nicht hundertprozentig genau, aber Sie können die wichtigsten Dinge wie Layout usw. testen. Bugs, auf die ich gestoßen bin, sind oft kleinere Dinge, wie zum Beispiel Webfonts, die nicht gerendert werden. Mach dir keine Sorgen, sie sollten auf der tatsächlichen Hardware gut funktionieren.

Aber welche Emulatoren sollten Sie verwenden?

Android SDK

Dieses funktioniert ein bisschen langsam, aber es funktioniert wie ein Zauber. Sie müssen das gesamte Entwicklerkit herunterladen, aber es lohnt sich, ein Programm zu haben, das nicht nur den standardmäßigen Android-Browser, sondern das gesamte Betriebssystem imitiert. Darüber hinaus können Sie Ihre Website auf einer Vielzahl von virtuellen "Geräten" testen.

Opera mobiler Emulator

Noch einer das funktioniert grundsätzlich wie beworben. Sie laden es herunter, wählen Sie Ihr "Gerät" und gehen Sie.

Firefox-Optionen

Firefox bietet mehrere Optionen zum Testen Ihrer mobilen Inhalte. Der erste ist ein einfacher Emulator, der die Renderfunktionalität von Mozillas mobilem Firefox-Projekt mit dem Codenamen imitiert: Fennek.

Es ist nicht allzu kompliziert und bietet Ihnen ein einfaches, in der Größe veränderbares Fenster. Es liegt also an Ihnen, die Bildschirmgröße manuell festzulegen, die Sie testen möchten.

Das zweite Option ist ein Add-On für die Desktop-Version von Firefox. Synchronisiert mit dem Firefox OS Simulator bietet es Ihnen eine ganze Plattform zum Spielen, nicht nur den Browser (ähnlich wie das Android SDK).

Windows Phone

Ich konnte nicht testen dieser Emulator , da es die Installation eines sehr großen SDK erfordert, und die Installation wurde zumindest für mich abgehört. Dennoch ist es für Sie da, um es nach eigenem Ermessen zu testen.

Brombeere

Blackberry bietet eine Reihe von Simulatoren für BB10. Vielleicht bin ich es, aber ich hatte keinen großen Erfolg damit. Ich würde gerne von jedem hören, der es schafft, sie zum Arbeiten zu bringen.

iOS

Last but not least bietet Apple ein Kostenloser iOS-Simulator Das kann zum Testen von Apple-Geräten als Teil von Xcode verwendet werden. Da es Teil von Xcode ist, ist es leider nur Mac.

Eine Grösse passt allen

Wenn Sie das Budget haben (oder wirklich schnell testen können, da ihre Freizeit zeitlich begrenzt ist), können Sie nicht zu weit gehen BrowserStack . Sie ermöglichen es Ihnen, auf vielen Desktops und einer Vielzahl von Handys zu testen. Nicht so reaktionsschnell wie das echte Ding, zeigen sie dir Probleme mit Dingen wie Layout.

Letzte Tipps

Legen Sie die Ansichtsfenstergröße fest

Mobile Browser tendieren dazu, mit Zoom-Einstellungen herumzuspielen, so wie ich es bisher erlebt habe. Wenn Sie möchten, dass Ihre Website so aussieht, wie wenn Sie Ihr Browserfenster auf mobile Größen verkleinern, verwenden Sie dieses schöne Stück HTML im Kopf Ihres Dokuments:

Lerne, die Einfachheit zu lieben

Lass es mich anders formulieren: Minimalismus rockt auf Handy. Die minimalistische Ästhetik passt sich kleineren Bildschirmgrößen mit weniger Anpassungen und Anpassungen an und spart mir viel Zeit. Vielleicht scheint das für einige von euch ein Kinderspiel zu sein, aber ich kann es nicht genug betonen.

Fazit

Diese Informationscollage ist natürlich nur die Spitze des Eisbergs, und es ist auch kein Problem, Ihre Websites auf echter mobiler Hardware zu testen, aber Sie sollten damit beginnen und hoffentlich genug Geld verdienen, um sich dieses Gerät zu leisten so reich verdienen.

Ausgewähltes Bild / Vorschaubild, Mobilgerät Bild über Shutterstock.