 All right, we're going to be going Welcome everybody. Thank you for coming. I hope your triple con has been good so far. Hope we can start off last day of sessions with Something you'll something you'll remember my name is Jake strong on triple.org and Around the rest of the internet And today we're going to be talking about Actually, I really wanted to change the title of this but I have the eight and five words in here for so long that We're really going to be focusing on responsive web design Mobile first technologies and how to accomplish those include a lot of this Other buzzwords that continue to change in the industry What they're defined as but it all really boils down to the same thing Okay, so the first thing I want to talk about is mobile How many of you in the audience in the 10 minutes prior to the session started used a mobile or tablet device? How many of you used the desktop black dot or black? There's too many of them. It wasn't supposed to be that So types of mobile devices a lot of times when we start thinking about what we want to present to Mobile users the first thing we're thinking about is the kind of phones that we're using People in this room are more likely carrying an android or an icon however Mobile is not just android and iOS And I think most of us already know that But the smartphones that we carry are capable of doing a lot of things They're capable of we don't even have to build somebody a mobile website. It just shrinks it. It looks okay. You can zoom and pan But a huge percentage of people are still using feature phones And these are low-end devices that simply Don't have the processing power only Maybe they can't even display javascript And they're only capable of really rendering a very simplistic page sometimes even without seeing us as it currently stands At least this was a couple months ago about 32 I believe it was percent of users are on smartphones That's said to be more of a 50-50 split by the end of this year But again with that being said We actually have A wide group of mobile devices that we need to cater to And you can look at it like maybe some of us do with i6 and now I don't want to build for those But with a lot of countries so much strong and smart phones We really need to be able to focus on all kinds of devices There's one way to do To figure out what type of advice somebody's using to send them content and that's user agent protection And according to most people in most circumstances probably 99 percent of the time that is not the correct way to be doing things Uh with tens upon tens of thousands of user agents with the ability to fake your user agent And become some other type of browser like your firefox plugin middle order pretty much emulate anything That's not the way we should be approaching mobile devices. That's how you're going to get a very iPhone specific website, but not Something that's actually going to cater to everybody So this is where we count to mobile first And the problem has been that more often than not The mobile version of a website is the last thing A client once a lot of times even the developer designer thinks about We've got a you know rich experience going on a 1200 or 1200 pixel desktop And then the client's ready or we want to do mobile too. So now we have to go back and start Hacking it apart and making it work We need to be thinking about the mobile version of the website Right off the bat The lowest common denominator of anybody that's going to come to any website you build Is on a feature phone is on a mobile phone So it's going to go from feature phone to smartphone to tablet and then finally somebody's on a Laptop or desktop that's capable of rendering some advanced things So we need to be thinking about the lowest common denominator first And some of the current statistics obviously everybody the Not many NPCs everybody knows what we're exploring. That's what we need to start focusing on Uh projected to be a billion users by 2013 so a little over a year Mobile users are increasing over desktop clients by a factor of eight smartphone sales Will surpass the PC sales by the end of this year. So more people will be buying and or its iPhones Maybe a windows phone seven here or there if you count that one By the end of this year, we're going to be more people buying mobile devices than there will be Dell or anything like that Over half of the current smartphone users spend more than 30 minutes per day Using mobile web mobile applications. How many of you have fallen into that category? At least 30 minutes today Thinking about mobile forces you to focus on what you want to deliver to your client So we get carried away when designing Science for the desktop when we have so much real estate to put all of these ads to put all of this content related stuff but when When it boils down to it, what are you really trying to accomplish? Or the three things on your site that are most important So mobile thinking about what a mobile user needs to see Makes you kind of conceptualize differently so that you know that If we're talking about a conference site like dripple con if you noticed Visiting the site throughout the week every day the home page has changed to the current day schedule Of the people that are going to the site today probably want that So if anything kind of applies in a mobile technology, what do you want somebody on that lowest common denominator to be able to see? So with a little intro to the mobile stuff, we'll talk responsive web design and how that plays into this First off, what is responsive? And it was originally defined by Ethan Marco's As a practice of using fluid grids flexible images and media queries to progressively enhance a web page for different viewing context So there we go. There's our mold. There's our tablet in multiple viewing Orientations And then there's our big desktop Somebody with an 80 inch monitor and I like the definition. I agree and a couple months after I gave Actually the first run of this Jeffrey Zeldin posted something That essentially says Ethan's definition was great and that's what he came up with the handle. But it had to be a fluid grid They had to use flexible images which is putting a max width and new browsers they scale And the media queries if you use any bit of JavaScript if you use anything else, that's not responsive. That's not what that is So there was a lot of the adaptive or responsive There was a lot of back and forth about well, what's the difference? What are those and for quite a while I couldn't even tell you and So what he's supposed to kind of build out to you is that It's not the exact approach. It doesn't necessarily have to be a fluid grid Don't have to have media queries evenly, but It's the end goal that we get to being able to just deliver the same website the different devices While giving them all the appropriate The appropriate content the appropriate user interface some examples for those of you that Are a little unfamiliar will really help you get kind of an idea The first one is coli.com to lly And this is one of the first that I know of Great examples of responsive design And as that first desktop slide came up, there's Four columns, you know everything's you know designed really simply a coin But as you continue to scroll your browser down or look at it on the different device Depending on your screen, but you're going to have either the two column you can see on the right Or the one column is the mobile version on the left The saswatch music festival This is a very well graphically done and if we notice the menu on these items And then when the mobile version comes up here, we see that they're Make navigation has been slung down four things the most important four things And the first link is scheduled Because what somebody on a mobile device potentially right there at the event what do they want? That can already and has already been done in Drupal quite a bit actually One of the first examples was the four kitchens website that they did a few months back Um, it does use the fluid grid. So as you start out a large resolution and Scale your browser down you're going to see these different shifts in how the The primary items on the page layout And the bottom two you can see how the navigation would become a little different as well Making it a little more friendly for a mobile device and you know making it You're kind of handling a button that's a little bigger to click on than a small text link The omega micro site Was recently relaunched on the same Concept it's fluid it goes up to a 1200 pixel maximum and has a mobile version where everything is now Stacked up certain elements are now displayed but if you If you go to that url and you scale down you will actually see during the During the scale all the way to mobile from 1200 pixels you get a lot of different Enhancements that happen at different points during a certain you just get bigger at a certain point We're only two in a row where they shrink down The side text is right there with it or maybe it's below it Uh, can you move business partners? I believe I'm not mistaken. It's amazing labs I was with upstairs did this one and this was one of the first ones sent to me that was Really amazing from somebody that had just dug into Responsive and the omega thing at the time And as it's fluid as well as you see on the page everything goes away the Large picture of the channel on the desktop as soon as you get just a little bit smaller than 1200 pixels. It goes away It's not important. It looks great on the desktop version of the site But that doesn't need to be on the mobile version Another one I worked on a triple camp new Hampshire. It's coming up in a couple months Has actually four sizes a 1200 pixel a 960 a 720 And a mobile version. I didn't actually spend much time on the design for the mobile You can see on the desktop versions Really slim navigation at the very top. It looks like a little Not from any bar But when you get to mobile, you have some really giant buttons. Yeah It's just going to make it easy for someone to use And the people that will actually be coming to the site on their mobile device are pretty much only the ones there Recently aquia we launched their Main site aquia.com Using omega there are a couple of small responsive enhancements in here with more plan in the future There's a few things that kind of shift with the fluid layout To get down to a little bit better viewing on a tablet They haven't actually done full local version yet with time constraints So how do we get to this how we How do we implement this on our own sites? There are quite a few ways that you can implement these methods that you can start delivering the same web page That's enhanced depending on what What device are you just reducing? If we start with JavaScript, one of the best methods is adapt.js by naming this method I've been a big fan of this for a long time in 1960 and what adapt.js does is on the I do the page load and then the browser resize It continues to detect the size of the screen And if you get below a certain point, this is all configurable through some javascript settings If it's below a certain point, it's going to switch the css into the grid So instead of 960 all of a sudden it makes shift down to a 600 pixel grid The benefits of this it does work in all browsers as long as javascript is turned on and That only becomes the problem when we look at much older feature phones that cannot handle javascript If you're not using a mobile first approach with adapt.js You're going to have problems on those older phones the css method using media queries, which We're all already familiar with it's been around since we started css2 We use media all print screening display all those Now we have in css3 min width max width min device width We're able to use these to actually Detect the capabilities of our browser That's what we're really wanting to look for we don't care that it's a blackberry that's three years old We want to know that they have 300 and 20 pixel wide resolution. That's all we want to know The benefits of this it works in all modern browsers So anything before ie9 it's not going to happen All the new smartphones and even when I have this couple years old understands media queries just long the only The only real issue here is dealing with i the previous versions of ie if you're really If you have to implement The same responsive way out or maybe you just go with some kind of default Any browser that doesn't understand the css3d queries will simply ignore them. That's again the reason for mobile first If you go to a mobile browser that doesn't understand it I'm just going to say okay, and I've already got my simplest version of the page Being the mobile version and any browser that's smart enough to look at it is going to understand and continue to enhance the page Combining the methods if you Are going to css3d query route And you must have it For the previous versions of ie you can look at respond.js and What it essentially does is a policy that is going to Hopefully i've never tested it I know some people said they've had success with it, but it's going to emulate the media queries in this old browser It's going to make it so the whole version of ie you understand kind of like the html 5 shift that you put in So that it understands some of the new tags in html 5 So combining the methods Depending on your requirements can be really good because you've really covered everybody's you should have it in any system where inappropriate We can really spend quite a bit of time here discussing which one is right And no matter what it really boils down to the clients you're dealing with Uh, but more importantly how you approach your clients A lot of the reading i've been doing and a lot of the work that i've been doing for clients is now from someone who Actually understands that a mobile version is more important than A pixel perfect drop shadow Every browser ever made across the world It's more important that they Approach this rapidly growing Mobile market rather than worrying about the details And let's build on our way up. Let's progress we enhance so that once we get to be this desktop version somebody's using firefox 14 They can display anything they want and put in a lot of great stuff targeted to the contemporary browser How can we implement these now in Drupal? The first methods that the methods like just discussed Are great. You can use them. You can start building out a one-off theme for a client with these no problem If you're looking for something a little more out of the box There's currently one base theme in Drupal for Drupal 7 That has already Tackled all this has already handled this and taking All of these approaches into account I've actually been working on omega for about two years Uh on tuesday during threes keynote. I actually launched the stable version But i'll be talking about some of the features for it And it's really grown from something that started off as My own need to just fill a theme that I started with for every project To now becoming something that's finally gained a lot of community support Has a lot of people contributed to the project and has even had someone come in practically rewrite all of my graphic code and Make it worse everybody you're going to actually be using some of the features first off obviously responsive grids Out of the box it ships with 720 960 1200 pixel grids a fluid grid And uses the mobile first concept So if you throw your browser all the way down with clean install you're going to get all your regions stacked into place. You're going to have Perfect looking basic mobile site ready to go. You continue to grow out. You're going to shift and enhance different layouts of different sizes As you move along mobile first approach Some of the rewrites that have happened over the past six months since Drupal country cargo Uh, the code was completely rewritten. Um, there's some advanced caching going on that really speeds things up I wrote some I don't know how to do if and crazy looking things that are all now gone and everything's performing well and CSS aggregation And when we were building out the responses The responsive features All of a sudden we had I don't know 50 different CSS includes in the header because each media query in Drupal Because media media all and then went four 20 pixels That will create its own group During the page build so it was way too many. So what we do now once you turn on css css aggregation in Drupal It all gets compressed into one everything is written appropriately And you don't have a thousand includes trying to accomplish all those every zone and region is easily configurable There's three main page elements and one thing that this theme does You will probably never have a need to edit the page dpl again I haven't in actually over a year now Uh, so we have three main page level elements in the html5 version the header the section which holds all the main content and footer You can place a zone which It'll never have a zone with any concept that came along about a year or a half ago that The zone is a container for the regions the regions needed to be grouped so that any type of grid properties or any type of main stuff would work with that So currently you place blocks in a region. This is the same thing for regions to place regions in the zone So you can place any of these zones any of these regions anywhere you want to place on the fly in the back end True to the 960 grid concepts that I've been using for many years now you have the ability to In each group of regions again the zone You're able to pick which one you want to split first on the page And which one you want to split first in the source order And you can order any region that way any way you want And that's great for the content first SEO anybody that really wants their content first on page That also helps with mobile first if you start them snapping your your content you want to be at the top We've got a few things that kind of simplify adding in a special css special JavaScript because I was at the use gates where I would build out a certain css JavaScript file that I didn't want everywhere on the site I didn't want to include it in the styles or script style sheets or script elements that drupal themes have by default So we have some new grid arrays in the theme about info file that allow you to define these and then enable or disable them By the theme setting july So this is great because a lot of people that are using or using any basing for that matter Each company kind of builds out their own something of that. That's their base thing already has all their custom tweaks in it It's ready to go You know, it's a little more configured to their liking to get started with This makes that easy because You know, maybe you're basically had a couple extra JavaScript enhancements that I don't need to do this client We need to quickly turn off you now have the ability As I mentioned, no matter it comes with 720 916 1200 Grids You can now define your own grids The site screenshot in the background is the one linked off of 960 gs Where you can generate any grid size you want any gutter with some more So for those that don't like 960 You can make it 566 if you want to you can do whatever you like and the The base thing implements it you can put this in your info file It's essentially to find a couple things and you have your own grid That you can now define your own media query for and are able to use that however you see fit One of the biggest things and this is kind of silly for the slide presentation But one of the biggest things was ever requested is equal heights regions and blocks That's in there now that works quite a charm The biggest thing was a simplified form settings interface And I'll use the word simple less Some people will say that to someone There's a couple hundred form elements that you can configure do a lot of things with But as you get to dig in it's really quite simple to move a region to another zone And a lot of the things we've been talking about here in London are how we're going to take the next step How we're going to build a drag and drop interface allow you to resize Stable regions on the fly drag and drop into different locations either through a back end interface or potentially live in front of the site So that's a lot of the talk that's been going on But the usage of this is actually besides a little bit of Little bit of documentation that's missing at this point There's now over 5000 installs of omega usually 30 to 50 in the Drupal omega IRC every day So there's a lot of support. There's a lot of people out there using it. Some of the sites are using omega Not all of these are using the Drupal 7 as well But there's a lot of large sites running omega with a lot of traffic a lot of a lot of visibility Now as we talked about the mobile mobile version responsive There's some places where currently in Drupal 7 and we hope we'll be fixing Drupal 8 For increases keynote now. There's actually a mobile or potentially going to be a mobile initiative that will handle this and responsive Uh responsive ideas in core. I actually made this slide. I haven't heard of that initiative But the two things that are really going to make this happen are the context score initiative and the Drupal 8 design initiative The problem with the mobile first right now in Drupal is Well, if you say that your biggest version of your website is 1200 pixels Where your smallest is you know, they work at 240 in the smallest one you can find What happens when you have an image preset that The image is the full weight of the page 1200 pixels You can use the fluid images, which is just going to scale it down But you still set your mobile user an image. It was 500k even in that Um, and that's a big problem. There's ways on one off case that you can do this. You can Use some job JavaScript. You can load a low-res version first and then do some determination to know that Okay, we found out. Yes, they are on the big screen. So let's Feed them the larger version But there's a lot of things here where with the web services and context score initiative that we It seems like we're going to be able to better understand What's what's requesting the page what we really want and provide the context that will let us know What we can use and if we want to ship an entirely different page to the whole user that might be possible Um, originally I said, uh, I worked on the American for about two years About six months ago after Drupal con chicago. I had someone come to the irc room and say Yeah, this is pretty great. I tried it It's all neat and stuff And it was actually the first person that uh Was able to step up step up to the plate take a lot of it off my shoulders and really make a huge contribution So Sebastian in front row Began to imagine how many hours he spent on these over the last six months and How much I spent kind of making sure he didn't rewrite another dozen Um resources, I did actually have some slides in here with a bunch of links, but they were too long to Even look out on the screen. I know it's kind of hard to see the screen here. So On the session page on the Drupal con site all the links have been Put in there the entire session outline. I will upload slides at some point as well But uh, all the all the posts that are mentioned Sebastian in lines contact information all that's there I would like to introduce you guys to michelle michelle's a little lot Michelle's smart Michelle's the love of my life Michelle It's a great time Are you saying if we can we use that can that be the only determinant information? So the question was that With all different laptop sizes some older stuff all these things is Using max with men with the css screen sizes. Is that the best way or only way? That we should be paying attention to um, if you are kind of paying attention to The guys that created this the whole responsive and everything That really seems to be enough. I mean that laptop that for whatever reason has a 480 pixel setup You know, it's probably gonna be using I just like that So I can't imagine what advanced browser it's using so it already needs its own simplified version everything If a client is really willing to Some client may have 90% of their customers may be using that little Jumpy laptop and if that's the case, I mean then that's when still something like device detection may be appropriate But the problem with that is with the device detection is it takes so much time not many clients really have the time to pay for that They'll be upset and they paid for a special android version What doesn't work on anything else or only detected to see if it was this one specific I really think it's enough In the omega theme actually we have like a fallback for the I6 seven and eight that doesn't understand We acquired this and doesn't know what the size screen is on Except for the iu mobile In i6 seven and eight It was displayed a default grid one you set in the interface. So it would just have nine sixty by default I think it's really enough to just pay attention to screen size currently, but in a month that may change In fact See Is there any way to test the different sizes Okay There may be a lot of better ones that I don't even know myself. I currently just use Every now and then I fire up the IE the windows phone 7 emulator and I don't really worry about android and iphone because I know they're Capable and I mean actually just use chrome a lot because you can Grab and resize all the way down to 400 pixels wide You can't get down to the really small like if there's a 240 or 320 width, but It really covers most of aces to know that you know in a pretty narrow layout that you have most of what you want The only drawback to that is if you're using a lot of other advanced stuff like CSS three gradients and drop shadows that may not work on the mobile And if you're doing that in chrome it'll still look like they work But I tend to do it really simply just with This was a normal technique Actually just a week we can have to go we finally got some patches in for panel support That will handle Don't personally use panel too much if ever anymore It will handle I think anything that's nested inside the panel and handle the right grid classes Based on your container elements So it should work well. I know there's a couple more patches coming a little bit later We'll tweak some that but It does work for those that are still using panels. Absolutely. That's uh It's a great question. It's been one pretty much every time I talk about it because again if you have 1200 pixels is your maximum width on the screen and you have a Slide show that is the full width of that You know, you're going to need an image cache preset It's 1200 pixels and those are large integers that in those Are no small tasks. So what happens if you're scaling down? and We were loading 10 images in the slideshow, but So let's say it's that told four megs of image data that were perfectly capable on our laptop and desktop That's you know, no problem abandoned with usually But once you get down to the mobile, what do you do because? um going back to Ethan Markov's definition of the Flexible grid or fluid grid flexible images the flexible images Something he also puts the government's blog that all it does is add css max width property to every image And so as you scale in this case it would scale down and it would look perfect Uh, there's some JavaScript that handles that on lower browsers, but we still send them the whole way That's where I think and I've had several discussions on it so far this week Uh, if there's a huge concern for that, which honestly there really should be um the best way to do it Using the mobile first approach Is you're going to take and load the lowest resolution image you can so If you've got four responsive sizes you're dealing with You're going to want to have four and you have to pre-sets so load your smallest one by default and Once the page is loaded there's some JavaScript that fires an omega determines which layout you're in No, you're in mobile no, you're in A wide screen whatever it may be You can use that to fire off and potentially replace those images With the high res only if it's the bigger Uh, that stuff is not built in because it's way too specific to a single use case We haven't thought of a way to really make that horrible yet because everybody's image pre-sets are going to be different We can't really make those assumptions. So on the one off it's possible to do some of that And for me on the couple that I've really implemented so far with this latest version I probably should have done that but it just wasn't super important at the time. So I'm just sending mobile phones a ton of A ton of extra data, but that's kind of a problem that in general Drupal happens regardless of what you're using right now There's not much of a way unless you're really taking a lot of time energy What's your question on it supporting the bandwidth? Like that's it Okay, um, well, I don't know if anybody's really tackle that. I don't know how you would really go about determining Yeah, I mean my iPad for example will show a glorious 960 website and it's you know, all of its beauty But if I was on a horrible connection Well, then what should it go down and show me a mobile version that's much more simplified Um, that's definitely something to think about. I definitely don't even know how to approach that I don't know if I've even seen anything that really does Is that okay? I'm sorry. Yes There's two in no way. There's two startups. There's the HTML5 version and there's an XHTML Uh, XHTML Works perfectly with the RDFA. It will validate But through anything in Drupal 7 right now that's implementing HTML5 So if you use that starter kit and turn it on REF and try to Try to validate your page, there's gonna be errors Because the HTML5 plus RDFA expect is not official. It's not recognized by anything There's not one in the interface Um Maybe that's a good feature request or maybe that's something I don't know if I personally would just do that in my core CSS my main file Defined it. Um, there actually doesn't need to be a little bit better set of typography and Of that type of space and have a boss, but thank you very much. Uh, actually two and a half years ago Uh, I moved from Denver, Colorado to New Hampshire for a job and Michelle worked there I'm not like that Thank you. I will say this Of the responsive designs I've done so far To which were in some of the screenshots Those are for myself or my local people community I'm starting Next week on one with a client that we're excited about. I've had talks with many That It's exciting yourself You know, a client that recognizes that recognizes that mobile is hot. Everybody's on a mobile phone. Everybody's got a smartphone or whatever it may be That can also adapt to these technologies. It's really easy to sell When the mobile usage is what it is And I don't know how many tablets I've seen in the room When you're able to approach your client like the defaults for The defaults for the grid sizes being 720 The first one is that's perfect and portrait mode Return to uh, landscape mode 960 fits in perfectly There we go to a browser or we went all the way back down to mobile For some clients, we'll never get They're gonna want again a pixel perfect shadow in 96 those clients Not for them And I've been reading some stuff lately that Really talked about how to approach your clients And I think the biggest takeaway I've had so far. I've still got several chapters to read this one was Ask them what's worth more Would you like me quickly out of the box just throw you a mobile version of your site? It's clean and easy to use or Would you rather have rounded corners 96? So that's one of my experience so far the people I've been in contact with are excited about this and If there are going to be plenty of clients that are Not on board with And I found that didn't take much more time A little bit my first run actually took quite a bit more, but it was just me playing around with some other css stuff All this can be done really quickly set us out a global, you know css that applies to your mobile version and your mobile version is ready to go and then Bust the comp out and If you if you css your comp appropriately for say your time put it on a 960 It'll work as long as you do the css right at 1200 or 720 if you're just kind of shrinking it down So yeah, I say it's like that. You could be some clients. You're gonna be like you're crazy I you know Don't want that and a lot are gonna be really excited about the potential of mobile talent sizing things like that and serving targeted versions or layouts to those to their clients Is dribble aware Question was when it's uh in Oh my god, as you shifter is it goes from 296 to 1200 when it switches the dribble aware No the There's a javascript. There's a javascript event that fires that would potentially be able to go and do some custom code And that's again some of the discussions I've been having based on now Well If I'm on that portrait mode title version Maybe I want to totally get rid of some regions and right now I would just do that quickly in css But again, they're still sending too much data. So Um, that's where hopefully some of these things in dribble able to come out The dribble will be able to get aware of some of these things really quickly and out of box Um But for now it's really not but if the use case requires it to be it can be A little bit of custom code Each of the layouts and any actually the whole point of you putting your custom grid giving them get Your own css file. So by default they're called it mobiles always first So it's often global css everything that's mobile goes there everything's with fault site one including mobile When you first turn it on there's narrow normal and wide Each of those has its own custom css file There's also a default That applies to all three of those So if your mobile is totally different We can use your default to start defining stuff that's global on all the responsive versions And then in each of those specific ones if there are overrides and my slideshow example is the perfect one so In the normal the slideshow should only be 400 pixels wide when you have the wide it should be 600 so you can Chain the css that way and override if you go up Rather than what used to always be the tradition is build out the desktop site first and override to get back to mobile The other way you're just going in reverse I can't tell you honestly. I usually Build my own slideshows. I have found a model. I love seeing how the box with those I haven't noticed any issues like in the queue really specific to any of those The biggest the biggest thing is they're not responsive ready. So that's where you kind of have to take into account either that Flexible image set up with max width property in css or using Using some kind of a JavaScript or load a low res then load a higher depending on There really shouldn't be any issues. Yes, if you load an up might fault and your in cash reset is 960 pixels as you scroll down scroll down to a smaller one without any adjustments. Yeah, it's going to fly off the page So each you know element like that you really kind of have to pay special attention to actually work throughout each of those Responsible layouts Yeah, put them in the comments maybe for the session that'd be great. So there are some ways out there I mean it really is possible Well, that's again kind of the problem that right now Drupal is unaware right now You know, we're not we're not really sending better data I haven't done that on a couple things and I'm simply using css If I've got eight items in my main menu on the big thing before or just contact form about us I'll just on the mobile css those items out Not the most efficient way, but They kind of work. Any other questions? Yeah, don't use display none Because I don't use display none It's really a good question and that's I don't think actually using display none has a giant impact. I don't know I gave up on paying attention to SEO years ago, but usually the sites I put up do well enough Um, I was a while off to here somebody who's an SEO expert really get into some of this I think the biggest problem would be Is if If people were aware to have some of these questions to point to people were aware of what was going on You don't know the advice But you're still at example dot com not in the balance example You're on the main website, but because it knew you were on a mobile device if it sent you a dumb down Page That might be what really affects a lot of SEO. I think that's where the real problems lie Anything else just using element this will over you know display none If you feel like it I I don't think that's a huge impact. Best places to put what? What was all very last part best places on the first part of what the question was kind of You know if there were any real stats on what mobile Mobile and commerce were doing like how many people are doing things like that Actually had a couple of discussions earlier in the week And I know here in the uk. It's pretty big I've bought it personally. I bought a couple things on my android phone but I think right now the numbers are so slim because You get to You're on your iPhone and you get to a version of the full website. It's just been scaled down and you're You know pitching them to zoom and everywhere you go. It's not really usable to get people to buy things quickly so I think that's something that you know needs to be addressed in these mobile designs that You know make it so that Consumers can have a good user experience quickly on their mobile at the car check out done and I think that is a hundred percent possible. It just really hasn't been tackled Nobody's really I mean going wrong. I'm sure there's hundreds of websites out there that have great mobile commerce options um And as far as the usability side I mean it's very good able to add a card Where do you put it or how do you make sure it's prominent when you're on a mobile version when the above the fold is now much smaller I think if that's why to do mobile first if you That added card about me may need to be the first thing in the content That may need to be the first thing about The title of the product the node And then as you scroll up then you can with css or you know any other kind of trick or remove it somewhere else You then now it can be something big and a little lower down. It's really obvious on the desktop and on the mobile so I think it all comes down to you know a designer thinking the right way and A theme would implement the right way so that in mobile it shows up appropriately and It works. It's got a lot of time. No questions. I need to say right after all this Got session page, uh, they're surveilling there. I'm rated actually on the presentation part and And I'll be around the afternoon if anybody has any questions or wants to come up Please feel free to ask. Thank you. That's the date