Content is king! But the breadth of content is unknown at the beginning of a design phase. Getting this wrong will serious affect project length and effectiveness of the end result. The design a BaseKit team build templates that need to work with various amounts of content and have discovered many techniques to deal with the unknown. The talk will discuss techniques on - Shining light on the darkness. Revealing the unknown and turning them into content. - The design process how we go from an idea to HTML to user consumption. - How to build scalable websites / apps for unknown amounts and types of content.

1. DESIGNING
for the
UNKNOWN
RICHARD HEALY, BASEKIT
@RICHARDHEALY

2. PART ONE
BASEKIT
/01 /50

3. /02
1.5 MILLION BASEKIT WEBSITES CREATED
5 YEARS
FOUNDED 2009
40,000 BK WEBSITES
CREATED EVERY MONTH
OVER 100 PARTNERS
IN OVER 40 COUNTRIES
/50

4. /03
V6
FREEFORM DRAG & DROP
A VISUAL EDITOR
APP DRIVEN DESIGN
CONTENT, POSITIONING & STYLING
DATA DRIVEN
V7
UNDERPINNING OF HTML / CSS
BUSINESS FOCUSED
INTRODUCED THE ZONE
/50

5. /04
THE V7 PRODUCT
/50

6. /05 /50

7. /06
571 WEBSITES
CREATED EVERY MINUTE
AVERAGE 3 PAGES
74,000,000 PAGES OF CONTENT EVERY MONTH
4 MILLION IMAGES
UPLOADED TO BASEKIT
IMAGES UPLOADED WORLDWIDE 880 BILLION
/50

8. PART TWO
HOW DOES THIS HELP?
/07 /50

9. DESIGNER
hey, send over that content and i’ll start the design!
hi! just start designing then i’ll add in the content
CLIENT
content first!
design please!
/08 /50

10. /09
YOU DON’T NEED THE
CONTENT BEFORE
DESIGNING
/50

11. /10
AMAZING DESIGN
SMALL AMOUNTS OF CONTENT THAT WILL GROW
BETTER CONNECTIVITY
BETWEEN YOUR DESIGN AND THE CLIENT
EASY TO MAINTAIN
CLIENTS CAN MANAGE THEIR CONTENT
EVERYONE IS HAPPY!
DITCH THE STATIC DESIGN PATTERNS
/50

12. /11
WHAT I’M ABOUT TO SHOW
HEALY.ROCKS
/50

13. /12
THE STARTING POINT
/50

14. /13
MINIMAL CONTENT
/50

15. /14
THE FLOATING FOOTER
HEALY.ROCKS
healy.rocks/footer1
/50

16. /15
DESIGNER IDEALS vs REALITY
HEALY.ROCKS
FLEXBOX display: flex;
/50

17. /16
.container {
display: flex;
}
/50

18. http://caniuse.com/#feat=flexbox
/17 /50

19. /18
THE POWER OF FLEXBOX
HEALY.ROCKS
hohmoeme about aubsout upsortfolioportfcoolinotact contact
/50

20. /19
THE POWER OF FLEXBOX
HEALY.ROCKS
display: flex;
align-items: center;
justify-content: center;
/50

21. /20
THE POWER OF FLEXBOX
HEALY.ROCKS
http://healy.rocks/columns5
/50

22. /21
10% IMA20G% ES 70%
/50

23. /22
THE POWER OF FLEXBOX
HEALY.ROCKS
/50

24. /23
THE POWER OF FLEXBOX
HEALY.ROCKS
/50

25. /24
THE POWER OF FLEXBOX
HEALY.ROCKS
/50

26. /25
THE POWER OF FLEXBOX
HEALY.ROCKS
/50

27. /26
HEADERS
/50

28. /27
ABOUT HEADERS
HEALY.ROCKS
AWESOME COMPANY NAME
home about us portfolio contact
home
/51

29. /28
ABOUT HEADERS
HEALY.ROCKS
home about contact
AWESOME COMPANY NAME home
services portfolio
/50

30. /29
ABOUT HEADERS
www.healy.rocks
AWESOME COMPANY NAME
home about us portfolio contact
/50

31. /30
NAVIGATION
HEALY.ROCKS
/50

32. /31
LOGOS
/50

33. /32
ABOUT LOGOS
HEALY.ROCKS
616 X 324
/50

34. /33
ABOUT LOGOS
HEALY.ROCKS
AWESOME
COMPANY
NAME
616 X 324
/50

35. /34
ABOUT LOGOS
HEALY.ROCKS
AWESOME COMPANY
616 X 324
/50

36. /35
BEST LAYOUT FOR UNKNOWN CONTENT
HEALY.ROCKS
AWESOME COMPANY
home about us portfolio more ▾
/50

37. /36
NAVIGATION USING FLEX BOX
HEALY.ROCKS
AWESOME COMPANY home about us portfolio
min-width:460px;
/50

38. /37
NAVIGATION USING FLEX BOX
HEALY.ROCKS
SUPER AWESOME COMPANY home about us portfolio
/50

39. /38
NAVIGATION USING FLEX BOX
HEALY.ROCKS
SUPER AWESOME COMPANY
home about us portfolio services contact
/50

40. /39
NAVIGATION USING FLEX BOX
HEALY.ROCKS
SUPER AWESOME COMPANY
home about us portfolio services contact
/50

41. /40
NAVIGATION USING FLEX BOX
HEALY.ROCKS
AWESOME COMPANY home about us portfolio
/50

42. /41
NAVIGATION USING FLEX BOX
HEALY.ROCKS
AWESOME COMPANY home about us portfolio
/50

43. /42
ELEMENT QUERY
/50

44. /43
TYSON MATANICH
SMASHING MAGAZINE
http://www.smashingmagazine.com/2013/06/25/media-queries-are-not-the-answer-element-query-polyfill/
/50

45. .companyname[min-width~="769px"][max-width~="960px"] {
text-align:center;
}
/44
/50

46. /45
DEMO
/50

47. /46
CONCLUSION
/50

48. /47
1. THINK MINIMAL
/50

49. /48
2. THINK FORWARD
/50

50. /49
3. THINKING BEYOND
/50

51. THANKS!
RICHARD HEALY, BASEKIT
@RICHARDHEALY
@BASEKITDEVS
/FIN

52. ACCREDITATION
SOURCES
In July 2013, it was estimated that 571 new websites are created every minute. (source: http://goo.gl/7AWpDd)
!
267 babies born a minute (http://goo.gl/qJPfDB)
!
880 Billion photos taken in 2014 (source: http://goo.gl/Be94LV)
!
Roughly, 1.8 billion are uploaded and shared via social media every day (source: http://goo.gl/LMg0u5)
!
Flexbox usage as of Oct, 2014 (source: http://caniuse.com/#feat=flexbox)
!
Images from thinkstock.co.uk
!
Special thanks to http://twitter.com/roryvaux for amazing slide design!
/SOURCES