Responsive One-Page design

[Oliver23]

Nach über 10 Jahren habe ich auch mal wieder meine eigene Website erneuert und responsive als One-Page Layout aufgebaut.

Dabei habe ich einiges auf Social Media ausgelagert:

• Portfolio (Google+ Gallery, Dribble)
• News (Google+, Facebook, Twitter)
• Über mich (Xing)

Und das www eliminiert :d

Es handelt sich um eine kleine Webagentur welche auf UX Design und Frontend Entwicklung fokussiert.

Zu sehen hier: http://webgarten.ch/

Lg

Oli

 

[Sp0tlight]

Nur ein paar Sachen die mir aufgefallen sind.
Finde sie sonst aber sehr passend, auch die Anpassung für mobile Geräte bzw. kleinere Displays funktioniert einwandfrei

- Der Button "Get a smile" auf der Landing page führt direkt ganz unten in den Kontaktbereich. Hat mich zunächst irritiert; dachte der scrollt nur zur ersten section oder ein "Über Uns"-Bereich vor.
- Die Out-Animation der Popups im "UX Design und Frontend-Entwicklung" würd ich nen kleinen Tick schneller ablaufen lassen (vlt. 700 statt den 1000ms).
- Der erste Fill-effect der größeren runden icons (von grau zu grün/weiß) gefällt mir sehr gut, der zweite (wieder zurück zu grau) sieht beim scrollen mit einem normalen Mausrad im Gegensatz zum scrollen mit dem Trackpad etwas merkwürdig aus.
- Der Button "Showvase auf g+" öffnet den Link im selben Tab. Persönlich finde ich es besser wenn dazu ein neuer Tab geöffnet wird (ist aber wohl Geschmacksache).
- Einen kleinen Showcase direkt auf der Website fänd ich auch nicht schlecht, gibt ja paar nette Galerien dafür.

Gruß

 

[Der_Soso]

... Der Button "Showvase auf g+" öffnet den Link im selben Tab. Persönlich finde ich es besser wenn dazu ein neuer Tab geöffnet wird (ist aber wohl Geschmacksache)...

-->> das gilt nicht nur für den g+-button, sondern generell für alle Links. Ich würde hier auch ein target=new einsetzen

Die hover-effekte über den Social-Maedia-Buttons könnten etwas langsamer animiert sein - aber das ist kleinkrämerei

Insgesamt eine schöne Seite

 

[Oliver23]

target="_blank" bei externen Links

Vielen Dank für eure konstruktiven Feedbacks. Ich werde mir dazu Gadanken machen.

Was ich mir allerdings bereits reiflich überlegt habe ist die Sache mit dem öffnen externer Links im gleichen Fenster. Jakob Nielsen hat dies bereits vor 10 Jahren so empfohlen. Und Google macht es auch so, und zwar sehr erfolgreich Meine Gründe sind:

- Der Erfahren User entscheidet selber wie er einen Link öffnet (in neuem Tab öffnen)
- Der unerfahrene User benötigt den Retour-Button
- Viele iPhone User verstehen die Tabfunktion auf Mob Safari nicht
- Niemand stört sich daran, dass Google externe Links nicht in einem neuen Fenstern öffnet

Somit verzichte ich persönlich auf das Targe Blank auf eigenen Seiten und auf Seiten beratungswilliger Kunden.

Lg

Oli

 

[Difool]

"target _blank" bietet, wenn, seinen Sinn eh nur bei "nicht relevanten Links" zur Site.
Sprich: Urls, die nichts mit der Site zu tun haben, können imho alternativ einen "target _blank" bekommen.

- Der Erfahren User entscheidet selber wie er einen Link öffnet (in neuem Tab öffnen)

Eben; und das löpt ja auch auf einem Link mit "target _blank" –
der "unerfahrene User" bekommt dann halt einen weiteren (neuen) Tab / Fenster…

 

[MacEnroe]

Arbeitest du nur für die deutschsprachige Schweiz?

Ich bin gleich mal über „massgeschneidert“ gestolpert. Klingt nach Masse, aber vielleicht passt das ja

 

[masta k]

