 I don't know what it says about us that they're playing anarchy in the UK It's maybe the hotel bar last night So if we can get our slides up, we're good to go There we go. Look at that. Is everybody awake? after the party Everybody enjoy themselves Great. Well as we were introduced. This is Nicholas Sorry, this is Chris Kind of nudged to introduce me and thanks very much to the Drupal con people for inviting us Particularly Isabel and Annie and also Heather from aquia. We appreciate it and hello to the folks from Northern Ireland Do we have anybody from Belfast here? Awesome two people. Yeah, okay Take over and I'll throw these okay Nobody died, okay if you're enjoying this follow us at Standard East is and if you use the hashtag Drupal con keynote You can ask us questions and also we can answer questions afterwards And we'll also we'll probably be in a bar as well at some point because we are from Belfast We're not actually from Belfast, but we live there. So they forced us to drink and If you're really enjoying this, I was gonna do this one if you're really doing this I'm gonna have to turn around a little bit and read this The hashtag is standard. This does totally awesome Drupal con keynote. I should have practiced that If you use that hashtag there might be a little badge for you later or a wooden business card perhaps Holy Drupal, we hope you all survived your close encounter with Batman last night and aren't feeling too fragile So the standard East's approach we we like to kind of give things out and encourage some audience participation So we have got some badges that we throw at you and Books as well. We don't throw the book because it might injure you When we throw this stuff if it hits you in the eye and takes out your eye That's entirely your fault because you're participating in this game show thing that we're running So what we'll be covering today first of all We're gonna start off by surveying the landscape that we're in that we find ourselves in at the moment And then we're going to reveal and this is the exciting part the secret formula and that's a trademark thing So don't don't take that from us The markup and the sign timelines is the next thing we're going through and then we're closing on a marriage made in heaven It'll become clear as we go along So because we're lecturers So we teach this kind of stuff and we're very focused on standards And we always like to introduce some books that form the backbone of the talk that we do So we would highly recommend these three books which kind of tie together very neatly around what we're talking about today If you haven't read Jeremy Keith's html 5 for web designers, we'd recommend it very highly In fact all of the books that a book apart are publishing are fantastic And if you haven't got ethem or cots responsive design buy it now and Somebody tweet that and say a book apart those guys are promoting your stuff Because then they might give us more free stuff Here's another great book this one is a much weightier tune than the HTML 5 for web designers it's Joseph Miller Brockman's grid systems and We're going to come back to that shortly as well Wait a way to wait a tone. Yeah, I can never say that word a weighty tone and a weighty tomb And finally Koi Vins excellent ordering disorder which really ties those two things together It ties together the markup side of things and then the fundamental design principles grid systems side of things So We're going to talk about designing the sustainable web a lot of what we're talking about today in some respects echoes What Tom Standage was saying yesterday, which is about learning from the past and looking to the past for inspiration as we map our way To the future although we don't go far as back as the Greeks and the Romans So surveying the landscape It's a landscape that's undergoing a very rapid and quite fundamental series of changes and it's changes to affect how we build what we build and how we design we design and One of the big changes over the last sort of couple of years is The proliferation of devices. We're now kind of you know, we're no longer just consuming the interwebs on a computer at our desk and This kind of change is really it's it's something that's kind of And it brings Forward to start really the sort of stuff that we should have been thinking about all along that we should be designing stuff for any Platform for any device when we started back in the day and we're children and there were just Desktops, that's how we designed for the web and it was great because we could just focus on this one thing And then there were also palm vx's did anybody have a palm vx. Oh Yeah, there's somebody there awesome. That's definitely worth it Here there was one over here. I'm gonna throw a badge. Um, but now that landscape has changed. So we have phones We have iPads or tablets Touchpads anybody 89 pounds Get them this weekend and Dickson's we've got desktops We have netbooks and laptops and we also still have those old phones that my wife really likes She still loves that old phone try to persuade her to buy a new one, but she's not into it and when we bring that together That becomes a very difficult landscape for designing to deliver our content to the web and it poses a number of challenges So the context that we're consuming the web is also changing used to be that you could You had kind of a Connection to the internet. It was faster. It was slow, but what We're seeing in the last couple of years is that You're consuming the web Just kind of really anywhere You're no longer just as a desk. You're kind of standing at the bus waiting for a bus and Yeah, one would be waiting for a bus if they were standing waiting for a bus and so we consume the web on desktops and and that That's a type of content that we tend to go deeper into maybe we sit down and read longer But we also consume the web when we're out and about and that that requires us to think about what we deliver to people Because they're in a different context and the kind of stuff that you're delivering to them needs to shift slightly And one of the main things that we need to think about it in that in that regard It's not just kind of screen sizes and so forth, but it's also kind of a bandwidth issue How fast is your connection pure out? Anywhere in Croydon is going to be extraordinarily slow because there's only edge but So it depends on where you are and that's kind of that's that's something that we need to bear in mind in the design of what we do and How and where we consume the web is changing as well as designers and developers we need to evolve to to meet these challenges We time shift content to read it later So we use ins the paper or readability for example Or we present contact content in environments that are less distracting where Advertising has been masked like the safaris reader or for example, and we need to consider these changes in our markup and design So we might start reading something at home on a computer or maybe at work because we can't afford one at home And then we might shift that content to our phone to read later While we're waiting for the bus that Nicholas mentioned that bastard Yeah, that bus and then we might pick it up when we get home on a tablet And then we may even print it out to give to our granny because she doesn't have a just know what a computer is And she doesn't have one So we need to think about how we mark up our content for all of these different devices because that's where it's being consumed So how do we confront this and the challenges that we've seen they're not inconsiderable. So at the core what we need to think about is creating a sustainable web with content and hassle and Jevity and our kind of recipe for how to kind of make that happen is a thoughtful combination of beautifully crafted markup coupled with classic design Principles and that's what we'd like to call Secret formula TM TM. It's been around for some time the secret formula It's available by looking back at our history in much the same way that Tom Standage mentioned yesterday The secret formula isn't about sprinkles although sprinkles used judiciously. It's a really hard word to say judiciously Are part of the equation and Great design is not about sprinkling from the top. It's about building from the bottom up But we believe you can use sprinkles as well. So When we kind of think about the sign all too often we're kind of looking at superficial elements and we're looking at sort of CSS galleries and Seeing that these are the latest kind of trends that we should be Employing the deploying in our designs But usually that they're kind of relied on as a crutch and this sort of the sprinkles become the fundament of what we're doing and what we should be doing is we should be thinking of these sprinkles as kind of icing on the cake and They're not the cake itself and we'll show in a minute how we can we think we can bake a better cake But first we have a look at look at some sprinkles So we take a simple button for example a basic CSS box with some text and try and improve it We might soften it up by adding a little border radius We might add a little noise which gives a sense of the real world And if you haven't read anything by Mike Rundle fliocity go and take a look at fliocity on Twitter He's got a really great post about how we can learn from how light interacts in the real world and we can use that in our design We could add a gradient to give a sense of depth Highlights love highlights There's a little text shadow to make it hard to see on that screen It's okay. I can see it from here. It's good And we might also introduce some kind of transition or something when maybe somebody use a user interacts with that Giving them feedback. So the end result is that you got a button that's got a little bit more depth And it's you know a little bit of a richer experience then The one at the top and is it better designed it's more satisfying to click on and all that kind of stuff Of course it is and the rounded corner and the noise and the gradient and the text shadow and the transitions They kind of add up to that little extra something that kind of shows that you care about your design, but there's fundamental principles that must come before this and This kind of design principle is kind of like That's the sprinkles on top We believe that web design for the web great design for the web goes great a lot deeper It's about building from the ground up baking this cake the right way And then adding that sprinkle stuff that we just ran through at the end And not running through it the other way around so we believe in hierarchy Getting a good information hierarchy Composition thinking about how we lay out a page and how that might change in different contexts Typography where we can use much more in the way of typography now on the web. Thanks to typekit and front deck and services like that semantics stuff that was back in 1990 Device independence thinking about not not designing for one specific context But designing for lots of contexts and then open this designing something that's non-proprietary So here's an example of hierarchy and we can use a number of factors to determine Kind of that the relative hierarchy of the elements on the page size weight and position Will help to establish a visual hierarchy that can inform the design in a really timeless manner So it's kind of it's it's not doesn't have to be kind of rocket science It's really quite simple stuff if you just know the rules and deploy them There's also we're gonna look at shortly you can use color as well in Establishing the hierarchy of the page We can also learn about composition that we can learn from the history of the printed page As we'll show shortly. Yes, the web is different and as we've seen it is very malleable But the best grid systems deal with ratios and systems and those ratios and systems can be applied in a non-fixed environment A solid grounding in grid systems can be learned from the world of print. We believe and applied to the web You only need to look at Mark Bolton for example to see a designer who's really really using grid systems effectively and typography is another kind of real Learn about typography learned of basics and learn kind of well just just read about typography and find out What are the kind of? Classic secrets that have been deployed for you know the last couple of hundred years And there's a lot of stuff that we can just directly take and use on the web And now with this sort of with the services that allow you to use more than the kind of core web funds. There is It's all the more important to Keep the kind of typographic rules in mind when you're putting this stuff on your pages So those are three elements that we believe are fundamentals from the design side of the equation But we also feel there are three elements from the markup side of the equation. There is semantics. Obviously there are semantics Would it be there are semantics? I think so possibly there are semantics HTML 5 offers us a number of new semantic elements that we can add further Meaning to our markup and by adding that new meaning we can ensure our content is better read by both humans and machines The device independence we've touched on this before With mobile devices being kind of so wildly used We have started to realize that we really need to consider the device independence But it was in fact a founding principle of The web it was when it was first created To be able to run your pages on any platform any device was kind of one of the real founding principles And we're kind of coming back remembering that that was that was always the case And we're also really lucky working in this environment. I'm sure everybody here learned to do what they do by using view source We're in an open context when we design using HTML and CSS And with that enables us to learn from others and to share and for us all to build collectively Yes No, this is new in fact all of this is old In the science terms the principles are fundamental principles going right back to sort of the days of Gutenberg and beyond or It's beyond when it's in the past the opposite of beyond. I think you're saying he was called beyond Gutenberg Like beyond born the tennis player His name is not beyond his name is Björn. Oh, sorry. He's Swedish. Yeah, so in markup passion markup terms the principles all date back from But 1990 when mr. Burners Lee invented the WWW so we're not going to take a look at the history that we can draw on to make our lives as designers and developers a little bit easier So we'd like to present to you the iceberg metaphor. This is also TM as well Don't be stealing that one. That's worth money So all too often we're obsessed with what's either above the water or below the water However, we need to be obsessed with both to create great designs that last it's not just about markup It's about design as well and as true craftspeople for the web We need to care about what's above the water and what's below the water Markup and the sign have evolved and they continue to evolve and by looking and learning from the past We can pave the ways to the future now We've taken liberties with gravity here on this next slide and we also have a transition that we apologize for in advance So our iceberg is not the classic 10% above the water and 90% below the water. It's it's a 50-50 type of iceberg and So we're going to look at this in two halves We're going to look first at the under the water bit and then we'll look at the above the water bit We're gonna sorry. We're starting with the markup timeline and We're gonna try to bear in mind the three core themes from a previous slide semantics device independence and openness so the markup layer is the bottom half of our 50-50 iceberg and Let's trademark that as well 5050 iceberg 5050 iceberg.org Okay, it's human nature to see everything we do as being in the here and now But markup has in fact evolved over time Though it has developed it has a fundamental level remained the same So let's rewind 21 years 13th of November 1990 It's a date and let's take a look at the very first web page and we'll see that in essence nothing has fundamentally changed over the last 21 years and What we're looking at here is It's the very first web page It might not look like much but this simple page Fundamentally changed everything. It was the realization of almost half a century's thought in 1945 So this is a bit like Tom's standards because we've got 1945 and Vannevar Bush proposed memex a proto hypertext memory index in 1965 Ted Nelson coined the word hypertext however It wasn't until 1990 that Tim Berners-Lee came along and realized these visions and made this real And it completely changed everybody in this room's lives and also everybody around the world So Here we go that looking at this markup You can see that it's pretty much It's very much like the markup we see today. There's some Body and head elements missing There's some unquoted age ref But it looks pretty much looks looks like HTML 5 it doesn't look completely different is the point And if we fast forward just 24 days, and it's a staggering amount of progress in 24 days The web page we saw on the previous side had been expanded out to encompass a whole bunch more semantic meaning Many of the elements that we know and love today were created back then that's 21 years ago And a lot of that hasn't changed This markup still works even better. It's semantic. It's device independent and it's open It works on different operating systems different platforms different hardware different software And that was the purpose of the web to connect people So this is one of the fundamental principles of the web and we think that's a big deal so we're into competition time and because I'm from North Belfast I'm gonna throw these Into the audience be able to reach kind of the far end of the auditorium. I'm sure Know your chrome. Can I get like a couple with her? Okay? You can get a couple. It's fine. You you get two and I get three, okay? Okay, so this is know your chrome So what we want you to do is we want you to shout out what browser we're looking at Here this web page in so what's this? From that's like a hundred people. I'm just gonna throw it out randomly. Yeah, it's right in Of course, this is chrome this Sorry, we gave that one really to you earlier Okay, did you throw a badge for that one? I didn't These gentlemen down here. I'm sorry this one Firefox that there was definitely somebody kind of there. Yeah. Oh That's accuracy wasn't it? So Firefox this one. It's a big clue in that tab really isn't there Anybody say opera? It's kind of better branding subtle branding going on there Finally this one Awesome. Yes Fantastic, it's like a lot of people over there getting badges start throwing them in that direction through the book that way That is linked here. We know and love so by its very nature The web was cross browser and it was also responsive So if we scale a page down it was responsive design and we're talking a lot about responsive design now Probably because of people like ethan marquardt, but we've we've actually been able to do responsive design for a while So we're fast-forwarding to the year 2000 and We had Tim Berners-Lee in 1990 and we're gonna take mr. Selman to represent kind of what was happening around ten years later about 2000 Selman as you as you all know started a web standards project and He kind of realigned things and it was taking things back to where they were always kind of meant to be moving away from proprietary markup towards Non-proprietary open standards So he led the web standards project between 1999 and 2002 and I think this is our is this our book competition I think we have a book prize coming up anybody who can name the person who Was leading the web standards project right before mr. Selman 1998 I don't think anyone's gonna know that off the top of their head, but they all have computers come on It's gonna be like who? No, no No Fred John Fred Jimmy you said George. You said George. It's actually George Olson 1998 come on get the book round of applause And we signed it as well, so it's gonna be worth money That was basically cheating though because you just ran through a whole bunch of names. It's the best way So mr. Selman got us back on track because of things like this Remember, isn't it great? We love animated gifts This is basically the web as it was in the late 90s If you remember what it looked like and what it felt like it felt like this Dancing baby I think if I did a bit of that I might lose a bit of weight Yeah, you're wearing the same underwear as well We kind of have got a little bit distracted because what happened was that browser maker started to kind of make more and more features available and it was a kind of a rapidly evolving landscape and We kind of forgot about using the markup the way it was intended and Tables were starting to be used for layout purposes, which was never kind of intended everything just kind of became a little bit hacky and What Selden was trying to do and kind of the cohort Was to bring things back towards the semantics Sorry, we'll move the baby people are like having Epileptic fits and stuff like that. Sorry about this. Sorry. I apologize to any epileptics in the audience So what the was promoted which mr. Selden as we said before led was a return to markup as it was always intended Goodbye markup abuse. Hello again semantics using elements for what they were intended and the web standards project evolved a lobby for HTML4 XML one CSS one and two And officially recognized DOM and non proprietary JavaScript But what was really important about this time as well was that people started together it come together as a team And try and help each other out. So we have sites like blue robot so the community was starting to kind of pull together and kind of Basically create resources for each other so that we could all start making kind of our own personal blogs or sites using this new fangle technology CSS for presentation HTML for for content and There was kind of a real sort of Growth of these kind of like small ish sites using this kind of this new better way of doing things But it was still kind of it was just a sort of you know Web designers doing it kind of to show their friends how cool they were. It's a little bit like HTML5 really in October 2002 however a real tipping point when under Douglas Bowman wired redesigned using CSS and XHTML1 and if a high-traffic website like wired could do it then what was stopping the rest of us from adopting this new standards-based approach and Gonna read out a little bit of a longish quote here from Douglas Bowman because it's kind of interesting to hear How this resonates today well while you read that quote I'm just gonna go and drink some water we drink cool go for it by converting to the hybrid markup language XHTML and Adopting cascading style sheets wired news is now faster to load and can be read by practically every version of every web browser It can be displayed on a wider range of browser platforms Including mobile phones PDAs and televisions, so it's basically exactly what we were talking about with advice independence openness all that kind of stuff so it's kind of It's just been evolving from 1990-2000 until today When Dave Shea launched the CSS engarden in 2003 he then started to show all of us the possibilities of what could be done When we truly separated content and presentation and what was interesting I think before we click the next slide because they fade through about this time was the number of people who all were Contributing to something and there was a sense of community. So we have Dave Shea designing something We have Andy Clark John Tan Dan Rubin and Douglas Bowman who we showed you the Word site earlier. This is just a handful of examples of designers and developers who are kind of trying to move the web forward and Gonna move fast forward fast forward another 10 years 11 years even CSS based layouts and the separation of content and style and behavior is accepted practice. That's what we do now and it's a natural thing and the initiative instigated by Wasp and others have kind of essentially one and structure presentation and behavior Is now kind of that's that's our focus. That's how we do things and We all know we're all ruled over by the overlord. Mr. Chairman Hickson Mr. Chairman. Mr. Chairman Hickson. Yeah, Mr. Chairman Hickson. If you draw a line from 1990 to today, however There is a clear evolution what HTML5 does is evolve our markup layer and enhance it for the future It offers a richer semantic vocabulary including new elements which allow us as designers and developers to leverage our content in much more exciting ways and the W3C also has kind of identified HTML5 as the one true path Moving forward and even more excitingly. There's a fancy logo But it's not just a fancy new superhero badge HTML5 Offers us new holy HTML5 logo new semantics amongst other aspects which allow us to create Device independent open markup that lasts It's about semantics We we talk a lot about this when we when we're teaching that HTML is a design element You know, we're doing some design when we've done that phase We're not doing design once we've done once we do get into the CSS side of things We are but HTML is also a big part of that as well And we need to read everything first and look for meaning and we can use HTML5's new semantic elements to add More meaning to the markup that we create So we have a bunch of these new elements which allow us to do exciting things and make markup that works better for both humans and machines And going back to the quote, which I'm sure you remember because it was only like a couple of minutes ago the thing that Douglas Bowman was saying in 2000 about Faster to load being read by practically every version of every web browser displayed on a wide range devices and also kind of you know, it's been able to Not just kind of humans, but also computers will have a better understanding of the markup that we're producing so It's been an evolution if we return to this timeline and we look at the start and the finish We'll see that markup is evolving and this is on a continuum and we can learn from points on that continuum So if we take two points on the continuum That's the web page 24 days after mr. Burners Lee sir Tim Berners Lee, I think Lord Berners Lee King Berners Lee maybe invented the interwebs And this was responsive design and then if we look fast forward to 2001 and Simon Collison's Recently relaunched personal site, which we show later. This is also responsive design. So actually Though a lot has changed a lot has remained the same and we can learn by looking back to to the past so going to move over to the design timeline and The three themes that we're bearing in mind now is hierarchy composition and typography And I think we've got a 5050 iceberg coming up as well. So we do let's look at the design layer and Again, we take a timeline here and we look to the past and see how things have evolved and changed If we go back to 1928 Designer Jan Schischkold an undisputed master of typography Published a book called died no typography. Sorry to the Germans and the audience because that probably sounds really really bad His work emphasized a clean and systematic approach to design And his emphasis on systems and how we build systems for content can still inform what we do today so the design Which is really kind of off the time. It's bold and it's beautiful minimal design really striking and it exists kind of outside of time and It really isn't sort of about the kind of 1% noise trends. It's about long longevity and Looking at this you can't really sort of place it in 1920 940 1970 and his Style which is a really rigorous systematic approach has proven hugely influential for designers for almost a century and We can still learn from looking at the principles behind this and I think also reducing the palette as well actually because the next slide has two colors But this really only has one because the yellow is a ground and you know This is really powerful time Standing the test of time design just black red and some judicious use of composition And this has a sense of timelessness and also that guy has a really great moustache as well So we had to put that slide in Cuz look he also has a great moustache Oh, please remove the video. Oh, can you guys do that? Can we get the video off because somebody wants to take a photograph and get the whole moustache with the moustache? Yeah, look at that Can you get a badge thrown all the way up there and so if we take a look at this we're looking at things like the golden section and Fundamental composition principles limited palettes simple clean topography and these designs exist outside of time or if we look at this a for Letterhead and these instructions that Chisholm has drawn up for how to lay that out Yeah, it doesn't look dissimilar to a web page And we can learn from the systems and the rational approach So it's really worth emphasizing there is the rational systems that are kind of the underlying core of the design And even if we're not kind of doing a visual design of a page Thinking about those systems. It's really kind of a good lesson to learn in anything that we do So if we fast-forward 30 years We reach the emergence of the Swiss international style and a huge figure in that is Joseph Muller-Brockman Pioneer of his craft. He was born in 1914 and studied architecture design and History of art, which I think is really interesting mix And even after his death in 1996 his legacy still lives on and influences people today And what we can learn from this is systems systems systems this is emphasizing the underlying grids and it's a really well-chosen palette of color and Type and it's minimal, but really quite rich at the same time And if we look at like a collage of posters together, these all have a timeless quality And they might have been made 50 years ago, but they still feel fresh and new today And we can learn a lot from looking at this hierarchy composition and typography being this sort of underlying core Essence does anybody have this book? Yeah, oh no more you can just your personal I'm gonna have to take my personal badge off and give it to you Okay, so It's required reading. It's a really good book and it's Really systems focused and it offers an insight into the signs of grid systems And it's something that we can just take and learn from and apply straight to the web It's about I think 40 quid, but it is a book that you just keep coming back to it's just full of so much really good advice And he really is a master of the grid system and we can learn from this as we see in the next set of slides And apply this type of thinking the systematic approach to the web. So if we fast forward 58 to 2011 that's what it's a bunch of years 50 years many years Cove in whose book we showed in the in the first few slides He in many many ways ties together an understanding of both markup and design and especially grid systems and together with Mark Bolton is another kind of real Strong kind of grid systems kind of designer to make a compelling case for the kind of rediscovery of grids And how they might be applied to the web If we look at the New York Times website, which was redesigned by Corvin in 2006 And he is also at Payne's distress that this was not his redesign He led the team and it was actually a group of people who put this together It is underlined underlying this is a solid grid system and this is five years old And it still looks fresh and contemporary today But but it also is a high traffic site with a lot of content going through it and content that you can't always predict because it's the news so there's a this is Corvin's personal site and It's got a timeless quality it's kind of moving beyond the sort of Redesign the portfolio site every year mentality and sort of just going for what is kind of trendy and popular at the moment and Goes back to something which is much more fundamental And it also, you know, he's not afraid to show you the grid that it is based upon Just black and white and then just an accent color of orange for for when you interact with certain Parts the best thing about Corvin though. I think is that he built a website for his dog. I Think that's nice so the book ordering disorder is well worth getting and it's kind of a Primer on how grid systems can be built and Be built into the design process when we're designing for the web. It's a very good book Yeah, get it. We're not getting paid by any of these people or anything like that Sounds like we're a bit advertising. Maybe we should we should have like an advertising. We walk on with boards and stuff Yeah New revenue stream. Yeah, so we come back to the timeline again and we look at 1950 and 2011 and 1950 we have a piece of work by Joseph Miller Brockman and in 2011 we have a detail of a blog post on the typekit blog by Frank Camero on hierarchy in web typography and if we look at these This piece from 1950 by Joseph Miller Brockman There's a clear hierarchy in terms of the type and the information hierarchy in terms of how that's marked up And we can almost look at that and see markup there behind the scenes And then if we fast forward 61 years, we have Frank Camero on the typekit blog It's interesting to think about this is a lot of people kind of go wow my god Frank Camero This is just awesome, and it's kind of old a lot of it's really old So we could kind of go back and look to the past and we could learn a lot ourselves If we look at those two side by side, we see that they're they're not really that different Yeah, so let's try to put these two halves of the equation together and By marrying fundamental web standards with timeless design principles We can create beautifully designed user experiences that embrace the full range of emerging technologies at our disposal Yeah, but you didn't say ebony and ivory. I did not say ebony and ivory. It's like ebony and ivory Working together in perfect harmony Yeah, key-by-key why don't we I don't know the rest So if we go back to the the the 5050 iceberg again, and we start to look at these two things put together Which is a solid fundamental layer of good good quality considered beautifully crafted markup And then a design layer that considers typography hierarchy composition of the fundamental things that we've just run through We can see examples of sites that put these things together that have a timeless quality and They're beautifully designed so we're looking at hierarchy composition Typography semantics thinking about device independence thinking about the context in which people will be seeing things and Starting to realize that they won't be seeing them in the same context all the time and that sometimes the same person might be Looking at the same piece of context Content in a variety of contexts in 1990 what we didn't have was the presentation layer the html was kind of just there at all and But you still had pages that worked everywhere and they were kind of With independent device independent and so forth and what we've been able to do in the last kind of 20 years is approaching A vision of how the web was meant to be But it's now looking great as well. It's kind of a good thing and one last one on that list is openness as well So if we take a look at mark bolton's site for five simple steps We can see some of the things that we talked about earlier on We have a solid information hierarchy in terms of the way this information is presented And then there's there's there's even a system in terms of how those book covers are designed So every cover gets its own color and is always in a different typeface And it's always set at the same point in terms of composition except for andy clark Who wants his own cover? I feel pain about that nicolas less. So We were going to do a wraparound that was just purple with type and then distribute it free on the web But we didn't really want to piss off andy too much So It's another andy we can't piss off Yeah, well, let's not I'll just stop right there. Kyle mayer has done some excellent work for this year's build conference and It's a really great web conference in belfast. You should all go to it. It's sold out, but maybe next year Uh, and it combines some restrained color palette with bold elegance Typography and has got that sort of timeless quality. It's really kind of using very simple subtle methods kind of convey the hierarchy of information and I think I think another thing to point out about this and we don't actually have this as a slide But it's probably worth talking about just for a second. Um, is that Designing within a within tight restraints like this doesn't mean to say we can't have fun We can't make things enjoyable and pleasurable. Has anybody seen this site? like hands One person the front the front page. Have you seen the front page with the videos? It's really really nicely done where where what they did was they asked the speakers to Shoot videos of themselves and then they presented them in black and white using html files video element And they have them all there So they look like these static pictures of josh brewer, but they're in fact People just kind of sort of doing this and you were asked to because we were speaking at this you were asked just to kind of stand That's him standing still We couldn't do it. I was going Like that that was not having a heart attack that was laughing Um, but it's it's a really nice idea because it works within the context of a very simple rational clean design But it's quite playful and it's quite exciting Uh, this is a good site great resource for inspiration. I'll one and and it's Antonio Carisone. Thank you. I think Is how you and it's that's who it is. I'm just not sure how you pronounce that So apologies to anyone who's Spanish or something or Portuguese. Sorry. We got that wrong possibly Um, and if you click on this little green thing in the top corner, this dashboard slides out Which is really beautiful and there's a lovely user experiences that kind of slides in and again We see evidence of a solid underlying grid system a restrained use of color And a strong hierarchy in terms of the type and the information and how things are marked up And because this is a kind of a this is a blog about design It's really interesting to see the really kind of strong ties with the work from the 1970s featured on this page Uh, and the design of the site itself and you can sort of see how the parallels are Really clearly there and it's all about hierarchy and it's all about Typography and it's about kind of restraint as well. It's a great blog. I'll one.com. I think Um And he also I don't know when this guy does any work actually because he's just doing this all the time. I think He also set up a website called the grid system, which is fantastic and it gathers together resources about grid systems Books you should read web articles things like that And you can toggle the grid on and off and what's really nice about this is it's not just the vertical grid that's been considered But it's also the horizontal baseline grid as well uh, ia information architects, uh, which is a Bunch of guys from japan Or is it just one guy? I'm never quite sure but uh, mr. Richenstein apologies to the swiss people Um is from switzerland, and then the rest of them are from japan. Oh, yes, that's just to the japanese people We haven't done any japanese names But this is a really beautiful site. It's built on a solid Lair of html 5 markup And using all of the new elements at our disposal and it's also Responsive so that as you view it in different types of devices it changes And the content reformats itself to present itself to a way that is more amenable to the context in which you're looking at it So as we said under the hood the markup is really well crafted as well and Semantic using all the kind of new html 5 Elements at our disposal. So it doesn't just look right nice on the surface But don't you just wet your pants a little when you see beautifully crafted markup like that you kind of go off, you know So maybe we do this too much. Maybe maybe we just wet our pants too much um That's why i'm wearing those pants that the baby was wearing. It's a nappy actually. Yes. I'm not wearing a nappy Oversharing no me asking some recently, uh, tom standards talked about that yesterday. It didn't be over sharing uh She recently launched, uh Her portfolio sites responsive built in html 5 and the example here is just showing how you can use kind of An asset that you have on the page and display it in kind of various ways depending on The device width and so forth. So those are actually the same images just kind of like Removed and scaled for Something like an iphone Whatever or a droid or or a droid or a zoom if you have a soon with web access I don't know if yeah If we take a look at simon collison's recently redesigned personal site as well And it combines responsive markup with timeless design principles And it has a functional long last last thing sustainable type of web presence And I think what's interesting about this is that you can look at the muller brockman And the yan shish cold and the koi vin and think that they don't get out much And go partying because they only look at sans serif typefaces And look at line heights and things like that And you can see that and think do we need to be constrained by this very modernist very kind of a post-war type of design style and you don't you know This has got a very kind of victorian type of flavor to it So we can still use grid systems in an intelligent way But in a design style it is slightly different and again, this is responsive. So if we look at this perhaps on a tablet It it reconfigures itself and then if we look at it on a Phone of some device some device description some description. That was the word I was looking for Again so Functional and a real functional site, but also a site with longevity Here's another example Cognition which is happy cogs blogs. We're back to Mr. Selman Again, or as we like to call him we jimmy's elders. That's another name for him. Yes We got responsive design here and it's also kind of an example of Showing the type of content that you need to show For the specific for the specific device if you're kind of looking at it on your phone Maybe that illustration of the graveyard Just becomes unnecessary. So just Don't show it And also a beautifully designed piece a piece of work as well with a very restrained color palette again You know and showing what you can do and also beautiful web typography and all of the things that we've been talking about So What did we cover? We started by surveying the landscape and looking at how the landscape that we design for now as as web designers and web developers Has changed considerably When we started doing this as a job It was it was perhaps easier But the pace of change moves on and we need to consider things like the range of devices that a user might be accessing our content on knowing especially that the mobile web is growing considerably And considering how we deliver content that's appropriate to those kinds of scenarios And we need to think about the scenarios in which people consume content I don't know if anybody knows kenneth bowls He's the guy with a really unpronounceable first name spelled c e n n y d d or something Is this good because now I can apologize anybody from wales and he did a great talk for us in belfast for our students Where he talked about uh desktop static type content where he called desktop static content Which is where you maybe sit down and spend a lot of time reading something So you want something that's in depth and other types of content which are more mobile Where you're standing in that bus queue waiting for the bus and you maybe want less of the content Because you just want to kind of quickly flick through things and thinking about ways in which you might show Or hide certain things or change the the the way that the amount of content that people consume And then we looked at the the ways in which We can move from the desktop through to say the phone through to say the tablet through to say the paper for our granny So the secret formula, I hope you all wrote it down and It's okay. You can you can share it with people We're not gonna see you even though we have a t.m. There The secret formula being Classic design principles and the fundamental founding principles of the web is keeping those in mind and making sure that we are designing Pages that are that are Your loss for words pages that Stand the test of time that aren't just in the now, but also have a real kind of Underlying adherence to the core principles of the web So we looked at things like hierarchy composition typography semantics device independence Openness and if we make a mix of all of those things and we look back to the past and and really look back at our history And look at what we can learn from that and transport into the into the 2011 into the 2011 We can bring a lot to our design and make it more sustainable that lasts forward into 2022 Um, and hopefully beyond as well So the markup and the sign timelines show this in practice and Amount into what we'd like to call a marriage made in heaven. And I think that's probably the right time to Pull up our slide that says Any questions? I think we're gonna have Somebody coming out on stage Enter left so there we go. Look at that and thank you as well for listening. Thank you. Thank you Okay, um, there've been a few, uh tweeted questions And I just want to start with one is typography related Um, a lot of people have been asking for some practical Sort of ways of applying some of the stuff you've been talking about And so particularly when it comes to typography I was sort of thinking, you know Other ways that we can actually apply these principles like, you know a mix of Serif fonts and non-serif fonts between headings and body text Minimum steps in sizes between headings and body Weights that kind of stuff. Yeah, I'll take that one. Um, I think you could take a look at tim brown I don't know if anybody knows tim brown. He's the type, uh manager for typekit And not just he before he Took that roll on he was doing nice web type com And very in the very much in the brick spirit of the openness thing Designing beautifully crafted pages using rich web typography and then explaining how on earth you had done that And they're very he's taken that passion which he had in his personal blog Through to typekit where they're really heavily involved in getting designers out there to and developers as well Obviously to to look at some of the technical issues and to look at some of the design issues And they have written fantastic posts on things like type pairing Or which typeface goes with another typeface and general principles for that And tim also spoke at build conference last year About a typographic hierarchy tool. He's been building which is based on the golden ratio Um, and he has a website I can't remember off the top of my head, but if you send us a tweet, which is why that slide is better If you send us a tweet, we'll dig it out and we'll send you a link. It's it's well worth reading Thank you, um, can you just just mention his name once more for everyone tim brown I don't need to apologize because that's an english name and it's really easy to say Okay, um, also someone asked what was the grid book that you suggested? Uh, joseph muller brockman. It's cool. It's just called grid systems And then raster system In german, sorry german people Great, thank you And it's really I think my I bought I bought mine for about 60 quid or something And I kind of felt real pain when I gave that credit card over In tape modern and it's now only about 40 quid and it's it's just you know, it's worth its weight in gold Um What are your feelings on the move away from kind of stricter markup requirements from stuff like strict html? Versus, you know html 5 could this actually cause less adherence To the standards bearing in mind html 5 is known to be a bit looser and more relaxed I think that It's a it's a very interesting Question it's something that we kind of been Rappeling with When we teach our kind of First and second year students who are all aspiring web designers When you had the kind of the strictness of xhtml You could just say no you're doing that wrong. You need to do it this way with html 5 It's okay to do it this way, but it's also okay to do it a little bit looser and so forth When you're an established Designer developer Uh, and you have kind of started writing your stuff in xhtml Then the natural progress is to keep on writing it that way And you just change the dock type and you kind of add the extra semantic elements and That's kind of the natural way to go But when you start out and when you haven't actually done any markup before it becomes a little trickier personally, I Like the sort of the kind of the strictness of the xhtml and I would kind of I would say to Any of the sort of students I would say that if you do it this way Then it's much easier to figure out if something is going wrong if you kind of if you neglect to close your Tags and all that kind of stuff even though it's possible and even if it's valid It's not good practice. I would say that it's It's a little bit more of an open landscape and you have more options But what you decide to do at the end of the day It should be an informed choice and I think We're kind of also as a community reaching a maturity where we're Where we kind of can be informed enough to make that choice And so personally I would say, you know, I like the strictness and I'm going to continue writing markup that way And I would kind of I would give that advice to people as well I think in the next edition of the book that we wrote, which was really written for our students To try and give them a solid set of guidelines to follow and they've asked us to write another edition in using html 5 and some css 3 And I think we would stick with the strictness because it's easier to teach I mean, I have a son who's 13 who just finished not just easier to teach but it's easier to write Yeah, it's easier to order a son who's 13 and he's just finished the book over the summer because he thinks he's going to get paid Loads of money as a web designer. I don't know where he got that idea from And you know, it's easier to sit down and say well, there's where there's where that's gone wrong And when you start to move towards looseness, it becomes harder to to define that Um, yeah, I completely agree actually, um when it comes to sort of new devices Um, and there are new input mechanisms And also you've been talking about grids now grids obviously were Who started in order to fit a space that has physical bounds now the screen doesn't really do that Um, you know, you can use sliding mechanisms and you know stylices and all sorts of stuff And it doesn't really matter where you are on the screen and I'm just interested, you know, how do you Apply grids to a space that actually has unlimited borders in reality I think you can still apply grids and have certain break points Which you change your design to something that's more suited to the device that you're delivering it to That doesn't mean that once you say go from here down to here You just abandon grids all together, you know, you think of a grid system that's appropriate to that particular device And then you make another break point perhaps for much smaller mobile devices And again, you think of a grid system for that. I mean that might be a one column grid But the heart is is understanding how that information is working as you know in terms of contextually together The other thing is that your your measures that does not necessarily have to be kind of, you know Millimeters or pixel based they can be kind of percentages or, you know m units they can be Sort of There's a there's a kind of a scale and a relative kind of size Of the elements on the page so the grid could still be that it doesn't have to be a fixed grid So you can still apply the same principles, but but you start in a fluid or in a responsive layout So, okay, that's all. Thank you very much. Thank you very much Thank you as well And talk to us over a beer afterwards. Okay. Thank you. Thanks. Thanks guys