SlideShare ist ein Scribd-Unternehmen logo
Besser Abspecken mit Design.




Mobile Fi(rs)t.
Zürich, März 2012
1
                                   Denken. Präsentieren. Umsetzen. Namics.
Mobile. Design. Abspecken. Namics.


Menü.
     Antipasti.
     Primi Piatti.
     Secondi Piatti.
     Dolci.




2    14.03.2012                      Denken. Präsentieren. Umsetzen. Namics.
Antipasti.
3
             Denken. Präsentieren. Umsetzen. Namics.
Fingerfood aus Viewports, Responsive
    Grids und Media Queries.




Antipasti.
4
                                 Denken. Präsentieren. Umsetzen. Namics.
Antipasti. Abspecken. Design.


Media Queries.




 http://www.anderssonwise.com/

5   14.03.2012                    Denken. Präsentieren. Umsetzen. Namics.
Antipasti. Abspecken. Design.


Viewport.




 http://www.alistapart.com/d/responsive-web-design/ex/ex-site-FINAL.html

6   14.03.2012                                        Denken. Präsentieren. Umsetzen. Namics.
Antipasti. Abspecken. Design.


Responsive Layout.




 http://www.alistapart.com/d/responsive-web-design/ex/ex-site-FINAL.html

7   14.03.2012                                        Denken. Präsentieren. Umsetzen. Namics.
Antipasti. Abspecken. Design.


Responsive Layout.
     A                                                        A
    B            B              B   C   B
                     C                                        C
    C
                 A              A
                                                              D
                     D              D
    D




8   14.03.2012                          Denken. Präsentieren. Umsetzen. Namics.
Antipasti. Abspecken. Design.


Breakpoints.
    A                                                                        A
    B            B              B                       B
                     C               C                                       C
    C
                 A              A
                                                                             D
                     D               D
    D




    Breakpoint 1      Breakpoint 2       Breakpoint 3




9   14.03.2012                                          Denken. Präsentieren. Umsetzen. Namics.
Antipasti. Abspecken. Design.


Breakpoints.
                  iPhone
                   320px


                           iPhone
                            480px


                                     iPad
                                    768px


                                             iPad
                                            1024px


                                                 MacBook Air 13”
                                                     1440px


                               320px                 720px                      980px



                            Breakpoint 1         Breakpoint 2                Breakpoint 3


10   14.03.2012                                                    Denken. Präsentieren. Umsetzen. Namics.
Antipasti. Abspecken. Design.


Mouse vs. Touch.




           Informationen können durch
           die Hand verdeckt werden




11   14.03.2012
              9                         Denken. Präsentieren. Umsetzen. Namics.
Antipasti. Abspecken. Design.


Mouse vs. Touch.
                    Klickfläche
                    ca. 29x44px




                    Informationen können durch
                    die Hand verdeckt werden




12   14.03.2012                                  Denken. Präsentieren. Umsetzen. Namics.
Antipasti. Abspecken. Design.


Mouse vs. Touch.
                    Klickfläche
                    ca. 29x44px




                    Informationen können durch
                    die Hand verdeckt werden




13   14.03.2012                                  Denken. Präsentieren. Umsetzen. Namics.
Primi
Piatti.
14
          Denken. Präsentieren. Umsetzen. Namics.
Ein leichtes Soufflés aus Weissraum,
 feinste Funktionen und kernigen Botschaften
 nach Art des Hauses.




Primi
Piatti.
15
                               Denken. Präsentieren. Umsetzen. Namics.
Antipasti. Abspecken. Design.


Inhalt und Relevanz.



                    Essentiell                        Nützlich




                                                                                       Primär
                   (Mandatory)                        (Useful)




                                                                                       Sekundär
                   Unterstützend                    Belanglos
                  (Supplemental)                     (Trivial)



              Ziele und Sicht des Besuchers   Ziele und Sicht des Anbieters


16   14.03.2012                                       Denken. Präsentieren. Umsetzen. Namics.
Antipasti. Abspecken. Design.


MUST-Methode.



                    Essentiell                        Nützlich




                                                                                       Primär
                   (Mandatory)                        (Useful)




                                                                                       Sekundär
                   Unterstützend                    Belanglos
                  (Supplemental)                     (Trivial)



              Ziele und Sicht des Besuchers   Ziele und Sicht des Anbieters


17   14.03.2012                                       Denken. Präsentieren. Umsetzen. Namics.
Antipasti. Abspecken. Design.


