-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
462 lines (438 loc) · 24.5 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
<!DOCTYPE HTML>
<html lang="en" class="no-js uc">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>NABU websites</title>
<meta name="description" content="We build websites." />
<meta name="keywords" content="Nabu Websites, Nabu, websites, web development, web design" />
<meta name="developer" content="Jan Werkhoven" />
<meta name="contact" content="[email protected]" />
<link rel="shortcut icon" href="favicon.ico">
<link rel="stylesheet" type="text/css" href="css/nabu.normalize.css" />
<link rel="stylesheet" type="text/css" href="css/nabu.style.css" />
<script src="js/jquery-2.0.3.min.js"></script>
<script src="js/jquery.easing.1.3.min.js"></script>
<script src="js/nabu.init.js"></script>
<!-- <script src="js/modernizr.custom.js"></script> -->
<!-- IF IE8 or lower, jquery will not run, show message to upgrade browser -->
</head>
<body>
<div id="viewport">
<nav>
<div id="prev">
<div class="arrow"></div>
</div>
<div id="next">
<div class="arrow"></div>
</div>
<div class="test logo"></div>
<div class="test">
<ul>
<li>prev</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>next</li>
</ul>
</div>
</nav>
<div id="stage">
<div id="wall-left" class="node"></div>
<div id="logo" class="node">
<img class="logo" src="img/nabu-websites.jpg" width="518" height="193" alt="Nabu Websites logo" />
</div>
<div id="rhino" class="node">
<img class="rhino" src="img/nabu-rhino-left.jpg" width="887" height="590" alt="Nabu rhino">
<img class="eye" src="img/nabu-rhino-eye-left.gif" width="42" height="22" alt="blinking Nabu rhino eye">
<h2>
<span class="fs35">AND ABOVE ALL ...</span>
<span class="fs90">RHINOS</span>
</h2>
<p>We just love rhinos. It's how they strive forward with great momentum and direction, yet calm and controlled. Moreover, they live in symbiosis with oxpecker birds riding their backs. A gentle giant</p>
</div>
<div id="guns" class="node">
<h1>WE BUILD WEBSITES</h1>
<h2 class="guns-1">
<span class="fs35">WITH BOTH</span>
<span class="fs75">ROCK</span>
<span class="fs75">SOLID</span>
<span class="fs75">CODE</span>
</h2>
<p class="guns-2">
<span class="w120 bold">rock solid</span>
<span class="w120 italic">adjective</span>
<span class="w120">1. unlikely to change, fail, or collapse.</span>
</p>
<h2 class="guns-3">
<span class="fs35">&</span>
<span class="fs75">ECLECTIC</span>
<span class="fs75">VISUAL</span>
<span class="fs75">DESIGN</span>
</h2>
<p class="guns-4">
<span class="w140 bold">eclectic</span>
<span class="w140 italic">adjective</span>
<span class="w140">1. deriving ideas, style, or taste from a broad and diverse range of sources.</span>
</p>
<img src="img/guns.jpg" width="718" height="819" alt="Nabu guns" />
</div>
<div id="black" class="node">
<h1>WE BELIEVE IN</h1>
<div class="arrow"></div>
<div class="article-container">
<article>
<h2>
<span class="fs90">MOBILE</span>
<span class="fs40">RESPONSIVENESS</span>
</h2>
<div class="content">
<p>In 2013 between 10% and 20% of our websites where visited using smart phones and tablets. More than ever it has become important to make websites mobile responsive. That means that the website will morph according to the size of your screen. On mobile phones you will see the mobile-friendly touch-enabled version of your website and on computers the normal version.</p>
<div class="next"></div>
<div class="prev"></div>
</div>
</article>
<article>
<h2>
<span class="fs90">NEVER USE</span>
<span class="fs40">WHITE TEXT ON BLACK</span>
</h2>
<div class="content">
<p>There are many ridiculous design rules out there. Do let them inspire you, they always have a core of truth, but please make up your own mind. Be bold enough to do things your way. Don't ever limit your creative thinking with rules. Anything goes. Just like in fashion, it doesn't really matter what you wear, it's how you pull it off.</p>
<div class="next"></div>
<div class="prev"></div>
</div>
</article>
<article class="stage-1">
<h2>
<span class="fs90">ITERATE</span>
<span class="fs40">TO GREATNESS</span>
</h2>
<div class="content">
<p>The conventional corporate way of building websites is to first plan perfectly, get approval, design, build, test and only go live when everything is perfect. This takes ages, is very expensive and integrates no user feedback. Instead we work with light-weight AGILE methodogies. There is no need for planning, we simply start on it today. We will strip down your website to the minimum viable product and push that version live as soon as we can. Only then we focus on improving the website. Iteration after iteration we will add more content, add features, make the website mobile responsive, optimize for Google, and so on. Working AGILE feels natural. It's light, fast, fun, cheap, helps you focus on the core features and allows you to get live feedback from users how to improve in the next iterations.</p>
<div class="next"></div>
<div class="prev"></div>
</div>
</article>
<article class="stage-2">
<h2>
<span class="fs90">USER</span>
<span class="fs40">STORIES</span>
</h2>
<div class="content">
<p>Websites are built for users. We leave out our egos. We focus on understanding WHO will visit our website, WHAT they want to do and WHY. These are called "user stories" and your website will have multiple. Some users will be new to the website and need to be introduced and to sign up, returning visitors simply want to log in and go straight to what they where looking for.</p>
<p>Every single pixel of your website should contribute to one of your user stories. If a part doesn't, chances are you can leave it out of the website and nobody will miss it. Optimize your navigation, the structure, reduce text by 50% and then again, add colour coding, choose the right words, improve the flow, leave out the unnecessary.</p>
<div class="next"></div>
<div class="prev"></div>
</div>
</article>
<article class="stage-3">
<h2>
<span class="fs90">BE LOUDER</span>
<span class="fs40">THAN WORDS</span>
</h2>
<div class="content">
<p>Use the nonverbals: images, fonts, colours, symbols, spacing, sizes, contrast, controversy, interaction and animations. These are the body language of your websites. Words can only say so much. The are like the tone of your voice, the clothes you wear, your posture, all contributing to the message you are trying to share.</p>
<div class="next"></div>
<div class="prev"></div>
</div>
</article>
<article class="stage-4">
<h2>
<span class="fs40">YOU HAVE ONLY</span>
<span class="fs90">7 SECONDS</span>
</h2>
<div class="content">
<p>Nobody really reads websites, we scan them for big headlines, images and clickable elements. We demand instant information, instant interaction. Especially the homepage of a website should instantly establish who this website is of, what they do and most importantly what they can do for the visitor. If one doesn't find what they want in 7 seconds, you lose a visitor.</p>
<div class="next"></div>
<div class="prev"></div>
</div>
</article>
<article class="stage-5">
<h2>
<span class="fs40">THE WAY OF</span>
<span class="fs90">NABU</span>
</h2>
<div class="content">
<p>Nabu is the Babylonian god of scribes and the patron of writing and wisdom. He is often depicted holding a stylus, one of the first tools for writing. Wisdom is ment to be eternalised and passed on through writing, often using mythological stories. We no longer use a stylus to write, nor do we use a pen. Today we code. Stories are told through code, through websites! If any, Nabu is no less than the patron of us coders. How awesome is that?! Today we have our own myths and today information flows freely using ever evolving technologies. What better way to honour Nabu ...</p>
<div class="next"></div>
<div class="prev"></div>
</div>
</article>
<article class="stage-6">
<h2>
<span class="fs90">DARE</span>
<span class="fs40">DREAM</span>
</h2>
<div class="content">
<p>Average has never conquered anyone's heart, nor has a critic ever been raised a statue. Stand up for what you believe, be bold, share your story, dare dream out loud, dare choose a side, dare do it your way, dare kick in some doors, don't be afraid to pick a fight. When you do, you'll find that others who agree with you will rally to your side and that you too can leave a dent on the universe.</p>
<div class="next"></div>
<div class="prev"></div>
</div>
</article>
</div>
<div class="bg-center"></div>
<div class="bg-left"></div>
<div class="bg-right"></div>
</div>
<div id="projects" class="node stacked">
<h1>OUR PROJECTS</h1>
<div class="arrow"></div>
<article class="brenndel">
<div class="image"></div>
<div class="text">
<h3>
<a href="http://brenndel.com" title="Brenndel Crystal - crystal glass experts" target="_blank">BRENNDEL.COM</a>
</h3>
<h2>
<span class="fs90">CRYSTAL</span>
<span class="fs50">MOBILE RESPONSIVE</span>
<span class="fs50">AJAX-FRIENDLY SEO</span>
<span class="fs50">LUXURIOUS LOGO</span>
</h2>
<p>Built for two gentlemen starting up a business specializing in tailored high-grade crystal glass. The crystal foundry they represent has over 130 years of valued artisanal experience.</p>
<p>The website features a luxurious look and feel to match the exclusivity of the crystal, a custom-made logo, CSS3 animations and a mobile responsive grid. The later makes sure the website will adapt and fit on any screen size, wheter it is your phone, tablet or laptop. The content is loaded with Google's SEO-friendly AJAX techniques to avoid page loads, to allow smooth page transition and still rank good on Google. Launched in 2014.</p>
<ul>
<li>
<a href="http://brenndel.com" title="Brenndel Crystal - crystal glass experts" target="_blank">See the website</a>
</li>
<li>
<a href="https://www.dropbox.com/sh/wfou2v1hsoxipsf/NiBFTMISR4#/" title="Brenndel logo evolution" target="_blank" rel="nofollow">See how the logo evolved</a>
</li>
</ul>
<div class="arrow"></div>
</div>
</article>
<article class="interflux">
<div class="image"></div>
<div class="text">
<h3>
<a href="http://interflux.com" title="Interflux Electronics - soldering fluxes for electronics" target="_blank">INTERFLUX.COM</a>
</h3>
<h2>
<span class="fs90">SOLDERING FLUX</span>
<span class="fs50">16.000 VISITORS/YEAR</span>
<span class="fs50">10 TRANSLATIONS</span>
<span class="fs50">UX FOR TABLETS</span>
<span class="fs50">DRUPAL</span>
</h2>
<p>
Built for a multinational company which specializes in soldering chemistry for electronics. This is the most complex NABU website. It gets about 16.000 visits per year, it hosts about 200 PDFs, 50 products, 40 contacts, is managed by multiple people and translated in 10 languages. All of this is powered Drupal. This website replaces the dinosaur website that no longer belonged in the age of mobile. It was time for a new elan, a new style and a revival. Interflux launched the idea that the new website should have as many languages as languages their customers speak. That is 27 languages! So far we have 10. This is to reach out to more people, because English speakers are still rare in many countries.</p>
<p>A funny problem is that Inteflux has seriously unsexy products. That is why the new website is intentionally more vivid, bright and modern to make the products look a bit more sexy. The website also fits perfectly on tablets and is optimized for touch. Interflux decided to replace all paper catalogues with tablets with our website on it. Unlike paper, the website is alwyas up-to-date, is multilingual, eco-friendly, cheaper and doesn't require reprinting every few months. Customers are stunned to simply get a tablet instead of a catalogue :)</p>
<ul>
<li>
<a href="http://interflux.com" title="Interflux Electronics - soldering fluxes for electronics" target="_blank">Go to interflux.com</a>
</li>
</ul>
<div class="arrow"></div>
</div>
</article>
<article class="mountain">
<div class="image"></div>
<div class="text">
<h3>
<a href="http://mountain-and-expedition-medicine.be" title="Mountain and Expedition Doctor Wim Hullaert" target="_blank">MOUNTAIN-AND-EXPEDITION-MEDICINE.BE</a>
</h3>
<h2>
<span class="fs90">ADVENTUROUS</span>
<span class="fs50">EXPEDITION DOCTOR</span>
</h2>
<p>Built for an adventurous doctor who wants to change his carreer from general practice medicine to expedition medicine. That means he will be preparing and joining expedition teams to venture through the arctics, desserts, jungles and mountains. This website will help him kick-start that idea and to get international exposure. Launched in 2012.</p>
<ul>
<li>
<a href="http://mountain-and-expedition-medicine.be" title="Mountain and Expedition Doctor Wim Hullaert" target="_blank">Go to websites</a>
</li>
</ul>
<div class="arrow"></div>
</div>
</article>
<article class="nabu">
<div class="image"></div>
<div class="text">
<h3>
<a href="http://nabu.io" title="NABU websites - web development and design" target="_blank">NABU.IO (this website)</a>
</h3>
<h2>
<span class="fs90">NABU WEBSITES</span>
<span class="fs50">PUSHING BOUNDRIES</span>
<span class="fs50">OUT OF THE BOX</span>
</h2>
<p>How can we tell people that we build great websites if we don't have the badest website of them all? That is why we have applied everything we have ever learned to this website. This website features: iconic custom fonts, CSS3 animations, strong bold graphic design, elegant object-oriented jQuery code, HTML5 semantics, sprited images, progressive JPGs, AJAX-friendly SEO, UX-wise big headlines, UX-optimized navigation, a smart preloader, exotic domain names (.io is <a href="https://goo.gl/maps/1rfBz" target="_blank" rel="nofollow">this island</a>), mythological brand name, a mascot rhino that blinks, authenticity, originality and nothing but love for websites. In the spirit of Nabu, this website pushes all boundries and wanders outside the boxes we ought to obey.</p>
<ul>
<li>
<a href="http://nabu.io" title="NABU websites - web development and design" target="_blank">See our business cards</a>
</li>
</ul>
<div class="arrow"></div>
</div>
</article>
<article class="amemiya small">
<div class="image"></div>
<div class="text">
<h3>
<a href="http://amemiya-daiku.jp" title="Amemiya Daiku - traditional Japanese carpentry" target="_blank">AMEMIYA-DAIKU.JP</a>
</h3>
<h2>
<span class="fs90">JAPANESE DAIKU</span>
<span class="fs50">MINIMALISTIC DESIGN</span>
<span class="fs50">MULTILINGUAL SEO</span>
</h2>
<p>Built for a Japanese daiku (carpenter) specialising in traditional Japanese carpentery using nothing but hand tools. This website was a "modern" gift from his Belgian apprentice to his otherwise "traditional" master.</p>
<p>The website is built entirely in PHP and features both English and Japanese. The website is also optimized to rank in Google with both Japanese and English keywords. It attracts visitors internationally from Japan, USA, Canada, France, Germany, Australia, Belgium and more. The design is distincly minimalistic and the logo is inspired by the charismatic smile of the daiku.</p>
<ul>
<li>
<a href="http://amemiya-daiku.jp" title="Amemiya Daiku - traditional Japanese carpentry" target="_blank">Go to the website</a>
</li>
</ul>
<div class="arrow"></div>
</div>
</article>
<article class="aquapur small">
<div class="image"></div>
<div class="text">
<h3>
<a href="http://aqua-pur.be" title="Aquapur - purified drinking water" target="_blank">AQUA-PUR.BE</a>
</h3>
<h2>
<span class="fs90">PURE WATER</span>
<span class="fs50">SUBMERGE AS YOU GO DOWN</span>
<span class="fs50">LOGO, CARDS & WEBSITE</span>
</h2>
<p>Built for a start-up in water purification. This website was necessary for the first intakes with potential customers and partners. Today people will Google you and if you do not exist, you simply do not exist to them. The website features a vertical one-page layout, with a custom logo, a smooth interface and elegant design.</p>
<ul>
<li>
<a href="http://aqua-pur.be" title="Aquapur - purified drinking water" target="_blank">See the website</a>
</li>
<li>
<a href="http://aqua-pur.be" title="Aquapur - purified drinking water" target="_blank">See the business cards</a>
</li>
</ul>
<div class="arrow"></div>
</div>
</article>
<article class="studelco small">
<div class="image"></div>
<div class="text">
<h3>
<a href="http://studelco.be" title="Studelco - student rooms in Belgium" target="_blank">STUDELCO.BE</a>
</h3>
<h2>
<span class="fs65">STUDENT ROOMS</span>
</h2>
<p>Built for a student accomodation complex in Belgium. This website has increased the online visibility for the rentmasters, helping them to consistently keep all the rooms occupied. Launched in 2012.</p>
<ul>
<li>
<a href="http://studelco.be" title="Studelco - student rooms in Belgium" target="_blank">Go to website</a>
</li>
</ul>
<div class="arrow"></div>
</div>
</article>
<article class="montage small">
<div class="image"></div>
<div class="text">
<h3>
<a href="http://familiemontage.nl" title="Familiemontage.nl - family movie editor" target="_blank">FAMILIEMONTAGE.NL</a>
</h3>
<h2>
<span class="fs90">FAMILY MOVIES</span>
<span class="fs50">TALENTED MOVIE EDITOR</span>
</h2>
<p>Built for a quirky, yet charming Dutch movie editor who specialises in making family movies. He will grab your old tapes and files and put together touching montages that you can gift to your family.</p>
<ul>
<li>
<a href="http://familiemontage.nl" title="Familiemontage.nl - family movie editor" target="_blank">Go to website</a>
</li>
</ul>
<div class="arrow"></div>
</div>
</article>
<article class="poelstra tiny">
<div class="image"></div>
<div class="text">
<h3>
<a href="http://huisartspoelstra.nl" title="Doctor Frank Poelstra" target="_blank">HUISARTSPOELSTRA.NL</a>
</h3>
<h2>
<span class="fs70">DOCTOR</span>
</h2>
<p>Built for a charismatic doctor in the Netherlands. This website receives about 5500 visits per year and scores great in Google. Designed to match the look and feel of his practice. We designed the logo. Content manageable with Joomla CMS. Launced in 2012.</p>
<ul>
<li>
<a href="http://huisartspoelstra.nl" title="Doctor Frank Poelstra" target="_blank">Go to website</a>
</li>
</ul>
<div class="arrow"></div>
</div>
</article>
<article class="lochristi tiny">
<div class="image"></div>
<div class="text">
<h3>
<a href="http://praktijkcentrumlochristi.be" title="Medical Centre Lochristi" target="_blank">PRAKTIJKCENTRUMLOCHRISTI.BE</a>
</h3>
<h2>
<span class="fs70">MEDICAL PRACTICE</span>
</h2>
<p>Our first website, built for a medical practice in Belgium, back in 2010. Built on Joomla CMS, meaning the medics can login the website and change the content themselves.</p>
<ul>
<li>
<a href="http://praktijkcentrumlochristi.be" title="Medical Centre Lochristi" target="_blank">Go to website</a>
</li>
</ul>
<div class="arrow"></div>
</div>
</article>
<article class="medisites tiny">
<div class="image"></div>
<div class="text">
<h3>
<a href="http://medisites.be" title="Medisites - medical websites" target="_blank">MEDISITES.BE</a>
</h3>
<h2>
<span class="fs70">BEFORE NABU ...</span>
</h2>
<p>Medisites is the predecessor of NABU websites. Medisites specialised in websites for medical practices. As Medisites grew in exposure and experience, we soon started to attract also non-medical projects and thus a new name was needed, hence NABU websites. Launched in 2010.</p>
<ul>
<li>
<a href="http://medisites.be" title="Medisites - medical websites" target="_blank">Go to website</a>
</li>
</ul>
<div class="arrow"></div>
</div>
</article>
<article class="p10 tiny"></article>
<article class="p11 tiny"></article>
<article class="p12 tiny"></article>
<article class="p13 tiny"></article>
<article class="p15 tiny"></article>
<article class="p16 tiny"></article>
<article class="p18 tiny"></article>
<!--
http://tandartsbolwijn.nl/
http://krisdeckers.be/
http://tandarts-bakker.nl/
http://tandartskuijstermans.nl/
http://tandartssiertsema.nl/
http://chrissleewaegen.be/
http://buitenmaghetstiller.be/
-->
</div>
<div id="coffee" class="node">
<h1>SO LET'S HAVE COFFEE</h1>
<h2 class="text">
<span class="fs80 right">[email protected]</span>
<span class="fs45 right">+61 424 787 652 | AUSTRALIA</span>
</h2>
<div class="arrow"></div>
<img src="img/coffee.jpg" width="960" height="602" class="sketches" alt="Nabu coffee mugs and website sketches" />
</div>
<div id="wall-right" class="node"></div>
</div>
</div>
</body>
</html>