Responsive Web Design: Learn to Design a Responsive Landing Page | John Ashenden | Skillshare

Responsive Web Design: Learn to Design a Responsive Landing Page

John Ashenden, Head of Design, Mesosphere

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
6 Lessons (3h 47m)
    • 1. Principles of Responsive Design

      50:17
    • 2. Design The Foundation (Part 1 of 2)

      24:04
    • 3. Design The Foundation (Part 2 of 2)

      63:27
    • 4. Designing for a Responsive Website (Part 1 of 2)

      8:37
    • 5. Designing for a Responsive Website (Part 2 of 2)

      33:10
    • 6. Design to Development

      47:27

About This Class

Web Designers, UX Designers, and Developers anxious to learn the fundamentals of responsive design, this is the class for you.

In this class, you’ll learn the fundamentals of responsive design. You will walk through the steps needed to create a mobile-first site or web-app, how to prepare your design files, techniques for adjusting content and layout, and even a basic introduction to how this translates to HTML and CSS.

What You'll Learn

  • Principles of Responsive Design. You'll learn the fundamentals of Responsive Design, why it's important, how it can benefit your audience, and even improve your designs.
  • Laying the Foundation. We'll walkthrough the development of wireframes for a responsive website
  • Applying Your Design. From wireframe to mockup, you'll be using typography, hidden elements, and margins to your advantage.
  • Design to Development (Optional). Learn how to use HTML and CSS to manipulate your site's structure and content. 

What You’ll Make
As a final project, students will submit a single-page design for a website promoting your favorite band or movie. The availability of high-quality photographs, posters and even videos for bands or movies, makes an ideal candidate for visually rich and engaging websites.

Your responsive landing page will be designed to fit at least 3 screen sizes – mobile, tablet, and laptop. Ambitious students can take their project beyond, creating additional designs to fit widescreen monitors or even convert their designs to a functioning website.

This is a design-focused course, though a basic introduction to responsive development will be presented for those students eager to bring their designs to life.

Transcripts