Beispiel.




18   14.03.2012                 Denken. Präsentieren. Umsetzen. Namics.
Antipasti. Abspecken. Design.


Essentiell (Mandatory).
 Informiert über den Zweck / Absender der Website
 Wird exakt wegen dieser Funktion / Information besucht
 Wichtige Informationen und Botschaften




 Primäre Informationen und Funktionen aus Sicht des Betrachters

19   14.03.2012                                      Denken. Präsentieren. Umsetzen. Namics.
Antipasti. Abspecken. Design.


Beispiel.
                                M                              M


                                                   M

                                                   M
                          M

                          M


20   14.03.2012                     Denken. Präsentieren. Umsetzen. Namics.
Antipasti. Abspecken. Design.


Nützlich (Useful).
 Erschliesst weitere primäre Inhalte / Funktionen
 Angebot kann ohne diesem Element nicht genutzt
  werden




 Primäre Informationen und Funktionen aus Sicht des Anbieters

21   14.03.2012                                      Denken. Präsentieren. Umsetzen. Namics.
Antipasti. Abspecken. Design.


Beispiel.

                           U     U




                           U
                                               U



22   14.03.2012                 Denken. Präsentieren. Umsetzen. Namics.
Antipasti. Abspecken. Design.


Unterstützend (Supplemental).
 Veranschaulicht die Funktionsweise des Angebotes
 Zusätzliche Zugänge zur Erschliessung der Inhalte
 Zusatzfunktionen die den Mehrwert/Komfort erhöhen




 Sekundäre Informationen und Funktionen aus Sicht des Betrachters

23   14.03.2012                                     Denken. Präsentieren. Umsetzen. Namics.
Antipasti. Abspecken. Design.


Beispiel.
                        S
                                                        S




                                S


                                    S                   S
                            S




                                                        S
                  S
24   14.03.2012                         Denken. Präsentieren. Umsetzen. Namics.
Antipasti. Abspecken. Design.


Belanglos (Trivial).
 Zusätzliche Angebote und Funktionen
 Hygieneelemente




 Sekundäre Informationen und Funktionen aus Sicht des Anbieters

25   14.03.2012                                     Denken. Präsentieren. Umsetzen. Namics.
Antipasti. Abspecken. Design.


Beispiel.
                  T
                                             T           T




         T




                                T                   T
26   14.03.2012                     Denken. Präsentieren. Umsetzen. Namics.
Antipasti. Abspecken. Design.


Beispiel.
                  T      S               M                              M
                             U                U       T      S    T

                                                            M
                                 S
                                                            M
         T                M              S                   S
                             S
                             U

                          M                                 U

                                                             S
                  S                  T                       T
27   14.03.2012                              Denken. Präsentieren. Umsetzen. Namics.
Secondi
Piatti.
28
          Denken. Präsentieren. Umsetzen. Namics.
Erlesene Auswahl an Websites
 serviert auf dem heissen Stein.




Secondi
Piatti.
29
                                   Denken. Präsentieren. Umsetzen. Namics.
Antipasti. Abspecken. Design.


Mitmachen.
 Schere
 Leim
 iPhone Schablonen
 M-U-S-T Raster




30   14.03.2012                 Denken. Präsentieren. Umsetzen. Namics.
Antipasti. Abspecken. Design.


Mitmachen.




                                                                                       Primär
                       Essentiell                       Nützlich
                      (Mandatory)                       (Useful)




                                                                                       Sekundär
                     Unterstützend                     Belanglos
                    (Supplemental)                      (Trivial)




              Ziele und Sicht des Besuchers   Ziele und Sicht des Anbieters


31   14.03.2012                                       Denken. Präsentieren. Umsetzen. Namics.
Antipasti. Abspecken. Design.


Beispiel.




32   14.03.2012                 Denken. Präsentieren. Umsetzen. Namics.
Antipasti. Abspecken. Design.


Ablauf.
 ca. 15 Min Priorisieren auf der Matrix
 ca. 10 Min Layout auf der iPhone Schablone
 ca. 10. Präsentation der Ergebnisse




33   14.03.2012                            Denken. Präsentieren. Umsetzen. Namics.
Antipasti. Abspecken. Design.


Resultate.




34   14.03.2012                 Denken. Präsentieren. Umsetzen. Namics.
Antipasti. Abspecken. Design.


Resultate.




