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: timo.wirth@aperto.de

Timo Wirth Director Frontend, aperto AG, Berlin