ich finde ja diese onepage-extrabreiten webseiten
sind mittlerweile total out...

 

[Oliver23]

Arbeitest du nur für die deutschsprachige Schweiz?

Ich bin gleich mal über „massgeschneidert“ gestolpert. Klingt nach Masse, aber vielleicht passt das ja

Ja im Moment sind es wieder mehr Schweizer Kunden, und beim aktuellen Euro Kurs wird es wohl auch so bleiben

Aber eine EN Version ist in der Übersetzung.

 

[MacEnroe]

Das Design finde ich nicht out, im Gegenteil. Ich finds super.

Über die zwei kajalgeschminkten Hübschen kann man sich streiten, inwiefern die zum Thema
passen (sind sie das Gesicht des Unternehmens? Gestalten wir das Gesicht mit Schminke und Brille?) aber mir
fällt spontan auch nichts besseres ein.

 

[Oliver23]

Das Design finde ich nicht out, im Gegenteil. Ich finds super.

Über die zwei kajalgeschminkten Hübschen kann man sich streiten, inwiefern die zum Thema
passen (sind sie das Gesicht des Unternehmens? Gestalten wir das Gesicht mit Schminke und Brille?) aber mir
fällt spontan auch nichts besseres ein.

Ja, ich hatte wegen dem Namen früher immer Gartenbilder. Jetzt wollte ich mal was anderes machen. Der Bezug ist "Wir gestalten das Gesicht Ihrens Unternehmens". Die Website eines Unternehmens als Vergleich zu einem Gesicht. Ja, und mir gefallen halt schöne Frauen

One Page Layouts finde ich auch nicht out. Leider finden aber immer noch viele Kunden Scrollen schlecht, das hat sich irgendwie in den Köpfen festgebrannt. Sie haben lieber kleine unleserliche zusammengedrängte Schriften und Mini-Blätterfunktionen.

 

[Pidd]

Wenn ich das Menü öffne, dann wird auch im 1920 Pixel breiten Browserfenster die Box mit den Kundenzitaten rechts abgeschnitten. In dieser Box wiederum erwarte ich beim Klick auf Kunden eine Liste von Referenzen, beim Klick auf Showcase auf g+, dass sich der entsprechende Link öffnet. Beides passiert nicht.

Wen möchtest du mit der Seite ansprechen? Außerhalb der Branche wird deine Sprache nur wenig verstanden. Schon das Stichwort Frontend versteht nicht jeder, von den meisten Begriffen unter UX-Design und Frontend-Entwicklung gar nicht zu reden.

Falls du auch technisch weniger versierte Personen ansprechen möchtest, solltest du m.E. den Showcase stärker in den Fokus rücken, allerdings auch straffen. 54 Bilder sind sehr viel. Einige (2 und 3 oder 7 und 9) ähneln sich stark, andere zeigen m.E. nichts bemerkenswertes (z. B. 4, 5, 6, 10).

 

[Grettir]

ich finde ja diese onepage-extrabreiten webseiten
sind mittlerweile total out...

Welchen Vorteil sollen die eigentlich haben? Ich verstehe überhaupt nicht, warum die sich so epidemisch verbreiten. Sie sind ja weder leichter zu verwalten (»maintainen« heißt das wohl im zugehörigen Neusprech) noch irgendwie übersichtlicher für den Benutzer – jedenfalls kann ich nur Nachteile entdecken. Wer hat das denn aufgebracht?

 

[Oliver23]

Wenn ich das Menü öffne, dann wird auch im 1920 Pixel breiten Browserfenster die Box mit den Kundenzitaten rechts abgeschnitten. In dieser Box wiederum erwarte ich beim Klick auf Kunden eine Liste von Referenzen, beim Klick auf Showcase auf g+, dass sich der entsprechende Link öffnet. Beides passiert nicht.

Wen möchtest du mit der Seite ansprechen? Außerhalb der Branche wird deine Sprache nur wenig verstanden. Schon das Stichwort Frontend versteht nicht jeder, von den meisten Begriffen unter UX-Design und Frontend-Entwicklung gar nicht zu reden.