35   14.03.2012                 Denken. Präsentieren. Umsetzen. Namics.
Dolci.
36
         Denken. Präsentieren. Umsetzen. Namics.
Frisches Sorbet aus Tipps & Tricks




Dolci.
37
                               Denken. Präsentieren. Umsetzen. Namics.
Antipasti. Abspecken. Design.


Ohne Maus - Kein Hover.




 http://www.abo-checker.ch/phones

38   14.03.2012                      Denken. Präsentieren. Umsetzen. Namics.
Antipasti. Abspecken. Design.


Responsive Grids.




 http://foundation.zurb.com/

 http://lessframework.com/

 http://framelessgrid.com/

 http://cssgrid.net/

 http://stuffandnonsense.co.uk/projects/320andup/

39   14.03.2012                                      Denken. Präsentieren. Umsetzen. Namics.
Antipasti. Abspecken. Design.


Das Rad nicht neu erfinden.
 Termine          Orte          Adressen   Telefonnr.      Sharing           Bookmarks




  APIs nutzen

40   14.03.2012                                         Denken. Präsentieren. Umsetzen. Namics.
Antipasti. Abspecken. Design.


Keine Formulare verbiegen.




  Dropdowns, werden je nach Plattform anders dargestellt und sind für die
   jeweilige Eingabeform optimal angepasst

41   14.03.2012                                        Denken. Präsentieren. Umsetzen. Namics.
Antipasti. Abspecken. Design.


Unter der Haube – Datum/Uhrzeit.




  Eingabe von Datum und Uhrzeit mittels Picker-Element

42   14.03.2012                                      Denken. Präsentieren. Umsetzen. Namics.
Antipasti. Abspecken. Design.


Unter der Haube – Text.




  Anpassen der Tastatur für Ziffern, Buchstaben, E-Mail, etc.

43   14.03.2012                                         Denken. Präsentieren. Umsetzen. Namics.
Antipasti. Abspecken. Design.


Prototype Testing.




 http://tv.adobe.com/watch/adobe-technology-sneaks-2012/adobe-shadow

44   14.03.2012                                    Denken. Präsentieren. Umsetzen. Namics.
Antipasti. Abspecken. Design.


Responsive Layout Preview.




 http://www.responsinator.com

45   14.03.2012                  Denken. Präsentieren. Umsetzen. Namics.
Antipasti. Abspecken. Design.


… one last thing.




46   14.03.2012                 Denken. Präsentieren. Umsetzen. Namics.
Grazie.
47
          Denken. Präsentieren. Umsetzen. Namics.

Weitere ähnliche Inhalte

Mehr von Namics – A Merkle Company

Webinar "DSGVO – Der Countdown läuft " Namics und Stibo Systems
Webinar "DSGVO – Der Countdown läuft " Namics und Stibo SystemsWebinar "DSGVO – Der Countdown läuft " Namics und Stibo Systems
Webinar "DSGVO – Der Countdown läuft " Namics und Stibo Systems
Namics – A Merkle Company
 
Agile Usergroup Rhein Main Treffen 17.08.2017 – Einführung in "Objectives und...
Agile Usergroup Rhein Main Treffen 17.08.2017 – Einführung in "Objectives und...Agile Usergroup Rhein Main Treffen 17.08.2017 – Einführung in "Objectives und...
Agile Usergroup Rhein Main Treffen 17.08.2017 – Einführung in "Objectives und...
Namics – A Merkle Company
 
Namics & Adobe Industrie-Workshop "Be smart" vom 23.05.2017
Namics & Adobe Industrie-Workshop "Be smart" vom 23.05.2017Namics & Adobe Industrie-Workshop "Be smart" vom 23.05.2017
Namics & Adobe Industrie-Workshop "Be smart" vom 23.05.2017
Namics – A Merkle Company
 
Namics Walk-in Lab Smart Services 05.10.2016
Namics Walk-in Lab Smart Services 05.10.2016Namics Walk-in Lab Smart Services 05.10.2016
Namics Walk-in Lab Smart Services 05.10.2016
Namics – A Merkle Company
 
IoT und Mobile Connectivity – Vortrag auf der Hannovermesse von Jens Reufsteck
IoT und Mobile Connectivity – Vortrag auf der Hannovermesse von Jens ReufsteckIoT und Mobile Connectivity – Vortrag auf der Hannovermesse von Jens Reufsteck
IoT und Mobile Connectivity – Vortrag auf der Hannovermesse von Jens Reufsteck
Namics – A Merkle Company
 
