Themenübersicht
- Was zeichnet eine gute Website aus?
- Responsive Webdesign
- smartTemplate Version 20 – innovatives Content-Design
- MACPI – erstklassiges «Responsives Webdesign» mit Autopiloten
- Content-Design – unendliche Möglichkeiten
- Digitale Formulare – einfache Bedienung und individuelles Aussehen
- Responsive Maps – Google Maps API
- SAIP – der neue Slot-Adaptive-Image-Processor
- Digitale Charts – präsentieren Sie Ihre Zahlen dynamisch
- smartTemplate – ausgefeilte Basis
Was zeichnet eine gute Website aus?
Jede gute Website besteht aus spezifischen Einzelteilen.
Einzelteile wie Farbwelten, Typografie, Texte, Bilder, Design, Stil, Technik und so weiter. Das volle Potenzial wird ausgeschöpft, sobald alle Einzelteile gekonnt aufeinander abgestimmt sind.
Eine gute Website gewinnt die Herzen und Sinne der Kunden.
Auf dieser Seite reden wir vor allem über die Technik, aber denken Sie immer an das perfekte Zusammenspiel der Einzelteile. Ein positives Kundenerlebnis ist ein realer Wettbewerbsvorteil.
Responsive Webdesign
Was bedeutet Responsive Webdesign?
Responsive Webdesign heisst übersetzt «sich anpassendes oder reagierendes Webdesign», da diese Technik eine flexible Inhaltsdarstellung ermöglicht.
Das Responsive Webdesign ist die geeignetste Technologie um digitale Inhalte auf dem verfügbaren Viewport von Laptops, Desktops, Tablets, Smartphones, Digital-Signage oder E-Book-Readern adäquat anzuzeigen.
Viewport = der sichtbare Displaybereich ohne «scrollen» und «swipen».
smartTemplate Version 20
Die Innovation für responsive Web-Anwendungen
Die Ansprüche ändern sich täglich. Wöchentlich kommen neue Geräte auf den Markt. Die Anforderungen an das Content-Design werden immer komplexer.
smartTemplate20 – die dynamische Aufbereitung von Informationen ist die Antwort auf die wechselhaften Herausforderungen.
ST20 steht für smartTemplate Version 20
MACPI
Modern and Adequate Choreographic Presentation of Information
Die MACPI-Engine ist eine – von der Bluesun-Forschungsfabrik entwickelte – Software, die selbstständig erstklassiges «Responsives Webdesign» berechnet und erstellt. Der Autopilot-Modus entlastet Ihre Online-Redaktorinnen und Online-Redaktoren.
Beispiele, wie die MACPI-Engine Ihr Content-Design beflügeln wird
Beispiel: regelmässige, bildbasierte Choreografie
Die gleichmässige Bild-Verteilung ohne Abstand zwischen den Bildern wirkt modern. Die MACPI-Engine kontrolliert die Choreografie. Die Darstellung ist vom Smartphone bis zum übergrossen Desktop optimal und ausgewogen.
Info: In diesem Anwendungsbeispiel wird das Layout für die volle Anzeige-Breite verwendet. Die Bildqualität wurde zugunsten der Performance leicht reduziert.
Beispiel: regelmässige, bildbasierte Choreografie
Die gleichmässige Bild-Verteilung wirkt aufgeräumt. Die Abstände zwischen den Bildern bringen Leichtigkeit. Die MACPI-Engine kontrolliert die Choreografie. Die Darstellung ist vom Smartphone bis zum übergrossen Desktop optimal und ausgewogen.
Info: In diesem Anwendungsbeispiel wird das Layout für die normale Anzeige-Breite verwendet.
Beispiel: freie, bildbasierte Choreografie
Die freie, unregelmässige Bildverteilung eröffnet neue kreative Möglichkeiten. Dieser Stil ist jung, locker und frech. Layouten nach Herzenslust. Das Content-Design variiert je nach vorhandener Viewportfläche. Sie können die Choreografie testen, indem Sie die Grösse Ihres Browserfensters verändern oder Ihr Smartphone drehen. Die MACPI-Engine überwacht und kontrolliert die gesamte freie Choreografie.
Info: In diesem Anwendungsbeispiel wird das Layout für die normale Anzeige-Breite verwendet.
Beispiel: regelmässige, textbasierte Choreografie
Die gleichmässige Verteilung verleiht den Informationen Ruhe und Seriosität. Die MACPI-Engine kontrolliert die Choreografie. Die Darstellung ist vom Smartphone bis zum übergrossen Desktop optimal und ausgewogen.
Info: In diesem Anwendungsbeispiel wird das Layout für die volle Anzeige-Breite verwendet.
1
Die MACPI-Engine ist einfach zu bedienen, hocheffizient und liefert eine überragende Content-Experience.
2
Die MACPI-Engine ist einfach zu bedienen, hocheffizient und liefert eine überragende Content-Experience.
3
Die MACPI-Engine ist einfach zu bedienen, hocheffizient und liefert eine überragende Content-Experience.
4
Die MACPI-Engine ist einfach zu bedienen, hocheffizient und liefert eine überragende Content-Experience.
5
Die MACPI-Engine ist einfach zu bedienen, hocheffizient und liefert eine überragende Content-Experience.
6
Die MACPI-Engine ist einfach zu bedienen, hocheffizient und liefert eine überragende Content-Experience.
7
Die MACPI-Engine ist einfach zu bedienen, hocheffizient und liefert eine überragende Content-Experience.
8
Die MACPI-Engine ist einfach zu bedienen, hocheffizient und liefert eine überragende Content-Experience.
9
Die MACPI-Engine ist einfach zu bedienen, hocheffizient und liefert eine überragende Content-Experience.
10
Die MACPI-Engine ist einfach zu bedienen, hocheffizient und liefert eine überragende Content-Experience.
11
Die MACPI-Engine ist einfach zu bedienen, hocheffizient und liefert eine überragende Content-Experience.
12
Die MACPI-Engine ist einfach zu bedienen, hocheffizient und liefert eine überragende Content-Experience.
Beispiel: freie, textbasierte Choreografie
Die freie, unregelmässige Verteilung von Informationen wirkt kreativ und spontan. Das Content-Design passt sich der vorhandenen Viewportfläche an. Sie können die Choreografie prüfen, indem Sie die Grösse Ihres Browserfensters verändern oder Ihr mobiles Gerät drehen. Die MACPI-Engine überwacht und kontrolliert die gesamte freie Choreografie.
Info: In diesem Anwendungsbeispiel wird das Layout für die normale Anzeige-Breite verwendet.
1
Die MACPI-Engine ist mit einem frei konfigurierbaren RWD-Autopilot-Modus ausgestattet.
2
Die MACPI-Engine ist mit einem frei konfigurierbaren RWD-Autopilot-Modus ausgestattet.
3
Die MACPI-Engine ist mit einem frei konfigurierbaren RWD-Autopilot-Modus ausgestattet.
4
Die MACPI-Engine ist mit einem frei konfigurierbaren RWD-Autopilot-Modus ausgestattet.
5
Die MACPI-Engine ist mit einem frei konfigurierbaren RWD-Autopilot-Modus ausgestattet.
6
Die MACPI-Engine ist mit einem frei konfigurierbaren RWD-Autopilot-Modus ausgestattet.
7
Die MACPI-Engine ist mit einem frei konfigurierbaren RWD-Autopilot-Modus ausgestattet.
8
Die MACPI-Engine ist mit einem frei konfigurierbaren RWD-Autopilot-Modus ausgestattet.
9
Die MACPI-Engine ist mit einem frei konfigurierbaren RWD-Autopilot-Modus ausgestattet.
10
Die MACPI-Engine ist mit einem frei konfigurierbaren RWD-Autopilot-Modus ausgestattet.
11
Die MACPI-Engine ist mit einem frei konfigurierbaren RWD-Autopilot-Modus ausgestattet.
12
Die MACPI-Engine ist mit einem frei konfigurierbaren RWD-Autopilot-Modus ausgestattet.
Content-Design
Unendliche Möglichkeiten, um Bilder und Texte zu kombinieren
Beispiel: text- und bildbasierte Choreografie
Bei grösseren Viewports werden Text und Bild nebeneinander angezeigt, bei kleineren Viewports ist die Reihenfolge Bild gefolgt von Text.
Info: In diesem Anwendungsbeispiel wird das Layout für die normale Anzeige-Breite verwendet.
Beispiel: text- und bildbasierte Choreografie
Bei grösseren Viewports werden Text und Bild nebeneinander angezeigt, bei kleineren Viewports ist die Reihenfolge Bild gefolgt von Text oder Text gefolgt von Bild.
Info: In diesem Anwendungsbeispiel wird das Layout für die normale Anzeige-Breite verwendet.
Beispiel: text- und bildbasierte Choreografie
Die gestalterischen Möglichkeiten sind immens. Das folgende Beispiel zeigt ein Content-Design, das sich für Webpräsenzen und für Digitale-Anzeigen eignet. Die MACPI-Engine kontrolliert die Choreografie. Die Darstellung ist auf allen Geräten optimal und ausgewogen.
Info: In diesem Anwendungsbeispiel wird das Layout für die normale Anzeige-Breite verwendet.
Mondänes Deauville
Casino · Pferderennen · Genuss · Eleganz
Herzog Charles de Morny, ein Halbbruder von Napoléon Bonaparte, erschuf innerhalb von vier Jahren eine Stadt, die seit 1860 den Namen Deauville trägt. Das Königreich der Eleganz, wie Deauville damals gerne genannt wurde, war im 19. Jahrhundert der Treffpunkt der Schönen und Reichen. Die Eisenbahnstrecke von Paris nach Deauville wurde 1863 in Betrieb genommen. Das Casino und die Pferderennbahn wurden 1864 fertiggestellt. Der grandiose Aufschwung der Stadt lockte auch viele Maler nach Deauville. Darunter Eugène Boudin, Claude Monet und Edgar Degas. Der Strand von Deauville, mit seinen farbigen Sonnenschirmen, gehört zu den schönsten Stränden der Normandie. Und das traditionellste und wahrscheinlich beste Hotel in Deauville heisst «Le Normandy».
Crown-SPA-Weekend
Hotel Le Normandy, 2 Übernachtungen
Angebote Thalasso, SPA, Fitness, Beauty, Meerwasser Schwimmbad, Casino.
Crown-Action-Weekend
Hotel Le Normandy, 2 Übernachtungen
Aktivitäten Golf, Tennis, Schwimmen, Reiten, Segeln, Fliegen, Kart, Fitness, Casino.
Crown
The Crown-Travel-CompanyAuskunft: +41 61 205 8000
Beispiel: text- und bildbasierte Choreografie
Das folgende Beispiel zeigt eine Gruppe von Bildern gefolgt von einer textbasierten Information. Dieses Content-Design ist auch für digitale Werbung hervorragend geeignet. Mit MACPI und SAIP ein leichtes Unterfangen und 100 % responsiv.
Info: In diesem Anwendungsbeispiel wird das Layout für die normale Anzeige-Breite verwendet.
Crown
Unvergessliche Reisen
vertreten auf allen Kontinenten
Entdecken Sie mit Crown-Travel die magischen Orte dieser Welt.
Wir planen Ihre Reisen bis ins kleinste Detail. Der bestmögliche Komfort und Ihre Sicherheit haben immer höchste Priorität.
Geniessen Sie Ihre kostbare Zeit.
The Crown-Travel-Company
Auskunft: +41 61 205 8000
Beispiel: text- und bildbasierte Choreografie
Die kreativen Möglichkeiten Bild- und Textinformationen zu kombinieren sind grenzenlos. Hier ein Beispiel für eine Personal-Übersicht. Die MACPI-Engine kontrolliert die Choreografie. Die Darstellung ist vom Smartphone bis zum übergrossen Desktop optimal und ausgewogen.
Info: In diesem Anwendungsbeispiel wird das Layout für die normale Anzeige-Breite verwendet.
Unser Team
Wir machen Ihr Business fit für die digitale Zukunft
Digitale Formulare
Einfache Bedienung und individuelles Aussehen
Beispiel: responsive Formulare
Mit dem ST20 Modul «Multiform» werden Formulare für die unterschiedlichsten Aufgaben erstellt. Der Funktionsumfang wurde in der Version 20 deutlich erweitert.
Info: Für den individuellen Look werden die Formulare dem Corporate-Design des Webprojektes angeglichen.
Responsive Maps
Die neuste Generation von Google Maps
Beispiel: Responsive Maps
Mit smartTemplate20 steht der volle Funktionsumfang der Google Maps API zur Verfügung. Die Möglichkeiten entsprechen dem Google Software Development Kit.
Die Styles der Karten werden den Farbwelten der Web-Projekte angepasst.
Info: Die Maps werden in diesem Anwendungsbeispiel mit einem Layout für die volle Anzeige-Breite präsentiert.
New York
Info: Dieses Beispiel zeigt den Style Maps-Mountain
Alle ST20-Maps sind 100-prozentig responsiv
Mailand
Info: Dieses Beispiel zeigt den Style Maps-Shades
Alle ST20-Maps sind 100-prozentig responsiv
Barcelona
Info: Dieses Beispiel zeigt den Style Maps-Orange
Alle ST20-Maps sind 100-prozentig responsiv
Wien
Info: Dieses Beispiel zeigt den Style Maps-Midnight
Alle ST20-Maps sind 100-prozentig responsiv
SAIP
Der neue Slot-Adaptive-Image-Processor
Für die beste User-Experience steht für jedes Endgerät das optimale Bild punkto Schärfe und Dateigrösse bereit.
Beispiel: Bildvarianten
Dank künstlicher Intelligenz werden alle benötigten Bildvarianten maschinell erstellt.
| Die smartTempalte20 und SAIP Bild-Prozessor Einstellungen | |
|---|---|
| DPR-Stufen | 1, 2, 3 |
| Bildqualität DPR-Stufe-1 | 80 % |
| Bildqualität DPR-Stufe-2 | 75 % |
| Bildqualität DPR-Stufe-3 | 70 % |
| Übertragungsleistung | schnell |
| Intelligente Bildübertragung | ja |
| RWD-Grid | 2 x 12 |
| Viewport-relevante Grössen | ja |
| Gesichtserkennung | ja |
| Merkmal-Erkennung | nein |
| Zuschnitt erlaubt | nein |
Info: In diesem Anwendungsbeispiel wird das Layout für die normale Anzeige-Breite verwendet.
RWD: Für die responsive Darstellung stehen den oberen 7 Bildern exakt 126 Bildvarianten zur Verfügung. Bildprozessor: mybluesun20 SAIP
SAIP
Slot-Adaptive-Image-Processor
Die von Bluesun entwickelte SAIP-Software, berechnet für jede Situation, das perfekte Bild. Da SAIP die effektiv genutzte Fläche – innerhalb des Viewports – ermitteln kann, wird die Dateigrösse maximal optimiert. Mit «Art Direction» wird der viewport-relevante Bildausschnitt angezeigt. Und für die native Auflösung des Endgerätes, liegt die ideale Bildvariante, für die bestmögliche Bildqualität, bereit. Mit SAIP-Fingerprint, dem neuen digitalen Fingerabdruck, können Sie Ihre Bilder wirksam vor Missbrauch schützen.
smartTemplate25
Ausgefeilte Basis für jedes Webprojekt
HTML5
HTML5 smartTemplate25
produziert Source-Code der 5. Generation
SASS
Präprozessor smartTemplate25
setzt für CSS auf die aktuelle SCSS-Syntax
CSS3
CSS3 smartTemplate25
optimiert und verkleinert alle Design-Styles
B
Bootstrap smartTemplate25
ist mit der 5. Version von Bootstrap kompatibel
spinner
Lazy-Loader smartTemplate25
ladet Bilder, Videos und iFrames nach Bedarf
Scroll on Reveal
Scroll-Reveal smartTemplate20
versteht gezieltes, animiertes Scrollen
Fonts
Fonts smartTemplate25
es stehen mehr als 900 Schrifttypen bereit
Font Awesome
Symbole smartTemplate25
hat die 6. Version von Font Awesome integriert