1. Principles of Responsive Design: - Hey, - this is John Ashen. - Welcome to my first skill share on responsive Web design. - Here, - I'm going to give you an introduction to responsive Web design. - What does that mean? - How is a useful How can it be applied to your designs of your page for this project? - Even you're going to be designing your own responsive one page landing page. - And at the end of this class, - somewhat optional, - I will be even giving an introduction to development. - So if you want to actually kind of go beyond the scope of this class and take your design - and put it into practice, - throw it up on the Web share with the class. - We don't love to see that as well. - I'm some. - I'll give you some basic tools there to help you out if that's something that you're - interested in doing. - Um, - but the way I'm gonna structure this is I'm going to start with at least this lecture. - Azan introduction. - Very slide heavy. - A lot of examples. - Not really gonna walk through approach too much in the lectures to follow will walk through - how you can begin to structure the lay out of your sight through the use of wire frames and - how that can be applied in a responsive manner. - Um, - the third video will actually focus on design again. - This isn't really designed class in terms of visuals, - it's more structured on layout content presentation. - So, - um, - you know, - I will definitely offer up some resource is that you can use their andan finding. - Like I said in the fourth video will just be an introduction to development, - and that's optional. - So let's get started. - Part one of this class is an introduction. - So what is responsive design? - You've heard this word throwing around. - You're taking the class because you're interested on responsive design. - And I've got a beautiful, - long answer for you that I'm going to read. - Responsive Design is a guiding set of principles for adapting design, - an interactive elements of a website or application in response to the dimensions of the - user's screen, - their platform orientation and other variable factors affecting display an engagement for - optimal viewing experience. - Really, - In short, - though, - this is just responsive. - Design is a best fit, - approach designed user experience and what I mean by vested by best fit. - I mean, - um, - taking your site's content, - meaning it's It's typography. - Um, - you know, - maybe blogged articles, - images that you want users to scroll through video, - um, - interactive elements like navigation and making sure that they fit the screen, - that the user is looking at them on to fit the platform that they're looking at them on in - the best way possible. - And there's not like a scientific answer to that. - But there are definitely some guiding principles that I'll be showing you, - um, - you know, - and really, - uh, - they're different environments. - You tell me what you're talking about. - A small phone and you're talking about a laptop. - People engage with them differently, - aside from them just being different screen sizes. - You know, - you use your thumb on a phone, - whereas you use a pointer on a laptop. - And so it's really important, - especially today, - to make sure that your website or your design best fits the screen in the environment. - So why should you care? - I'm sure you know the answer to this already, - but let's let's roll through it. - So things used to be really simple, - you know, - following Netscape's intro into Internet Explorer, - Um, - and then the introduction of additional browsers like Firefox and Safari um, - you know, - the Internet landscape was pretty simple. - We could do some pretty cool stuff with CSS. - If you were a flash guru, - you could really push the boundaries of what could be done. - But in terms of compatibility, - the issue waas making sure that you had the same or consistent presentation from Internet - Explorer to Firefox to safari. - And this wasn't necessary. - Easiest thing in the world, - it was. - It was a challenge. - You know, - Trying easy would spend countless hours or days tweaking or putting little hacks in place - or running Java script that would make things look different in Internet Explorer so that - they would mimic what you wanted to look like in Firefox. - And this was really the day to day of a Web designer or front end developer was to ensure - consistency, - really in presentation. - But against screen size wasn't a factor so much in terms of screen size, - the conversations always Okay, - well, - what if somebody is running your website on a 800 by 600 laptop, - which was pretty common still at that point in time? - And, - you know, - as we moved into the mid two thousands 10 24 by 7 68 kind of became the vocabulary in terms - of the minimum screen size that a lot of websites would support, - and anything else would just have to have scroll bars. - But even regardless of screen size, - the challenge was like, - you know, - did a coat Did colors look the same? - Or what about patting? - Patting was rendered differently. - Um, - And then, - of course, - we had CSS three on HTML five. - They hit the market. - Chrome was really want to push that hard thing. - Chrome and Safari both ran kind of campaigns to show how awesome their browser was, - How you could use CSS three in html five to really mimic a lot of the functionality that - you would find in flash or in native applications that were built for the different - operating systems. - But again, - still like the challenge was just consistency. - Screen size was part of the conversation, - but it wasn't a ceased as important as it is today. - And as a developer, - your best friend was a roach on fire, - uh, - nice fire book call out Then, - of course, - this happened and Steve Jobs had to ruin everything and give us the iPhone and not only a - cool iPhone with a bunch of APS, - but also one that supported a browser. - So you had safari running on the iPhone on safari was capable of rendering rich interactive - websites for a lot of you, - you'll remember in the days of flip phones or feature phones as they're called. - You know, - if you had a browns around that it was so primitive you had there's almost just text. - Most websites did not offer any support for the browsers on the smartphones, - and really, - the smartphones kind of just are. - Those phones became really glorified. - Our assess feeds, - if you will. - They would go to a site that strip out all of the visual elements, - and it would just be the text. - Maybe you would get some in line images, - but that was about it. - And so again, - as a designer or developer, - you know, - you didn't have to really think about feature phones because there wasn't challenge there. - The marketplace didn't even really expect your website to adapt to or be optimized for - their feature phone outside of just making sure that text was readable. - But now that we had the iPhone with safari running, - um, - it opened up a whole new a set of user experience, - a whole new set of challenges. - Well, - from a design standpoint, - because you had this phone that offered crammed a fair amount of pixels onto the screen, - Um was even capable of running full Web pages on the screen. - But you had the option if you wanted Teoh designed to fit the screen on, - and this is really when responsive design started, - Teoh kind of enter the vocabulary of Web designers and Web developers. - And, - of course, - when this happened and we took the screen, - we made a larger, - not as large, - as a laptop, - but larger nonetheless. - And again, - the expectations here were that if you had a website that you know, - it was viewable and readable on an iPad and to a certain extent, - even optimized to fit the iPad for both smartphones, - such as the iPhone and tablets. - You know the interaction and changed as well. - On a desktop, - you have a pointer are mouse pointer, - you move around, - you click things, - and you could do really cool stuff in terms of exposing navigation or other site features - on roll over, - for example, - and that wasn't available to you on the phone because there wasn't concept of like hovering - really was Click. - You know he would press your thumb down and he would click. - Um and so you know, - any navigation that you had had to be obvious or intuitive, - not to mention in terms of a lot of what the's at least these native applications offered. - There were expectations in terms of specific design paradigms for how navigation should be - presented and how people should flow Ford and backwards through your information or through - your site architectures. - So, - um, - you know, - it went from kind of this blank slate on the Web where anything goes, - and you just had to worry about making sure worked across different browsers. - Now you had to downsize, - go to smaller screens. - Plus, - you lost a lot of at least the interactive options that were released available to on the - Web simply because you just, - you know, - like I had a mouse pointer. - And, - of course, - everyone followed. - And not only do you have the iPhone, - but you have more smartphones than you can count more tablets than I can even list off on - my hands. - Um, - and all of them of course have Web browsers running on them. - Most of them are compatible in terms of the browsing experience with what safari is offered - on the iPhone, - iPad and eso again. - You know, - the expectation here is that people are going to be using your website not just on their - laptop, - but on their phone and on their tablet. - So why should you care? - Because people have these in their pockets. - People have you sitting on their coffee tables and they're going to open your website on - these devices. - And so you want to make sure that you know your tailor in your content your presentation - and make it, - um, - you know, - easy for somebody to engage in to interact with what you what it is that you're trying to - show them what it is you're trying to present to them. - So I put together some numbers here. - This is just a pretty small set of some staff that at least I found informative. - Um, - so today, - roughly 1/4 of all the traffic on the web is being driven by mobile devices, - which is insane to me. - Um I mean, - you think about the iPhone came out in 2007. - And you know, - that's was at 66 years ago from this year. - I mean, - in six years, - the landscape really has shifted to you, - Um, - using the Internet in your hand as opposed to on your lap or sitting on your desk. - And so, - you know, - if you're a business or online publication, - you have to think about that. - This and think, - you know, - is this Are these customers or potentially potentially willing to lose because they get - frustrated with how your information is presented. - So definitely your reason to care on again. - I don't expect that number to decrease. - In fact, - tablet sales this year are estimated to reach above 100 million. - Again, - like in the tablets really started become prevailing about three or four years ago, - following the iPad. - Um, - and we're about to see 100 million in the market today. - Again, - if you're looking at this from strictly just a numbers game, - it's something that you can't ignore. - Also, - I found this one pretty interesting. - I was looking around and trying to get some stats on mobile usage, - and I came across this one which doesn't really have to do with mobile, - but It's interesting on the less about half of users maximize their browser window. - What does that mean? - You know when you have your running chrome in, - um, - on your Mac, - you know you can resize this screen. - And even though I might be running a giant I max screen, - I might have my chrome window about half that size simply because I I'm lazy or I don't - know how to resize my screen. - Or maybe I haven't shrunk because I'm doing some sort of side by side comparison with maybe - a spreadsheet or a document that I have open that I'm working on. - And from the statistic statistical report that I saw least, - this is Mac users, - or at least the worst offenders where the majority of Mac users do not maximize their - browser windows. - It seems to actually be the inverse for Windows users. - I don't know. - Maybe it's just a psychological or muscle memory reaction for Windows to just maximize your - screen. - I know it was for me when I used windows, - but, - you know, - I look around at any coffee shop that's got a bunch of max out, - and people are have their browsers open. - I would say that a large majority of them do not have the maximize. - And again, - why is this important? - Because it makes it even harder for you for you to predict the size that somebody's gonna - be running their screen on simply by the device that they're running. - So it becomes even more important for you to make sure that the content for the information - that's being presented is being optimized for the size of the screen, - not necessarily in the device that it's running on. - And, - of course, - don't forget about the TV. - Today's market is littered with a ton of smart TVs, - all of them running, - you know, - various versions of Facebook or video or Netflix, - or who Lou and again, - a lot of our native absent built specific to the device. - But some of them, - I know, - like the boxy the original Boxee box, - for example, - had a actual built in browser. - You can see here in this, - even in this example, - the Samsung Smart TV, - one of the icons is a Web rather. - So a lot of these, - you know, - and Google TV has Web browser built into it as well. - So a lot of these TV's air getting smarter. - They're running native apse, - which is great because they're optimized. - But a lot of them offer Web browsers. - And though you know the average individual isn't browsing the Web from their TV, - TV's were only going to get smarter. - They're only going to offer more options. - And, - you know, - the battle for the living room is something that you hear detector and was talking about - all the time in terms of what, - you know, - speculating what's next for that market. - Eso You know, - you got to think, - What if my website is suddenly accessed on a giant 47 inch plasma screen TV? - How is that going to look and again like, - if you're if you're thinking about this when you're going into your design from the - beginning, - Um, - it could make things a lot less painful for you should that present itself should, - you know, - apple roll out some fancy you apple TV that's been speculated for years, - and suddenly they're safari sitting in your living room, - and you have you know 1/20 of your traffic is now people trying to access your website from - a TV and again if you take some precautionary steps early on and kind of just shift the way - that you approach your design. - You'll find that that isn't as big a challenge as you might think it would be. - And, - you know, - we've talked about laptops and we talked about phones and phones led to tablets, - and now you have this huge marketplace. - But who knows what's next? - You know, - cars are on the list, - you know, - cars. - They're still pretty simple in terms of what they offer in terms in terms of center - consoles. - A lot of these newer cars have built in GPS, - but and some of them have, - like, - you know, - real time tweets that come in. - But and I think even last week with you know an Apple debuted what's next for its IOS - interface that has the ability to it will have the ability to sink with the center console - on a lot of cars. - And even though that's still somewhat of a just a simple data delivery for some some native - applications, - you know these a T least. - Consumers may start to expect your experience to be tailored for the screen in their car, - and it's, - you know, - it may not just be one car. - It could be lots of cars, - and those cars could even, - you know, - we could leave cars, - and the conversation could be centered around your kitchen. - Now your refrigerator might expect it. - You know, - people have screens in the refrigerators that run various versions of android or whatever - that, - um, - present news content in real time. - Um, - and the whole. - The whole point of all this is that that it becomes almost impossible to predict where - people are going to be consuming your content. - And because of that, - you have to be proactive and how you design and how you build in anticipation of constant - change in the landscape. - So what's the solution? - Well, - there's one option. - The first option is to do nothing. - You know, - you can simply pick an average screen size, - say, - like 110 24 by 7 68 and just designed for that. - Um, - you know, - again, - you don't have to. - You have to design once you have to design for wide screenings and tablets or whatever. - And from a development standpoint, - it's pretty easy as well, - because you just pick the average screen size, - you know, - go back into the early days and just do some cross browser fixes and you're done. - Some cons. - Oh, - um, - on a wide range of devices, - your user experience is gonna suck again. - If you're saying 10. - 24 is the size that you're gonna design for you stick everything in a 9 60 grid. - Uh, - somebody pulls it up on their phone and suddenly they're having to zoom in. - Zoom out hunt for hunt and peck at links on the screen. - Accidental clicks, - navigation. - That's just not exposed because, - you know it's only on hover. - Um, - there's a really high probability that you're going to see scroll bars on the Web when - they're shrinking. - They're screen horizontally there, - certainly gonna see school bars on phone. - Certain browsers don't adjust the view port the way that's intended, - and you'll definitely end up with scroll bars there. - Nobody likes scores, - and you'll end up with white space on wide screen. - So if you're designing for 10 24 and somebody's looking at it on their fancy new I'm act, - they just bought, - they're going to see a ton of dead empty space surrounding your design. - Maybe you can work to your advantage through the use of backgrounds and textures. - But, - um, - you know, - I'd venture to guess that a lot of the white space is not going to be desirable. - It's just gonna kind of ruin your design. - So there's a second option here, - um, - design and build for every device and every environment. - What I mean by this is essentially picking the devices that you want to support and then - creating multiple designs for each of them. - I mean, - even developing for each of them as well. - So you know, - switching out style sheets on the fly or offering a completely different code, - depending on device that they're accessing eso their indefinite pros to this. - The 1st 1 is you get really precise control over the design and layout. - So you know, - if you pick, - you know, - a tablet and a smartphone and those the two designs that you're going to devices or - environments urine designed for you can get really, - really detailed and granular about how things should be laid out, - how it should be presented on. - You don't have to necessarily worry about how things are going to spill or move around - because it's your only designing and you're only developing for that you don't have to - worry about how that's gonna look on a larger screen because you're also designing and - building separately for that environment as well. - You get a lot of flexibility and content and data management. - What I really mean by this is say, - you're building an application music application that has, - uh, - is trying to display a collection of songs say it's 500 or 1000 songs you know, - on a laptop with a lot of memory that could be fairly trivial in terms of making sure that - the site isn't slow and is rendering the information as somebody scrolls past it. - But if you're trying to, - you show that on that same data set on a phone without do anything different, - it could become somewhat slower. - Laghi or even crashed the browser the phone entirely. - So by developing separately for different environments, - you could get Really, - you can do some really cool stuff in terms of how you manage the data, - um, - and again the content as well. - And also it's pretty predictable. - The cons, - though, - to this approach, - is extremely time consuming a lot of redundant development because it's not a shared code - base. - You have a different code base for each, - and there's risk of inconsistencies because again you're designing independent of or you're - designing independently in each environment. - Um, - you know, - sometimes things can get lost between the two, - or maybe you make an update for the Web. - But then you know you forget to, - or maybe the budgets, - not there for you, - too. - Make sure that change or that update is mirrored for your mobile environment as well, - and because it's not a shared code base that you can create some obvious inconsistencies. - And then there's 1/3 option. - Um, - my favorite option designed for many build once this is the responsive design option. - So what are the pros here? - Well, - it's consistent between devices so similar to what we had for Option two. - Um, - by developing screen size categories, - you reduce multiple designs, - and I'll get into that in my second lecture. - Here you have shared content, - and by that I mean it's the same content on In Actually rendered in the browser, - though it may be hidden or resized or moved around. - But it's the same content nonetheless, - Um, - and it's significantly reduced development because it's this shame. - Shared content base and simply your development is about adjusting the designed - unnecessarily, - duplicating all of the the back end code or even the front in code, - depending on the device that you're looking at. - Um, - there are some cons, - though The most obvious one is you run into limitations when you're appealing to the least - common denominator. - Really? - What I mean by that is say, - you're you wanna work, - you want to design for a smartphone. - Um, - and you want things to be as a reduced redundancy as much as possible. - So you kind of pick a a small, - uh, - I guess set of constraints and that you have to work with and you're designing to make sure - that you know those constraints fit the broadest range of phones. - And as rude as a result of that, - it may force you to limit what you can do with your design what you can do with - functionality. - Maybe you want to take advantage of certain features that you know the phone offers, - and if European please come denominator, - you other phones may not offer that, - and so you're forced to kind of tone things down a little bit or dumb things down a little - bit again. - That can sometimes be a good thing, - and sometimes that can actually really limit what you're able to dio. - There's obviously a learning curve in In terms of development, - though I would argue that the learning curve, - um, - definitely outweighs the amount of extra time you would spend development if you were to go - to, - say, - option number two and again, - data management can suck if not managed properly. - If you're using the same shared set of content on the screen and it's a large set of - information on a phone with a slower processor or less memory, - you know things can get really slow, - choppy. - I'm sure you've experienced this yourself when trying to scroll through a site that's - presenting a lot of content. - So let's review this real fast. - So Option one, - which was no extra work and offer some support, - some support, - meaning you pick, - you know, - an average screen size. - It's gonna be supported for some of your users or the average user for others. - Those he scroll bars for others. - They'll see a lot of dead space, - But I don't like this option. - Option Number two is lots of work, - meaning you're building for every environment that you want to support. - Different code base for each different design for each. - But the upside is you get lots of support, - so you know that for every valuable for its gonna be supported, - what there's a lot of extra development needed. - It's very hard to ensure consistency. - I don't like this option. - Option Number three requires some extra work. - You have to do more designs to make sure that you know you're design is tailored and - responsive to fit the screen. - There's extra work needed in terms of development, - but not as much. - Extra work is if you were to literally rebuild your website for each of these environments - , - or rebuild your style sheet for each these environments and you get offered lots of support - because you're really optimizing for a range of screens. - And you know, - if you make sure that that range of screens is somewhat comprehensive, - say you support three different sought three different screen rangers or four different - screen ranges. - You know, - as more and more screens rollout, - you'll get you'll. - You'll see that you have lots of support, - your website so and this is really the responsive for out here and my favorite and the - route that we're gonna go with a T least for this lecture. - So how do you do this? - Well, - the 1st 1 is designed for screen size categories, - and this is something will cover in the next lecture. - But essentially, - um, - laying out all of your different screen sizes. - You want to support grouping into categories and designing for individual categories - against something that will that will go over the next lecture, - as well as using grids to place and rearrange content and following up on that you allow - certain or all your elements to fill the space. - Contain themselves. - You're using grids to hold text or images on a page. - You can allow that text or those images to fill the containing grid column work Grid row - that's holding them, - Um, - and then you can allow certain elements to spill vertically and horizontally to say, - um, - you know, - on a phone you have everything running vertically down the screen, - and then suddenly you move from a phone to a laptop. - Maybe you can expand into two columns or from a lab or from a tablet into a laptop. - You could go from maybe two columns to four columns or six columns. - If you're going on to a wider screen. - From a development standpoint, - you can use media queries to apply conditional styling. - Again, - this cuts down on a lot of redundancy and code. - Let's use a shit code base and simply using, - UM, - really CSS to just hide, - show and move around content. - Um, - and one that's often neglected is taking advantage of you. - X and you. - I conventions in specific screen size categories, - and what I mean by this is people are expected to engage or expect to engage with content - on phones or smart phones using their thumb. - How the interface is presented to them is also somewhat of an expectation in terms of - having very clear, - labeled navigation a zwelling context to what they're looking at. - Whereas on a laptop with more screen real estate, - you get more creative with where you expose your navigation and how you label headers and - what the person is looking at. - But by taking advantage of those conventions, - it can make your life a lot easier as a designer, - because it cuts down on a lot of guesswork, - not only for you but for your user as well. - So you can really improve user experience and allow you, - you know, - allow you to refocus on your interface and finding ways to make your design unique attached - to you know, - your brand or whatever the content is and not so much focused on. - You know how things should be laid out or guessing what the user is going to be expecting. - All right, - so we just went through an introduction. - And now let's run through some examples of this on the web. - How other sides there are actually tackling this problem? - Okay, - so I've got my browser pulled up here, - and I pre loaded it with a bunch of tabs, - and I'm gonna walk through first examples of websites that, - um, - do not offer responsive support, - um, - in real time on their site or offered in some sort of limited capacity on that, - I'm gonna run through a bunch of sites that do it pretty well and kind of just talk through - some things. - So here's my first example. - It's for apple dot com. - Everybody has seen the site, - but ironically enough, - despite being, - you know, - masters of design, - they have not built their site responsibly. - You'll notice as I actually shrink this screen size down. - Now we have a scroll bar, - and really, - that's the only way to navigate on the site. - It becomes worse. - The smaller I get, - I'll even open my iPhone simulator here, - and I have the exact same page pulled up and notice. - All that has happened is the view port has adjusted to just fit the content size. - But, - you know, - if I'm using my mouse here on the screen so you get a little bit easier for me to click - things. - But if this were my thumb, - you know, - might be pretty hard to hit this store. - But, - you know, - I might have to, - like, - zoom in and like, - click it and, - you know, - just isn't a pleasant experience and get it kind of ruins the look of your site because now - you have people zooming in and they're missing pieces of content. - I don't really know how to zoom in on this simulator, - but, - um, - you've all experienced this and it still amazes me that apple is an offender of this. - Um, - new sites do this as well, - like in a CNN. - Like it's got a fixed fixed layout here, - fixed with As I shrink again, - I get scroll bars. - Um, - but this this one's interesting because CNN, - though if you go to their website on safari, - you'll notice they actually serve up a different version of their website. - And this, - really is that second option that we discussed earlier in terms of kind of rebuilding your - website for the environment that you want to support, - as opposed to just or simply allowing the content that's already on your site to adjust and - fit the screen size on. - So I think about this. - Somebody actually has to maintain this code base, - and somebody has to maintain this code based. - Fortunately, - they're both probably pulling from the same data source. - So in terms of consistency and data, - that's not so much an issue, - but in terms of branding colors, - font choice margins, - all that kind of stuff, - somebody has to make sure that the to kind of full, - I guess, - fall in line together. - A Ah well, - another example noticed school bars. - So here's one that is, - to a certain degree, - responsive. - I'm looking at this on a large Mac. - It's feeling a screen nicely again. - School around, - Click Things as, - like my screen. - Get smaller, - say now, - among like the size of like a laptop or something. - You know, - it's still kind of Phillips. - The screens. - I have the pictures large. - I have margins that allow for a little bit of reading room. - But unfortunately, - once I get to a certain size back to your school work, - I have an action checked out how these guys have done it on the phone. - Let's see real fast. - Maybe they do offer up an alternate or switch out, - maybe to a different style sheet or something for for phones, - but not sure. - Yeah, - so it looks like they've actually optimized through the use of it. - A different style sheet for the phone, - really kind of just simplify the site content. - Um, - and I click over. - I get smaller grid pictures, - whereas if I were here, - click the same link. - You know, - I see a 55 rue or five column grid. - Here. - I see a three column grid, - so they've done something, - But again, - this is kind of the option to out where they've actually switched out the style. - She and I'm sure they've done some stuff to like, - you know, - decrease the amount of development time needed and ensure some consistency. - It's still not the preferred route to go. - Here's another example. - So let me refresh this page. - So this is a micro site that it came across for, - um, - really and the espresso company Really cool looking site, - you know, - a lot of like cool effects and hovering. - And you're really cool things you can do by scrolling your mouse in terms of navigating - site content. - And you'll notice like as I get the screen smaller, - it's a little bit choppy, - but you know, - things are somewhat fluid. - They fill the space that content shrinks to fit horizontally. - But at a certain point you'll notice that the contents stops responding. - And suddenly now I'm presented with this little graphic telling me that I should turn my - phone sideways. - So you know, - this is one way to I guess address the issue is Teoh offer instructions to your users. - You know, - t actually change or adjust their layout. - I used to see this approach done a lot more back in 6 4007 Also, - a lot of flash sites who do this as well But you know you don't really want I mean, - that's that's putting the burden back on your user. - And maybe they're walking down the street and they don't want to turn their phone sideways - and hold it with two hands and navigate that way. - So, - um, - again, - just not not a good philosophy. - Um, - and sadly, - even skill share. - You know, - as you shrink, - you get scroll bars. - So mean, - maybe we'll talk to you about this, - but, - um OK, - so these air all my examples for, - um sites that don't respond to kind of give you an example of really some of the failed - points or or half approaches to solving the problem and said, - I'm gonna run through a bunch. - I have a bunch here. - I'm gonna kind of quickly go through them and stop on a couple that do this really well in - terms of adjusting their designs. - So this is really didn't take me long to even put this list together, - cause so many of, - ah, - at least he's well designed sites not only our look great, - but they've also taken the time to adjust their the code bases well, - to be responsive. - So here's one This is a fairly simple page. - You know, - Navigation logo, - big masthead. - Bunch of blocks going down the screen and you'll notice as it gets smaller. - Um, - get this out of the way as he gets smaller. - Uh, - you know, - the content adjusts resize is text kind of spills, - even gets a little bit smaller here. - You notice how the header goes from this larger type two slightly smaller one. - But on a phone, - this would still look pretty big. - In fact, - we can pull this up. - I think I already have it pulled up here. - You know, - if you were to open this up on your phone, - it would look nice. - You see a logo nice called action to you. - You know, - something familiar again. - Getting back to those ux and you I conventions of familiar three lines. - Teoh exposed the menu. - Um, - you know, - you can easily scroll do this with your thumb. - I think they probably could have done a better job with these images because they're kind - of crammed in here. - But regardless, - it's It's a pretty good introduction to a site that adjust its elements in real time to fit - the screen size and again is, - this gets larger? - Um, - I think I can through this pawn to iPad here. - Yeah. - So this is what it would look like on an iPad. - A little bit more breathing room. - Noticed those icons that once were vertically And when one single vertical column before - now kind of fill out the space a little bit more. - And that's, - I guess, - more like what we're seeing here and in the same icons. - You see that kind of move, - and now suddenly they span completely horizontal across the screen, - and the site has less vertical scroll to it as well, - because things have kind of filled filled out horizontally. - This is now spending two columns, - whereas before you're spending a single column, - so you get the idea. - Um, - here's another really cool one. - This is another very simple example, - very nicely designed site, - a lot of like blawg pros and content. - Even on a desktop. - The navigation is kind of nested and hidden, - but it's a convention that people are kind of used to today. - These three lines in terms of seen expecting that to trigger a menu. - So what you'll see here is he uses empty space or whitespace to allow his content to sit - right in the middle of the screen. - This would be probably like a small laptop around this size. - But then, - as we get smaller eventually at a certain point, - um, - the content has the edge, - and things now kind of shrink proportionately see the Fonz getting a little bit smaller. - The images are getting smaller. - Everything is kind of constrained to its own proportions, - but also is kind of filling the space. - You know, - again, - if we were to pull this up on, 2. Design The Foundation (Part 1 of 2): - you guys John again. - Um, - welcome back. - We're now in part two of my skill share on responsive Web design. - In this section, - we will focus on how to build a foundation, - really focus, - being on wire frames. - Of course, - there's a bunch of resource is I've attached here that you can use for your reference. - Also know that she started, - but I'll go through all of that. - So let's divert. - So where do we leave off? - Um, - during the last lecture, - we discussed, - uh, - went through an introduction to responsive Web design. - What that meant I gave you a ton of examples explained why it was important some stats to - explain why it's worth your while. - Um, - and then I gave you the prompt for your project, - which was at least to find here is to pick a movie or a band and create an outline of your - content that you kind of refined consolidated to represent the information flow that your - landing page would take. - All right, - so up next we'll talk about wire frames, - so this is the foundation. - So where should you start? - Let's begin with screen sizes. - So what screen size this you support. - We've already gone through that there are super small screens on phones and super big - screens on TV's large desktops. - But how do you know which of these screens you should support? - If the answer is all of them, - that can seem extremely daunting. - So I said, - there are a variety of screen sizes and the number is only getting larger. - Um, - the pain on your project or requirements your project that may dictate exactly what you - have to support and again going back to. - We talked about before, - like, - regardless of the screen size some users doing maximize their browser. - So that makes it even more difficult for you to predict exactly, - I guess, - what range of devices or what range of screen sizes we're gonna be working for? - So, - um, - let's talk portrait, - diverse landscape for seconds. - And this is just a basic definitions and terminology. - This might seem elementary to you, - but just bear with me eso portrait what you see in the left landscape, - you see on the right, - so portrait is really the vertical layout. - You hold your smartphone up next to the screen that is essentially your portrait. - Lay out and then you turn your phone sideways, - and suddenly now you were on your landscape layout. - Um, - laptops, - desktop computers, - those air, - all landscape. - By tradition, - some can actually turn vertical, - but almost every laptop or desktop is gonna be landscaped by nature. - Okay, - so we know what fortunate landscape are. - So here we're going to kind of build a simple vin diagram and try to get a better sense of - where everything falls. - So in the blue circle, - we have portrait in the green circle. - We have landscape, - um, - very, - very, - very few devices or portrait Onley. - In fact, - it was very hard for me to even find some examples of devices that reports your only early - BlackBerries could not be turned into landscape mode. - You could argue that the screen dimensions, - in fact, - our landscape, - but by nature, - you scroll only vertical. - So I'm classifying at his portrait. - The palm weather s are pre, - um it was also a portrait only phone. - And then on the landscape, - scientists on the other extreme, - we have laptops, - I, - max Smart TV's desktops, - etcetera, - and then right in the middle, - or devices that can kind of go one way or another, - so smartphones and tablets could be turned vertical or horizontal. - Okay, - so now we know what portrait mean to know what landscape means. - We kind of have an idea where what kind of device is what kind of screens fall into each So - the next thing to do is to start kind of loving is in the category, - so let's lay them all out. - So on the far left, - we have a very small portrait only display. - So that would be like your phone on the far right. - We have a very large landscaped only display, - so that would be like a large desktop or maybe even a TV. - And then as you closer to the middle, - things kind of converge. - You know, - your mobile phones could be turned landscape. - Uh, - you get you go from a widescreen down to a laptop in the middle, - you have tablets which, - you know have screened somewhat comparable to a small laptop and can be turned both ways as - well. - And you really could, - I mean, - if you wanted to, - you could put every possible device on this timeline taking forever these air kind of - general categories. - So next week create some just division eri boundaries between them all, - Um, - and you can see here that by doing so because very easy for us to name them. - So on the far right is what will refer to why you're widescreen and its landscape only. - And then you have your standard display again, - going from right to left. - That would be like your laptops. - That's landscape as well, - Right In the middle, - we have tablet, - which could be portrait or landscape and kind of assumed to be both, - at least for the sake of this lecture on an ending on the far left we have mobile on and - were kind of breaking them into one category for portrait and one for landscape. - Um, - I'll become clear a little bit later. - And, - of course, - for each of these we define some sort of bound like numbers for the boundaries or values - for the boundaries. - And these numbers are actually based off police. - A lot of research that other individuals have done, - and at least a lot of the online resource is or or or um, - documents or blawg posts that people have done will support at least these numbers. - So, - um, - you know, - here at the bottom, - let's look a tablet and standards. - So right in the middle between tablet standard, - we've broken it at 10 23 10 24. - So everything to the right of 10 24 pixels wide would be considered your standard screen or - larger. - Not really will accommodate most laptops, - of course. - Smaller, - maybe Net books. - People still have those or very small, - I think, - even like small Mac book airs air within the 10 24 range. - But anything above that would be considered standard or or larger, - and then we break it. - So as soon as you go one pixel smaller and 10 23 we won't move over into tablets and really - any tablet it's gonna be in a 10 23 pixel range unless it's, - um, - extremely high density displays is going to be a tablet that's being shown in landscape - mode. - Um, - and then the range goes smaller from there down to 7 68 and 7 68 were considering the cut - off for tablets because right at that boundary between 7 67 and 7 68 is for at least most - smartphones, - kind of the ideal cut off for wearing mobile phone would live if it were in landscape mode - . - Um, - the figure early iPhones like, - uh, - released the iPhone four. - I was, - uh, - 3 20 by 6 40 So 320 pixels wide, - 640 pixels. - Told you to turn that sideways. - Suddenly it's now 640 pixels wide, - 320 pixels tall. - So 640 pixels still falls well beneath the 7 67 mark, - um, - and then their other smartphones, - like the iPhone five, - which now has a larger display. - And, - you know, - some bigger six Samsung type devices that still fall in landscape mode 20 nut or just - beneath that 7 68 boundary. - Um, - and so once you leave that we decide. - Okay, - Now the screen category sizes, - mobile landscape, - and then go even smaller in terms of screen with when we say at 480 pixels, - that will be the cut off for what we consider to be the A mobile device in portrait - orientation. - And this one is somewhat tricky, - because if you look at all of the other numbers we show here, - um, - the cut off boundary released the minimum size for the boundary falls inside, - um, - the boundaries. - So like, - for example, - on standard landscape escape displays. - The minimum is 10 24. - Um, - anything beneath that's which is over the tablet. - Whereas here were saying, - when you go from mobile portrait of mobile landscape war, - including 4 80 in mobile portrait. - And the main reason for that is there are a large number of phones and do, - in fact, - support 400 pixel white displays. - Where is something like the iPhone is 3 20 pixels, - um, - and then going back to the far other extreme on this on the wide screen side, - we're gonna choose 12 80 as are cut off like again. - You could pick something larger or even smaller if you wanted Teoh thes air all the - boundaries that I'm choosing for the sake of this tutorial. - Um, - but I would advise you to stick someone close to this, - at least for kind of the middle three, - Um, - and four Mobile. - You could, - even if you wanted Teoh, - combine portrait and landscape, - just like we've done with Tablet, - um, - and just allow for the same layout between the two. - And I'll get into that a little bit later. - So these are what we call screen categories And so now what? - We are doing our designs moving forward. - We will make sure we have a design that has been optimized or has a takes a best fit - approach to each of these five screen categories. - Okay, - Uh, - real quick, - we're gonna talk about fluid. - First fixed first elastic rivers hybrid. - So fixed layout fixed layout has a defined container size. - What I mean by that is that the container is what wraps the content and in the example of a - fixed layout, - this container has a defined size. - And so we're looking back at that those different screen categories for each screen - category, - there would be a container in the size for each container would be defined, - and then contents and elements have defined size inside containers. - So if you have text that says, - since I container, - that text could be told to fill all the width of the container. - Or you might choose to go with some sort of grid layout, - which will talk about, - um, - in the grid. - It's individual columns might have specified sizes inside this container. - Here's a quick visual that might help you out a little bit again. - I'm not gonna spend too much time on this. - In fact, - I linked to a really good resource. - It's another skill share class on building wire frames and talks all about this. - So, - um, - so anyways, - on the right, - you see a fixed lay up on the left, - you see that same fixed layout may be falling into a smaller like tablet screen category. - Noticed that the container size, - which is represented as the the line above the green rectangle, - um, - has a fixed size has hard lines on either end to indicate that it's a fixed, - fixed dimensions. - And inside of that, - we have all the content. - You'll notice that you know the top content is maybe this header, - and that fills 100% of the container. - Where is beneath it? - You have, - um, - two other kind of columns once a little bit nearer than the other, - and but they are all defined in terms of pixels and the margins between them. - So what are the pros to this? - Well, - it's easier to customize, - and because of that, - it's, - you know, - the reasons easy to customize is because you know exactly how big or how wide, - uh, - certain things were going to be was a much smaller learning curve because you can actually - build out templates for this. - You say you're working with a team of designers you can like, - actually creates a template and say, - Hey, - here here is the boundaries that you have to design within also, - you know, - if you've not, - if you haven't spent any time in any other design styles, - this is probably the 1st 1 you've begun with. - The learning curve is pretty small. - It's much more predictable again because everything is defined early on. - So, - you know, - for each room category exactly how wide everything's gonna be, - which also will allow for a price precise control over size and position. - But there are a few downsides. - Size and position must be adjusted, - uh, - to support variant screen sizes. - So, - you know, - if you have something that's absolutely position, - it isn't fixed. - Layout need to make sure that things move around and you just the size so I can get a - little bit tricky. - It's not the end of the world, - but it's still something that does create some complications. - Um, - and if not managed properly, - excess white space can diminish impacted design. - So again we look back at those different screen size categories I outlined earlier. - Um, - a fixed with layout if it's very narrow inside of a particular scream category, - and that screen categories say at its maximum with, - um, - you could have a lot of dead space on on both the left and right hand side of your design, - and that could potentially diminish the design put together. - There are ways around that, - though. - Potential for scroll bars, - sizes and managed properly. - And your usability can suffer on by that, - I mean, - because excuse me, - because everything is fixed. - Um, - things don't necessarily flow as nicely. - And, - uh, - and as a result of that, - especially when you get down to smaller size screens, - it can become harder to kind of collapse things in on themselves. - Okay, - so up next. - So we just talked about fixed. - Now we're gonna talk about fluidly up. - Um, - flew layout is also sometimes referred to as a liquid layout, - mainly because everything is expected to kind of fill almost like a liquid. - Would the volume with size of the containers and typically your container is 100% of screen - with or somewhere proportional to that with some margins and either side and then rather - having defined size. - The content in components that are inside these containers are defined as percentages of - the width of the container. - Here's a visual using kind of the same style we did for fixed on the left. - You would have, - maybe your tablet screen category on the right. - You had your standard laptop screen size category. - You see that the dotted lines with the arrows represent some sort of flexibility, - and that flexibility is a percentage. - So in this particular example, - it's 100% of the screen with the margins and even the content that lives inside in the form - of continent elements. - Those or even percentages as well. - Eso maybe you have, - like a sideboard Sidebar is defined is under 30% of the total container with and so as you - get smaller and smaller, - it gets narrower and narrower, - Um, - and again it allows everything toe look fairly similar, - whether it's on a large screen or a small screen. - So there's some pros to this obviously adjustment to screen sizes much easier again. - Percentage. - Um, - white space is always relative between screen sizes, - so if your margins are 10%. - Uh, - you know, - on a screen is 2000 pixels wide. - You know, - like that gives you a margin of was it 2200 per 200 pixels. - You avoid scroll bars almost always because everything kind of compresses and moves - vertical. - So if you do have a scroll bar will be vertical, - which you usually will avoid the horizontal school bar. - There are some downsides, - though, - Um on larger screens, - the content can appear overwhelming. - For example, - imagine you are building a, - uh, - a video website and you want to show a bunch of videos. - If you go with fluid website, - um, - he might have so many videos running across the screen that is just so overwhelming because - everything is fluid. - Or maybe you have rows of information on because everything is fluid within the rose, - you have a bunch of dead space on small screens. - Content could be compressed horizontally, - making it difficult to read. - You're less control over design and site elements, - and by that I mean, - because everything is percentage based. - If you want to like position things that you can use positions in terms of percentage, - it's still become somewhat difficult to exactly predict where something's gonna lie. - Media and other assets of defined size may become stretched or compressed. - Guns can require some creative workarounds. - All right, - there's 1/3 principle called elastic layout. - This isn't so much a, - I guess principal layout like with fruit fluid and fixed. - But it has more to do with how things are size. - So come with elastic design sized all elements with EMS, - not pixels. - So with fluid, - it was a percentage with fixed. - It was exact pixels here were saying that we're going to use this term called EMS, - where an M is a scalable unit and em is equal to the current font size. - So, - for example, - if the font size of the document is 12 points, - one N is equal to 12 points. - So if you were to have a header, - your header could be two M's, - which would make it 24 points. - The benefit to this is that elements grow and shrink relative to the base font size um, - and sizes based on user preference. - So if you have a user who has enlarged defining their browser, - everything scales proportion, - and also you can set up your the size of your containers the size of your elements, - the size of buttons, - etcetera, - all to be based around that same percentage of EMS, - which prevents things growing oddly larger than others. - Everything kind of scales in proportion. - Um, - the main make ours is kind of difficult to master again because it's some of more. - UM, - it's based around proportions as opposed to exact pixel size. - So because it's not pixel perfect, - it makes it harder to create precise designs. - So there's a final one, - which is the high road layer, - which is kind of it pulls from the best of all three approaches, - allowing certain elements of your site to remain fluid. - For example, - navigations or big mast at Banner's other elements can be fixed like images or articles or - button sizes, - and you can use elastic principles of elastic layout for things like typography. - Furthermore, - you could adjust your code switch from fluid to fix at certain screen sizes, - and I'll get into this when I actually walk through my example. - Okay, - mobile first. - What is that? - Um, - I wrote about this, - at least in the introduction to the class. - You might have seen this tossed around online. - It's really just a guiding principle that states that you should really design for the - phone first. - And it's this, - I guess, - balance between, - um, - or debate between progressive enhancements to your side versus a graceful degradations to - your site. - There's a school of thought called Mobile First, - which states that you designed for your smallest screen first and enhance the experience as - opposed to degrade the experiences you go from larger to smaller. - This might just seem literally like the inverse of itself and want to give you the same - result, - but you really have to think about like what this process means. - So if you start by designing first for the phone and then to the tablet screen category and - into the laptop screen category and into the widescreen street screen category, - you're giving yourself more, - more real estate and Maura Amore, - I guess opportunity for extended user engagement through the things of like a mouse, - um, - or swipes from the hand like hand gestures like you would get on a tablet that can allow - you to enhance the information or content that you're displaying. - Whereas the opposite, - which is say you start by designing on a large screen or design and four large screen. - You might end up adding too much stuff, - not focusing so much on the content on. - And then you'll find it's a lot harder to start removing things because you didn't think - about at least early on what was important, - how things could be grouped or categorized in a way that would really allow for it to kind - of collapse in on itself as you get smaller and smaller, - you know, - sometimes could even hurt the user experience because you started losing things. - We start taking things away, - whereas the opposite is a little bit more enjoyable because you have already informative - and usable experience that focuses on the content. - Still has a great design, - is usable, - and then, - as it gets larger, - suddenly becomes mawr and Maurin Formative, - Mawr mawr aesthetically pleasing and and additional elements become visible on the screen - that weren't necessarily deem critical for the functionality of the site, - but suddenly enhance the experience so you could just walk through these bullet points - really fast. - So by going mobile first, - if forces you to simplify your content when you think about it, - um, - you know, - mobile mobile devices are almost always managed in portrait mode, - which lends itself almost exclusively to a single vertical method of navigation. - People's kind of scroll up and down the page is very little side to side, - so you really have to think about what content is important. - What do I need? - Tohave here kind of stripped things away. - It makes you focus on the essentials. - What's necessary here. - Can I combine things can consolidate things is a really necessary for me to have, - uh, - two buttons here. - Could one accommodate Exactly. - We need on and consolidate information. - One of the best parts about going overseas. - The force. - You just simplify your navigation. - You kind of start out thinking like how we're gonna get around my site and really tackling - that problem first, - Um, - rather than going straight into, - you know, - design a great master, - a bunch of cool buttons. - It's like navigations and most important part here because some he's holding this in their - hand. - They have limited time. - Their attention span is short and they're navigating with just their thumb. - So we want to make is very easy, - very intuitive again. - You'll find that because you've done that when you move up from mobile to tablet the - challenge of where I put things where police things becomes easier because you've really, - really focused in on, - um, - the user experience, - not the aesthetics. - So, - uh, - before we go any further, - I'm going to break here and really illustrate At least taking my skill. - Shared the example. - Um, - how to go from the outline that you developed into a wire frame for mobile. 3. Design The Foundation (Part 2 of 2): - Okay, - so I have open here. - The document that I put together outlining my landing page for the movie Oblivion. - I kind of walked through all of this during part one of this lecture, - Siri's, - but just to kind of recap I have kind of to find some top level bullet points here. - Navigation and introduction overview to the movie. - Some videos focus on the cast of characters, - a small image gallery, - talk about the soundtrack and then some social links in the Footer. - And each of these are kind of different blocks that I'm going to use to build out my - landing page and following my own advice, - I'm going to start by designing for the mobile phone first and then to follow. - We will then kind of extrapolate that out into larger screen category sizes. - So I'm going to open up the template mobile portrait PSD that I've also supplied in The - resource is section of this skill share. - Um, - so I have is open here right now, - and we'll quickly just kind of walk through. - There's this layer on, - by the way, - I'm doing everything in photo shop, - but optionally you could of course, - do this in any graphic editor with its illustrator pixel maters, - sketches or whatever, - but I'm just assuming that you have a foundation with photo shop. - Um, - so I have this layer here called Grid. - You see how I can show it? - And I've added some annotations in here that hopefully are useful to you. - Really? - The way that this works is anytime you see a dotted line that's illustrating flexibility, - anytime you see a solid line that's illustrating a defined size. - So here what I'm showing you is and again this follows the screen category sizes that I - established in my lecture. - You are free to change these however you want. - But at least for the mobile ones, - I would advise you stick somewhat close to this. - Um uh, - you can see here in the middle. - If I would actually remove these. - You would see that this is kind of the maximum boundary for the portrait layout for the - mobile template up to 400 pixels. - It's still considered portrait layout for mobile. - And then once I cross over into 481 pixels wide, - it would immediately move into this landscape layout. - Here. - You kind of see how that works. - Um, - again, - For the sake of my example, - I'm going to actually combine these two templates for mobile and portrait into just a - single template mobile on and just assume flexibility for both of them. - I mean, - I'll make a little more sense to you here in a second. - I've also thrown in a container that illustrates kind of the maximum with or the exact with - screen for iPhones at 320 pixels. - So, - you know, - if you're designing and you're assuming things are gonna be flexible or even fixed, - would just want to make sure that if you want to support iPhones, - that everything has the ability to at least scale or fit inside this kind of inner - container. - Um, - on the terminology that I'm using here is I show screen, - which is the actual screen itself and in container, - which is, - like I said earlier, - what actually holds the content, - and in this example, - my container has a maximum with the 4 40 where the screen has a maximum with 4 80 which - gives us kind of 20 pixels on either side as margins to the content will actually flushing - it. - Anything you can change those margins everything. - It's really this screen, - Max. - It's the most important here. - I'm also choosing to go with a single vertical column. - A supposed to any type of, - like, - elaborate two column or three column grid layout here in the main reason I'm doing that is - because I just wanted illustrate. - Well, - number one, - it's a it's a little bit easier and navigate because again, - people kind of just scroll vertically on phones. - But also, - um, - I'm trying to elaborate on the fact that this this mobile first approach really is focused - on information hierarchy. - And by being vertical on Lee, - we have we have to focus on information higher because everything is shown in order. - Lee nearly down the page. - Okay, - so let's see, - I think I even have some guides set up here. - So I'm gonna remove these ones for the iPhone because I'm just gonna fit everything to the - max size here and assume things are flexible and get smaller. - Um OK, - so let's open up my doc again. - So I have navigation introduction, - those kind of first you sections. - So what I want to do is for my navigation is I'm gonna start creative folding here just - called navigation. - And instead I'm going Teoh for instead of showing all the links, - um, - upfront, - I'm gonna have my navigation be somewhat hidden. - Um, - and that way, - people aren't immediately presented with the navigation. - Also, - because this is a one page site, - navigation isn't quite so important, - but I'm still still putting navigation in for this example, - so you can apply it to the other designs you do in the future. - Um, - So what I'm gonna do is I'm gonna create I don't know, - little, - um Icahn. - Right. - So me high discreet for a second, - Uh, - and I'm gonna use again the kind of you I convention that you're probably familiar with - three lines, - which kind of illustrate a, - uh, - a menu and move them up here the top rate. - In fact, - I think a minute maybe put them inside a circle, - something like that. - Make sure they're centered. - And I'm not really gonna go through everything that I'm doing here. - I'm just again assuming that there's Do you have a knowledge of photo shop? - Okay, - so that's gonna be my navigation, - but maybe give it a little bit of transparency, - and so this will sit here and then if you click this, - um, - so video is called this button and we'll call this, - like, - navigation closed. - Then if you click this, - maybe it'll toggle navigation open, - and so we can maybe throw in. - Let's see a couple rows here. - - Okay - , - so this could be maybe my first link. - Just be like Lincoln number one, - and this is a wire frame. - So it's not is not to be, - uh all the fonts that I want to use is just to give me an idea of where things are gonna be - placed in just rough sizing of things. - Um, - so it's just center that in the box and maybe make it just a little bit shorter here, - like maybe 60 that we link one to. - And I think I admitted you five links, - one for each of those sections. - And my Google doc that shows my site outline. - Cool. - All right, - so with a black back around, - this would be kind of what it looks like. - I kind of see you even kind of left these borders a little bit transparent. - You see some color coming through. - Whatever. - Um and then maybe the button, - even like changes from these lines to you. - Close icon. - Something like Oops like that. - So when the users look at this, - like, - kind toggle like that and maybe you animated or something, - but I think you get the idea. - We start with a very simple navigation unfolds. - You could add some nesting here or whatever you want. - So you know that works. - I think. - And, - you know, - we would probably do some testing to see if this circle is like the right size. - Maybe needs to be bigger for the thumb. - I don't know. - Okay, - So go back to a Google doc. - Let's move on. - Duty introduction. - So the introduction would imply that something we start with, - somebody's gonna creating box here, - and then these air wire frames, - they don't have to exactly what's gonna look like when it's done. - But, - um should just give you a rough idea. - We're replacing things. - So on issues a lot of black and white and then just transparencies to help me establish, - like where things are. - So this is my baby. - My header. - Maybe it's a little bit darker. - Maybe I changed my butt. - Just like white or something. - No. - So it stands out more. - It's a navigation would actually flow on top like that. - Um, - and what we want when I put the movie title in logoed in the release date and imagery. - So maybe the imagery could be this great box. - Maybe it's like the artwork for the movie on. - And then we will put maybe another box here. - And that could be the logo. - Remember me? - And then why wasn't maybe a little bit smaller beneath it, - And this could be, - like, - released information text just a little bit smaller. - Shrink this somewhat. - Well, - this would be what we're looking at roughly for the introduction to our page. - I think the cut off would be around right where my mouse is moving for something like an - iPhone in terms of the vertical size of the screen. - Maybe a little bit taller for newer phones. - Um, - we overlay the grid. - If all of this is again, - is a soon flexible um, - you know, - even the logo kind of fits inside. - If assuming the logo is even a fixed with, - they would still fit within the size of this container. - So that works. - And so that crosses off the 1st 2 sections here. - You know, - we started with the most important thing with how do you navigate the site? - And then we introduce the user to what we're seeing. - So let's move on to this next action overview. - So this is like, - what is this movie? - We're gonna do? - A plot summary? - Uh, - maybe a poster. - What's the rating? - The movie details Xterra. - So rather than actually, - like, - design all this out, - I'm just gonna create a section here, - um, - called about you make my document little bit taller or a lot taller. - Okay, - so here I'm not even gonna, - like, - try to lay anything out because this will probably be very text heavy. - In fact, - I doubt don't even have room for the poster. - When you consider everything else that I want to put on this page text darker. - We want to do what? - Plot summary director, - producers, - other meta data. - Yeah, - yeah, - yeah. - Okay, - so we'll put that here. - And maybe this block arrow comes down to, - like, - like, - around here somewhere. - So it's just added guy there, - something like this. - So, - you know, - I could see maybe there being, - like, - big block text here and then maybe like some, - like a table of information like that, - we'll see. - And that kind of stuff we can really worry about more once we get, - like, - actually over to design ideas. - This is just what we're gonna place the content for movie overview when we know that it's - going to be text heavy. - So, - you know, - were somewhat limited and will mostly just be content focused. - I'm not gonna put the poster here just because we're starting with a big image already in - the header. - And it would be somewhat redundant, - especially on the small screen, - to try to cram a poster as well. - Okay, - um, - next we want to show some video, - so let's start on that. - So, - you know, - here I'm saying that the requirements for this project is I want to show some trailers and - featurettes. - It could be, - you know, - 3 to 5 different videos, - and and I guess one option would be, - you know, - I could show maybe, - ah, - video here and then have, - like, - a, - like a play button or something, - like, - right in the middle. - And I could, - like, - maybe mirror this down the page. - I mean, - you can see how quickly this can get out of control, - though. - we've got 53 or five videos like that's a lot of scrolling to do a lot of big videos in - your face. - Um, - so, - you know, - one thing that we could do here, - um, - as we could try a some sort of navigation between the video. - So let's start with, - uh, - placing her video here. - Do that will be one video right here. - So we'll even put maybe a like a big but like that in the middle of the screen, - this will be like our play button, - something like that. - Maybe even show like the movie title beneath it with some metadata. - Like how long it is or when it was released, - That kind of thing. - Um, - OK, - so that's one main movie, - but what about the rest? - So, - um, - let's take advantage of some horizontal scrolling here. - And so, - without actually having a scroll bar, - we can still kind of mimic some of that sideways navigation. - Um, - by taking the screen with may be divided into segments. - Um, - like this. - So what we have the screen is 480 pixels wide, - which is divided by 360 pixels. - So that's one movie, - maybe This is the second movie. - See, - I'm just using the shades to kind of create boundaries. - Pretty simple way creating your wire frames. - Uh, - I want that little bit darker. - Cool. - So, - like, - I could definitely see like this working where? - Maybe, - um, - you scroll down the page, - You end up on this video. - This is like maybe the feature video. - You click it, - it launches the video either here, - or and some sort of uses me to the quick time player, - the YouTube in bed player, - whatever. - And then down here for these three blocks down here, - you could scroll. - Maybe there's, - like, - a whole nother set, - Um, - that live to the side of it like this. - And then you can literally, - like, - start scrolling like this site aside, - and it would end on the last video. - Something like that recall. - Um, - so that would be the video block. - Ask your that. - Casting characters. - Okay, - so this one, - um, - there's a couple different options. - We could go. - We could just go with, - like, - some simple tax in the last maybe some small photos, - but, - um, - I think we'll go with something a little bit more creative here. - Uh, - maybe frame out the like head like like headshot of each of the actors. - Um, - you know, - since they are the Stars movie anyway, - So it's to cast, - and characters will have some title Here. - You don't have titles through the other sections because to break up the flow a little bit - and then let's just do like one character block. - So what was the content said for each character? - I want a photo, - their name in the actor's name. - Okay, - so we can do Let's make this like I know sold to say Let's go like 150 pixels winds that - will be like there head shot. - This will be like the character name, - the actors. - And how many did I say about, - like, - six or Sonia? - So it'll be each character, - and we'll just let them flow like this, - starting to get kind of told. - There's like, - a couple other ways We could do that. - But, - um, - again, - we want to keep kind, - going back to his grid and like for something like the iPhone, - we tried it. - Maybe Kramnik's into two columns. - It could get very claustrophobic, - so we'll go with this for now. - We just for sandy spiced space that's out. - So that's characters. - Okay, - so then what's next? - Images. - So I really like the approach we took for the movie player. - Some interest mere that again for the images. - So act like one main image in and like, - a gallery beneath it. - Let's take this down here. - We don't need this button with the text. - Really? - You could just be that maybe we even have, - like, - I don't know, - some arrows on the side to navigate something like that. - You did? - Yeah. - Do you kind of go back and forth between the images? - A music? - Okay, - so we're almost almost at the bottom here. - Um, - let's make this a little bit taller. - Some music. - Um, - I don't know exactly how I want to leave this out yet, - so let's just go with, - like, - kind of a generic lock here. - Um, - all included album art as, - like, - one of the things that we'd like to do, - but not necessarily a requirement. - So we have an album over you. - It will give album cover and play Pause controls. - Artist. - How? - Release label. - Wrong rest bar U s. - And maybe even like some links to purchase, - like by or street links. - We just know that this block is what these we're gonna be dedicated to. - They make this Texas with bigger. - So, - you know, - that's the main section. - Cool. - Okay. - And then we'll just end the site Pretty simple with, - um, - just the footer. - Call its music Twitter. - And so that's our wire frame for mobile. - Pretty, - uh, - pretty simple. - I mean, - that's kind of the point of a wire frame. - Lets you kind of see how everything is distributed in terms of information. - Again, - this is a mobile first, - uh, - um, - design. - So, - you know, - we want to make sure that, - uh, - really the focus at the top is the most important information. - And then, - you know, - as you get further down the page exposes more detail, - but not quite as critical that there's some sense of navigation now that navigation is - familiar and obvious. - Each of these links would take you down to one of these sections. - Um, - and it's focused really on content. - You know, - like if you were to go from this wire frame and to design, - you know, - there's there's certain areas where you have room to play with in terms of like background - colors and fonts and things. - But really, - it's content heavy, - and that's how most of the small screen design should be. - So, - yeah, - this is the mobile design. - Let's look at it just real quick and now a distraction. - Okay, - so you just watch me walk through the process of taking my outline for my skill share - project. - The movie Oblivion and creating a wire frame specific for mobile devices released the - mobile screen size category. - By designing for Mobile, - we define the information hierarchy. - Uh, - we simplified our navigation forces to focus on content, - and we improve usability and now is the screen size grows. - Two tablets, - laptops and larger. - We can use the added real estate to enhance our layout and open new avenues for aesthetics - to play a larger role. - So it's introduced grid based design. - I'm not gonna spend too much time on this. - Yeah, - there's there's countless Resource is online, - I think, - to just a few bunch of skill shares on this. - But let me just hit on a few things with what grid based design means. - Um, - there are defined number of columns per container. - A row. - We went over what a container was a container is defined as a A. - If a block in which elements rows, - columns etcetera will be placed in those containers are, - um, - either percentage or fixed size of the total screen size, - which getting place back and she fixed or fluid based design. - Um, - And so, - in a grid based design, - you have, - uh, - columns. - You know, - eight columns, - 12 columns, - 16 columns, - whatever. - And they're set number of columns inside each container or row sometimes rose or even - nested inside containers and columns of defined this fixed or fluid. - So if your container is fixed with, - um, - that your columns are likely fixed with if you're containers fluid than your columns are - likely, - the margin between columns factor into the total size of your container row. - It's something that's important to remember you'll if you actually look at the templates - that I've supplied here, - and the resource of sections will make more sense. - But you know your container has a size to it. - Your columns have sciences to them, - even if they are percentages. - Regardless, - margins do factor into that size. - But by leaving your columns empty, - you can actually impact your design so you can add extra white space between areas which - may be allow somebody to focus their eye on something or does a better job of separating - information. - So how wide should roads be? - Um, - you know, - as you move from a strictly linear vertical layout to grid, - really kind of dictates dictates that for us. - So I mean, - if you think about it in the police and mobile example, - we had one single vertical column. - If you were to look at it like a grid based layout, - it's a great big layout with one column, - and that calling is fluid. - That container is fluid, - um, - and so now we're gonna move from linear single column into grid with maybe 23 or more - columns. - Um, - the content spending columns horizontally, - long rows and rows run vertically down the page. - And what that means is that, - um, - your columns will go, - will live and run horizontally across the road, - so row is kind of think of it, - like spanning the horizontal axis and your college spending the vertical axis. - You could choose to you to span 12 columns of 12 column grid with content. - You could span two columns of the 12 column grade, - and the remaining 10 columns could be left blank or filled with text. - But either way, - those rose kind of become your blocks with smaller blocks inside of them that are columns - and in those rows are stacked down the page. - So now I'm going to walk through the move from Mobile two tablets. - This is really probably the most difficult layout shift to master just because it's the - biggest at least fundamental shift in the way you have to think about design because we're - moving from. - And when you move from tablets to larger screens, - your defeat your decisions are focused more on really relative size changes like wider - columns or bigger fonts rather than the major shift instructions. - That's why you know, - this this move from Mobile tablet really is a huge structural shift, - not just science shift. - So I'm gonna walk through that as well for you right now. - Okay, - so I have pulled open the template that I put together for the next screen size category - that we're gonna move into, - which is tablets again. - Tablets were saying ca NBI, - both landscape or portrait. - Um, - I also have open the wire frame that I did for, - uh, - my mobile template, - which I've also kind of refined a little bit more since we talk. - So and also play all of this again in the scale shares. - You can access it for your reference, - but this again has been laid out. - Uh, - with all the content that we had outlined in our Google doc here with the constant outline - . - So we really don't need to reference this anymore because you already structured or content - here exactly how we needed to be laid out A t least in terms of information hierarchy, - something close, - that so it's kind of go section by section here, - only gonna walk through a few because we're already kind of past the hour marker for this - video. - Um, - so let's start with this first section. - So do just little side by side here. - Unfortunately, - I don't think I can make my video responsive, - So if you're on a smaller screen, - hopefully this is still somewhat watchable. - So I guess before I go into this, - let me just go over this grid real fast. - So, - um, - going back to you the screen size category discussion? - Um, - we have a minimum size that is the cut off for a screen to fall inside the tablet screen - size category, - and that minimum cut off as illustrated here is 768 pixels, - and the maximum is 10 24 really 10 23 10 24 as we slide over into the desktop but added 10 - 24 just Photoshopped files a little bit nicer. - So anywhere between 7 68 and 10 23 will be this display. - Um, - and we've also laid out a grid in this grid is not fluid. - It's fixed. - It has a defined container size Um, - which is here defined container size 724 pixel. - So all content that's on the screen, - assuming it completely fills the container, - will be 724 pixels wide. - So if you have a just big paragraph of text, - it's gonna be 724 pixels wide. - The frame, - which includes the outer margins of the container, - is 744 pixels because each column is gonna have on either side of it 10 pixels of patting, - which means when two columns are standing next to each other, - they create 20 pixels of patty or the margin between them, - Um, - and this dark, - a solid pink line here that cuts off and suddenly turns into a dotted line, - illustrates where the cut off is for a minimum screen with. - So even when the screen is super small, - there's still at least 20 pixels on either side of this content frame for the content to - live in, - which makes it still nice room for being able to read the concept. - Okay, - so an I V and if you hiding, - show the grids, - you can see all the columns here. - So if you're doing this at home and you're using my template, - you know, - you at least have a starting point to start kind of locking your content to grits. - But we're only doing wire frames years, - so let's kind of dive into it. - So the, - um, - let's start with, - I guess, - the navigation, - since that's our first layer. - So for a tablet, - having this kind of hidden navigation isn't quite so critical because we have a lot more - screen space to work with. - So I'm gonna actually break this out, - um, - into a dedicated area for a navigation. - So let me go ahead and just answer outer guides to make this a little easier. - So I'm gonna create a box here. - Little rectangle in this rectangle is going to house the navigation. - Let me hide my greed for a second. - And what were those links that we had about the years? - Cast images of physics. - So add about you make that will smaller videos cast music like a missing one. - Images on three. - Okay, - and we'll just give them some, - like, - even spacing Here. - You can find this leader. - Consider it right in the middle. - Maybe we'll show like an active state for one by making your all white. - The other one's a little darker. - Okay, - that's our navigation again. - This is following the flow of what we had for mobile in terms of how information should be - presented to start with navigation and move into our introduction. - So next we will civil Call this navigation. - Now let's do introduction. - So I really like that big large graphic that's behind it in Mobile. - And I kind of want to carry that over here. - Someone put a big image that spans the entire with. - Let's go down for 50 or something like that, - and we'll even move over the logo like that. - Center that as well. - So the logo on the information will be a fixed size center where the background, - we'll just kind of crop on the right and left hand side reseller navigation. - I think we really cool and maybe move the navigation here. - You know, - just try to make sure that it's like somewhere relatively close to the above the fold mark - on the page. - So here we're showing around 500. - It should be good. - And the cool thing is again because we're doing at least the third option that we discussed - in lecture one. - We can keep all the code identical and simply just use CSS from a developer standpoint to - just change how Wallace's position, - where it's positioned, - we don't even have to duplicate two menus, - one for mobile and one for, - you know, - tablets. - Okay, - so that's my intro. - That's my navigation. - You make this taller Really tall. - Next, - we have movie overview, - so I left off the poster last time. - I think I want to bring that back here. - So let me put my grid try to finally out. - That works since you about Holder. - So I'm just gonna create a box here. - Her rectangle that should represent Thea movie poster. - It's giving about that size. - Then we'll create another box. - May be off to the right, - lined up. - All right, - so this will be our content about the movie, - and this will be the actual poster itself. - So it's just save ourselves and time. - Just copy that over. - It's a movie overview I envision is probably is like, - you know, - maybe a big paragraph. - That's the summary. - And and some, - like, - kind tabular looking data just beneath it. - I have to go too overboard. - And then we put the poster over here. - No, - kind of set it off nicely. - You know, - we have this, - like center look. - Gonna create this like someone of a pyramid here. - Maybe a little bit more spacing. - Cool. - That's our about section. - Now we'll move into this video. - So I really like this idea of having, - like, - one large video and then maybe like three smaller videos that you could potentially - navigate if you had more. - So it's kind of roll with that. - We bring this over so we'll try to keep somewhat even spacing here. - 12 Israeli middle. - Okay, - so there's the original size Let's to do what we did for the header and make this - background like fill the whole screen. - Nice impact. - Maybe even a little bit taller, - too. - It's going for 50 something like that, - and then we'll make these thumbnails kind of span down here. - Maybe they have thumbnails themselves or something. - Actually be really cool if they laid on top of the players. - Let's make this even taller. - Let's go like 600. - This is 10 24. - So have them. - It's each be even as 1/3 of the page. - So we'll do 341 pixels wide and maybe 140 pixels tall. - Something like that. - Let's go over talk we got There we go cool on. - It would be really whom just maybe set a set. - This is there, - like a background behind all these videos and then, - like the video that's active could be like darker or something to indicate that it's active - . - Maybe have a label or something on it. - So there is our video and in each thumb now we can do maybe, - like for each box represented you video some nail, - be the video title. - We had fours on now playing video every year. - Cool. - So let's make this may be smaller. - I like it. - Okay. - And we can just, - like, - literally duplicate that for all of these. - Distribute them evenly ID backgrounds for the ones that are playing. - Presto. - So that's our video player. - And it really does play nicely into the least that kind of layout or paradigm we establish - removal progressively enhances as we go from less information, - but still usable tomb or information equally is usable a little bit more visually - attractive. - That Servia player. - Okay, - so for the characters, - let's well, - we had here. - We had this, - like, - vertical stacking. - Maybe now we dio we think two columns. - Yeah. - No. - Three. - I think we have space for it. - So we'll do since we have 12 columns and spread 1234 23 43 for it will be four columns per - character, - literally. - Just duplicate that. - Do you have to sit and they literally Phil the with text wise of that area. - Maybe the circle has a defined size to it just so it doesn't look so chunky, - and then we'll just add it beneath. - So now we have nice little great of characters there. - Cool. - All right. - For the images. - I mean, - for mobile. - We had the images mirror the exact same way we did the videos. - But let's try to break it up a little bit now that we have more room and let's do like a - big grid images. - I saw the sun, - one of the squarespace templates, - and I thought it was pretty cool. - So let's try it out here. - So we have 224 pixels wide divided by four 2 56 Give me - three bites, - you aspect ratio. - Okay, - so just go like this across the screen. - Maybe just for the sake of the wire frame. - So they look different. - Make one white and one black. - Really? - You keep percent. - Here we go. - Do you check her pattern here? - Awesome. - So there's our images, - maybe like you can hover over them, - I guess because his tablet you couldn't have her, - But you could, - you know, - click them or swipe maybe between them. - And then it pulls up an image viewer that you can like navigate between, - um and this would all just this would be flu. - An example of fluid. - A fluid layout inside a thick script. - So getting back to a kind of a hybrid discussion, - you know, - here's our grid. - Certain things are on the grid, - so you have, - like the about Section four columns, - five columns calling between, - um, - navigation. - Uh, - the characters follow this three columns with two rows. - But whereas the images there's four columns, - each column is 25% no margins into that way. - As the screen, - it's more more compressed. - So did they. - All right, - we'll end with the music section and finally the footer. - So a lot of stuff we want to show here, - Let's try to take a note. - Maybe from what we did for these posters this introduction section Sorry, - the about section bring it down the page and just to kind of break up the flow and also to - illustrate how you can use the grid, - I'm gonna bring this poster in one column to create some empty space. - Make it square like an album cover would be do the same thing for yes, - - was - that we had here. - See, - you don't need the 1st 2 were you? - Some think that maybe even give it a cool background. - Maybe it's like the album art, - but, - like, - larger blurred out or something just to kind of break it up. - So it's not white, - black, - white, - black, - white, - black. - Um, - Okay. - And then let's just end it with the footer. - Super simple. - Better kind of show these in line. - Now this. - There you have it. - Well, - one thing I want to fix alone. - There we go. - Now, - that's a very cool. - So we've still accommodated all the information here, - and, - uh, - you know, - we haven't had to sacrifice anything going down in mobile size. - Um, - and we've actually been able to add a few things like the poster. - Some more information on these movies. - You know, - we're not seeing mawr images that we could maybe add some cool navigation to something. - You have an album cover with some controls on it. - So, - you know, - we really have enhanced the experience. - Um, - all right, - so the final step to this would be to take it from tablet up to ah, - a desktop and wide screen layout. - So I'm going Teoh real quickly show you because I've already kind of pre made those designs - . - I'm just gonna open them and walk through real fast for you. - um, - and just can't explain some things that I've done different. - Okay, - so in part two, - which has been pretty fairly long video Siri's you know, - we've walked through, - um, - principles of wire frames, - talked about fluid verse, - fixed layout. - We've talked about orientation in terms of portion verse, - landscape we've gone through. - What's elastic design? - How you combine all these layout approaches together into one design. - Um, - we've talked about rid basically out. - We've talked about mobile first and why it's important for you and so not even walk through - how to take your outline. - Build it into a wire frame for mobile, - how you can translate it from mobile to a tablet. - And I'm gonna show you have already pre built the wire frames for the standard screen size - category and for the wide screen screen size category. - And I just want it just hit on a few things real fast before kin 4. Designing for a Responsive Website (Part 1 of 2): - you guys, - This is John again. - Welcome to part three of my skill share on responsive design. - This part's on applying your design. - Really? - This is kind of the, - um I guess more of the fun part where we've left, - uh, - really focused on principles we've left. - The folks should focus on structure and foundation on. - And now we're really applying mawr of, - I guess, - the unique element of our site, - which is the design branding color scheme Font choice, - etcetera. - Um, - I will not be going into that and detail. - In fact, - for my skill share project for the movie oblivion, - I'm simply just going to be showing how I applied my design to my wire frame. - This is not a class on aesthetic design or visual designer. - You I design. - It really is the class focusing on structure as it relates to the grid and how that - translates across different screen sizes. - But there are just a few points that I want to hit on things that you might want to - consider. - So let's run through it real fast. - So here's where we left off just to recap. - Uh, - we talked mobile first, - build wire frames for mobile then moved tablets, - laptops and larger. - How much larger is kind of to you? - Um, - create divisions using the outline and creating part one bill divisions of content - outlining each, - uh, - and what will be displayed in each even placing constant placeholders for reference. - And then finally, - responses so illustrate how those content divisions would move scale reposition, - etcetera between the various screen size categories. - So what's next? - Well, - design. - But there's a Like I said, - there's a couple of things in terms of design that might be, - um, - important for you to know about. - So let's talk about font size for one. - So, - really, - aside from selecting our farm like what kind of fought face there were going to use here? - I'm using, - at least in the slide deck Proximate nova. - But how did I choose to make the white font above this larger than the one beneath it? - So it's really important, - especially for were designed to decide what size are fun should be and how that translates - between different headers and between paragraph text, - um, - and how this plays into a responsive website. - So whether we use pixels or EMS, - size should still be assumed relative to paragraph funds, - so we kind of picked the paragraph as like the I guess the primary unit of measurement. - Everything is smaller, - bigger relative to that. - Headers grow increasingly smaller, - though they typically will remain larger than the body or the paragraph Fun. - Choose a screen size category as your base, - for example, - the laptop, - and then define your find to scale larger or smaller when moving between these different - categories. - So before we go any further, - I'm just gonna jump over to, - um, - its style guide for the website that I'm working on from my company, - h one and kind of give you an idea of how this actually works in practice. - So this is still kind of work in progress. - But you I guess you know we'll see Peak. - But so this is Ah, - sometimes it is a framework that I've been developing that's a derivative of Twitter's - bootstrap framework, - and it's been kind of something I've been developing for probably the past year now. - But in terms of my style guide, - it's still somewhat familiar for those who have used Twitter. - Bootstrap. - So here I am on a super wide screen monitor, - and I have all the different headings laid out here. - I have my body copy kind of showing margins between paragraphs comes and lead paragraph - text, - even some lists. - Right? - Um so let's shrink the size of my screen down to the screen size category for, - um, - for laptop. - So this is the screen size category for a laptop. - So I still have you know, - the text here. - Nothing's been hidden or whatever, - but as I get larger, - I slightly increase the margin seen here, - Aziz. - Well, - as the line height has become somewhat more obvious once I go from the standard or laptop - screen size category two tablet. - So there you look as we go down to the next size, - which is 10 24 10 23 threshold notice my headings become significantly smaller but are - still legible. - I mean, - you could imagine seeing this on a tablet, - and they would still look large to you. - My paragraph body has also decreased. - Even the margins that I'm using on the page have got smaller. - So, - like, - for example, - I don't know if you're seeing this scroll the way I am, - but this margin here between the top of the tea and the bottom of this header gets a little - bit smaller and all that is somewhat proportional. - And then, - of course, - as we go down even smaller and hit the mobile screen size category things getting even - smaller here. - So you have some flexibility in here. - But the whole point of me showing you this was I was trying to show that, - you know, - it is not just about picking a fun. - It's not even about picking sizes for headings and four paragraphs, - but also thinking about how the size of those change in your different screen size - categories. - So as you approach, - uh, - this third phase of your skills share project and you actually start laying out copy and - putting pictures and building out margins in your wire frame to create your completed - design, - be thinking about you know, - should I increase or decrease the line height or font size here for this particular screen - size category? - Okay, - so the next thing I want talk about some to consider is is what's referred to his response - of text. - Um, - so this is pretty simple. - It's simply delivering varying amounts of content to a device based on screen size, - and this isn't something that you have to dio Actually, - it might be advised against, - but essentially, - the idea is you know, - say you have a blawg post on a page or a syriza bloc post and somebody is expected to - scroll through them. - And on a laptop, - maybe you show the entire block post. - Or maybe I don't know, - 1000 characters from the block boats, - but then on a smaller screen to avoid something having to scroll really far down the page - to get to the next block post, - you shrink that number number of characters from 1000 down to maybe 200 characters. - Um, - I've also seen this in practice for navigation where maybe you have, - you know, - six links in your navigation and then on a tablet, - you show four links and then maybe on a phone, - you know, - you don't show any links because now they're nested beneath header. - And even then you may still choose to limit the number of links that you show. - Um, - there's some pros to This allows you to limit the amount of on screen text to better - complement your screen size. - It also allows for refinements and improvements to the user experience by stripping away - options or content that could otherwise clutter or confuse. - Um, - unlike anything, - there's some downsides to it as well, - so it's difficult to maintain, - especially in constant heavy sites. - So unless, - of course, - it's all programmatic, - and you risk losing critical content, - our actions. - But you know, - if you're going to your design and whatever it is that you bullet it out or you outlined - for the needs of your site. - I mean, - fortunately, - if you started Mobile first, - you shouldn't continue surprises. - But you know, - as you get larger, - you may choose to show mawr text or more options. - But again, - as long as those options they're hiding, - don't hurt the user experience in any way. 5. Designing for a Responsive Website (Part 2 of 2): Okay, so this brings us to the third part of your skill share project. Really? The final part of your skill ship project, which is to finalize your website design. Um, where you actually apply a design to the wire frames that you've built out? Um, for, I guess, for completion for the seal share project. This is the last phase. There is 1/4 part to this project, but it is optional, and it's on development. It's fairly short. Feel free to watch if you want. For the rest of you, this is really the end of it. And I'm just gonna walk through just kind of how you might want approach this. And then I'm gonna actually show you how I applied my design to the wire frames that I walked you through. In the previous lecture, eso first is designed. Apply your site theme or aesthetic building user interface that complements your sights topic and showcases your unique style. I'm really looking forward to that preview. Use your phone and your tablet to preview your design and make adjustments and improvements as needed. It's definitely important if you're running a Mac, you can install X code and get the simulator and you can actually pull up the image and ex code. Or you could just literally email yourself kind of a cropped out image and just pull it up in the photo gallery. But this will kind of give you an idea of what the user would actually see and, of course, share it with everybody. Once you've completed your designed, share them with others, update and improve, like we all want to see what you're working on. I have opinions, other, you know, students in the class of opinions and may be able to actually help you improve on what you've done. Um and I mean, isn't that the whole point of all this? Anyways, it's a skill share. So really looking forward to what you have to show. And now I'm going to dive into, uh, my design process is Well, okay, so welcome back. This is ah, really the last leg of the journey where we take our wire frames and apply our design on top of them. So he's gonna walk you through a little bit, and then I'm just going to show you Really? Where I landed with everything. Not gonna walk through the entire process. But again, feel free, Oppose whatever you have in the skill share discussion. And I'll definitely help push you guys or her guide you guys in the right direction. So starting with this introduction, um, you know, we want a logo here, some release date, big background image. So I found some assets online. Um, for this movie oblivion, Someone pulled us over. This is some giant image, you know, if Tom Cruise walking across bridge, that's on its side. Um, prequel image, actually. So, uh, we will go ahead and mask this whole area, zoom out a little bit. You don't need to be that big when I try to keep him dead. Center in the middle have actually altered this image somewhat, too, so that it has a little bit more, um, space on the right and left to fill the screen so that, you know, on larger monitors that kind of fall outside the minimum grid, cause you know, we have this additional boundary over here. You know, there's extra stuff to show works when I see for the widescreen to just a little bit smaller, So I make sure his face it's a great in the middle of that line with his nose. Perfect show. A little bit of the bridge peeking down. Awesome. And I want the actual navigation too. You may be solid white to kind of break it up so that when we go into the grave beneath that, it's not so strange. Um, okay, we can make this black again. All right? And then let's see, I also have put together this logo they're using neutral face for the logo. Um, so I have kind of kind of, like, modified it here. It took it into illustrator and created, like a vector shape of this so I can kind of scale it everything. So we'll bring that over here. We have the logo somewhere in the middle here, actually bring back right up a little bit more, You know, something like that, right in the middle. Perfect. Okay. And in the last piece of information was really the release details. So let's go ahead and throw that in there as well. Um, and this movie come out April 19th. So it's theaters and I Max, - something kind of like that. Beautiful. So that will be our masthead. Our introduction. You've got a navigation down here. I'm gonna switch that over to the mutual face family, get bigger. And one thing we can do is put a little border beneath this. Kind of like I light it something like that. Make it this new color. Make it a little wider that way. Getting this backgrounds a little too big. Shrink it down to 80. - Perfect . All right, so it's and a little bit more precision here, so I'm gonna have the navigation actually cut off at 800 pixels down page. And then when I have the next section started 80. I worked out perfect. Um, like I was talking through in the early example. Um, I'm using 80 pixels here and the standard layout as my, uh, kind of primary margin and everything. What kind of, at least in terms of margins, will be multiple of that? So, like, uh, you know, if I want a margin to be taller, it will be like, maybe 1.5 times E if you want to be smaller, might be like 40 which is half of 80. Um, because of that, it makes it just makes it easier to like kind of figure out. You know where to put everything. So, for example, here, uh, this line here, this division Airlines 720 pixels down. So I would want maybe this to be I don't know, he pixels up from the bottom. Should be around 6 40 which we may feel too high. Let's see. No, it works out Cool. Okay, so you got a navigation. Our moved in. It's about section. I'm gonna leave it this light gray color and get works nice. It's not to, like, significant of a clash in this way. White background here causes it. Just stand out. So So the poster in Let's go find a poster online. This executive poster. I'm working with smart objects, too. So it makes it really easy for me to re scale up without losing quality to 9400 beautiful. Something like that. That would be the poster insecurity, this text. Maybe throw in a title here, blip to make these titles all news your face. Well, the thinker maybe spaces out more fearful. Okay. Okay on. And there's this summer here. Come on, IMDb. Is there Wikipedia? Just go with this for now. Mr. We have something awesome . Okay, Okay. So now what's maybe put in all that? Like, meditate. They did every talked about and all. You move that down 40 pixels again using 80 Izard Guide, Do you have his 40? - You do that? All caps there, That one in neutral basis. It's kind of like a header. Even darker. Okay, just like bringing us down. Would you like three? So I have, like, directed by written by Produced by who is that Producers? Well, wisdom the writers. You're you Maybe. What kind of nudge this up a little bit. So it sits nicely. There you go. So that could be our, like, movie block. Maybe leave and come back later and throw any, Uh, I know, like the movie rating here. It's like, PG 13 things. It's it right here. I have only have that PG 13 5 but you could find it and put it here. Um, okay. And then down into this video section to be rid of this in this. So let's see, um, whether images could be fine, make sure it's higher. Is I really like this picture of him standing staring up, but the waterfall coming past the Empire State Building. I just need to find this a little more landscape friendly like this. Probably find a better one, know a little bit more searching. Okay, so I found a better image. Um, So what we have it's, like, play button. So I kind of like how that looks. Anyways, Um, let's just keep that on. Do you, like, wash the trailer to be centered beneath it? And white? You can bring these videos back, maybe make each of these titles Neutra face and text like Helvetica or something. So this could be, like theatrical trailer and, you know that still hosted routes 10. 28 13 run time 2 28 Something like that. Practice a little smaller school. And even for the video, you know, we could, uh, do you like a smaller version like this could have, like, the actual play button on it, too. Like that. It's actually make that the same blue that we've been using appear little bit of color. Let's make this from blue to So now there's some continuity between the play Blevins in terms of color and shape. Instead, something like that. All right. And we could you know, Throw an image behind this for, like, the thumbnail for the movie. You can make them all like that. We're going like that. You know, the movie. It's active. Is this, like, darker color? Um, get even. Do you, like, maybe a little now plain label or something about it? Something like that. You the idea? Um okay. And then, you know, it kind of follows convention down the page. I'm not gonna go through the remainder of this, but essentially, you know, you start filling in your wire frame, making sure things are similar, consistent in terms of colors and fonts and really working on making sure that you keep some, like, some sort of mathematical since or step ways, or, I guess more notched approached in terms of, like, margin. So here I've picked 80 as kind of my primary margin. So and I'm using 40. And I'm using, like, 120. It's all kind of divisions of that 80. Um, you know, here I would probably again use like a neutral face. Fought for, like, all caps for the name of the character. A nice head shot that I pulled from some promotional material online. I might go neutral face for the actor's name. But maybe not all caps. Um, you know, here for these photos, I could do like each of the photos, and maybe you hover and, like, the picture gets, it starts to zoom in just a little bit and has, like, overlay that prompt you to click it, you know, big album cover here. Um, someone had just work on this for a little bit and fast for the clock and show you. OK, So fast forward to Cloche. Uh, applied this design across not only my standard or laptop screen size category, but also to my mobile screen size category, tablet and widescreen. So let's just scroll down here. You can see a lot of this is still very similar. I was able to find that PG 13 logo here. Um, you know, big graphic image place replaced these videos thumbnails with some thumbnails that I found online, um, casting characters. I can have used neutral face here for the title in the title. Slightly larger here in the text for that name of the character. Um, you're a bunch of photos that I put together big collage of photos In fact, I forget which running into this one right here kind of illustrate. You know how it might look on hover. So maybe you hover here and get that Maybe Yeah, the back or an image gets slightly bigger and has some sort of, like, little animation to it. Um, just something some clever things like that. Um, and even for the soundtrack here, you know, we have album art, some information. It's got a little progress bar that you can move around some links to some external sources . In the background even is simply just the oblivion album cover. Just as if as a smart object blown up, huge, blurred, so fits really nicely in that kind of black, white, grey blue color scheme we have, um, and everything just starts to, like, play together very nicely, and it allows things like images to really pop and kind of come to the foreground. Some say this is the kind of what you would see on a laptop, even in the foot area, added some social links and and, uh, call out to the movie studio. You know, if we wanted, we could happen. We didn't put this in the product spec. But, you know, we could maybe appear at the top, but like a big buy this ticket on Fandango or something. But I decided just kind of keep things a little simple here. This was the standard mock up. This is what it looks like on a wider displays. You can see it's, ah, all fairly similar, but like some of the margins, like look here between the bottom of the about. In the top of the A movie poster in this area, you'll see that the margin actually gets bigger, goes from 80 to 100 pixels. Font sizes also get a little bit larger. The oblivion textures bigger. This text is bigger. This text is all bigger. Uh, even the links have kind of spaced out a little bit more. Here they fill up the space nicely. Um, let's move down images or bigger being somewhat proportional. Same here with these images, and you can imagine like I mean on a screen. It's this size. If I were to take this into, like, full screen mode, how do you go? You know, you could imagine during easily this. It's the sides of this design kind of stretching a little bit wider, and it's still really fill all the page really nicely. Go back to you my preview mode. So we go from standard to tablet down. Things get a bit more compressed, but there's still some breathing room. Some of the more margins have gone from that 80 pixels down to 60 and you can you can actually opens PSD I've added it for your reference. So you can actually see where added these horizontal guides here and this particular instance Here I had the links kind of centered in the space between each of these links was 40 pixels, and now I have the links hitting the edge for the boundary of the container. But you really again kind of reinforces that the kind of at least rectangular nature to this. Um, you scroll down, you know, just like we had the wire frames, the videos of stacked vertically here three by two, great of images. Same thing here with these images, player. Yeah, so just see it stander. And then down into mobile. That's that tablet to mobile jump. We now have this button for the navigation which kind of like respect like unfolds. You could if you wanted, making me push the content out or something. I think it be kind of cool. It may be as you scrolled us. Ring stays in place so you can always reach the navigation from anywhere on the phone. The text here resembles the general like layout that we had in the grid based design. Except we've removed the poster just because really isn't necessary just because it's on either end of this block of textures of big image and another big image. It's just somewhat redundant, but you could have added it if you wanted. Even down here we have, you know that we've managed to can't keep these images. You just pulled the text up like we had in the wire frames, moved it up into whatever the currently playing movie is, and you can swipe between these. If there's a lot, scroll down all the characters and your image viewer. Little Grady. It fade to imply maybe you can swipe between them. We end again on the soundtrack of the bottom, which kind of looks like a like an audio player media player you would see on your phone so it's jump between those again see the grid really curious to see how you did this cool. So that is it for the skill should class, at least in terms of the primary project, I said, There's a follow up video here that you you can pull up that will walk you through some principles of development. It's pretty short, but it might be useful just to kind of get you your head thinking, um, in terms of where your things will go next. If you're a designer, it might help you at least get a better sense or appreciation for how this is gonna move into development. Um, and of course, if you have any specific questions in terms of development, you can hit me up here, though, you know, this isn't a huge form for development, but I have spent a lot of time practicing how to not only designed to develop responsive Web pages, so I might have some tricks that can help you out. Um, yeah. Thanks again. And good luck and looking forward to seeing your projects 6. Design to Development: - Hey, - welcome back to the fourth and final part of my skill share and responsive Web design. - Um, - this part of the lecture, - Siri's is focused on development. - We're not going to go into too much detail in terms of development, - but really just kind of focus on some of the, - I guess top level bullet points that would be useful to know and helping you set up, - um, - skeleton for your responsive website in terms of front and code. - Um, - I've even attached a boilerplate framework that I put together for use in this class, - and you can find that on the scale share page. - And at the end of this lecture, - I'm actually gonna kind of open that up and just walk through how you would use in practice - . - I just wanted want to hit on a few things starting with view board. - Um, - So the term view port here refers to what the users actually seen on screen in terms, - at least in terms of, - uh, - the size of their screen relative to the content being displayed. - Uh, - and with the launch of the iPhone, - apple rolled out a rolled out this actual met attack called Vieux port where you could - change or alter the size of the browser window as it related to the device. - And there's this ah, - really handy met attack here that I've dropped in. - So if you drop in meta for the name value place Vieux port and for content, - you can enter a range of values. - The one that I would recommend, - uh is with equals device with and that your initial scale is set to one. - So that will ensure that the browser is rendering the content relative to the width of the - screen and won't scale anything, - or at least will set its initial scale the one you can actually change that scale. - If you want, - you can change. - You can set the device with to fix with so you could actually, - you know, - put in 480 pixels. - But by setting device with you're gonna hit a broader range of devices. - So this is definitely useful for laptops. - You won't see much of an effect here, - which is good. - It will actually render how you wanted to in a laptop. - Same goes for tablet. - And I'm sure you've all experienced this when you open up a Web page in the browser on your - smartphone. - For a lot of them, - especially sites that haven't been optimized for mobile browsing, - it's Ah, - you see the entire page zoomed out. - You have to zoom in hunt around in Pec for links. - So this is really useful, - especially if you're going to do a lot of conditional styling specific to, - um, - a mobile device or a mobile screen. - What you want to set your few poured up like this. - Otherwise you're gonna kind of be fighting against the browser action, - making things larger than you really want to be on. - When I go through my example, - you'll see this. - Okay, - so media queries. - That's the next thing I want to talk about here. - So media queries are pretty useful. - They allow you to, - um, - do a lot of handy things, - but we're really what we're gonna use. - Use them for. - Here is checking against the size of the screen on and using that to either Lodin - conditional style sheets or even in line and style sheets. - Use our media quarries. - Teoh change out styles on the fly. - So here's, - um, - kind of the, - I guess, - one round you could go with regards to style sheets and using media queries. - So here I've shown come to lines that you would throw into the head of your HTML page. - Um, - the first line would be loading, - say, - your default style sheet. - Um, - that would have contained, - you know, - all the styles that you would use for, - like a laptop or a white screen monitor. - Whatever. - You know, - you're pretty familiar with this setting up to load in just a simple CSS file. - But then, - beneath it we used the exact same command, - except here we're using. - Instead of just media equal screen, - we're actually giving it kind of a boundary in which it should load in the tablet dot CSS - file. - So if the screen, - if it's the media, - is type screen as opposed to, - say, - print, - and the width is between 401 pixels and 767 pixels load in tablet dot CSS and because it - falls after default dot CSS. - You could theoretically put style over rights in there, - maybe for changing font sizes or margins or whatever. - Um, - but so this is pretty useful if you have, - you know, - different CSS files, - but say you wanna have just one CSS file. - I don't know. - Maybe you want to cut down on hits to the server and just want to have one single CSS file - . - Or that's just how you structure your code on and you kind of consolidate consolidated - everything into a single CSS file. - You can also use media queries actually in the style sheet itself. - So here's a super primitive example above you see the body attack, - and we've said it's background to blue and similar to the previous slide. - We can use this tag at media and following this format, - men with 41 max with 7 67 we can set some boundaries for which certain style should be - rendered. - So here you're seeing in between the with boundary specified the bodies background will - actually be red instead of blue. - But if it falls out below or above that boundary, - it will fall back. - Teoh blew a supposed to read, - and this is useful again, - like if you want to throw media queries kind of at the end of your style sheet or even in - line next to the content. - You know you can save yourself the headache of having him Teoh go back and forth between - multiple style sheets. - Uh, - me queers are also useful for checking against retina Images are guests against a pixel - ratio size to do things like replacement for reading damages. - So you know, - for like example, - smartphones that have retina displays or the new line of Mac book pros that have double the - pixel density you can just like you did before using the media quarries at Media's tag, - you can say, - you know, - at Media Onley, - screen a supposed to something like print. - And if the minimum device pixel ratio is too, - um, - do something. - In this case, - we're going to replace the background image for the logo element, - or the only with class logo with an image that is twice the size. - And so this will prevent images from looking blurry or getting scaled up on retina displays - . - And you can see above in the class definition for logo. - We've set the backer an image to image topping, - and that's what would be loaded on any device that is beneath the two device pixel ratio, - or really any device, - because that's just at least the default style here. - We've also thrown in some tax or background size as well as some that are Uh huh, - browser specific here and with the width of 100 pixels in the height of 50 pixels. - And so when it goes into this media query with the vice pixel ratio to its going to switch - out the back or an image, - but it's gonna ensure that the background size doesn't get scaled up by two. - So what that will do is it will actually compress or shrink down that image to fit the - proper size. - And so it'll actually look like that. - Nice, - crisp hi rez reading image display. - Okay, - so less. - This isn't necessarily necessary for, - um, - development for responsive display, - but it's just a useful tool set. - I'm something I use all the time. - There's a few others out there such a stylists and sass. - I prefer less, - but essentially less is compiled CSS. - So with less you could take advantage of things like variables, - functions, - nested styles. - And it really helps. - You kind of cut down, - um, - on the amount of code that you have to dio and helps you better organize your code as well - . - So here, - for example, - with variables on the less on the left were using. - This is the less file that you would happen. - We defined a variable here called color. - That's the actual tell you to find a variable using the at sign, - and we're going to send it to 49 to 6 F on, - and then I can actually use that variable anywhere after it's been declared. - Um, - so, - for example, - here in the header, - we're changing the color toe at Color H two to add color and on the right, - when less is compiled, - either pre compiled by some sort of compiler. - Or you can actually run some JavaScript on your website that will do the compilation real - time. - It gets printed out as color or compiled down to the color that was associated with that - variable. - So you can really expand on this into a lot of cool stuff. - And in fact, - in the boilerplate framework that I've attached as part of this skill share, - I have a whole bunch of less files that you can that are used to set things like typography - and background and margins, - and you'll see how it actually cuts down on a lot of development time. - You can also use ah mix ins, - which essentially are methods. - Some of them are common, - and some of them can be defined by you developers. - So here, - for example, - we have a mix in for rounded corners, - and it takes in a variable again with the outside radius with a default value of five - pixels. - So if you don't even specify anything, - it'll just set the radius to five pixels, - and then it applies that radius variable across the multiple vendor tax here and will - actually print that out. - So if you look on the left, - there is the method rounded corners, - radius five pixels beneath is its use and application. - So even voted here in the footer. - Ah, - I d element, - and we've called it dot rounded corners and parentheses. - We've placed 10 pixels, - so 10 pixels override the default five. - But on the right, - that's what's compiles. - It prints out 10 pixels for each of the five vendor tax there, - and this is probably one of the most useful parts of less is trying to remember all those - vendor tags, - not just for things like border radius, - but radiance and shadows. - And you could just get really messy and a nightmare and just lots and lots and lots of code - , - for you have to scroll through. - Why your development? - At the end of the day, - it's still the same amount of code regardless. - But at least when you're doing your development, - you can forget about all of that and just, - you know, - isolate all your mix ins to, - you know, - a separate file. - Um, - so you don't have to look at them and really, - your code is just you have a function called dot rounded corners drop in the variable, - and it prints out all of it for you. - Saves you a lot of time. - You can also do nested rules. - So here on the left, - we have header and we have a very A rule or a style we want apply just to each ones that - are inside a new element of I d type header. - Not each one's everywhere on the site. - And so on the left, - we show it actually nested in the brackets on, - and then when it's compiled, - it actually space eliminates it, - just like you would if you were to write out to CSS by hand. - So there you have the header on and then the h one next to it on. - And so this would overwrite, - you know, - in each one that was seeing outside there so pretty cool you could go to. - I think it's less dot org's or less CSS than or I haven't linked either way in skill check - . - And exactly where l um, - and again, - like you don't have Teoh, - um, - run the job script on your site. - You can actually install less. - I think they have a less compiler for Mac. - That's free. - They have one for Windows that's free. - Another's one called simple, - less for Windows. - I haven't actually used it, - but I know that one exists. - I use something called code kit and I'll show you that here in a second, - which also does a lot of the less compilation in real time. - It will even gonna refresh your page, - refresh the styles. - Um, - so again, - you can dio here you could do functions in terms of like operations and functions in line. - So we have some variables the border based color red and then beneath it were actually - using those, - um, - variables, - But we're actually applying, - like, - in line operations against them. - So we're multiplying the base color by three, - which you can see him in the compiled code. - Takes it from 1112333 The border left eyes set to one pixel, - and the border right is that same, - but multiplied by two. - So it drops out two pixels. - So this is really cool and looking. - If you look in the example that I attached for the boilerplate responsive site, - I used this kind of stuff a lot. - Where all multiply. - Maybe a default margin against a variable that I've set for how that margin should change - when going from default to wide screen or default to tablet and makes your life a lot - easier, - because you could just change one variable and then have that ripple across all sorts of - stuff in your style sheet. - And there are a ton of frameworks online for responsive websites, - the most popular, - which is Twitter's bootstrap I. - If you haven't familiarize yourself with this already, - I would definitely dive into It's pretty cool. - It's a really, - really robust for an in frame framework for, - um, - all sorts of styles from typography. - Two buttons has a grid built right into it as well as conditional style sheets. - So definitely useful tool. - I know when I was starting to build out, - uh, - my sights and more responsive manner, - this really came in handy. - In fact, - I've kind of built it used a derivative of this for sites in the future that I've worked on - since then. - There's also the frameless grid, - which is kind of an interesting approach to grid based design, - where it says that your least your content doesn't have to. - Your content container doesn't have to adhere to a specific frame. - Set can actually break out into other columns as your site grows and shrinks kind of, - ah, - little bit more advanced concept to follow because it's not as specific to, - say, - dropping content into a dip and giving it a set column size, - you kinda have to work with it a little bit, - but it can create some really interesting layout effects as you go between screen size - categories. - Golden Grid System, - I think, - is developed by the same group of guys as an alternative to that. - There's also a new framework called Semantic You I I don't think it's public yet it's - developed by the crew of quirky that I worked with and similar and some capacity to what - you would get offered with bootstrap and definitely worth checking out. - Okay, - so if you jump over Teoh the skill share for this part of the lecture and scroll down to - the bottom, - you'll find a link to a page on Get up that I've put up. - It's a public repository called Responsive Boilerplate, - and it's exactly what it sounds like. - It's a boilerplate framework, - super, - super minimal. - But it just has some stuff in there that will kind of get you started when it comes to - development for the front end. - And you might find this stuff useful, - or at least the way that I approach it. - You might find useful and apply it in practice. - So even if you don't know anything about, - get at all, - you don't. - You don't need to do anything different here other than simply just hit this zip link, - which is which will download a zip file of this repository. - So I'm just going to show you exactly how you do hear it. - Just it dot zip opening up in my finder here, - and everything is absolute path here, - so you don't have to worry about. - Um you know, - setting this up is some sort of, - like local building your computer. - You can just open indexation right away. - Everything should link together. - So this is what it looks like. - I just kind of dropped in some stuff is like a test here showing you have text. - You know, - it's how you could set up some backgrounds, - image, - whatever, - even a logo. - So this is the indexation mel file. - It's included in that. - Get repo. - Um, - it's pretty basic. - In fact, - if you were toe strip out everything in the body tag, - um, - you know, - this is what it would look like. - You have just empty webpage. - So it's a pretty simple shell here. - Um, - at the top, - I've added some tags that will modify the HTML tag toe, - let you know it'll penned a classy name. - If it javascript isn't detected as well as if it's Internet Explorer 789 So you can do some - really cool, - conditional styling against that, - uh, - class attached html body on the HTML text. - All right, - in the head here, - I've just kind of giving you a basic set up. - You know, - this isn't you don't have to include necessarily all of this, - But at least these are just a good starting point. - So you have a title here. - Um, - and you know, - I've added the view port tagging here for you that we discussed earlier. - Um, - I have even put in icons for not just your favor icon, - but also the icons that would be used on, - like, - apple products for home page bookmarks at the various sizes that are needed on I've linked - to a single style she called Styles that CSS, - which will open here. - And I have all of the kind of dummy markup used for this standalone webpage. - Here, - you can see it running. - So let's open up the styles folder. - Um, - inside which there is CSS file, - which is everything you see here. - Um, - but it's kinda hard to read because this has all been compiled from a less file. - Um, - so it's open, - the less file. - Pretty simple. - So I went through less already and again. - If you are not too familiar with less, - it might be worth just kind of reading through some stuff on it before finishing this video - . - But hopefully I can give you just a nice primer to it. - So this styles not less file essentially, - is what imports all of my other less files in a linear fashion. - So, - you know, - in my reset fox reset dot less file, - it's a very simple, - normalized script you can see here reset out less just, - you know, - another one of those resets taken from normalized at CSSC and get have repo on. - And then I have a file called variables dot less and variables is a style sheet that I'm - using or less filed amusing, - that contains all the variables that I'm gonna be using here, - and I've for the framework at least that I use. - I have less variables file that's, - you know, - over 1000 lines long. - But all those by defying always various variables upfront. - It saves me a lot of headache when porting things over from stuff I've done before into new - websites. - And because this is all loaded linearly, - all these variables now become available in any of the other less files to follow. - So, - you know, - here you can see I've defined, - like, - you know, - some colors. - Right? - So I have gray scale set, - um, - going from black to white. - And then there's shades of gray in between. - Great, - dark, - darker, - darkest, - great light. - Lighter, - Lightest. - I have two colors primary color and secondary color. - You know, - you could add all sorts of brand colors here if you want it. - Um, - I have a variable called link color, - which is my primary color, - and then I have hover and active, - and I'm using a mix in called Darkened, - where I can pass in the link color here and darken it by 15% or darkened by 25%. - And then I used these variables throughout the site. - So for by default, - all my links or this color, - they turn this color when you hover and they turn this color when you click on them. - Some stuff for scaffolding like What's the body background by default? - What, - where border color is going to be. - Some Z index values that amusing, - um, - some stuff for margins here, - so this is pretty cool. - So I have a primary margin, - and if you watched my videos Siris for building out my wire frames, - you'll remember I talked about having are altering the margins as you went between - different screen size categories. - So I have this primary margin, - which is 60 pixels. - And then when I goto widescreen, - my margin jumps up to 70 pixels. - Or if I go down and tablet becomes 44 pixels or 30 for mobile. - Um, - and the cool thing is, - I can then reference these in other areas, - like fonts or images. - Um gives me at least a starting point, - um, - where I can derive other values from and I have these other margins here margins short and - margin tall, - which I'll show you how you can use those in the market later. - Um, - and then I get into actual defining the resolution. - So this is kind of the scaffolding out how my grid system is going to be set up. - So I'm saying, - and this gets back to remember the, - uh, - definitions for our screen size categories. - That's what's being shown here. - So the widescreen cut off here that I'm using his 12 40. - So if the screen is wider than 1240 pixels, - we're now going to be in the widescreen category. - Um, - default is just widescreen minus one, - 12 39. - And from 9 92 12 39 Tablet is from 9 89 down to 7 68 then mobile is 7 68 down to 4 80 Um, - and then I can use these values in building out my grid system. - So I have created here. - What's my defoe crit system? - I have 12 columns each columns 50 pixels wide. - The gutter between them is gonna be 30 pixels. - And I have this met that built out, - that determines how wide the row should be as a factor of the number of columns, - Time to call in with, - plus, - the number of got a number of columns minus one times the gutter. - What will give me the total row with and then I do this again for widescreen. - I do it for tablet because I want to switch those grid system up and make the columns and - the gutter a little bit bigger for wider screens and all but smaller for tablets. - And then for mobile, - I use just one single column. - So all I need is just the gutter with which means the space on the left and the right hand - side of my single call 20 pixels and then I have a sec. - A separate set here for a fluid grids. - So if I want to use the fluid grid thes air, - the percentages by which columns air sized in the gutters or sized and everything else here - that I've included is optional. - If you don't want to use it, - that's fine. - But this is really for my typography. - So I set up, - you know, - was my thought family some margins? - Um, - the body texts, - font family, - the body text size, - weight, - color line, - height margins. - How does this font scale with wide screen tablet Immobile's? - That's what these three lines air here at body text ratio. - Why body texture issue, - tablet body text ratio, - mobile. - So I used these numbers as multipliers against all these other variables. - So, - really, - if I say you know, - I want to increase everything for the H one tag by 1.2, - um, - 1.2 gets multiplied against the font size against the line height and allows everything to - kind of scale proportional to these these values. - And this is all true for lead text and headings. - Here. - They all have similar versions of those variables, - so this variable style sheet is highly customizable. - But this is kind of minimum said, - I put together for your boilerplate, - um, - and then the next on our styles. - That less list is mix ins that less if we opened utilities go to mix in staat less. - This is a list actually of mixing. - This is pulled from Twitter's bootstrap mixing, - uh, - function list, - and I made a few modifications. - For the most part. - That's where this is from eso these air all mix and methods that can be used throughout - your CSS. - You know, - the border. - Remember the border radius example we went through earlier. - So here's the border radius. - It takes on a radius. - I could do Colin five pixels if I wanted to set a default here, - uh, - and it will actually print this back out to the screen. - And then there's ones for just the top left border radius the top, - right bottom right, - bottom left and you know, - box shadows, - transitions, - rotations, - uh, - backgrounds Here. - Radiance. - It's it's really cool. - There's lots of stuff in here, - and in fact there's an entire grid mixing, - which is really why I find this probably the most useful in terms of what Twitter bootstrap - is done. - Is they put together is really detailed, - highly flexible grid mixing that mixed with these variables that I have defined can help - you create uh, - unique grid systems really simply by changing a couple of variables. - So if I wanted to switch over to 16 columns, - I simply just changing the 16 column, - make some adjustments to my call gutter wits. - And now I have a 16 called Grid System. - Pretty cool. - Um, - there's utilities less file here, - which are just some simple classes that I can apply on the flight of things. - So if I apply, - pull right is a class, - it will float. - My element to the right. - Pull left will float that element to the left hide show Invisible Flush, - which something I've kind of coin and simply will change the bottom margin to zero for - whatever the art object is that it's attached Teoh um, - and has cursor Will. - It will allow the mouse to turn into a cursor for that element on, - and then responsive dot less that these air some specific classes that will allow elements - to behave responsibly, - mostly hiding and showing, - depending on the screen size category that they fall into. - So, - um, - you know, - hide and hidden will just set display, - not invisibility hidden. - Um, - And then here's these visibility utilities, - so we have visible mobile. - Um, - if you apply visible mobile toe an element, - it will only be visible in the mobile screen size category. - It'll be hidden for all of the others. - And you think you get even more granular with mobile, - vertical or mobile landscape. - Same for tablet desktop widescreen. - And there's also the inverse of that for hidden. - So it'll make if you say Hidden Mobile will only be hidden on mobile screens invisible for - the rest on. - These are true for all of the different screen size categories. - So this is a pretty good, - I guess, - introduction to where I've used media queries online So you can see here. - If I didn't have anything else beneath this scroll down and I deleted all that this was - This is kind of universal. - It applies to everything. - But then I add in these media queries, - So I have a media query here where men with is set to, - and it's a variable that I define in my variable style sheet called Widescreen on. - The wide screen was equal to 1240 pixels wide. - So when this compiles, - it actually gets pointed out like that, - um, - so in anything that when screens minimum with is equal to wide screen or larger, - these methods kick in or these styles kick in. - Sorry. - Um, - and I've added some comments here so you can see what they actually do. - Responsive changes to styling for widescreen and above. - I have one here for portrait to default desktop eso men with this tablet Max with is Tablet - Max, - this will only be shown the styles will only be shown for tablets. - I have one for landscape mobile phones and I have one for just portrait mobile phones. - I'm at the bottom. - I have another media, - um, - query that you can tap into, - which is for retina displays as well. - Okay, - so those air, - like, - kind of the That's like the tool belt. - And then we have some stuff that I built out here, - which is, - you know, - we have scaffolding for foundation, - the foundation here, - like sets up your body, - your links, - and you can modify those that will if you want. - Here. - I've put all these media queries in the less files of the stuff that they're associated - with so becomes a lot easier to have conditional styling like that. - And you know exactly what less file to open. - So if you want to change something conditional for the body for mobile phones, - you just opened foundation that less and drop it here. - And, - you know, - the appropriate media category. - Pretty cool. - Um, - and I have another less file called Layout, - so scaffolding end up slash layout that less and so this actually sets up the grid system. - So you hear it's calling the mix in that I was showing you earlier hashtag grid and in the - method core, - and I pass in my grid column with my grid gutter with. - And what this prints out is, - if we actually open the compiled CSS, - you can see what that looks like. - Let's pull down to it. - This is what it prints out right here, - down to here. - So I saved myself the trouble of having to calculate all these values by hand and type of - all of this myself simply by calling one line in my style sheet. - That's really the power of less right there. - Um and I do this so that's for the fixed grid and this is on the default screen size - category, - and I have my fluid grid and then these things. - This is stuff I've kind of made up that you don't have to use. - I just made this up terminology that I use on the nomenclature. - Used something called a container pod, - which adds patty into some containers have these things called roe pods, - which had patterns to rose. - Um, - and then again, - my media queries. - So I changed the grid system here. - When I'm in widescreen, - it changed the grid system here when I'm tablets, - same for mobile phones. - And then I get mawr more granular and specific to my site. - So I have this file called Stage, - not less. - So this is again, - is my nomenclature. - My terminology I use. - So I have my body. - But then inside the body has something called stage on. - And that really is my home for everything that I put on the site. - And it allows me to kind of place things independent of the stage. - Um, - but knowing that stages, - all the content typically at the user will see and again I have these things called stage - pots and stage pods spanned the entire with page. - If I want to do, - like a really interesting background, - like here, - it's all dark. - This would be the stage pod stage, - pot, - and then the area encapsulate. - Here is is a container. - Um, - and then I could do columns with Rose, - like you see down here. - Um, - and then I have header dot less, - which is very primitive right now. - I just have an i d. - Of header inside it. - There's a logo, - which is this blue logo here that you're seeing. - Um, - and we actually pulled the HTML scroll to the market for header. - You see, - I have Here is my stage inside. - I have a div with ID e header. - This did is actually a class stage pod, - which is what's giving it. - Uh, - this background, - I have stage pod dark, - which is what's giving it the background dark. - If I were to change that, - get rid of it. - Suddenly it's no longer dark added back stage, - pot dark. - It changes the background dark so I could have stage pot on a color. - Go over to you stage pride. - Add another one called stage brought color. - I could say background blue for to save this, - compile it. - Suddenly, - this background would turn blue. - Great, - Pretty cool. - Um, - let's change this Baxter dark and then I have inside my head. - I have a container, - which is what's fitting it to this with here that you see So it's not going up against each - edge of the screen. - In fact, - I think I could changes to, - say, - container fluid. - It's a fluid. - Let's see the container fluid. - Oh, - I can them together. - That's where this container fluid aereo, - and now it fills the screen. - You can see you know, - it's it behaves just like a fluid container where you're expected to behave. - Um, - but I've also added this stinko container pod container part like I was telling you earlier - , - is something I will tell but simply just adds patting if I were to get rid of it. - You see, - it's kind of crams as soon as I had it back. - You get some kind of breathing room on top. - Aiken do contain a pot short. - I think the I think the format uses container pod dash short, - and it kind of shrinks those margins. - A new container pod tall makes them much taller. - We're gonna go with the default one here. - Um Okay, - so getting back to the header inside, - I have the div with class logo. - Um, - and inside is a span tag that says logo. - So this could say, - like, - you're cool site or something, - right? - And so, - you know, - screen screen reader would pick up your cool site, - but we're gonna hide that visibility. - So we have give class logo, - we open up her header less file again. - So here's the logo in the logo is nested. - It's a nested rule. - So it seemed inside Header. - This will actually compiled out Look like that, - um And so we're just gonna make a display box office sent within height, - um, - set the span to display none. - That's what hides the text. - Give it a background image of logo dot ping, - which is any images folder here. - This is the logo that pain. - And using the background size style both for Mozilla and the Web kit, - vendor styles were going to say it should be 100 pics. - 100% 100% mean it's going 100% with the image the backer image of 100% height. - The image because we'd set a defined with an eye to this logo element. - That means this will actually 200 pixels, - and this will be 60 pixels. - But 100% makes a little bit easier for us to just change one number on the fly and know - that it's gonna fit. - So that's what actually shows this here. - Then we, - uh we can scroll down here, - and I'm actually switching out using the retina display Media query for devices with pixel - ratio to and I'm changing my back or an image to be logo at two X stopping, - which is logo double the size. - And so this double the size logo will be shrunk down to this size, - which will allow it to be really high rez for retina phones and, - uh, - laptops. - It was my head or my style's, - um, - and what else we have here? - So, - um, - typography. - So this is a really interesting one. - So I have typography that less, - Um, - and it's something I've been really refining for months and months and months. - Now, - this is a big less file that used to render all my typography