 Everyone allow me a couple of minutes to set up my laptop by the way I am the one who is standing between you and lunch, but I believe lunch is not yet ready So you have to bear with me by that time Okay, the topic for today is Mobile first designs Sorry, Radhika. I mean I'm entering into your arena. I'm a developer, but yeah The whole idea of this particular talk is to give the developer's perspective into mobile first You can consider it some kind of developer rant Against mobile first or mobile first anything, but these are more or less my experiences with this particular Password Okay, crafting mobile first a developer's point of view. So agenda today is pretty much simple Why mobile first? Who am I to talk about it? Adaptive versus mobile first decisions. We are going to take How wordpress comes into this and question answers. Yes over to lunch after the session First of all, who is my target audience? Mobile first is not something I should be discussing At a developer conference or Okay, let me try web designers who are basically looking forward to visualize and create Custom wordpress themes or developers who are building that particular visualization So everyone who is involved in custom design and development Will be my target audience by any chance. Do you know this particular person? It's from a Disney Pixar movie called Ratatouille. He is a chef Augusto Gustav He has a very famous statement to say Anyone can cook So similarly It's me. I have a statement to say it's not yet famous, but yeah, anyone can code in wordpress Nowadays it is that simple so when I Started knowing about responsive design. I remember that was a time 2012 or even before that 2010 11 and people were suggesting that okay going responsive is the way ahead and you should look forward for it This is going to be a next best thing and here we are in 2019 Almost ending and responsive is a norm if you're not building responsive then yeah Something is seriously wrong with that one. So responsive web design is a now a method Well mobile first is one of the approach like Radhika covered in her speech why That why comes in here as well So before we going into the why just let's have some history of it mobile first is Suggested and advocated by Luke Wrablowski He is now product head at Google and In his original book he mentioned three points now these points are relevant in The duration of the when he published his book that was 2011 I believe So mobile is exploding. So it is always better to have an experience available for your vast user base Another interesting point here is mobile forces you to focus and Indeed it expands your capabilities. So first things first why why mobile first Like that desktop is saying why not me in India if you look at The mobile users. I'm not talking about smartphone users. It's more than 800 million so far. Let us counting from IDC when we separate out a niche from feature phone to smartphones we have Projections of around 700 million mobile devices by 2023 and they are almost selling like 10 million plus devices per quarter This may be more but not less at all and thanks to new entry providers 4g 5g We have is an affordability in mobile internet So people are now accessing contents on the go. I remember a time when I was doing my MBA and I have to buy a pretty expensive Age plan if I want to access any internet on my phone and nowadays Data comes for free So mobile content consumption is on rise. So we have to cover these things So our challenges include make sites for mobile which will be faster attractive accessible most important and with rich interactions If I want to book a ticket On on the go. I don't I don't have time or bandwidth or fast internet to download an app and book through it I will prefer one specific website which has a pretty clean neat minimalistic layout On the ticket booking side instead of another one for which I require to scroll across couple of screens and find out which deal is better Interactions. So we have three approaches I'm not calling something right. I'm not calling something wrong. But yeah, there are three approaches One it's adaptive You go with the desktop layout you adapt it for tablet then you adapt it for mobile and Your job is done Another is mobile first going for the mobile design As a focus provide all necessary information on mobile at a very first stage then You will add you will increase or you will further adapt that layout for a bigger viewports This gives you a flexibility to keep a constant design language and Additionally add more contents And third one which is fairly popular nowadays is about buying themes So buying theme is good bad It's nothing like that, but yeah No purchase theme can replace a custom theme Built with a proper plan and good designers So I'm taking adaptive first fairly standard method. I will have majority of People who have built a custom theme use this method pretty fairly You have an idea that okay. My layout should look like this You search around for inspiration if you don't have a designer around you be your own designer you search around for inspirations I like this particular layout. I like this particular styling. Okay, let me code that one You can use underscore as you can use Practically any starter theme Those who are adventurous and skilled enough can start from scratch Start writing your own style.css functions dot php and enjoy Then you adopt it for tablet and mobile For I have some flashy Sign-up box. Maybe I will move it down For the mobile because I don't want people to be Distracted with that because I have a very limited viewport I call it A graceful degradation Let me explain this in a better manner So on desktop We have masala dosa with three chutneys Pretty much tasty food When I put it on tablet It uses the very same components by the way, this is ideally with one chutney. So I have removed unnecessary sections Then I put it on mobile And it will be up by Yeah, no chutney provided there I will make it worth like, okay Please open my site on desktop and you will get more Okay Is this a good idea if you have ordered a masala dosa and you will be served with up a not a good idea always So here comes The good the bad and of course the early Good it is a fairly standard practice people know designers know developers know But what happens when you take a commercial project? You have someday when your client concludes negotiations and you sign up an agreement and you go ahead with the brief And you start designing and the very immediate question is when I can see sample layouts So adaptive is pretty faster. You have to only build a layout for desktop immediately And you can say okay mobile ka hum adjust karlinge. We will adjust it for mobile cool Faster deliveries easier to build People use something like okay astra team is here. WPS try an elementor deadly combo Go ahead build quickly deploy get approvals go live Amazing the bad Like I said when there is specific functionality expected on mobile like one of my project I'm going to discuss it in later part of this Okay, I still have 15 minutes. So no problem They wanted a specific slider to appear on top full screen on desktop But on mobile the slider should appear below then slide up then get activated and then move on No kind of interactions make it Not difficult, but yeah tricky to build it on mobile and the ugly Like I said, you have ordered masala dosa. You will be served with idli or appe ugly Graceful degradation Here comes superhero landing Design for mobile screens first When I first heard this idea from one of my friend, okay, Abhishek is already here He was the one who introduced it long back to me that okay, there is some philosophy like this and This is the way these things work And I was like which designer will take this ULTA approach Ki mobile pe mujhe kyaise dikhega And then extended further, but eventually I found out that okay, there are many people many designers who actually take pain to build something like this because Client wanted because that is the purpose and because that is the problem This particular website is going to solve A small case study here There is one instagram brand I have recently working with These guys got like 100,000 plus followers on insta They sell instagram content. They sell goodies. They sell courses. They sell workshops Eventually, they are a cartoon illustration kind of page Their main customer is landing up on their website through their instagram stories Or through their instagram profile. That is the way they earn their leads In that case, it is very very crucial that how the mobile layout should be how it How quickly it can bring in the conversion for that particular client And yes, then I realized that okay, this philosophy works in such cases But again On the interesting note the designer who was working on that particular project Was a hardcore adaptive guy So he was like I have given you the layouts Build it first Then we'll look at how it will work on mobile and There I thought thinking about Then I start thinking about this particular Speech this particular topic Exactly that was the time when word cam mumbai was calling for speakers So I failed in Prioritizing content is much more important When it comes to mobile first Because you have a very limited space. You have a very limited viewport And you have a device on which user is very very focused It hardly takes half a second to tap on close tab And move on to another app or device Second place when you can use this particular thing when your competitor is a mobile app Like I said, I have Say make my trip app installed But I don't want to get into tapping those many things. I just want to check if I can get some other fair Cheaper deal for my airfares. I will simply open cleartrip.com in mobile Works perfectly as fast as app without installing it prioritization Arrange add optional elements for bigger viewport This is actually a perk Because you are delivering whatever all you are supposed to deliver On smallest viewport in the limited screen size already So whatever additional you can give it to your customer Is perk is additional. It's fun And the most part of it is that your design evolves over the screen Instead of gracefully degrading over the screen So end experience is yes subject to skills requirements briefs But end experience is usually better Now let's go back to the food analogy we discussed earlier Yeah I look at mobile first like this That on mobile you have one vadapao with some onion and half of a chili Bare necessary things to eat When you get on a tablet, yes There are a few more things and on desktop you get one additional vadapao if you want Exactly. I believe this one collects better, especially when it is lunch time So the good we have already discussed this particular one The good your design evolves You provide all necessary information quicker to track Better to convert Now the next question arises how to decide if I am getting a new project and which approach I should follow First rule of thumb discuss your designer They know better because they are going to visualize But yes, there are a few more things Adaptive or mobile I discuss this with experts There is a company the specific company who is into design domain called a fright mind I did recently did a couple of projects with them and I had a real good discussion with the lead designer taron He says he takes this call based on Following factors nature of a project like I said if you are the building for instagram brand More more traffic more visitors are coming from mobile. So it has to be of that kind The client This is where the typical Indian situation kicks in Not everything which works in us uk europe australia Works in india like their credit card get build automatically. We have to have payment gateways simple so His observation was if your company leadership is about 60 years or they are dealing into the traditional businesses They are very less open for even Thinking about mobile designs Sad but true for them mobile is an entertainment device and it is not considered as a serious business action And yes, this is a fact I have seen this I have been with Been in that meeting where the client strongly insisted that don't show me mobile Show me what it runs on desktop So at that time it will be a call of a designer whether Or not to use this or whether to use this and not to share it with the client only give the approval only take the approvals based on desktop screens Content Most of the time it so happens that okay, you get initial brief it ne persi shuru karo or jay se mujhe idea ata hain I will keep adding to the brief And that becomes a never-ending process You start with something very simple And you end up having okay, let's add this as well. Let's add that as well. I saw one more website Yeah, they got a really beautiful function. Can we have it on our website as well? Things go go on changing and timelines like I said mobile first takes some good amount of time to deliver your initial prototypes or design actions Eventual process is way faster. Your code is way better than The one which are adopted because in adopting you are writing patches You're writing custom media queries. You are removing elements. There are many display none There are many things which are running around with margins and paddings and all that things But do we have that luxury of initial timeline Is a question This case study I have already covered So how to decide? Summarize these three words Motive What problem your website is going to solve? What what you're going to deliver to your client and what is the ultimate aim? Do you want to sell any products? Do you want to get newsletter subscriptions? Do you want to simply announce some event? Depends Interactions what kind of interactions you are expecting on it And third preferences Okay, process. This is a very top level view It is as top level view as you are watching earth from international space station Define your content and scope very much important when you're going mobile first Because you have a very limited place very limited room to play around Then Get a good designer Give him some freedom at least Don't tell him that okay, my site amazon ke jaisa hi dikhna chahiye Not required Give them some freedom and you won't regret Framework supports okay bootstrap Fairly popular in India. I believe abroad is a foundation fairly popular These are css frameworks were built mobile first So you can practically write small viewport queries And if you don't want to modify them, you can leave them as it is and they will Be adapted to the largest screens larger viewports Choose your framework well which supports whatever the adventures you're planning with your website Then okay, there is something called sdlc. I call it wdlc WordPress development lifecycle. It is nothing but a My term of using your water for model again and again and again Okay, how many of you remember waterfall model by the way, okay, thank you At least someone is listening to me Okay So there are starter themes who have mobile first framework built on mobile first framework my favorite one. It joins wp built on self-foundation There are many Then you have to plan your interactions because most of the time do while doing wordpress Yes, we have a lot of scope for customization and we have a very limited things which are ready made So plan your interactions. You can plan your cpt's and a cf's and everything accordingly Now this is one concept. I just got it at very last minute. Can we have a viewport restricted queries in wordpress? So for example, there is a blog which is loading 25 blog post If I'm viewing it on my mobile unfortunately using 3g 4g is fairly available. But yeah, sometimes 3g And loading those 25 queries might be a load for my network connection. Can we have that one? Just a suggestion. I'm open for discussion offline on this one And what about the future? I believe the future or present or the whole idea of mobile first is about justifying your contents well across the devices So content is going to stay Future is going to add two more sections into this One has already added that is context And conversion So when I say context, I'm not talking about smart assistance But yes, if I'm opening a website I'm traveling somewhere in this area I'm opening a wordcam on my site and if it can pop up. Okay. This event next event is scheduled in 15 minutes Or yes More chances of conversion. Can we have something like this? So I'm done with this road is open for your lunch. But meanwhile any questions, please