Mit quantitativen Personas zu höherer Conversion - Von der Konzeption bis zur...
Mit quantitativen Personas zu höherer Conversion - Von der Konzeption bis zur...Mit quantitativen Personas zu höherer Conversion - Von der Konzeption bis zur...
Mit quantitativen Personas zu höherer Conversion - Von der Konzeption bis zur...
Namics – A Merkle Company
 
Customer Engagement with Sitecore: From Experience to Conversion
Customer Engagement with Sitecore: From Experience to ConversionCustomer Engagement with Sitecore: From Experience to Conversion
Customer Engagement with Sitecore: From Experience to Conversion
Namics – A Merkle Company
 
Customer Experience: Best Practices aus aktuellen Projekten.
Customer Experience: Best Practices aus aktuellen Projekten.Customer Experience: Best Practices aus aktuellen Projekten.
Customer Experience: Best Practices aus aktuellen Projekten.
Namics – A Merkle Company
 
Digital analytics namics marco hassler_20140822
Digital analytics namics marco hassler_20140822Digital analytics namics marco hassler_20140822
Digital analytics namics marco hassler_20140822
Namics – A Merkle Company
 
CONNECT Web Experience - Basel. Treffen der AEM Developer Community.
CONNECT Web Experience - Basel. Treffen der AEM Developer Community.CONNECT Web Experience - Basel. Treffen der AEM Developer Community.
CONNECT Web Experience - Basel. Treffen der AEM Developer Community.
Namics – A Merkle Company
 
Fachveranstaltung Digital Marketing – Die zukunftsgerichtete Marketingorganis...
Fachveranstaltung Digital Marketing – Die zukunftsgerichtete Marketingorganis...Fachveranstaltung Digital Marketing – Die zukunftsgerichtete Marketingorganis...
Fachveranstaltung Digital Marketing – Die zukunftsgerichtete Marketingorganis...
Namics – A Merkle Company
 
Fachveranstaltung Digital Marketing – Agil, flexibel und adaptiv – das sind n...
Fachveranstaltung Digital Marketing – Agil, flexibel und adaptiv – das sind n...Fachveranstaltung Digital Marketing – Agil, flexibel und adaptiv – das sind n...
Fachveranstaltung Digital Marketing – Agil, flexibel und adaptiv – das sind n...Namics – A Merkle Company
 
Fachveranstaltung Digital Marketing – Multichannel, CRM, Kampagnen – und was ...
Fachveranstaltung Digital Marketing – Multichannel, CRM, Kampagnen – und was ...Fachveranstaltung Digital Marketing – Multichannel, CRM, Kampagnen – und was ...
Fachveranstaltung Digital Marketing – Multichannel, CRM, Kampagnen – und was ...Namics – A Merkle Company
 
Fachveranstaltung Digital Marketing – Besticht mit aktuellen, personalisierte...
Fachveranstaltung Digital Marketing – Besticht mit aktuellen, personalisierte...Fachveranstaltung Digital Marketing – Besticht mit aktuellen, personalisierte...
Fachveranstaltung Digital Marketing – Besticht mit aktuellen, personalisierte...Namics – A Merkle Company
 
Fachveranstaltung Digital Marketing – Welcher Digital Marketing Typ sind Sie?...
Fachveranstaltung Digital Marketing – Welcher Digital Marketing Typ sind Sie?...Fachveranstaltung Digital Marketing – Welcher Digital Marketing Typ sind Sie?...
Fachveranstaltung Digital Marketing – Welcher Digital Marketing Typ sind Sie?...Namics – A Merkle Company
 
Mobile Business Forum – Namics Workshop Presentation 16.05.2014
Mobile Business Forum – Namics Workshop Presentation 16.05.2014Mobile Business Forum – Namics Workshop Presentation 16.05.2014
Mobile Business Forum – Namics Workshop Presentation 16.05.2014
Namics – A Merkle Company
 
IFZ Konferenz. Immobilienvermarktung. Erfolgreiche (Online) Kampagnen. Namics.
IFZ Konferenz. Immobilienvermarktung. Erfolgreiche (Online) Kampagnen. Namics.IFZ Konferenz. Immobilienvermarktung. Erfolgreiche (Online) Kampagnen. Namics.
IFZ Konferenz. Immobilienvermarktung. Erfolgreiche (Online) Kampagnen. Namics.
Namics – A Merkle Company
 
