 All right, let's go ahead and get started. Can everybody hear me in the back? All good. Thank you. Welcome. Hope everybody's having a good morning. Had a chance to see Luke's keynote on mobile mobile first and hopefully anything you learn there, I won't say something different because he was probably right. Today we'll be talking about creating responsive and mobile first Drupal themes. My name is Jake Straun. I'm the creator of the Omega theme. Thanks, I thought you guys wanted to talk about fusion or something like that. I have a little tiny dev shot development geeks and will soon be launching a premium theme community theme geeks. What you should probably already know if you don't I don't know flag me down device detection is bad, you know, we shouldn't be targeting an iPhone specifically a blackberry specifically that defeats all the new all the purposes of the new movements we're seeing with responsive and mobile first You should already know that responsive web design is good and awesome. Even if you really don't know how to implement it yet You should also know Those of you that have tried it and those of you that haven't it isn't necessarily easy some of the concepts are but it's not takes a lot of patience a lot of a lot of practice and lastly Still to this point responsive web design is not for everybody I've worked on a couple projects that asked for responsive and at the end. I wish they wouldn't have Their budget their thought processes just didn't really fit with a responsive approach yet But hopefully you know with the little our little asterisks Hopefully as the future evolves everybody will start turning to these types of technologies what I hope to give you today is a quick understanding of responsive media queries and Overview of creating a responsive theme from scratch So kind of going through step-by-step of if you want to build your own responsive theme Not use any of the base themes that are currently out there The things you need to think about what you need to approach and then finally I'll only take a short few minutes to promote Omega I Tend to kind of get in trouble for doing that too much so first responsive CSS 3 media queries in just about five minutes and There's a lot of stuff in media queries But we're really only going to focus on the small group that will help us get to the basics of what we need to responsive And the first of those is min width and Hopefully everybody in the back can see well enough. I kind of tested it and it looked okay What we have here are a couple sample media queries The first one being media all and min width seven hundred and sixty eight pixels Min width essentially refers to the minimum width of the viewport So at seven hundred and sixty eight pixels in that first a media query Any CSS that you apply in there is only going to apply To a viewport to a browser window. That's more than 768 pixels the same goes for the next with a min width of 1200 Any browser window that's 1200 pixels or more any CSS in there will start to apply the next is min device width and The media queries you see are the same except for replacing device width instead of just width Device width refers to the entire Window on a mobile device on your iPhone on your iPad where you don't have windowed browsing You can't shrink your browser Min width and min device width are exactly the same value On your desktop browser where you can scale the size of it If you use min width, it's referring to the size of the browser window window however far down you scale it If you've used min device width instead, it would refer to the still the entire size of The device of the iMac whatever it may be and on the same note. We have max width I tend not to use max width in my own media queries except for very limited circumstances using the same The same example here media all and max width is 768 pixels This is going to apply to anything that 768 or less When you're taking the mobile first approach You actually want to have everything start off as mobile and Then you want to say okay if as with using min width You want to say if we do have that minimum width of maybe 600 pixels. We want to add some CSS We want to display it differently Max width you can essentially combine that with your min width and have Certain rules only apply between maybe 768 and 1200 Another reason for using max width by itself would be if you were Attempting to backport a site that did not have anything mobile You could take and use a max width of you know 420 pixels and all the CSS in there would then apply to modern Browsers on small handheld devices max device width also Same thing it refers to the entire window itself again on mobile. They're the same and finally one of the Really fun media queries that somebody recently asked me if I'd what did I use them for and It's actually kind of hard to say yet I really haven't found a great use case where these are super useful, but I found them fun to play with Is the orientation and you have obviously just landscape and portraits so On your iPhone your Android your iPad whatever device You're able to target The direction in which it's being held This can be you know, I think I think there are use cases for this But if you're still targeting certain pixel sizes with min or max width you can end up coming to the same Essentially the same working model with an iPad 1024 by 768. Well, you know, which one of those is Portrait in which one is landscape now again, so I don't pimp out the Omega theme too much today We're gonna talk about doing it yourself and Because responsive design is unique and we're still learning The best practices how to put these things together a lot of projects you may work on You know, maybe it's really simple and some of the some of the base themes that implement responsive Maybe it is too much and maybe you just need you know the simplest way you can implement it Maybe you feel like you just don't need all the extra junk and you can do it quicker and even better yourself So for that reason it may be good to start from scratch with a responsive theme This slide might be hard to see in the back But essentially any responsive theme just starts off as a normal Drupal theme. There's nothing fancy in it This is just a sample dot info With a name and a description and some regions defined down at the bottom nothing fancy going on in here and I have a couple methods. I want to discuss of Adding your responsive CSS First off again when we want to take this mobile first approach I feel that everything should be developed that way. There is no other way start with mobile or Build your framework in a way that maybe even if you do the CSS for the larger version first You still have the ability to come back and build your mobile Your mobile CSS later But it still applies first So in this example In our dot info. I'm adding The way we always do style sheets all and a global CSS This is going to be my site-wide font defaults everything Everything that I want to apply globally and this includes my mobile layout The next one we see is one that I've targeted for a larger tablet and it's style sheets all and Min widths 768 pixels and If you didn't know and if you haven't done it, you know every style sheet Ever included in our themes was you know style sheets all maybe screen or print you can put in the full media query right here so what that gives me with tablet CSS is a way that I Don't need to put the media query in my file and tablet CSS is only going to be invoked when that media query is true And then the third example was a min width of 1024 to provide a desktop layout something just a little larger So this method and adding the CSS files in this way Let's us keep our CSS files organized. I don't need I don't want to have necessarily one CSS file with Hundreds of different media queries nested in it that you know just becomes too large and too hard to manage so if we take a look at an example of something I would put in my global CSS and I'm using the example in all of these of just my content and sidebar regions and maybe How I would position them So by default again global CSS is doing my mobile layout. It's doing all my site-wide defaults. So On mobile, I'm just gonna stack these regions. They're just gonna be one on top of the other So they've got a hundred percent with the font color is gonna be black and we use a stare of font But once I've moved up now to my tablet CSS Which we defined at 768 pixels could be 600 could be whatever you choose I've decided now that I want some layout with my regions and so I've given my content 75 percent and floated it off the one side the sidebar, you know, but almost 20 or 24 percent and floated it off to the right so If you're on the mobile device, you're gonna see them stacked as you move into the tablet We're gonna start handling some more advanced layout based on the real estate We have and then finally moving to my desktop CSS example I've decided that you know for whatever reason on my tablet. I wanted the content on the left But now I actually want it on the right So in this example, I've changed the width of the content region and I floated it to the right and I've added some extra stuff to the sidebar I've made it a little wider moved it over to the left instead and changed the color in the background on it so going through this method with Global tablet desktop CSS and in my own practice. That's not what I named them But this allows us to continue moving from our global defaults And as we move up each media query that are all using min width as soon as we pass a certain width on the viewport window We will start to apply different CSS. Yes. I'm sorry. The slides are actually already up on my blog Developmentgeeks.com it's linked from the session node. Yes, but we'll save that for the Q&A because that's a great question Okay, so in the second method rather than breaking up all the CSS files you can choose to Put it all in two put it all into one you could actually do all this with one style sheet but in this example I'm going to go ahead and just do my global and then a responsive CSS and They're both loaded with style sheets all so the responsive CSS is going to be loaded all the time But inside of that then we're going to place our media queries and nest them so that they work So my first example again, my global CSS is exactly the same just some basic site-wide defaults so again responsive CSS here in this method is going to Allow you to put everything in there from top to bottom and have it all organized in one file and So to start off this is an entire You know a short but complete example of what this responsive CSS may look at look like based on the previous example so if you were using the method of actually only having one CSS file period You would start at the top and put in all your defaults, you know body to find some headers fonts whatever you want to do and Then nested in this file. We'll start with our lowest our lowest resolution. We want to target Place our media query and then inside that nest any overrides that need to apply to stuff That was previously declared either outside of a media query in this file or declared in our global CSS so we can continue on and target a larger screen at 1200 pixels and We can in this file put as many media queries as you want. I do find actually that this Can be beneficial especially if you're using something like a fluid layout to I Started personally liking fluid layouts a lot to a certain extent and then giving a more structure at a couple breakpoints But in a fluid layout, there's a lot of extra media queries You might want to do because if your fluid encompasses maybe Five or six hundred pixels there may be some extra shifts and ways you want to change things as the screen grows or shrinks So digging a little more into this example Taking the first sample media query. I've brought back the same code and am styling up My content region and my sidebar and then again for what was the desktop CSS in the first example Still in our same responsive file now. I'm just Overwriting the values changing the changing the width and positioning of these elements Now some things to think about when implementing responsive design The responsive images Is usually a pretty simple process In your CSS a max width of a hundred percent as most of you should have already learned about will Scale your image so that it just works at whatever size its container element is This can also work on flash and embedded videos as well. There's also some JQuery plugins that will help with the the other elements fit vids. I know worked really well for me recently There's a minor problem in the latest releases of Drupal 7 with responsive images though if you actually care about Older versions of IE In Drupal 7.9 there was a fix put in that anything that was ran through theme image had to have the height and width attribute Placed in the image tag In the modern browser and modern browsers any of the new stuff it works fine There's no issue with having the height and width in the attributes of the image tag However, if you go back to IE 8 IE 7 and IE 6 They just do some crazy things some of them won't scale the height at all You can try putting in height auto and you have to do a lot of tweaking For myself if I'm doing this in every project and somebody might try to stab me after saying this I actually overwrite my theme image to not include a height than width attribute on the image tag Nobody roared so I guess nobody really cares about that The viewport tag the viewport made a tag Exactly is it was taking a copy of the theme image function and just removing those two attributes from ever getting applied The viewport made a tag Potentially one of the most important things to consider for mobile layout And I forget whether it was webkit or Mozilla that you know initially started this now all all mobile browsers Handle this and understand the viewport tag And what it does is allow us to define The initial scale of the page the minimum scale the maximum scale and if a user is allowed to pinch and zoom on the page That's what gave us when nobody had mobile sites The ability for the New York Times to scale down on your little three and a half inch iPhone screen And have it look decent and then you know let you zoom in and see what you wanted on the page and actually get to your Content and that worked great That was a great implementation on the mobile side so that you know the majority of sites out there looked decent Once you start implementing a responsive design you actually need to highly consider what this does iPhone iPad all iOS devices and new Android devices work well with viewport or with The user scalable set to turn on right now. I think there's still some debate if You're supplying somebody with a mobile layout. You're providing big enough You know action elements every the buttons are big enough to click the text is big enough to read There's still a debate if you should Allow the user to scale or not and I've heard arguments for both this week and Both arguments have actually been valid You know somebody wanted to zoom in on an image or you know what I thought was big enough text Wasn't still wasn't good enough for somebody's eyes, so they're used to pinching and zooming The biggest problem is the older versions of Android when you're providing your media queries and your defaults are mobile if you allow Usually the initial scale is always going to be one but let's say you set the maximum scale to two Which means you can zoom in a full hundred percent and see you know twice see everything twice as large And then if you set the user scalable to yes these Android devices the older ones would not quite get it right It would mess up it would start thinking your browser window was bigger It would start trying to load a bigger media query and I haven't really played with this in some time I haven't tested it yet on the ice cream sandwich version, but all in all this is something quite important to think about You can play around with these settings Really easily and then test on your device and see what allows you to do test your use cases and see if It's worth it for you to have the scalable on or off This example and again. Yes, the slides will be available To actually look at some of this code closer Implementing the viewport meta tag is just using The Drupal add HTML head function and you build out your array with the appropriate values That it's a meta tag the name is viewport and all the information for the content of the meta tag Old crappy browsers who actually cares about any of those show a hand seriously Really That was way too many of you. I'm sorry You may not want to but you have to I get it. It's okay When you're using a mobile first approach one issue you're gonna run across is Well older versions of IE and maybe some other browsers don't Understand media queries at all and if you're using the method where your global or mobile.css is Loaded first and everything else is then loaded by a media query IE six is gonna load the mobile version of your site and so somebody's on a big resolution monitor But it has IE six, you know, they're gonna get your mobile your mobile version, which personally again, I really don't care But some of your clients are you know gonna expect the normal version of the site If you're doing your theme from scratch, I would recommend probably conditional style sheets module Essentially a way to You know conditionally load for IE six through eight and make sure that they're getting still You know the 960 layout whatever desktop it is and not providing anything responsive to those browsers. I do have a Theoretical problem with Using the JavaScript enhancements. I believe it was respond.js that allows Allow some of the older versions of IE to understand media queries. I personally don't think that's worth it I don't think that's time well invested on a responsive project and I feel that you know a browser that doesn't understand it should be You know more than just suited fine by getting the normal desktop size Something fun never to forget would be your touch icon By default I actually don't know how Android does this but on iOS if you send a shortcut to your to your desktop there You're going to have like a screenshot of your screen shrunk way down So, you know, just like you'd put a favicon on your site Don't forget a touch icon And there is actually a module for that now project slash touch underscore icons and It allows you to just in your theme settings attach Attach the appropriately sized images there If you're not using the module though again, it's a very helpful Drupal add HTML head function you can quickly just add in the link attribute and path to your Path to your image and to find it as an Apple touch icon and you're good to go Now this is where a lot of you may disagree I've heard a lot of back and forth on this don't target certain sizes don't target a size because it's The width of a certain device But some break points to keep in mind and there are potentially many more than this And I've even been told that my 1200 pixel thought, you know needs to grow to provide a larger format But it's 1200 pixel Media query would you know accommodate most larger screens? I have a small MacBook Pro and it actually fits, you know full size on that Um 1024, you know, it's gonna target some smaller desktop screens if somebody's still got an older monitor Or large tablets in landscape mode 768 is gonna hit up your portrait on the larger tablets and potentially landscape on some smaller seven or eight inch tablets 600 is kind of that middle ground. I know the Kindle uses it and Some of the smaller tablets will also get that Around that size Then your 480 320 and 240 all Covering your mobile sizes I think the majority is moving past 240 and I consider that something not really to to worry about targeting I'll tend to maybe On anything I'm doing like 480 or less, you know, give it a nice stacked layout have everything set up there so there's a lot of documentation and you know on Various places online about what should you be targeting and I think from now for the next year This is gonna change every other week. So, you know in my own theme I came up with what I what I kind of thought was best But allowed everybody to just change it if you so choose So whatever your project is whatever your clients needs are a lot of times I may only target one or two of those rather than four or five So with all that said Building a responsive Drupal theme from scratch Can be fun can be rewarding But it can take in a lot of patience and attention to detail and it can be kind of tough Especially you've got it if you've got a client that doesn't quite understand the whole process What if your client has a budget? What if you just wanted to kind of work out of the box? The Omega theme is responsive It was the first Drupal 7 theme somebody may correct me on that the first major base theme in Drupal 7 to implement responsive and Provides the framework that will allow you to Not think about as much of the You know the junk I just went through on what you have to think about when you're building it yourself It'll give you all that out of the box and allow you just to go to town and making it what you want it to be Omega is mobile first Every Omega site in the latest version takes the global CSS approach that applies for Your site-wide defaults your mobile and then as you move up to various break points Everything is overwritten giving you layout giving you different structure Currently over 20,000 sites are using Omega It's now I believe top five almost number four on the themes page on Drupal.org a Few large distributions have converted to using Omega Open public and open publish from phase two technology We put those in I was actually brought in to help with some of that about six eight months ago or so So now both of those have out of both of those distributions out of the box have a responsive Omega theme ready to go and there's still work getting starter kits and things like that in there to further customize those Open enterprise which was recently released by level 10 They haven't set it yet as their default theme on install that distribution, but also use it also has a Responsive Omega sub theme included in the package Omega has grits and This has kind of been highly debated this week. I've been a huge fan of 960 for Many years my first Drupal talks were all on using 960 Like the theory like the structure like it a lot Out of the box right now Omega comes with four sizes besides the mobile They have a 1200 pixels grid a 960 grid 720 and then also a fluid grid All of these using the 960 philosophy with gutters and margins and all that so everything applies the same way at each of these grid sizes Some of the talk we've been having this week is actually Moving towards what other alternatives there may be people have been bring it up to me for you know well over a year of You know, can we implement this grid? Can we implement this grid? And I find myself these days actually even fighting against 960 some in the responsive area So some of my next work is going to be really investigating how to better do the grids how to add alternatives How to make things that don't necessarily rely on that 960 structure, but for right now it works It's went on over 20,000 sites and it's worked quite well as it is Omega has some friends the Omega tools module allows you to generate sub themes in drush or In one of the more recent releases six months ago or so in the user interface You can walk through give your theme a name and a description edit all the details at the last moment and it will create your sub theme for you and place it in your themes directory the Delta module will allow you to and Delta actually works with any theme that's theme settings heavy would be a good approach. It'll allow you to Essentially take a copy of your theme settings. So in Omega we define all the region widths all placements We do all this cool stuff in the settings and That applies site-wide. Well, what if you want to do that for the whole do something different for the homepage? Delta allows you to do that based on context Omega is always changing and growing We had a bof yesterday that was talking about Some of the immediate needs and then what what some people want to see out of it in the future Our 3.2 release. It's coming up very quickly. It's gonna have Entirely rewritten starter CSS that everybody's gonna like and Stop complaining about the code. I wrote three years ago that's still in there We're gonna add the feature to nest regions via the interface and this has been probably the biggest feature that was left out of Omega 3x and It's gonna go in this time. So you will be able to essentially Have that sidebar that scales past many other regions that are nested inside of a region There's some performance and right-to-left support patches Waiting to go in That both look pretty good So this next upcoming version is really gonna be focusing on the interface Now the usability also some inline documentation on the theme settings page. I Was told it needed more We've also started talking about where Omega 4x will go I do envision it will start soon And we're you know definitely looking at D8 and Omega will be there The day Drupal 8 comes out And finally one of the biggest things that's really not finally sorry One of the biggest things that's kind of helped with the adoption of Omega is the community that's Evolved around it. We now have documentation on Drupal.org We have an IRC channel that I've been told this week is one of the like most active They've seen outside of really the core Drupal channels. So I'm you know really impressed by that There's always like 50 people in there and a good group of people You know helping answer some questions Do have a group on GDO and finally again soon I've been talking about this for many years, but soon there will be a Premium theme store with all mobile responsive Omega sub themes an upcoming webinar Next week myself Michael Schmidt and Catherine Cornelius of amazing labs We'll be doing an aquia webinar on Kind of the same thing responsive web design using Omega how to make it all happen our Lessons learned using it and where it can go most importantly Omega has stickers and You can come up and grab some once we're done here But but truly most importantly You know two and a half three years ago when I started Omega in D6. It was all me nobody You know nobody found it yet. Nobody knew This has grown into quite a community project and Without all of these guys here where Omega is that today would not be possible and That you can help to if you're interested. I've had a bunch of people come up to me I want to help with documentation whatever it may be Join the IRC get in the GDO group It send out a message and you know one of us will connect with you and figure out figure out how to make that happen For Q&A if you can hit the microphone so that everybody can hear it and While we do questions and answers I will be showing just some Omega sites in the background. So I actually have a question about a Doing sort of responsive stuff. What if you're you're trying to show less regions when you're on a smaller? Browser size, right? So would you just do in talking like purely CSS? Would you just do display none? Is there a way other programmatic way that you would not show a given region? Very valid question question essentially What do you do to hide regions on a mobile site? I? Don't think anybody has come up with a perfect solution for that yet And I may be wrong, but I display none. I just hide it. It just doesn't show I've also seen articles where that's not the right way because actually on a mobile device They shouldn't be crippled and not see all of the content. I don't necessarily agree with that There's certain elements. I don't feel like need to be on my mobile site I played with a Method using actually Ajax to you know load up the mobile version first And if it was bigger then now go ahead and load in those extra regions or blocks or whatever it may have been And I found that kind of hacky slow nasty way to do it There should be a better way and hopefully with d8 and you know core context and mobile initiatives all of this like Hopefully there will be a better way for that But for now, I mean I'm satisfied with the display none and the way I look at it performance wise If we didn't have a responsive mobile site, they'd still be getting the full website Just shrunk down with all the images all the all the junk so I have a question about Retina this place they have the higher resolutions. I'm sorry. Can you speak up just a little? Sorry Question about the Apple retina this place. They have the higher resolutions But they will they get the mobile website or the normal website and how would you handle that? That is a great question the new The new high res apple the iPad I was very concerned when I first saw the you know double the pixels and well, what does that mean for the browser? I did get to test one at the Apple store when I got to town It's actually just the pixel density So it's still like as the web browser sees it and I may be wrong But I'm pretty sure I've got this nailed so far. It's still a 1024 by 768 site But it just is twice the density. So if you have some low res images, it might start to look fuzzy But otherwise, you know, it would be silly because like if all of a sudden it was you know, whatever that new number is wide 2000-something pixels. That's that's 800 pixels bigger than my laptop So it would be kind of silly if like it was showing a giant, you know Resolution so so far from what I've seen it doesn't change with that new device resolution Regarding the theme image override to take out the height and width How does that affect user's ability to resize an image in the whizzy wig and do stuff like that How to resize the image in the whizzy wig or something along those lines doesn't does it prevent Adding height and width Attributes in a whizzy way You can still add that, you know depending on your method of getting an image in the whizzy wig I know there's you know tons of ways right now. I mean you can you can still put that in or leave it out I've just had some problems with it like I You know and I found like looking at the first versions of triple seven like well the height and width values were just empty So, you know, they fixed that hole or bug if you actually call it that and Again the only issue with that height and width in there were with older versions of IE and if the You know image was wider than the container and IE seven tried to scale it down It would scale the width right, but it would still be like super tall So I mean it's just something to kind of you know pay attention to as you go along with you know all the content and everything You're putting in and make sure it Make sure it looks right in whatever you're testing. I think Regarding your do-it-yourself method one, which is the multiple different style sheets one for each different breakpoint How does the browser handle downloading that is it are they all downloaded and cached and parsed on every page load regardless of whether or not they're needed or is it downloaded at needed and what are the performance implications on a mobile site for that they are on every page and this is the same method that Omega uses and the way the Drupal add CSS get CSS words with those media queries is You know it combines all those style sheets that are in The same group module their theme and goes into all these things but actually each media query then also gets its own group So it ends up getting compressed as its own style sheet. So I mean, I don't know if you had Ten, you know if you implemented ten CSS files with that method You'd start getting me, you know, maybe too many files loaded But I haven't seen much with you know With all the CSS files that modules add that don't feel too bad add and you know four or five of my own So if you implement the rules for detecting portrait and landscape mode Do they take effect in real time if you change the orientation of your iOS device? The last time I played with it. Yes when I tested it on my iPad and just you know Use the portrait and landscape to test it out and switch and you know as soon as the page starts to move It's like oh here. I am And do you have any plans on using preprocessors like sass with your theme? Right now actually you can use like the sass SCSS or whatever you can actually include those We have definitely talked I personally use less Couple of the other maintainers are using sass They're trying to convert me. I don't know if I believe yet, but There will be some method of that potentially in the 4x branch that will allow you to do a lot of grid configuration And things like that on the back end that may rely on a module So the theme may still have to provide something that's default. This is what it is But if you install this helper module, you know, you'll get to do a whole bunch of cool stuff with that It's definitely in the works. Hey, how does Drupal 7's CSS caching and The anonymous page caching work with the different media queries Well, they can be Cached fine. I mean everything I got and I have a couple that are you know running on varnish and APC and all that stuff with You know no problems To the anonymous side, I mean they should be getting this, you know Those should be pretty much kind of site-wide. So I don't think there would ever be an issue So I don't think I still understand so Drupal 7 is actually if you have Different layouts for say four different sizes. Is it actually caching for anonymous users for different pages? Not the pages. It's just the CSS. It's just the four additional There's four CSS files that are always there and It's the CSS on the client side that sees oh it changed now. Let me look at this CSS file I was wondering what JavaScript libraries you were looking at to incorporate into the theme. I know you have formalized and All that are are you looking to incorporate things like image-sizer I Think that's potentially a good idea implementing a few libraries that will help out actually formalize is gonna get kicked out in the next version It'll be there for legacy support, but not recommended You know, I tried the fit vid which worked amazing on YouTube and Vimeo videos I haven't played with any of the image ones because I've just got the CSS that worked enough for me in my own projects You know, if there's some really good examples and they're Their licensing is so that it can be included in the theme on Drupal.org You know, I don't see a problem with that, you know And as we've gone along more and more solutions have come out to help with some of these, you know Issues or gotchas that we're dealing with so if there's some good ones out there I'm definitely game to look at them or recommend them as a, you know Download this and put it here with Omega or include them if I can I was wondering what your thought process was on the use of pixels for font sizes theme and what Maybe ongoing what your thoughts are maybe is m's or rems as another approach Well, I have always been pixel like I want it. I want to know what it is I never had luck trying to learn how to use em's and get you know, then all of a sudden I've got a li li and it's Blowing up twice the size. I was just never successful at that. So I hated em's And it was recently brought to my attention this rem and CSS 3 to me that looks like the perfect solution and I think that The next version of Omega will probably include that It'll have the you know pixel fallback for anything that was that doesn't understand the CSS 3 but then use our em's for Pretty much everything that understands the Omega site because you know, none of the media queries work outside of CSS 3 2 So I think our em's are they look promising There's still a couple more slides any more questions. There's actually a lot of screenshots in here Yes, okay So the question is you know on going mobile first You kind of want to send them a low-res image, but you've got a huge desktop site that needs high resolution. What do you do? For me personally right now, I don't do anything I Look at it as the fact that if I didn't have a mobile responsive site again They'd still be getting the full site scaled down. They'd still be getting those big images Does something need to be done? Yes, and I don't know that anybody's come up with a perfect solution yet You can load that you you can you know do some tricker You can load that small res image then you can use something else to fire off and Determine it. Oh, hey now we do have at least a thousand pixels to work with load the big one the Drupal the module I believe adaptive image Handles that right now. I've only played with it like for a couple of minutes. It looks promising and Essentially does that loads it and allows you to set your media queries breakpoints, whatever it is and then load in a bigger image Hi, Jake. I see a lot of adaptive sites that sort of Look great at one size, but then at some other sizes. They sort of have these big awkward open spaces Or they get really cramped in certain areas and I'm wondering if there's certain tools out there that you use to sort of Show a little more or a little less content Resize headlines stuff like that. Mm-hmm any best practices that you know Trying to figure that out seems to just be on a project by project basis of You know maybe you know maybe from my designer only got the full desktop size Photoshop, and I've got to translate it I tend to just have to go you know page by page and look at each of these elements and see how they appear And if I'm looking at it, you know in portrait mode on an iPad, and it just looks horrible You know I'll attack it on a case-by-case basis I can't say that I have any best practices there Except a lot of attention to detail All right. Thank you. Yeah, do you think about Morton DK's mother ship theme and paring down on some of the divs and classes? Yep I'm not quite as much of a zealot as Morton is about it But yeah, the markup is just you know nasty all the way around my only fear though is you know putting 50 or more Template overrides in the theme and the support issues that causes I mean, it's horrible like you know with nested fields and stuff like that and your 20 divs down Yeah, I don't I don't really guess though. I have a giant personal hatred of it because So it added, you know 20k to my page download on a huge page Well, I you know I just sent the user eight one megabyte images to so I don't look at it as a major problem, but It'd be great Maybe if I'd like to see mother ship go to core like the the markup from that to kind of go that way and then Go from there, but Hi, you mentioned the nested regions upcoming. Yes Would that allow you to easily stack regions vertically for example, yes within region it will It will allow you to essentially create a Another element. I don't know if it'll be a region or sort of a pseudo region yet Essentially creating a wrapper That can be placed in a zone and it can sit beside a region and it can also have regions inside of it So that will allow you to do any layout you can possibly it should be the final step of you can build anything with it that was the seriously the one oversight in The markup and what I I see it more and more in every design I do some sort of you know, there's a full width thing here, but there's two sidebars right below it And there's a sidebar that goes the whole way down like Yeah, I think in some of the ways I've come across it You almost want a region that doesn't take up any space so that might also kind of solve that as well So looking forward to that. Thanks a lot. Yep First of all, thanks second How does this stacked regions or the regions in place or Nested regions work in conjunction with panels in place or the panels drag-and-drop UI Is it working with or in adjacent to or in support of Maybe talk to that That's not sure if they're related or not. Well, that's a good question I think that there shouldn't be many problems if you're just you know You're essentially in you know on the Omega side only create only configuring your region sizing and placement You should be able to put anything you want if it's a panel's layout or something to be dumped into a region There shouldn't be any issues, you know unless you know until you're using something in panels It's going to replace the content and sidebars of the main area And then you should be able to just do it on the panel side I guess my question was more or less related to could The two of them work together instead of trying to create something in addition to or another type of Region layout UI right then to that I would say no that kind of has to be on the on the side of who's The super panels fans that are using Omega as well and you know putting something together there Yeah, yeah, come preference, but thank you. Yep Maybe a small tip. I went to the session faster mobile sites yesterday, okay? And we should be concerned about the many diffs that we use in our front-end theme On mobile sites like 97% of the latency is caused by the front-end and not the back-end So we really should make the sites as small as possible and really focus on mobile first loading in the smaller images the smaller CSS files and those kind of things and just Responsibly load in the bigger images, right? I do agree and I mean that's you know, everybody said that even starting from a year ago with responsive and mobile first but Nobody really nobody figured out the best method yet and we're finally starting to see those methods So a lot of APIs are coming up. That would help us do that. Yeah, so yeah, so the clarifier man the last comment Yes, you should definitely worry about sending a 1200 pixel wide image to your mobile browser Do I worry about it right now now? Okay? I got a fast download speed so All right. Thank you everybody Don't forget your Omega stickers