Falls du auch technisch weniger versierte Personen ansprechen möchtest, solltest du m.E. den Showcase stärker in den Fokus rücken, allerdings auch straffen. 54 Bilder sind sehr viel. Einige (2 und 3 oder 7 und 9) ähneln sich stark, andere zeigen m.E. nichts bemerkenswertes (z. B. 4, 5, 6, 10).

Das Menu muss tatsächlich so sein. Ich habe mir erlaubt, ein mobile Menu in der Desktopansicht zu verwenden.

Technisch weniger versierte Personen möchte ich tatsächlich weniger ansprechen. Diese entscheiden meist nur nach Preis und werden immer etwas günstigeres finden. Ich arbeite ja nicht mit fertigen Templates, ich inverstiere in die Offerte schon mehr Zeit, als andere in eine ganze Website. Mein Zielpublikum sind Applikations-Entwickler, Berater und Fachverantwortliche bei grösseren Firmen. Oder ehrgeizige Selbstständige welche die Website als Chance und nicht als notwendiges Übel betrachten. Die werden sich zwingend etwas einarbeiten müssen.

@Grettir da könnte man jetzt einen endlosen eigenen Thread dazu machen. Ein One Page Layout eignet sich für Inhalte mit einem Präsentations Charakter. Aber mit dem leichter zu verwalten hat es sicher nichts zu tun. Zum Thema Scrollen gibt es hier was interessantes: http://www.mademyday.de/niemand-scrollt-auf-webseiten.html

 

[Kirzz]

Das Menu muss tatsächlich so sein. Ich habe mir erlaubt, ein mobile Menu in der Desktopansicht zu verwenden.

Auch nur dort. Unterhalb 1140px verschwindet das menu. Eine gewagte Idee.

Was mir, unabhängig der Gestaltung, auffiel, das benutzte – oder selbst entwickelte responsive Framework (!?) wächst nicht flüssig mit, wenn die Browserbreite geändert wird. Es springt auf vorgegebene Werte, ähnlich dem seit Jahren nicht mehr gepflegten Skeleton Framework. Als Agentur bei Beachtung deiner Zielgruppe würde ich das ändern.

Gestaltung:
Mir gefallen die borders (top / bottom) nicht, ich würde sie entfernen. Trenne die Bereiche durch die Hintergrundfarbe (jetzt: 231, 230, 231 / 255, 255, 255) oder durch: foto / 255, 255, 255 / foto u.s.w.

One Page Layout: vor zwei Jahren habe ich für meinen Relaunch darüber nachgeadacht. Für kleinere Projekte ist das toll, wenn man was zu zeigen hat, halte ich eine mehrseitige Website für sinnvoller.

 

[MacEnroe]

Was mir, unabhängig der Gestaltung, auffiel, das benutzte – oder selbst entwickelte responsive Framework (!?) wächst nicht flüssig mit, wenn die Browserbreite geändert wird. Es springt auf vorgegebene Werte, ähnlich dem seit Jahren nicht mehr gepflegten Skeleton Framework. Als Agentur bei Beachtung deiner Zielgruppe würde ich das ändern.

Ich denke, das ist Absicht. Ich finde ich es angenehmer und ruhiger, wenn das Bild
bei kleinen Änderungen so bleibt und nicht um ein paar Prozent wächst.

Zu den Farben: Die schwarzen Balken passen doch ganz gut zur schwarzen Brille.
Das ist natürlich Geschmackssache. Mir fiel nichts negativ auf, und das ist für mich
schon einmal ein gutes Zeichen.

 

[Kirzz]

Ich finde das springen der Bilder auch nicht so kritisch, nur leider springt dadurch aber auch der content, das ist nicht so benutzerfreundlich. Das Layout ist natürlich Geschmacksache, weniger ist bekanntlich ...

 

[Oliver23]

Danke für die Feedbacks. Ich sehe es wie MacEnroe.

Wegen der Navigation, so gewagt ist es nicht. Denn die Navigation wird auf dieser kleinen Seite nicht zwingend benötigt. Auf Phones hat sie abgelenkt. Die beste Navigationsform ist Scrollen