Wir - Mobile Hochzeits DJs
Transcrição
Wir - Mobile Hochzeits DJs
Lastenheft zum Re-Design des Template für: http://mobile-hochzeits-djs.de Generelle Wünsche und Anforderungen: • Umsetzung des Templates • • Inhaltliche Anpassungen werden, sofern möglich, durch uns vorgenommen Bootstrap Template, Framework basierend (z.B. Purity III von T3) • Aktuelle Joomla 3.6.0 Version berücksichtigen • HTML5, CSS3 (aktuellste Programmiersprachen) • Full-Responsive Design • Geringe Ladezeiten // unnötige Skripte vermeiden • Vorlagen (Templates) zum Erstellen von Content • • Community Builder • Breezingforms • OsProperty • • • Grid / Block-Layout mit Effekten (wird später erklärt) • Gimmicks, wie: touch-slide Galerien, Scroll to top oder responsive Tabellen sind erwünscht • Sofern möglich aber kein Muss: Ein großer Wunsch ist ein Button, mit dem der User auch zur Desktop-Version beim Aufruf über z.B. IPhone wechseln kann. Sofern lösbar bitte gesondert anbieten. • Farbliche Anpassung des fertigen Template für ein zweites Projekt Erklärung auf der nächsten Seite • Inklusive php-Anpassung der Listenansicht in ein Blog-Layout • Wird noch genauer erklärt Easy Blog Layer Slider (oder Alternative) Akkordeon-FAQ (oder alternative) • Kein HTML-Code // z.B. über Plug-In oder K2 zu lösen • • Anzupassende Module / Komponenten: • • http://mobile-hochzeits-djs.de/faq/hochzeits-dj Jlex Review • kleine Designanpassungen notwendig • z.B. http://mobile-hochzeits-djs.de/unsere-djs/dj-max > Bewertungen Sige Image Gallery (oder Alternative) • gleichzeitige http-requests beachten (<100) Verwendete Module / Plug-Ins, auf die verzichtet werden soll: • JUX-Megamenu Einleitung Wir wünschen uns ein neues und modernes Template, das allen aktuellen Anforderungen gerecht wird. Hauptaugenmerk ist dabei auf das Responsive-Design und die vorhandene CI zu legen. Das Design muss überarbeitet werden und darf gerne moderner wirken, soll seinen Charme und warmen Charakter dabei aber nicht verlieren. Wir werden noch immer von unseren überwiegend Kundinnen für die „tolle“ Webseite gelobt. Wenn das neue Design zu technisch und kalt wird, haben wir die Befürchtung, nur noch eine von vielen modernen Webseiten zu sein. Die Entscheidung welches Template als Grundlage für die Umsetzung unserer Wünsche genutzt wird, liegt nicht bei uns. Wir bitten, anhand der hier gegebenen Informationen, etwas Passendes zu suchen und anzupassen. Die im Folgenden erklärten Darstellungen im Blog / Grid-Layout sollten automatisch geschehen. Wenn wir beispielsweise einen neuen Beitrag in Kategorie X erstellen, soll der dazugehörige Grid automatisch und immer nach gleichem Schema eingebunden werden. Wir möchten nicht für jeden Beitrag eine manuelle Anpassung in einer der Übersichtsseiten vornehmen. Dieses Thema erklären wir auf den Folgeseiten noch genauer. Das fertige Template soll, nach Abschluss aller Arbeiten, farblich angepasst werden. Dieses nutzen wir dann auch für unser Projekt http://mobile-party-djs.de . Neben der farblichen Anpassung muss an dem neuen Template für das Projekt http://mobile-party-djs.de nichts gemacht werden. Dies bitten wir bei der Kalkulation mit zu berücksichtigen. Einleitung zum Design / der Technik Generell soll das Design wie bereits erwähnt nicht zu kühl werden. Ein neuer Farbverlauf für die Boxen darf gerne verwendet werden. Blockheader mit der Überschrift in der Seitenleiste sind weiterhin erwünscht, müssen aber nicht so geschweift bleiben. Gerne verzichten wir hier auf Bilder und setzten auf CSS. Die „weiterlesen“-Funktion funktioniert momentan nicht. Am sinnvollsten wäre der automatische Umbruch für weiterlesen nach x-Zeichen. Auch die neuen Buttons für weiterlesen und andere Funktionen sollen ansprechend und nicht einfach nur platt sein. Darstellung von Content: Durch den Einsatz von K2 oder einem entsprechendem Plug-In, wünschen wir uns eine einheitliche Darstellung von Content, Tabellen, Galerien (im Content) und sonstigen Inhalten. Hier sollen die entsprechenden Vorlagen (Templates) vorher angepasst werden, damit die Darstellung und das Design seitenweit einheitlich sind und sich in das CI einfügen. Tabellen im speziellen: Eine sehr gut gelöste responsive Tabelle ist hier zu finden: http://timeteccloud.itprisma.de/index.php?option=com_content&view=article&id=164&Itemid=617 Beim Verkleinern des Browserfensters, wechseln Cols und Rows, damit die Tabelle per touch-slide in die Breite und nicht in die Länge geht. Bilder im Content / Blöcke: Auch die Darstellung von Bildern soll einheitlich sein. Am einfachsten wäre auch hier die Erstellung von einem Template für K2 oder das Plug-In oder die Nutzung von Cols (z.B. 8-12 für Text und 4-12 für Bild). Die praktikabelste Umsetzung überlassen wir Ihnen. Auf keinen Fall möchten wir die Bilder in den Content einfügen, um dann wieder aufwendig jeden Block mit padding am Bild „schön“ zu machen, da dies auch in der Praxis nicht funktioniert. Hier ist auch wieder die responsive Darstellung zu berücksichtigen. Slider-Modul: Das momentan genutzte Modul ist sehr stark und kann viel (http://extensions.joomla.org/extension/layer-slider). Wir haben bereits viele Slideshows getestet, sind aber bei diesem verblieben. Ersatz des Layer Slider nur wenn es durch ein neues Tool gravierende Vorteile gibt. Grid-Layout: Wie bereits erwähnt, soll das gesamte Layout auf Blöcken basieren. Hier wünschen wir uns mittels eines Plug-Ins oder K2 (beides noch nicht installiert), vordefinierte Templates (kein drag and drop html code). Im speziellen sind hier die Übersichtsseiten, bei denen die Unterkategorien als Blöcke dargestellt werden, gemeint. Ein Effekt wie das Einblenden von Text bei Mouseover oder touch im responsive-mode sind erwünscht. Gerne kann auch die Überschrift im Grid permanent sichtbar sein und bei mouseover oder touch durch einen slide-effekt mit einem kurzen Einleitungstext verschwinden bzw. ersetzt werden. Weitere Erklärungen mit Beispielen folgen. Responsive-Layout: Wir wünschen ab der Darstellung im Landscape-Modus (iPhone 6 Plus < Auflösung bitte selbst ermitteln), dass die rechte Seitenleiste auch dort bleibt. Bei allen Auflösungen vor dieser Größe, inklusive dem Portrait-Modus bei allen Geräten, soll die Seitenleiste unten angezeigt werden. Wir sind hier für Vorschläge offen, damit die Seite nicht zu lang wird und auch nicht überladen wirkt. Scroll to Top: Der Button ist gewünscht und soll am Ende des Content über die gesamte Breite im Portrait-Modus (mobile Darstellung) angezeigt werden. Eine Idee für den neuen Aufbau der Startseite sieht wie folgt aus: Hauptmenü Logo als „home“ link Site search input Header (flexheader plugin wird aktuell genutzt) Slider mit Bildern Anfrage Icon Startseite (aktuell Layer Slider) Anfrage Unsere DJs Bewertungen Kontakt Icon Text / Content - Gekürzt, mit weiterlesen Option Ansprechende Buttons verwenden Blog Post DJ-Slider - DJs aus Community Builder als touch-slide Modul DJ NRW (Rotation aus einer bestimmten Kategorie) Footer Menü horizontal Social Links horizontal Bewertungen Übersicht < 3 einzelne Modulpositionen Footer Erklärungen zur Startseite Generelles zum Design: Wir können uns gut vorstellen, auch einen Seitenbreiten Abschnitt darzustellen, in dem Beispielsweise das Anfrageformular (Besucherziel) hervorgehoben wird oder auch die DJs aus Community Builder in Blog-Layouts mittels dem mitgelieferten Plugin von CB dargestellt werden und per touch-slide nach rechts oder links gescrollt werden können. Hier freuen wir uns auf Ihre Vorschläge. Eine Idee zum Darstellen des Textes auf der Startseite könnte wie folgt aussehen: Das Hintergrundbild läuft beim Scrollen leicht nach oben und unten mit Erklärungen zur Startseite DJ Slider: Wir wurden darauf hingewiesen, dass ein touch-slider mit unseren DJs vorteilhaft wäre, damit sich die Kunden direkt einen Eindruck machen können. Solch ein Slider könnte wie auf http://www.mobydisc.de/ umgesetzt werden. Community-Builder hat ein Modul, mit dem sich dies realisieren lässt. Designanpassungen an diesem Modul sind nötig. Beispiele: Dieser Slider kann auch seitenbreit dargestellt werden, um den Content etwas aufzulockern. Diese Beispiele müssen nicht so übernommen werden. Passend zum CI bzw. dem restlichen Aufbau der Seite, können die DJs in dem Slider auch als „Box“ dargestellt werden. Erklärungen zur Startseite Hervorhebung des Besucherzieles (Anfrageformular): Eine weitere Idee ist, das Besucherziel auf der Startseite hervorzuheben. Dies könnte anhand dieses Beispiels gelöst werden: Resümee Startseite: Generell dienen die bereitgestellten Informationen nur als Ideen und sollen einen Anreiz bieten. Für Ideen Ihrerseits haben wir gerne ein offenes Ohr. Menü Site search input Header Kate go r i e ü b e rs i c ht Breadcrumb Box Box Box Anfrage Icon Box Box Box Kontakt Icon Box Box Box Text / Content Bewertungen Übersicht DJ NRW Footer Menü horizontal Social Links horizontal Sidebar right Blog Post Footer Kategorie-Übersichtsseiten Diese Seiten bedienen sich immer einer Hauptkategorie, die über das obere Hauptmenü zu erreichen ist. http://mobile-hochzeits-djs.de/ueber-uns/ http://mobile-hochzeits-djs.de/informationen/ http://mobile-hochzeits-djs.de/dj-pakete/ http://mobile-hochzeits-djs.de/referenzen/ http://mobile-hochzeits-djs.de/faq/ Hier soll jede Unterkategorie eine eigene Box (Grid-Layout) erhalten. Die Anzahl der Boxen ist dabei abhängig, von der Anzahl der Unterkategorien. Pro Reihe sollen 3 Boxen angezeigt werden (Desktop). Die Anzeige im mobilen Modus sollte im Portrait 1 Box (außer iPad = 2 Boxen), im Landscape ab Auflösung des iPhone 6 2 Boxen betragen. Grid-Layout Auf der gesamten Seite, sollen die Übersichten der Kategorien und Unterkategorien als Grid-Layout dargestellt werden. Die Blöcke (Grids) sollen dabei ein einheitliches Design haben. Uns ist wichtig, dass die Erstellung der Grids immer gleich abläuft und am besten automatisch bzw. halbautomatisch geschieht. Uns wurde zugetragen, dass sich dies über K2 oder einem Plugin, dass sich an Shortcodes bedient, lösen lässt. Im besten Fall gibt es in K2 oder dem Plugin ein fertiges Template, bei dem nur das Bild, die Überschrift und der Einleitungstext eingefügt werden müssen. Eine andere Alternative wäre, dass sich die Grids mittels der Informationen wie Kategoriebeschreibung, Kategoriename und Bild automatisch füllen. Für praktikable Lösungsvorschläge sind wir dankbar. Das Design der Grids liegt uns dabei sehr am Herzen. Eine einfache Box soll es nicht sein. Hier wäre ein Farbverlauf, eine Glänzende Ecke oder eine eingeknickte Ecke nach innen (3D Effekt) denkbar. Generell sollen die Boxen natürlich stimmig zum restlichen Design sein aber schon ein wenig hervorstechen. Wie immer, ist die Darstellung auf mobilen Geräten auch hier zu berücksichtigen. Grid-Effekte: Wir wünschen uns einen Effekt bei mouseover oder touch. Die Überschrift soll immer zu sehen sein. Bei Berührung kann die Überschrift dann beispielsweise mittels fadeout durch einen beispielsweise grau oder gelb-gold hinterlegtem (opacity), kurzem Einleitungstext, verschwinden. Menü Site search input Header B e i t ra g s e i te ge n e re l l Breadcrumb Anfrage Icon Platzhalter für Bild oder Slider Kontakt Icon Text / Content Bewertungen Übersicht Box zurück Footer Menü horizontal Box Zurück zur Übersicht / Kategorieansicht Social Links horizontal Box weiter DJ NRW Random Sidebar right Footer Beitragsseiten Das Layout auf der vorigen Seite erklärt sich selbst. Hier sollen noch Buttons für „vor“ und „zurück“ eingebunden werden. Die vor und zurück Funktion soll nur innerhalb der Kategorie / Unterkategorie funktionieren. Beim letzten Beitrag der Kategorie, sollte bei „vor“ dann wieder die Kategorieübersicht der Hauptkategorie erscheinen. Der mittlere Button, „zurück zur Hauptkategorie“ erklärt sich ebenfalls selbst. Menü Site search input Header DJ - Pa kete Ü b e rs i c ht Breadcrumb Basic Elegance Superior Anfrage Icon Saxophon Zusatzoptionen DJ ohne Technik Kontakt Icon Tabelle Übersicht / Vergleich Wie bei: http://timeteccloud.itprisma.de/index.php?option=com_content&view=article&id=164&Itemid=617 Von Seite: http://mobile-hochzeits-djs.de/dj-pakete-uebersicht Bewertungen Übersicht Text / Content Sidebar right Footer Menü horizontal Social Links horizontal DJ NRW Random Footer DJ-Pakete Übersicht http://mobile-hochzeits-djs.de/dj-pakete/ Diese Seite wird künftig aus den beiden folgenden Seiten zusammengefügt: http://mobile-hochzeits-djs.de/dj-pakete/ http://mobile-hochzeits-djs.de/dj-pakete/dj-pakete-uebersicht Die Tabelle aus http://mobile-hochzeits-djs.de/dj-pakete/dj-pakete-uebersicht soll responsive-kompatibel und als reine css-Lösung dargestellt werden. Auf html-Tabellen möchten wir gänzlich verzichten. Die Erklärung finden Sie auf der nächsten Seite. Responsive Tabellen Damit die Tabellen im responsiven Layout nicht zu lang werden, hat ein Entwickler eine nette Idee gehabt, die in diesem Beispiel leider schlecht umgesetzt ist. Dabei tauschen Cols und Rows den Platz, sobald die Anzeigebreite unter ein definiertes Minimum geht. Dies hat den Vorteil, dass die Tabelle breit aber nicht lang wird. Per touch-slide kann der user dann nach rechts und links scrollen. Die erste Spalte muss dabei natürlich fixiert sein. Selbstverständlich wünschen wir keine html-Tabellen. Diese sollen per css und evt. K2 gelöst werden. Menü Site search input Header Text / Content Z u s at zo p t i o n e n Ü b e rs i c ht Anfrage Icon Zusatzoptionen Lichttechnik im Innenbereich < Überschrift Box Box Box Box Box Box Box Box Zusatzoptionen Lichttechnik im Außenbereich Box Box Box Box Social Links horizontal Bewertungen Übersicht Sidebar right Und fortlaufend. Je nach benötigter Anzahl Boxen automatische Anpassung. Footer Menü horizontal Kontakt Icon DJ NRW Random Footer Zusatzoptionen Übersicht http://mobile-hochzeits-djs.de/zusatzoptionen/ Momentan findet sich hier eine unübersichtliche Auflistung unserer Zusatzoptionen (Technikoptionen). Hier möchten wir Ordnung schaffen: Es wird 4 oder mehr Unterkategorien in der Hauptkategorie „Zusatzoptionen“ geben. Die Beiträge der Unterkategorien sollen ALLE in Form von jeweils einem Grid (einer Box) auf der Seite dargestellt werden. Durch Klicken auf die jeweilige Box, gelangt man zum Beitrag. Im besten Fall ist noch eine Sortierung (K2) bzw. Filterung möglich. Icon Name Die Boxen haben hier ein anderes Layout als auf den Übersichtsseiten: Bild Das hier vorgeschlagene Layout ist nicht zwingend bindend. Auch hier kann der Text per mouseover/touch eingeflogen oder gefaded werden und mit leichtem Hintergrund über das Bild einfahren. Das jeweilige Icon zu der Technikoption ist uns sehr wichtig! Einleitungstext Layout der Grid-Box für Zusatzoptionen Übersicht Dabei sollen die Boxen, die zu einer bestimmten Unterkategorie gehören, immer als Block dargestellt werden. Wir stellen uns eine Abgrenzung durch farbliche Hinterlegung des Blockes vor. Gerne auch andere Vorschläge! Der Name der Unterkategorie soll als Überschrift dienen. Menü Site search input Header Te c h n i ks e i te / D eta i l a n s i c ht Icon Anfrage Icon Überschrift Kontakt Icon Text / Content Box Dynamische Anzahl über Backend! zurück Footer Menü horizontal Box Dynamische Anzahl über Backend! Zurück zur Übersicht Social Links horizontal Bildergalerie Touch slide nach rechts Box Dynamische Anzahl über Backend! weiter DJ NRW Random Bewertungen Übersicht Sidebar right Footer Technikseite / Detailansicht (Beitrag) z.B. http://mobile-hochzeits-djs.de/zusatzoptionen/floorspots Dies ist die Beitragsseite einer jeden Technikoption (Zusatzoption). Das Layout dürfte selbsterklärend sein. Diese Gallerie beinhaltet mehrere Fotos in einem Block. Die Fotos öffnen sich per Klick in einer Lightbox. Die Gallerie selbst ist touch-slide fähig und kann außer Fotos auch ein Video beinhalten. Wir finden die Art der Darstellung cool und modern. Die Anzahl der unteren Boxen soll sich dynamisch über das Template-Backend einstellen lassen. Hier werden wir „featured“ Produkte oder Empfehlungen anzeigen. Über die „vor“, „zurück“ und „zurück zur Übersicht“ Buttons im unteren Bereich, lässt sich innerhalb der Unterkategorie navigieren. Dies kennen wir bereits aus vorigen Erklärungen. Ein Beispiel, wie die Detailseite aussehen könnte: Beispiel für eine coole Bildergalerie: Menü Site search input Header Slider mit Bildern Anfrage Icon (aktuell Layer Slider) DJ - S ta d t ( L a n d i n g p a ge ) Anfrage Unsere DJs Text / Content Bewertungen Kontakt Icon Bild weiterlesen Bild Text / Content Text / Content Bewertungen Übersicht Bild Sidebar right Footer Menü horizontal Social Links horizontal DJ NRW Random Footer DJ-Stadt (Landingpage) z.B. http://mobile-hochzeits-djs.de/dj-nrw/hochzeits-dj-oberhausen Wir möchten ein Layout, bei dem die einzelnen Abschnitte als Blöcke angezeigt werden. Jeder Block soll ein Bild enthalten. Dieses soll abwechselnd links und rechts dargestellt werden (Desktop View). Die Zeichenanzahl soll pro Block begrenzt werden und mit „weiterlesen“ aufklappen. Alternativ dazu, wäre es auch möglich, nur den ersten Block zu zeigen und mittels „weiterlesen“ den nächsten Block aufzuklappen. Die wichtigsten Verlinkungen aus den vorigen Seiten müssen hier natürlich ebenfalls dargestellt werden. Die Grafik zeigt dabei nur das Beispiel der Startseite. Wie bereits erklärt, können die Elemente auch anders angeordnet sein und anders aussehen. OsProperty z.B. http://mobile-hochzeits-djs.de/locations/locations2 Mit der Komponente OsProperty, wollen wir Locations vorstellen. Die komplette Komponente muss dem neuen Design angepasst werden. Hier gibt es diverse Unterseiten und Übersichten, die grafische Anpassungen benötigen. PHP & CSS-Anpassungen: z.B. http://mobile-hochzeits-djs.de/locations/schloss Hier ist noch die Übersicht der Locations (listing) zu überarbeiten. Momentan findet sich hier ein Listenlayout, dass wir, wie den Rest der Seite, gerne als Grid-layout dargestellt haben möchten. PHP-Anpassungen sind nötig und sollten beim Angebot berücksichtigt werden. Aktuelle Ansicht: Gewünschte Ansicht: OsProperty http://mobile-hochzeits-djs.de/locations/locations2 Die hier gezeigte Listenansicht (rechts), soll ich ein Grid-Layout (links) gewandelt werden. Zur Hilfe, haben wir hier die Bezeichnungen aus dem Beispiel genommen, um die Wünsche zu verbildlichen. Selbstverständlich handelt es sich hierbei um diverse Klassen, die in einer php-Listenansicht zu bearbeiten sind. Typ (Schloss) Titel Aktuelle Ansicht: Bild Beschreibung (nach x Zeichen begrenzen) Flair: Lage: Zur Vergleichsliste Kapazität: Außenbereich: Details Jeweils 2 Cols (geteilt)! Easyblog http://mobile-hochzeits-djs.de/blog/ Auch diese Komponente muss dem neuen Template angepasst werden. Easyblog bietet verschiedene Templates. Wir sind nicht auf das aktuelle Template festgelegt. Hier überlassen wir Ihnen die Entscheidung, welches Template am besten zum neuen Design passt. Breezingforms http://mobile-hochzeits-djs.de/anfrageformular http://mobile-hochzeits-djs.de/Callbackformular Breezingforms ist Bootstrap kompatibel, benötigt dennoch Anpassungen an das neue Design. Bitte berücksichtigen Sie dies bei der Kalkulation. FAQ http://mobile-hochzeits-djs.de/faq/hochzeits-dj Das Plugin „Accordeon-Faq“ kann gerne ersetzt werden. Die ausklappenden Elemente gefallen uns. Dies macht die Seite schlanker und übersichtlich. Sofern das Plugin weiter genutzt wird, sind auch hier Anpassungen nötig. Community Builder http://mobile-hochzeits-djs.de/unsere-djs Diese Komponente ist eine der wichtigsten für unsere Seite. Community Builder beinhaltet viele Module wie beispielsweise das „summary Modul“ auf der Startseite oder auch ein Modul, mit dem die DJs im Random angezeigt werden können. Dies haben wir bereits für die Startseite behandelt. Die komplette Komponente muss, inklusive der benötigten Module, angepasst werden. Unsere Printmedien (CI beachten) Unsere Printmedien (CI beachten) Unsere Printmedien (CI beachten) Schlusswort Wie bereits mehrfach erwähnt, sind wir für Ideen dankbar. Wir sind keine Grafiker und kennen auch nicht alle aktuellen Möglichkeiten. Die Wichtigkeit der mobilen Darstellung haben wir klar hervorgehoben. Auch ist die Optimierung für Google (Ladezeiten, so wenig Skripte wie möglich) sehr wichtig. Gerne verzichten wir auf viele Plugins und Module, wenn sich die Wünsche durch eine Lösung kompensieren lassen. Je mehr Plugins und Module installiert sind, umso höher ist die Anfälligkeit für Fehler bei updates (auch serverseitig // Beispiel: php7). Bitte beachten Sie bei Ihrem Angebot alle Wünsche und führen Sie eventuell anfallende Mehrarbeiten, die viel Zeit in Anspruch nehmen, gesondert auf. Die auf Seite 1 gewünschten Anpassungen der Komponenten sind genauso zu berücksichtigen, wie die farbliche Anpassung des Template und den Komponenten nach Fertigstellung für http://mobile-party-djs-de Wir sehen es als selbstverständlich an, dass gerade in der Anfangszeit, Änderungswünsche am Grunddesign selbstverständlich sind und auch geduldet werden. Für Rückfragen stehen wir gerne zur Verfügung und freuen uns auf Ihr Angebot! Schwoebel und Salm GbR Vowinkelstr. 14 40878 Ratingen Ansprechpartner: Benjamin Salm Tel.: 0151-22882278 M: [email protected]