Emerging Technology. Innovation. Durchstarten. Mobile. Advantage. Know-How. N...
Emerging Technology. Innovation. Durchstarten. Mobile. Advantage. Know-How. N...Emerging Technology. Innovation. Durchstarten. Mobile. Advantage. Know-How. N...
Emerging Technology. Innovation. Durchstarten. Mobile. Advantage. Know-How. N...
Namics – A Merkle Company
 
B2B Commerce zwischen Apple und SAP - Raphael Hauser, E-Commerce Konferenz 20...
B2B Commerce zwischen Apple und SAP - Raphael Hauser, E-Commerce Konferenz 20...B2B Commerce zwischen Apple und SAP - Raphael Hauser, E-Commerce Konferenz 20...
B2B Commerce zwischen Apple und SAP - Raphael Hauser, E-Commerce Konferenz 20...
Namics – A Merkle Company
 

Mehr von Namics – A Merkle Company (20)

Webinar "DSGVO – Der Countdown läuft " Namics und Stibo Systems
Webinar "DSGVO – Der Countdown läuft " Namics und Stibo SystemsWebinar "DSGVO – Der Countdown läuft " Namics und Stibo Systems
Webinar "DSGVO – Der Countdown läuft " Namics und Stibo Systems
 
Agile Usergroup Rhein Main Treffen 17.08.2017 – Einführung in "Objectives und...
Agile Usergroup Rhein Main Treffen 17.08.2017 – Einführung in "Objectives und...Agile Usergroup Rhein Main Treffen 17.08.2017 – Einführung in "Objectives und...
Agile Usergroup Rhein Main Treffen 17.08.2017 – Einführung in "Objectives und...
 
Namics & Adobe Industrie-Workshop "Be smart" vom 23.05.2017
Namics & Adobe Industrie-Workshop "Be smart" vom 23.05.2017Namics & Adobe Industrie-Workshop "Be smart" vom 23.05.2017
Namics & Adobe Industrie-Workshop "Be smart" vom 23.05.2017
 
Namics Walk-in Lab Smart Services 05.10.2016
Namics Walk-in Lab Smart Services 05.10.2016Namics Walk-in Lab Smart Services 05.10.2016
Namics Walk-in Lab Smart Services 05.10.2016
 
IoT und Mobile Connectivity – Vortrag auf der Hannovermesse von Jens Reufsteck
IoT und Mobile Connectivity – Vortrag auf der Hannovermesse von Jens ReufsteckIoT und Mobile Connectivity – Vortrag auf der Hannovermesse von Jens Reufsteck
IoT und Mobile Connectivity – Vortrag auf der Hannovermesse von Jens Reufsteck
 
Mit quantitativen Personas zu höherer Conversion - Von der Konzeption bis zur...
Mit quantitativen Personas zu höherer Conversion - Von der Konzeption bis zur...Mit quantitativen Personas zu höherer Conversion - Von der Konzeption bis zur...
Mit quantitativen Personas zu höherer Conversion - Von der Konzeption bis zur...
 
Customer Engagement with Sitecore: From Experience to Conversion
Customer Engagement with Sitecore: From Experience to ConversionCustomer Engagement with Sitecore: From Experience to Conversion
Customer Engagement with Sitecore: From Experience to Conversion
 
Customer Experience: Best Practices aus aktuellen Projekten.
Customer Experience: Best Practices aus aktuellen Projekten.Customer Experience: Best Practices aus aktuellen Projekten.
Customer Experience: Best Practices aus aktuellen Projekten.
 
Digital analytics namics marco hassler_20140822
Digital analytics namics marco hassler_20140822Digital analytics namics marco hassler_20140822
Digital analytics namics marco hassler_20140822
 
CONNECT Web Experience - Basel. Treffen der AEM Developer Community.
CONNECT Web Experience - Basel. Treffen der AEM Developer Community.CONNECT Web Experience - Basel. Treffen der AEM Developer Community.
CONNECT Web Experience - Basel. Treffen der AEM Developer Community.
 
Fachveranstaltung Digital Marketing – Die zukunftsgerichtete Marketingorganis...
Fachveranstaltung Digital Marketing – Die zukunftsgerichtete Marketingorganis...Fachveranstaltung Digital Marketing – Die zukunftsgerichtete Marketingorganis...
Fachveranstaltung Digital Marketing – Die zukunftsgerichtete Marketingorganis...
 
