How the STK, CSS & HTML and Rapid Prototyping accelerate the Design Process
Timo Wirth, aperto Berlin, @Magnolia Conference Basel, 4/9/2012
2
Magnolia STK Super Sonic Templating Kit
! Open the box and you will get amazing possibilities
4
Grids, Page Layouts, Boxes, Carousels, Teasers … A lot of fantastic things to choose from
! But …
6
128 KB Styles.css
50+ HTML templates
9 Layout patterns
7
This possibilities can easily become intimidating, kill creativity or slowdown the design and development process.
! don‘t be scared
The pizza order form will help you
9
and Super Mario too
10
Designing with the Magnolia STK is as easy as creating your own individual pizza.
11
The following guide will help you to create the best pizza ever in the shortest amount of time. It’s optimized for the non-experienced pizza maker.
The dough
Layout
14
Where should the page be positioned?
left centered
15
How wide is the header?
100% fluid windows width Fixed width / max width
16
What about the footer?
Fixed width / max width 100% fluid window width
Navigation
18
Which type of navigation you‘d like to have?
horizontal left sidebar
19
Do you need a second level?
1st level horizontal / 2nd level vertical Both levels horizontal
Basic Grid
21
Our Right Sidebar Models?
22
No sidebar?
23
Or the ones with left hand navigation bar?
Responsive Design
25
Do you prefer a responsive approach?
26
Do you need dedicated iPhone / mobile templates?
27
Let the dough brew. Next, we’ll prepare some toppings while the dough rises.
Pizza Toppings Toppings
29
Choose from the toppings below to create your own flavor combination
30
The Big Ones
31
Go for the Big Show?
32
Big News?
33
Most Popular
34
We‘d like to tease you?
Ich bin die Fusszeile 35
Specialities
36
Something special?
37
Something special?
38
Something special?
39
The STK order form will be part of the next magnolia release.
So much more to choose from … Please choose from more than 20 additional specialities ...
40
Here are the ingredients for our pizza website
centered
3 columns
stage
horizontal navigation
promos
41
Now we have a plan, how our pizza should be layouted and structured. We’ve decided which elements the pizza should consists of and what our favorite toppings are
42
Let’s go deeper Let’s get our hands dirty!
„ … to knead the dough it’s very therapeutic. It’s wicked. I love it. The texture. It’s so smooth and silky.
Jamie Oliver, Naked Chef S1/E2
44
Stop! Before we start. All chefs need some theory. A short introduction to the key STK frontend principles
STK Frontend Principles
46
As we’ve started with Magnolia STK four years ago, we were guided by the following principles.
47
Easy and Complex
01 You can do very complex things with the magnolia STK, but still easy things can be done easily.
48
Be responsive
02 Use the screen well Great designs for big and also for small screens.
49
Robust & Reliable
03 You can trust the STK.
50
Change is good thing
04 Easy to maintain Easy to change Easy to redesign
? How are these principles represented in the frontend code?
52
Media Queries for responsive websites are built in
<link media=“only screen and (min-device-width: 481px)”> <link media=“only screen and (min-width: 1200px”> <link media=“only screen and (min-width: 481px”) and (max-width: 980px)”> <link media=“handheld, only screen and (max-device-width: 480px)”>
53
Every HTML template is self-contained
<div class=“text”> <div id=“breadcrumb”><h5><ul> <div id=“section”><h5><p>
54
Article arcticle.html
55
Every HTML template is self-contained
<div class=“text” role=“article”> <h1> <p id=“intro”> <div id=“toc”>
<h2> <ul>
<div class=“text-section”>
<!-‐-‐ not -‐-‐> <div class=“text”>
<h1> <p id=“intro”> <h2> <ul id=“toc”> <div>
56
Classes and IDs are comprehensible to humans
<!-- not --> <div class=“c3po”>
<!-- better --> <div class=“teaser no-img”> <div class=“links”> <div class=“text-box facts”>
57
Important layout containers are layered and are so independent
-<div id=“wrapper">
+<div id=“branding">
+<div id=“nav-global">
+<div id=“wrapper-2">
+<div id=“site-info">
58
Class and ids follow a logical pattern and they are extandable
<div id=“nav> <div id=“nav-box> <!-- extandable like this --> <div id=“nav-wrapper”> <div id=“nav”> <div id=“nav-box”> <div id=“nav-box-inner”>
59
Classes can be combined for reuse, overwriting or special styling
<div class="teaser”> … <div class="teaser event-list"> <div class="teaser latest"> <div class="teaser latest links no-img">
60
Every teaser is unique. STK counts the teasers for you
<div class="teaser” id=“teaser-1”> <div class="teaser” id=“teaser-2”> or <div class=“box” id=“box-1”> <div class=“box” id=“box-2”>
61
Teasers can be grouped
<div class="teaser-group”> <div class="teaser“> <div class="teaser“>
62
Each teaser group has it’s own teaser count
<div class="teaser-group” id="teaser-group-1” > <div class="teaser“ id=“tg-1-teaser-1“> <div class="teaser“ id=“tg-1-teaser-2“>
! The secret ingredient
64
Body IDs and classes
<body id=“home” class=“col-float3” >
<body id=“section” class=“col-subcol-subcol” >
<body id=“profile” class=“col-float2 >
65
A powerful approach to built grids, and to change grids easily
66
From 3 to 2 columns
3 columns <body class=“col-float3” >
2 columns <body class=“col-float2” >
Just change a number in the body class
• No additional changes in templates or HTML code needed
• the markup in the content area and in teasers stay the same
• No re-editing or copying for editors
67
Let’s do some rapid prototyping now
With all this knowledge
68
STK Rapid Prototyping
01 Copy the Prototype
69
STK Rapid Prototyping
02 Choose welcome-col-float-3.html
70
STK Rapid Prototyping
03 Delete the unnecessary HTML
71
STK Rapid Prototyping
04 Just copy and re-write the css you need. Delete the rest. Start with an empty css file.
Ich bin die Fusszeile 72
... to be continued
Rapid prototyping Tomorrow morning at the Community day. See you J
73
1 The STK gives you general structure and lot of possibilities.
2 Don’t let it limit your thinking.
3 See the structure as relief and you use it as trampoline for your ideas and a starting point for fantastic future-proof frontend design.
To sum up
74 Aperto Präsentations-Vorlage
Pizza tonight!
75 Aperto Präsentations-Vorlage
Any questions?
76
Web: www.aperto.de
http://www.vorsprungdurchwebstandards.de/
Twitter: https://twitter.com/javajim
Mail: [email protected]
Timo Wirth Director Frontend, aperto AG, Berlin