3.1 “Style Tiles” and Catering for All by Designing Big

Hi, and welcome back to Responsive Web Design Revisited. In this lesson, you're going to learn about something called Style Tiles. At this point in the project, you have your content assembled and you have a plan for how it's going to be placed in your site. However, before you can start moving on to coding, you have to have some idea of what the site style will be. You have to know what fonts it will use and you have to know what the approximate dimensions of the content elements will be or else you won't have enough to go off to start the creating process. And this is where it might seem like you have a catch-22. You don't wanna design the style of your site directly via code, as that can be unintuitive and it can be slow. Visual design is really more easily done in design-dedicated software. But you don't wanna design your entire layout in a design program, because that won't allow you to handle responsive requirements properly. That's best done in code directly in the browser. So how do you deal with this point of the project? This is where Style Tiles come into play. Style Tiles are a away of designing each of the components of a website without getting locked into specifics of layouts. You can have a read of this great article by Chris Brown on webdesign.tutsplus.com, and he goes right through what is involved in Style Tiles. And if we take a look at an example, this is Chris' interpretation of how the tutsplus site may have looked in its Style Tile phase. So we've got no specific website being pixely perfectly designed here. What we have instead is each of the components that go into the site. And another example is the actual Style Tiles site, so we've got color scheme, we've got typography, we've got buttons and individual elements that come together to comprise the entire site. But nowhere is there a set in stone decision being made on how the site will look at various widths and how it will behave in a responsive manner. Now, one of the main reasons that the concept of Style Tiles was created was as part of the process of interacting with clients. So, rather than creating a full pixel perfect site design, you'll create Style Tiles and just show them to the client at that phase. However, for me, one of the most useful ways that Style Tiles can be employed is just to get all of your visuals down before you move in to the responsive coding part. Now, you can get a lot of use out of Style Tiles without necessarily even showing them to the client. You can use this concept as a way to get all the visuals down so you'll know what colors you want, you'll know what font sizes you want, you'll know the approximate spacing around different types of headings that you want. You can get all of that down without letting the line between the design and the responsive coding get blurred at all. This is how we're going to put together the visuals of the site we're creating. For each one of those blocks and each one of those elements, those content elements that we mapped out in our content plan, we'll create the overall style in our Style Tiles document, and we'll be doing that in Photoshop. Now, before we move on to actually creating these Style Tiles, there's just one thing that I want to cover. Now, you can create your Style Tiles in any way that you want. There are no hard and fast rules with how you put them together. So, remember, you're not covering layout in terms of how the site is going to respond. You don't have to do a iPhone version and a tablet version and a desktop version. You just design the components and their overall style and then you bring them all together to be responsive during the coding phase. But there is one thing that I do feel should be involved in the Style Tiles phase, and that is for all of your elements to be designed big. Let me show you something. This is Topcoat. Now, this is a really great little library of CSS design. So there's a whole bunch of little UI elements that you can use. Buttons and check boxes, form elements, all these types of things. This is the desktop version that they provide, and this is the mobile version. And you see what happened there? All of these buttons became larger, and why is that? It's because when you're using a touch device, you have to deal with the fact that your fingers are kind of enormous. They're a lot bigger than a mouse pointer. And anybody that's ever used a touch device has had the experience of trying to touch a button or a link, and because the UI element is small, the system can't determine what it is you're actually trying to touch, to tap on. And so it will zoom a portion of the page so that you can tap it again. It's kind of frustrating. So in the same way that earlier, we discussed making all menus touch-friendly, I'm also gonna say that you should make all buttons touch-friendly. Make your whole site touch friendly. There's no reason, in my view, for anything to be small. When you think about it, there are really only two possible scenarios. You either have a viewer with a small screen or a large screen. If the viewer has a large screen, then they've got a lot of space to accommodate large UI elements. So they're not going to have a whole bunch of empty white areas left and right on their screens. It's also gonna be easier for them to read text that's larger and to interact with UI elements, even with a mouse. On a smaller screen, you still want bigger elements. You want bigger text so that it's easier to read and you want bigger UI elements so that they're easier to have touch interactions with. So there's every reason in pretty much every circumstance to have large UI elements. The only caveat is that you wanna make sure that you don't have lines of text that are too long to be easily readable. So you don't want one sentence to be stretching from the left side of a 24 inch monitor to the right side. You wanna make sure that all of your text wraps in a way that's easy to read. But other than that, go big. So by going big, you really cater to the widest possible audience, and you make everything easier to read and everything easier to interact with on all platforms. In the next lesson, we're gonna move into Photoshop and actually start putting our Style Tiles together. I'll see you then.