Fachveranstaltung Digital Marketing – Agil, flexibel und adaptiv – das sind n...
Fachveranstaltung Digital Marketing – Agil, flexibel und adaptiv – das sind n...Fachveranstaltung Digital Marketing – Agil, flexibel und adaptiv – das sind n...
Fachveranstaltung Digital Marketing – Agil, flexibel und adaptiv – das sind n...
 
Fachveranstaltung Digital Marketing – Multichannel, CRM, Kampagnen – und was ...
Fachveranstaltung Digital Marketing – Multichannel, CRM, Kampagnen – und was ...Fachveranstaltung Digital Marketing – Multichannel, CRM, Kampagnen – und was ...
Fachveranstaltung Digital Marketing – Multichannel, CRM, Kampagnen – und was ...
 
Fachveranstaltung Digital Marketing – Besticht mit aktuellen, personalisierte...
Fachveranstaltung Digital Marketing – Besticht mit aktuellen, personalisierte...Fachveranstaltung Digital Marketing – Besticht mit aktuellen, personalisierte...
Fachveranstaltung Digital Marketing – Besticht mit aktuellen, personalisierte...
 
Fachveranstaltung Digital Marketing – Welcher Digital Marketing Typ sind Sie?...
Fachveranstaltung Digital Marketing – Welcher Digital Marketing Typ sind Sie?...Fachveranstaltung Digital Marketing – Welcher Digital Marketing Typ sind Sie?...
Fachveranstaltung Digital Marketing – Welcher Digital Marketing Typ sind Sie?...
 
Mobile Business Forum – Namics Workshop Presentation 16.05.2014
Mobile Business Forum – Namics Workshop Presentation 16.05.2014Mobile Business Forum – Namics Workshop Presentation 16.05.2014
Mobile Business Forum – Namics Workshop Presentation 16.05.2014
 
2014 05-24-i a-konferenz-frombrand2experience
2014 05-24-i a-konferenz-frombrand2experience2014 05-24-i a-konferenz-frombrand2experience
2014 05-24-i a-konferenz-frombrand2experience
 
IFZ Konferenz. Immobilienvermarktung. Erfolgreiche (Online) Kampagnen. Namics.
IFZ Konferenz. Immobilienvermarktung. Erfolgreiche (Online) Kampagnen. Namics.IFZ Konferenz. Immobilienvermarktung. Erfolgreiche (Online) Kampagnen. Namics.
IFZ Konferenz. Immobilienvermarktung. Erfolgreiche (Online) Kampagnen. Namics.
 
Emerging Technology. Innovation. Durchstarten. Mobile. Advantage. Know-How. N...
Emerging Technology. Innovation. Durchstarten. Mobile. Advantage. Know-How. N...Emerging Technology. Innovation. Durchstarten. Mobile. Advantage. Know-How. N...
Emerging Technology. Innovation. Durchstarten. Mobile. Advantage. Know-How. N...
 
B2B Commerce zwischen Apple und SAP - Raphael Hauser, E-Commerce Konferenz 20...
B2B Commerce zwischen Apple und SAP - Raphael Hauser, E-Commerce Konferenz 20...B2B Commerce zwischen Apple und SAP - Raphael Hauser, E-Commerce Konferenz 20...
B2B Commerce zwischen Apple und SAP - Raphael Hauser, E-Commerce Konferenz 20...
 

“Mobile First“ - Besser Abspecken mit Design

