Building springsummer.dk

The Hi, and thank you for having us. I don't think it's not our usual space to be in. We are in Odense. We are maybe more often invited to more design-oriented things, but we're super happy to be here today. And we have two people here, abroad Nils. He's a creative technologist, lead developer, and was very much in charge of developing what you're going to see, which is our own site. It's also a little bit uncommon for us to talk about our own website. We usually talk about client work. But that's going to be exciting, and so we've packed a little goody bag for you all. But also, we want to frame a little bit about who we are. But it's all about building our own site, and maybe some small other anecdotes mixed in. But to frame up a little bit about who we are, we're 15 people, and we are based in Copenhagen. We have two floors there in a nice little, or actually one of the biggest courtyards in Copenhagen, our Nørrebro. Where we sit amongst a lot of people. We host a lot of fast food things and other good people. And we really enjoy being there. It's like very much the center of Copenhagen for us anyway. It's not what is called the city center, but just outside. We are a mix of Danish people and people that kind of moved to Denmark to work at Spring Summer. Which also means that we speak English in the daily life. Even though it might not sound like it, we do. And we have some really good people among us that we're happy that we gathered. I guess it's the same for all. And we are lucky in the way that we get to work with things that we really enjoy doing. And that's both because I think we just do what we like to do. But also because we in some way have positioned ourselves in a way that the client comes to us with work that we enjoy doing. And we work within like this realm which we call like that we help strong brands become even stronger. We help them grow their businesses. And we do it through what we call branded services, digital storytelling, engaging content platforms. And then we work with e-commerce and what we call rich shopping experiences because we often get invited to this if they need like a... A little bit of a more heavy branding layer to what they want. I brought really quickly some of our other work just to give a small like introduction to some of that. And it's quite recent all of it. This is what goes in under the like umbrella called digital storytelling. We did this last year for Podio. It was a project called Beagle which was a proposal tool. And we made the landing page for that that tells the story about this product. It was one page thing all about telling the story in exactly the right way. It was the first time we actually did a project in-house with full development as well. Because before that we actually didn't have any developers at all. So that also makes it a little new for us to stand on a stage like this. But we were actually lucky enough to win site of the year at the end of the year. And we won awards for the development part for this site. Actually the year before that we helped Uniqlo which is a very big Japanese clothing brand build something that goes under the umbrella branded services. We made a recipe app for them. And this app is something that kind of made us a little bit more well-known internationally. It's something that Apple today, even today like three years after it launched, still use on their website to sell their iPads. And it was chosen as one of the best iPad apps in the food category in 2013. And then into the storytelling part again we helped Bang & Olufsen. They do this site recently where we sell a collaboration headphone piece that's between Rafa, a cycling brand, and Bang & Olufsen going together to make this thing. And it's all about like how sounds and cycling come together. And it's something that we won a big award for as well. But recently we actually launched this site for a Danish ship owners organization. A very dry thing. A dry organization you could say. Even though the water makes it a little bit more moist. And we are quite happy with the result of this. This is more of an informational website where we really use the front end to tell the stories in an engaging way. Also something Nils has been in charge of. It's a way where we use these effects to tie the story together and make something heavy a little bit more light and fluffy. You should check it out. It's called navigatingresponsibly.dk. Yes. And to move into the Umbrago realm we also worked a lot with Carlsberg and their platform called Pegasus which we know was introduced here a couple of years ago and really came to life last year I guess. Where they launched. We have over 100 sites on this platform. And we helped them do Carlsberg.com and Tubor.com and Somersby.com and Grimbergen and some other platforms as well. But all the biggest brands there. And it's been really fun to work on this kind of platform thought where we know that there's some given things. The platform itself. We have a lot of content going in. It's all about giving possibilities to the content managers. The managers out in the entire world. And of course it's all about also making sure that Carlsberg they use less money on development and more on the content itself which is what the user would be there for. And it also made it possible to do more rich experiences for these brands. That was the cases. Now back to the things we are here to talk about today. This is a bold statement. And it's probably not at all true. But sometimes it can feel like it's not. It's the hardest thing in the world to make your own agency website or your own anything. Because you're your own hardest critic. And you will work on this until every stone has been turned. And it can be very hard to say stop. Let's go. Push the button. Let's get it out in the world. But actually we want to present this in actually the way that we worked. So going through the entire process. It might seem like an opposite process or a process turned upside down. But we'll get back to that. Actually we want to show the end result first in a case video. And I hope the sound. Do you have the sound from there? Good. We strive to deliver groundbreaking digital experiences. It keeps us young, strong and always in season. We started out two people. Now we're closer to 20. That kind of advancement called for a matching website. Something that could grow taller and wider with us. Welcome to the new spring summer. Content for each case is custom made. But built from a fixed toolbox of components that are both systematic and versatile. Imagery. Interaction. Graphics. Videos. Animations. Sound bites or whatever else you could think of is presented in our new fully customizable grid. And of course we made sure there were no dead ends. We created an elegant animation system in order to make navigation work seamless. We gave the cornerstone of the website, the sidebar, an important function. Serving as a guide to each page. Changing as you scroll. Clarifying what you're looking at. The sidebar got a little dab of color too. So it matches each project or page you navigate to. We have settled in quite nicely in our new digital home. And it seems like the internet feels pretty good about it too. So this is a case video and we do this to send into award shows. You can't have too much Yandelove mixed into this. So this has like all the bragging elements that you would normally not do too much in Denmark I guess. But you have to do that when you send it to other countries. But I think it gives quite a good idea of what we intend to do with the site. I think one of the things that needs to be said here as well. Is this is kind of a growing process for us. We as an agency wanted to appear more adult, more modern. It had to look like we had been some years in the market. Which we have. And we came from something that was not telling a lot of story about who we were ourselves. So that was a very big task for us. And it all came with a process behind it. And just to give you a brief introduction to the process, the last thing we did was to think about the CMS. So we actually built the entire thing with full front end and everything before even choosing the CMS system. Even though we already pretty much knew what we would choose. But we'll get back to that. A little bit of process of how to end up with a design like this. And just showing some of the things that we work with. This was one where we always had a problem. already thought a little bit about introducing the sidebar but in another way use maybe less grid based content or something that broke the grid a little bit more we had this where it was more like use the mouse as something that would interact a little bit more with the content and make it more random and on the like premises of the user itself like and the design for this was a little bit like this maybe we have a lot of people working on some designs come from some people and others from others and then we kind of boil it down to one thing in the end another test we had this like slanted line at our old website and it could have been that we should have kept that but another agency in Denmark suddenly took it as well but now we did something else this is something that gets very close to what we actually end up with you can actually see a hint of the sidebar out here the modular thinking of the content maybe a little bit more clean different typography but then we kind of cracked the knot a day in July last year where we actually worked on a design that was very close to what we ended up with and it came kind of out of nowhere so this is how it looked at that point and it's quite close to what we ended with we have the sidebar full effects we even have the idea of a four column grid where you can push things in and make it do that from whatever back end we would choose make sure that we can have like full backgrounds make it seem seamless like melt together with the graphics around it use the grid a little bit more actively break the grid with items that stick out and lay on top and so forth big colors big colors make it come alive and feel nice and alive and one thing we talked about from the beginning was that we didn't want any dead ends so when we get to the bottom of a page we really wanted to lead the user on in this case it's just like we just have a previous next button but it became more than that it kind of became like the way that we tie the UX together and also visualize where you are in the website even though it's not like spelled out just a visual it's like a test of how things could appear and that next button how we like envisioned that could be you go into something and it opens up and becomes the site and even whatever page you go to can also influence the look a lot so you almost feel like you are on the destination itself of that case here but structure and the grid and telling you a little bit about how it's like put together the possibilities behind the site the hero is actually the one that sticks out a little bit because that takes full what is called the visual area the viewport and everything else you define yourself in aspect ratio and below this we have a two column grid we have different heights but that might as well have been a four column grid or it could be two one and two or it could even be something that we offset even more than this each of them can have text elements and they can have like a headline, a body copy have a button even more background video background image background color everything can be controlled in the end result by umbraco they can be two columns one column, full bleed so forth you can pretty much think up everything within the four column grid center, height, width add button, whatever we also added these elements that's good to show cases in so just like standard like a browser, ipad iphone, they're more generic than that, you can see they're not branded so it could be android as well and we even like added this and this is something we haven't activated too much yet but we can also attach elements to grid items but put them on top so they don't feel like they fit in the boxes or they break the grid in some way and that is something that would definitely be able to like make new page types for our site, just from the CMS and something that we haven't even thought up yet and they can move in different speeds so we get like nice parallax effects or it can do a lot of things, we can also have parallax elements within a single item so it feels like it's even more deep and that's something we played a little bit with on the other side already and these parallax things can be in several layers so we get like full depth when you scroll and yeah, so it's like again, making sure that we have all the possibilities we could ever think up of needing, and on top of that, the navigation again, this is like next and previous clicking next, take full over scroll down, if you go back you remove that layer so you see the layer you came from still is behind, that way like showing the UX you could say if it's two elements on the same layer they get pushed in so they kind of push each other out so we show the hierarchy in that way, it's very subtle but I guess for us it makes sense anyway and I think it feels really nice when you navigate it you do that on the Moa phone as well, and then we have the sidebar out here it can expand can you even see that it actually has something that looks like the main links and it can collapse and you can see the vertical line there is the label that we put to each section when you scroll down the page yeah, and then I will introduce Nils so I'm going to talk a little bit about how we built the page and how we implemented it on Bracca but first I'm going to talk about the approach we have at SpringSol when we work with making websites how does this one work yeah so when we build websites we put a lot of effort into making the site look appealing we put a lot of effort into making it look nice and making the end result towards the user very good so we hope the user will do like this and to help us do this we have a workflow where we often try to start programming at the same time as we start designing and by doing this we are able to take the learnings from the code and bring it into the design and the other way around but to be able to do this we have to be open for changes in our code and that requires something sometimes an example could be that it's very nice to add motions for example page transitions when we navigate the site and to find the best solution we often have to train the HTML several times so in this situation it's very good to be open for change and that leads me over to how we work at SpringSol we don't have a fancy tech setup we are just free developers with our iMac some has a laptop and we use an open source editor called Atom and we use a node.js task manager called Gulp and to write our javascript we use something called TypeScript and I hope you already know it but I'm just going to say a few words about it with TypeScript we are able to, ok I have to say that it's compiling into javascript so it's not being used on the website we write TypeScript and then it gets compiled into javascript like any other javascript but the great thing about TypeScript is that we are able to define the types that we want to have, for example here in a function we wish to have a string but we are also able to write interfaces that an object should follow we have a uniform way of writing classes and we have a great way of extending classes and this makes us able to keep a good structure separate the responsibilities and of course being open for changes and so when we build websites we like to deliver the data separately as a json file and this is very nice for us because then we can keep the data separated from the visual representation of the website one of the reasons to do this is to avoid iterating through the DOM to initialize javascript components and another reason is that we want to keep the HTML clean so we don't we will avoid having nodes and attributes that is only there for serving some data to the javascript so when we use json we have some javascript that loads the json file and then it initializes the javascript components and then it's up for the javascript components to generate the HTML that it needs to represent its content yeah so as I said before we get a clean HTML it only contains the necessary and in the end this improves the runtime performance so another situation where this is very nice is when we want to do page transitions or similar things because we are able to load the assets for the page before even touching the DOM so we can load a page we can load the assets for it and build up the page before we actually put it into the DOM so the structure of Spring Summer DK so as Pelle talked about we have this modular grid where a page doesn't have a specific type a page just consists of some components and we are able to put in the components to make the composition that we want so it's obvious when programming the site that we want to write a component for each different grid type so in TypeScript we write a class for each different type and the class will have the responsibility to processing its JSON data load its assets and generate the HTML that it's going to show on the page as well I personally would like to have a base class so we did that and the base class is taking care of the general needs for a grid item for example sizing, colors, etc and then each specific type would extend the base type and this of course makes it open for changes so if we want to change something for all grid items we just have to change it in one place so when structuring the data we so we build a global JSON file which contains some global attributes and a list of pages that are on the website and the list of pages contains some basic information about the page but as well also the URL for the page specific JSON so let's look a little bit at that if we look at the structure of the page we have this sidebar in the side all the time and we have a label of where you are at on the page and for us to be able to say where you are on the page we have to group the contents of the page so the root of the page JSON is a list of groups that yeah that is showing so each group then has the grid items that it's going to contain each grid item that is needed for it and including that is the basic information like sizing, colors and so on but some grid items have even more complex data in this example a gallery kind of thing that needed to have several images so in, I'm just going to go back so all in all we have the groups with items inside and yeah the items can then have even further data inside of it so making the integration we didn't settle or we didn't knew which CMS we were going to use at the start we had a good eye for Umbraco we heard great things about it we worked with it on the Pegasus platforms but we didn't use it so we didn't know really what we were going into yeah so one of the reasons to choose Umbraco as a service is because we wanted to start being able to build basic websites on our own we wanted to have a CMS system that gives us CDN and we like to have image scaling and we also want someone to take care of caching basically we don't want to take care of the CMS we just want something that works Umbraco as well comes with two environments which is very great so we can do development and design of the live environment and it can also synchronize without trouble which is great if it works so the nesting we had all this data the pages with groups with items so how are we going to solve this in Umbraco so in Umbraco you can nest nodes over in the sidebar and we quite fast figured out that this could easily be very messy if we had the pages with the groups with the items and so on so we needed to find another way so we learned about this component by Lee Keller called nested content which kind of solved our problem with this component we are able to put a list of nodes inside the page which is very great but putting all the groups with all the items and so on inside the page would also visually be very complex and probably be too hard to work around with so we did a mix of both, we took the groups and put them as nodes within the page in the sidebar and then we put the grid items for each group on a list within the group yeah and here is a short example of some of the different types that you can choose this is a very nice menu oh yeah so putting the groups together with the pages in the sidebar menu maybe would be a little bit confusing for some content managers because you would probably expect there only to be pages but my experience is that after you have given a short introduction to people then they get this concept so it's not really a problem I think so we had to do some duct types in Ombrago and as we do with the components in JavaScript I wanted a base duct type and then each specific grid item would have a duct type extending this one the base duct type would of course take care of sizing and colors and so on so at one point we had to connect the backend with the frontend and do this by writing templates we had to write a global JSON template and a page JSON template and I still wanted it to be separated like we have done with everything else each component had to have its own template so one thing that we could use is the partial views and it works kind of like child templates you can include them in a template so that's very nice but you couldn't inherit partial views which probably makes good sense but I really wanted a base view for all the grid items so the way we solved this was to just create a base template partial view and then include this one in the top of each specific view so that was the solution we also needed to connect these partial views with the template and I didn't want to have a long switch case I don't know how you guys do this normally but I wanted it to be more easy to add new ones so we basically used the doctype alias as the file name for the partial view so showing a little bit of code it looks like this so when we are printing out the items that are contained in a group we basically just use the content type alias as the file should include yeah oh yeah then at one point we had to go live everything worked perfectly and umbraco has this synchronization between dev environments and live environments which works except if you use a third party plugin that doesn't necessary work so we had some troubles but the umbraco as a service team were there to help us figure out where the problem was and of course it was the nested content from likella that kinda had some troubles with all our nesting and so on so the learning from it was that if we had properties that were referring to other nodes in the base doctype then it would not synchronize correctly but we fixed it by moving these properties into the specific doctype and that's i guess the story but um so actually going forward yeah of course it's a site that works on both like all platforms you could say um and i think it would actually make sense to to look at the site um a little live demo which is always really funny um um some of the things that we still like talk about maybe could be improved in some way because for some uh some file types png there's there could be some quality problems um but but you can definitely make it work out um and here you can see the site in in live you can see how the it's not live oh maybe i should uh put it over here um so you can see the i'm just gonna go up here you can see the sidebar working on the side here we have the loader in the sidebar as well so you can see when we go into a case you it loads the content here it's quite fluid and it is kind of on the most devices that we that we use um you can attach these colors here to the the segment you are you are viewing so it could be pink all the way or it could have taken another color color for this group here every group is uh is you can see it changes group when you when it changes the label out here um stuff we haven't talked about we have different ways of revealing content we use a fade in quite a lot but it can actually move in from all kinds of angles it can like appear in with masks and stuff and you it's like a like a set of functions that we have in the in the in brago directly so the content manager can choose this and build the page with the with the animations as well um we have autoplay videos within the device types um this of course is is responsive but we have fallback versions when you go to mobile phones we saw that the i o the ios 10 will support videos inside the the browser now on mobile phones that that will actually make a world of difference for a lot of stuff that we do um we have galleries these are also just tiles like four column and use but some use three and some one um vimeo videos inserted into the content and the form and make format makes it quite good for showing 69 with british cycling 69 size videos without doing any uh like clicking the full size button one custom element that we built was this awards thing which is something that we yeah again yeah use some bragging rights to to to show and it's something where we also in the back end just have a list and when you choose a watch and write x like the specifics below then it appears in this section on the on the side and then we can uh yeah let the user into the next project here's one that has a different color theme you can see it really influences what you look at i think this is fun because there's a lot of a lot more animations like it can be i think this is a video but it could also have been a gift this is one where we have a little parallax effect with the mobile phone over here going down here we we just have an autoplay video that like plays seamlessly and it gives kind of a impactful feeling you could say logo construct here where it's more it's two small gifts that shows how we build a logo and you can make sections really tall so it doesn't feel so grid based we could actually make a full page full height where it's all just parallaxing elements um and then we can have the very grid based more loose where the background goes behind leads into the the case we were at before or the next case showing the menu here when you open that in a colored state it stays colored until you do something the loader is always the background here and ties it together different templates or it's the same template just built in a different way the about section here where we actually show the bottom is 체 important item data set과 intended text item day when an item with for presentation just have a normal text item to the top gets a different feeling again use it for displaying the people we are um leading over to you can see here on the same label we go to the career where we show jobs and where we show jobs you can look in there if there are some of you that might need some some new environment around you if there are some of you that might need some new environment around you some new environment around you And that's kind of it. We haven't really, I'm pretty sure we haven't explored all the possibilities of our own platform yet. We know that we're going to change the homepage a little bit to make some variations about how we make ourselves look towards the clients. But we are extremely happy with what we have, both for what we build ourselves and what we get from Umbraco. Because we all use, we all make, we're all content editors now. It's not like anybody needed special education. We had one day where we all sat together, put content into the site. Designers, interns, project managers, everything. And it kind of makes sense for everybody. So that's, yeah, we're really happy about that. But I think that's what we brought today. And it would be nice. If somebody has some questions. Yeah. And maybe there's a microphone going around. Sorry. And I'm pretty sure I can't answer anything technical, so that would be nil. It's not technical. Okay. It's just to know within the project when and what exactly did you test with users? And what did you change after having the results with the users? So, I mean, from my side, maybe you have a different answer, but we didn't have any specific user tests involved in this. Again, it's a little special case, I guess, when you are very much your own worst and best critic in a thing like this. We kept on going until we couldn't find, like, any technical flaws in this. And we also kept on going until we were really happy with how the content was structured. And we also iterated on that after launch because we put it out there and we actually got a lot of response from, like, just the design and, like, web community when launching it. We did that with one tweet and it, like, really came out there, which is sometimes the case, you could say. And from that, you get a lot of feedback. And I guess we noted a few things that we changed, but we were not so afraid of having some small, like, flaws in there. Yeah, it's mostly the content, not so much the way the site works. It's more how we tell a story. And sometimes people get a little confused and then we can correct the content of a specific case if that's the situation. It's a totally different story when working with clients, of course. And we have a lot of different ways of doing that, both, like, cheaper online setups where we, yeah, like user test.com, I think it's called. But also... And also some that's even more face-to-face. And it's sometimes something we set up and sometimes something that the client actually have a preference for to begin with. Hi. Hi. Great site. Thanks. Great work. Two questions. How long did it take to build? And did you use any JavaScript framework in the front end? Yeah. So how long time did it take? So actually we have some in there. We had the design in some way nailed mid-July. I think we started in May last year. We launched January this year. So that's a long time. Yeah. But we had, like, client work in between. Yeah. It's really hard to set time aside to do your own thing. And I guess we were a long time on creating the content, actually. Yeah. Yeah, content was half the time. Yeah. Yeah. So, yeah. But, you know, we don't use any JavaScript frameworks. We sort of build our own. And then I think TypeScript solves many problems. And you basically just do vanilla JavaScript. But I heard a little bird singing about that we might release some of our own stuff. Yeah. We don't know yet. I'm not sure. It has to be done. Okay. Sure. All right. How do you deliver the JSON to the front end? Are you using an API controller or route hijacking or anything like that? Yeah. Good question. We just made it as a page. And then it's outputting as JSON. So we don't have anything advanced. We just put a static URL for the global JSON. And then the global JSON is referring to the other URLs. So it's pretty simple. Thank you. Thank you. Did you have any concerns about SEO when you were writing? It's a single-page app, isn't it? It's a JavaScript single-page app. So how does Google see that? How does search engines see that? Yeah. Have you made any efforts to sort of help them? Yeah. That's a really good question. Actually, something I didn't talk about was that, all the templates exist twice. So there's also an HTML template for each component. It's just in a different folder. So everything is actually printed as HTML, just very roughly to put out the images and the text. And then when the site loads and the JavaScript is initialized, it just cleans it all out. And then we continue with JSON data. How many types of grid elements do you have? And content elements? Yeah. And how do you control what can be done where? Yeah. I actually don't know how many we have, but it's around 50 or 70. But is that the variations of each? Well, that would be an endless amount of variations. An example would be the text module as Pillard said to describe. Inside the text module, you have another content, and it's the content list. Yeah. Where you can add different text components. One would be title. One would be paragraph. Another one would be a button. And even the paragraph can then be configured with how many columns should it be divided into, how broad should it be, and yeah, colors and so on. Yeah. But we have like a lot of different ones. We use the text one a lot. We use the image. Yeah. But sometimes you use the text. Yeah. because you can just use it as a background image. Yeah. So a media element actually has a nested content within it as well, where you choose either image or video or SVG. And the same way we do it with the text grid item, where you can also choose a background. And from that, you can choose either image, SVG, video. So there's a lot of combinations, and it's probably not for all clients. So it's not just to have all these properties available, but for us, it makes good sense. We never showed really the parallaxing thing with several layers. I think there's one example in here somewhere. So here you can see how that works. That's just with three layers where one is scrolling slower than normal scroll. One and two is a bit faster. No, this is slow as well. And it's faster. So it gives like a depth and it's more gimmicky than anything, but it works on all devices and it crops nicely. So. Anymore? Then I think that's it for us.