Hinweis der Redaktion

  1. Namics hilft Abspecken Fühlt sich ihre Website manchmal auch zu dick, behäbig und zu schwer für mobile Endgeräte? Kriegen sie die Inhalte nicht mehr unter oder sind diese aufgeblasen und schwabbelig. Hat ihre Homepage kein Profil mehr und ihre Kernfunktionen sind unter überflüssigen Fett verborgen? Dann wird es Zeit für eine passende Diät und Fitnessprogramm. In ganz schlimmen Fällen muss man auch schon mal das Messer oder Schere zücken können. Bei uns lernen sie heute nicht nur, wie sie gekonnt und skrupellos mit dem kleinen chirurgischen Besteck umgehen können. Wir zeigen Ihnen auch wie mit einfachen Mitteln eine Website für mobile Geräte fit gemacht wird und welche Vorteile dies für den klassischen Webauftritt mit sich bringt. Stichwort: Mobile Usability
  2. Antipasti – Fingerfood aus Viewports, Responsive Grids und Media Queries. Gestaltung Primi Piatti – Ein leichtes Soufflés aus Weissraum, feinste Funktionen und kernigen Botschaften nach Art des Hauses - Inhalt Secondi Piatti – Erlesene Auswahl an Websites serviert auf dem heissen Stein. Dolci – Frisches Sorbet aus Tipps & Tricks
  3. 5min
  4. Ist meine Website fit für mobile Endgeräte?
  5. Performance Datenoptimierung
  6. Mit dem Viewport werden Geräteeigenschaften ausgelesen, die Hinweis über das Seitenverhältnis und Displayauflösung geben. Das betrifft einerseits das Layout aber auch die Qualität von Bildern (Retina-Display) und Schriftgrösse
  7. 10min
  8. Sind meine Inhalte fit für mobiles Surfverhalten?
  9. Essentiell (Mandatory): Die Website kann nicht ohne diese Information/Funktion auskommen. Nützlich (Useful) Dieses Element fügt einen Mehrwert hinzu, kann aber notfalls auch weggelassen werden. Unterstützend (Supplemental): Dieses Element ergänzt oder wiederholt Inhalte. Belanglos (Trivial): Dieses Element ist redundant oder verschwendet Raum auf die eine oder andere Weise.
  10. Essentiell (Mandatory): Die Website kann nicht ohne diese Information/Funktion auskommen. Nützlich (Useful) Dieses Element fügt einen Mehrwert hinzu, kann aber notfalls auch weggelassen werden. Unterstützend (Supplemental): Dieses Element ergänzt oder wiederholt Inhalte. Belanglos (Trivial): Dieses Element ist redundant oder verschwendet Raum auf die eine oder andere Weise.
  11. Die Website wird exakt wegen dieser Funktion/Information besucht SBB Fahrplanauskunft, Coop@home Kauf eines Produktes, Fotos bei Pinterst Das Angebot kann ohne diesem Element nicht genutzt werden Login/Registrierung, Gibt einen Hinweis auf den Urheber / Zweck der Website Logo, Name, Foto Die Funktion ist notwendig um weitere Inhalte zu erschliessen Navigation, Primäre Aktion Warum soll ich diese Website benutzen? Wie funktioniert es? Was muss ich dafür tun?
  12. Erschliesst weitere primäre Inhalte / Funktionen Hauptnavigation Warum soll ich diese Website benutzen? Wie funktioniert es? Was muss ich dafür tun?
  13. Veranschaulicht die Funktionsweise des Angebotes Video, Testimonial, Bietet zusätzliche Zugänge zur Erschliessung der Inhalte Suche, Quicklinks, Breadcrumb, FatFooter Zusatzfunktionen die den Mehrwert erhöhen Druckfunktion, Weiterleitung, Warum soll ich diese Website benutzen? Wie funktioniert es? Was habe ich davon? Was muss ich dafür tun?
  14. Passive Inhalte und Funktionen Bietet wichtige Funktionen zur Verbreitung der Website Twitter, Facebook, Google+ Hygieneelemente Disclaimer, Impressum, Aktienkurs
  15. 5min
  16. http://www.abo-checker.ch/phones
  17. Termine -> Calendar Orte -> Maps Sharing -> Twitter, facebook, Google+ Bookmarking -> Evernote, Digg, Delicious Telefonnummern -> Phone Kontaktdaten -> Adressbook aber auch intergrierte Dienste, wie GPS, Kamera, Mikrofon nutzen.
  18. Checkbox, Radiobutton, Dropdown sind sacrosanct – bitte nicht neu erfinden und schon gar nicht gestalten Zu viel Anpassung auf den verschiedenen Plattformen notwendig Verwirrt den Nutzer, da er Gewohntes neu lernen muss Don ’t break the form
  19. z.B. Durch Verwendung von standardisierten Formularelementen, insbesondere Dropdown-Menüs
  20. z.B. Durch intelligente Auswahl der Tastatur (E-Mail. URL, Text, Ziffern) Suchfelder als solche erkennbar machen inkl. Funktion zum Löschen der Eingabe
  21. http://tv.adobe.com/watch/adobe-technology-sneaks-2012/adobe-shadow
  22. http://www.responsinator.com Tool zur Überprüfung von res ponsive Layout auf unters chiedlichen Geräten und Viewports im Webbrowser
  23. Sorry Flash, You are out! http://www.nerdnirvana.org/tag/superman/