modern web app design templates

modern web app design templates

with responsive web design, adaptive web design and hundreds of online design apps a lot has changed with web design process in the past few years designers - they sketch, they wireframe they prototype, they even collaborate with their developers. they even generate style guides online for their developers so we are going to cover this

whole modern process of web design during this course so let me show you what we are going to cover in this course in some detail in this course, we are going to design a responsive website project from scratch which will involve getting information from clients studying design briefs

ideation or early sketches wireframing and then mockup or web design for large, medium and small screens along with setting and calculating grids. and finally we will be creating specifications and style guides for our developers at the end for the flows and

interactions, we are going to build a simple prototype using invision app i am also going to show you few design approaches and frameworks like atomic design designing with content first approach responsive web design considerations and designing for developers

okay, now the tools we will be using this process are balsamiq mockups for creating wireframes then adobe photoshop for creating your web design or mock-ups for large, medium and small screens then we are going to use zeplin for creating online style guides for developers and in the end, we are

going to create a simple prototype with inivision app now what problems i am going to solve during this course how to get in the mind of your client? and where to get design inspirations to start your design and how to calculate your grid for different screens sizes and how to

setup guides for different screen sizes do i need content before designing? can my design be easily converted to code? what are latest efficient approaches to responsive web design so i am going to answer all these questions during this course this course is not for beginners in photoshop. if you are a beginner

you should look at my other ui design courses hi, i am ahsan idrisi and i am designing ui's from past 8 years and i am a freelancer if you want to learn my process of creating stunning web designs and responsive web designs using art boards and how you are going to

create a code-friendly website. then you should take this course so let's see you inside this course find the discount coupon link in the description of this video

modern web app design templates Infographic : How to Deal with Copyright, Be Careful

Mock Neck Sleeveless Dress

Mock Neck Sleeveless Dress

hello, it's momo here! today’s tutorial is on a fully lined, two-piece lace dress. this is the first of two parts and willbe focused on making the top. there’s a lot to go through,so let’s get started. make sure to subscribe if you’re new,and outfits will be at the end of the video. the top is a basic tank top with a v-neck. i added two one-inch darts right belowthe bust to cinch in the waist. the back is the same pattern, but it has alower neckline, and it's also split into two with a one-inch seam allowancedown the center for the zipper.

the shoulder straps are one inch wide. i started with the shoulder strap by foldingit in half and sewing along the side. once it was turned right side out, i snippedoff about two inches from each of the strap. this little strip is going to be attached to the o ringto make up the back part of the shoulder strap. before attaching the lining to the fashion fabric,i sandwiched the straps between the two layers. notice that they're placed upside down, but no worries! they will be in the correct orientationonce the layers are flipped right side up. on the back, the strip is a little bit too short tostay put as a loop, so i'm going pin it in place. also, the lining is a single piece here becausei was still playing around with ideas for

the back design, so i didn't want to cut it up just yet. i sewed along the neckline and addedsome ease by snipping into the seam. i also trimmed off the corners where the shoulderstraps are attached and sewed the seam onto the lining. here is a close up, and i'm goingto sew right next to the seam. it was tricky to get around the shoulder straparea since there was very little room to work with, but i managed to avoid catching any unwanted fabric. plan b would have been tohand-sew around these corners. either way, all of these steps helpto create a smooth neckline. for the darts, i sewed both layers together as oneand made sure everything was smooth before sewing.

the dart is basically a right sidetriangle with a half inch base. at this point, i decided to open up the backcompletely and attach it to the front. because my fabric doesn't have much ofa stretch to it, i went with a zipper for closure. this is all excess fabric, so i'm going toadd the zipper right here for a better fit, inverted so that it opens up from the bottom. first, i closed up the back with a bastestitch that will be removed later on. with the zipper lined up against the bastestitch, i sewed close to the zipper teeth. and for a clean finish, i tucked awaythe end of the zipper tape to hide it. with the baste stitch removed, thezipper should open up freely like so.

after removing the excess fabric and zipper,i finished the hem with a decorative elastic. here is a snippet of the skirtfor demonstration purposes. as always, i attach the elastic with the scallopsfacing away from the edge before going back in to secure the raw edge. all that’s left is the shoulder strap. a needle and thread was helpful withguiding the strap through the slider. looking down at the slider from the top, thegeneral looping pattern is to go through the first slot from the bottom andover through the second slot. this pattern is repeated a second time.

now, let's take a look at the actual strap. see how the strap goes through the first slotfrom the bottom, over through the second loop into the o ring from the top back through the first slot from the bottom and over through the second slot. notice that the second loopalso sits inside of the first loop. the end of the strap is secured to this part. here it is in action. under. over. and over again.

with the end secured, you’vegot yourself an adjustable strap! maybe it’s the holiday season, but thisoutfit makes me feel so festive! i love how the sunlight plays off of the glitterson this skirt, and the top adds a minimalist effect. a leather jacket in the same earthen tones provides some warmth. wide legged pants are one ofthose things you either love or hate. i fell in love with the flow and fabric ofthis pair, and i decided to keep the leather jacket for a contrast in textures that, atthe same time, doesn't clash with the bottoms. thank you so much for watching,and i will see you back here for part two! bye!

Mock Neck Sleeveless Dress

mobile web design and development best practice guide

mobile web design and development best practice guide

so now that we understand tasks,what comes next? >> well, then you actually startto get drawing the screens. you get to pick up the pen, orthe white board marker, or the mouse and start trying to imaginewhat these scenes, these environments the user's goingto interact with actually look like. so you're going back to the tasks and kind of figuring out what are the piecesof information that they need to see. what are the pieces ofinformation they need to provide. how do those all fit together onthe screen to support that task?

and from there you can kind ofstart building one screen and maybe a couple of screensthat cover that task. and then look for connections. you can start looking for thingsthat happened earlier to the user, that brought them to this stage. you know, those screens wantto be related in some way. or you think about thingsthat they want to do from that point once they complete that task,well where do they go? and as you start to kind of get allthese screens you start to build these

flows and connect them. you have a sense of which things arereally important which things are less important or frequently used. you start to build out the structure forthis experience. and you think about the user might comein this way and spend a lot of time here and then hop over into this differentcondition and spend time there. that starts to guide you about how theoverall navigation of that experience is going to work. >> and which tool do youlove to use to do that?

>> i love paper and pencil. >> right. >> but at some point you get more andmore detailed with what you're doing. so you can start very coarse. you can just start with a white board or scraps of paper because youwant to kind of fail quickly. you want to draw out things,realize what's wrong with them, crumple them up, and throw them away. and draw them again.

a lot of what i do asa designer is iteration. and there's a saying thatwriting is rewriting, that applies to design as well. >> right.>> design is redesigning. >> so you design it to show it tosomeone, you get some feedback, and then you redesign it. >> yeah, absolutely. and you often will drawa lot of different things. and just kind of get a feel for, fromfeedback and from your own experience,

and from the understanding of the userthat you've built up through all those other steps. which ones are the best bets,which make the most sense? and some of that is about makinga choice based on the whole product. it's good if you can get to a smallernumber of patterns that the user has to learn rather than the user havingto learn 100 different styles of working with your app. so when do i know that i'mdone with all these checks? >> okay.so you're never done.

that's a joke. that's design.>> oh that sounded unfortunate. >> no sorry. >> okay.>> i mean it's great you could try but you're never going to quite get there. like there's always going to besomething that you want to change. you learn something else fromthe testing or from putting it out. or there's some new capabilitythat comes around that you want to incorporate into the product.

you'll get closer and closer. you'll continue to approach it,but you'll never quite land there. so you'll kind of go through andyou'll iterate, and you'll redesign, and you'll go to higher andhigher levels of fidelity. you'll go from those pencil sketchesto mockups to very polished mockups to prototypes. and you'll start buildingit at some point. so that said,there's things you can look for. >> okay.>> you don't have to give up all hope.

>> okay.>> so, have you covered all of those tasksthat you want to address, right? have you completely solvedthe problem you were looking at? does the product have a point of viewabout what things are important and which aren't? you know, if you have the tasks thatare high priority make them feel like they're important to the user. like stress them so that they knowthis is what this product is about. you've done user testing, right?

>> of course>> okay, so have you covered all ofthe issues that arose from that? have you kind of addressedthose high priority items? and then finally, have you solvedthe problem you set out to solve? you go back to those original goals and see am i actually meeting what iunderstand i need to do for that user? >> and what would be a good mark orsignal to tell me that i need to move from design to actually do rapidprototyping or stuff like that? >> you should do thatas rapidly as you can.

you know, even if you're just testingthings on paper prototyping it out. using kind of the simplesttools that you can do. you have that analysis phase andthen once you move into design, you know design and prototypingshould be very much hand in hand. the closer you get to something thatfeels like a real experience to a user, the better feedback you'regoing to get from them. >> of course.>> in many cases. so, you want to get to thatpoint as rapidly as you can.

mobile web design and development best practice guide WordPress 4.0 Rumor and News on the Web

mobile web design and development best practice guide pdf

mobile web design and development best practice guide pdf

every software project needs a really good specification if its gonna succeed but it takes a lot of practice to able to write those specifications it is not easy. so today we are gonna look at a very simple approach that anybody can use to write solid specifications to get their project done right.

hey everybody, i'm dave hecker and today we are talking about how to write specifications for your outsource software project. let's first look at what the high level objective is of the specification. all you really want to do is communicate what you need to the developing team. it doesn't really matter how you do it, or the format

or what it looks like, or how you deliver it as long as you communicate it well, that's what we're going for. it's not easy to do but there is kind of a simple mentality that you can take that's going to help a lot. first you wanna keep in time that you should always put in as much detail

as possible, you can't have too much detail. repeating yourself a few times or putting into unnecessary detail waste a little tiny bit of space on usually a virtual document. forgetting something is a big expensive mess, so don't hold back try to get as much as you can. also imagine that the reader,

your developer, is coming with zero knowledge. explain everything no mater how rudimentary or obvious it seems get it down on paper. imagine they have nothing coming in that's going to help a lot, and they have to learn everything from scratch. use lots and lots and lots of words. don't go short.

don't try to be concise. really go for it. just keep talking or talking or whatever it is you do. so keeping those things in mind we're going to walk through an example and i'm going to show you how easy it can be. this is sort of a brainstorming exercise. people think that when you write a requirement to know

exactly what's going on in your application. you've got everything in your head and you're just writing it down but it doesn't really work like that. writing requirements is a brainstorming process in this example we're going to use a real example which is a site that tracks peoples weight loss. so, when this client comes to the service provider they

say i've got this great idea for the weight loss site and here are the requirements. and let's say one of the requirements says something like this. user's can see metrics about their workout. sounds good. the client is probably thinking there's going to be all kind of metrics, they can see how their workout are going, how

much weight they're losing, how much muscle their getting whatever it is. the developer, that doesn't mean anything, they're going to say what metrics are you talking about? i need more information. so already we can just add words. that's the main part of the exercise. it's just add stuff. let's see

if we can add just anything to that requirement. how about instead of user can see metrics about their work out, logged-in user you can see metrics about their work out. not very useful but we did add something into its true the idea of the exercise is just to add

stuff for brainstorming. so its ok that it is not really meaty. lets try it again. we can look at that and think well what kind of metrics are there? there could be lots of them. let's try one. logged-in user can see a progress chart showing their weight loss. now, this is getting good.

now we've got a specific metric in mind. we know the user is logged- in and we're starting to develop a real requirement. let's try to add one more thing. logged-in user can see the progress chart showing their weight loss period. the chart will show the users weight loss by day, week for a month.

now this is kind of getting interesting. now at least we're drilling down on one feature. it's okay to repeat yourself, like we say logged-in every time, it seems obvious right, but don't worry about that because we want the developer to be crystal, crystal clear. we don't mind repeating our words. okay, we're brainstorming that right now.

we're going to brainstorm in a totally different way we're gonna tell a user story. these are sometimes called use cases, sometimes called user stories, but it doesn't really matter. the idea is to get away from a requirement that says the user can do this and try something where it says, this user enters the site

and here's what they do and it's sort of a narrative. so let's try the same requirement as the user story. lets try like this. a user wanted to see their weight loss so they logged in to this site and they viewed a chart showing their progress. that's kind of the same requirement but its just said in a different way.

the reason it's so valuable is because now we're still brainstorming and we're going to think of a lot more stuff as we go. let's try it again, we'll add a little more brainstorming and we're adding stuff all the time. a user wanted to see their weight loss so they logged into the site, clicked on my progress and saw a chart showing their weight loss. this is even

better. now we came up with something new. the developer didn't knew that there was a area called my progress. so through this brainstorming process we started to go up navigation and it's getting more and more useful to the developer. let's try it again. a user wanted to see their weight loss so they

logged into the site, clicked on my progress and saw a chart showing their weight loss. their weight had gone up that week and because they were gaining weight the chart was displayed in red. now that might be something you just thought of while you were brainstorming that use case but it doesn't matter. if you

wanna capture it down, if its something you wanna do it write it down. you don't need to go from beginning to end and write down every single piece of the application in one go. it never works like that. consider it a brainstorming exercise and just jump around all over the place and when something comes to you just add it in.

just start typing, typing and typing and you'll drill down on each requirement just like we did on that one. after you add that one requirement go back to the use case and read that and then go back and forth and if you think of something else jump to another requirement. it doesn't matter. just alternate, keep moving.

so, to sum it up alternate between requirements and user stories. you want to be brainstorming. you want to keep adding stuff. you can never have too many words. repeating yourself is okay and imagine that the reader of the document was starting with zero knowledge. they're coming in totally cold.

so that's it for today. for more outsourcing advice, be sure to visit us a sourceseek.com and be sure to subscribe to our channel for weekly tips. we also want to hear from you . so please leave your comments and questions below. we are gonna answer every comment and question that comes in. we'll see you soon.

mobile web design and development best practice guide pdf How to Capture Idea : Evernote App vs Hard Paper Notebook

mobile web app ui design

mobile web app ui design

hi everyone, welcome to today'slive lesson with adam rasheed. we are going to be learningsome serious sketch stuff. so we're going to be jumpinginto a lesson in mobile user interface design using sketch andthe latest features and updates. so we are joined by adam rasheed, who is going to take us through thisdesign in the one hour session where he will be teaching us how to use sketchand build this wonderful design and then you can then start answering yourquestions for adam in the chat area, which is located on your right if youare viewing this right here on webinarjam.

then, yeah, start fielding your questions. say hi. i'll be manning the chat room. so feel free to filter anyquestions over to me, or field them over to me, andi'll get them through to adam. so that's the way that this works. so welcome andlet me know where you're all coming from. i'm in australia,adam's in the united states. so let's see how far wecan get in this webinar.

all right, so now i guess i'llintroduce you adam, say hi. hey guys, how's it going? my name is adam rasheed andi am a freelance developer and designer, and i just released a newcourse on sketch 4 on sitepoint so, here to show you how sketch works. excellent. so, can you give us a little bit ofinformation about what you're going to be covering today's live lesson. yeah, sure.

let me actually pull up myscreen to show you exactly what i'm going to be working with. well, in this live lesson we're going tobe covering how to create a mobile user interface in sketch. if you've signed up for the webinar,i'm guessing you know what sketch is. for those of you that don't, it's an amazing ui tool built fromthe ground up for user interface design. and what i'm going to becovering in this lesson is, i'm going to be going over how tocreate the mobile screen size for

this blog i created forthe sketch 4 course we just released. so this looks a little intimidating butwe're going to break down exactly how to create differenttext styles and shapes and use all the features in sketch thathelp us to really speed up our workflow. so this is the finished file, butwe're going to start off actually with our wire frame, andwire frames are exactly that. they're like the blueprint of your design. so i i created these during our course and we're gonna be working off of these and asyou can see it's just text and lines and

different kind of placeholder imagesjust to give us an idea of the layout. now when creating a user interface in2016, you wanna make sure you design mobile first because over 60% of alltraffic is coming through a mobile device. so you want to keep that mind and reallymake sure mobile design is a big priority, and then you work your way upto tablet and then desktop. and what we're gonna do iswe're gonna dive right in and get started by creating a new page andcalling it design. now we're going to pressa to create an artboard. press iphone 7, cool.

and let's just drag outthe height real quick. so what we're going to do nowis to set up a good layout, and sketch is amazing with it's layout andgrid features, because when you're creating any typeof visual design, even in graphic design you want to work off of the grid orlayout to really make sure you have a unified design that like just looksright and has some uniformity to it. so we can go to layout settings andlet's do a four column grid and we want a gutter width of thirty pixels,and the reason for that as i love creating my designsoff of and eight pixel grid.

that allows me to really scale up anddown the components, and elements i want in a really uniform scale,based off of an eight pixel grid. so, 32 is a multiple of eight,and it works really well for us. so let's take a look atthe wire frames again, and see exactly what we'regoing to be creating. so this is a blog that i'm actuallydeveloping on my own, on the side, and it's going to be for freelancers andit's really going to show freelancers how they can switch over from a nine tofive job to full time freelancing. and i want it to be a resource forexactly that demographic and

have content that really helps peoplelooking to transition over to freelancing. and the way i want to dothat is with the blog and have helpful articles that teachyou how to do exactly that. so i designed this blog and i wanted to really focus on the content,not so much on fancy graphics or images, so we have exactly that, we havedifferent blog articles right here, we have the logo right here,the hamburger menu icon right here. underneath that we have differentcategories we can select from. and your social media icons aswell as resources, widget and

popular posts andi'm going to be creating e-book as well. so we're going to have little section for that, as well as an email opt-in areawhere they can sign up to an email list. and then your footer, and that growsinto a traditional main area and then a sidebar area layout once you increase the screen size to a tablet,and then a desktop. then after the course was over,actually went back and kind of rethought the design. and since i really wasthinking of mobile first,

i thought that having the categoriesyou could sort through all the way down heredidn't really make sense. so, i brought them up here andcreated this pick-a-category area. so when you're on your phone you can topthis and these categories slide down, and then you can pick it and then it filtersout all those blog posts in that category. for instance, if you tapped on businessyou'd only see business articles, so, that in mind, we'll actually createthat new layout that i'm working on. so, well, let's dive right in andstart creating these icons. sorry ui elements.

so we're starting up pretty simple. it's just gonna be the logo andthen the hamburger icon. so let's go to our design page. hey, adam. yes. sorry to interrupt. i just wanted to know. do you have these filesavailable anywhere or will you be making these files availableanywhere for after the live lesson?

yes, i will be. first of all,they are included in the sketch course and i can email you the zip file with, firstof all the icons here that i am using, and most of these are open source assets,so i'll tell you exactly where to get them online in caseyou don't wanna download this zip file. and then as well as the stock photos thati'm using, these are all open source, have an mit license which allows you touse them for whatever purpose you want. excellent, all right. so for those who have registered,

you'll have a follow up emailwith all of those links included. okay, excellent. i'll let you get back to it. bye all set, thanks. so let's start with the logo. so in this file,i already have the logo set up. so we're just gonna go here andjust copy this, cmd+c it. and of course this willbe included in the file, so we go back here andwe just cmd+paste it.

and next up we're going tobe using this navicon icon. now the source i got thesefrom are ionicons.com, it's the icons needed forthe ionic framework. so you can go to ionicons andthen download these. and then they're they're all open source,as i mentioned. and i took the time to find the onesthat worked and pick them out. so for the sake of this tutorial,we're not gonna spend time looking for the perfect ones cause ialready found them here. but when you're designinga project on your own,

you wanna really make sure that you pickthe right icons for the project at hand. so we can just drag this in. and you'll see it's pretty big. so what we're gonna do is size this down,right here. to make sure that this lock icon is on,that makes the proportions locked in. so we're just gonna do 16 height andunlock this. i like keeping things in pixel grid, and i don't like having sub pixel sizes,because one, it doesn't really look right, andtwo, when you export it as a png or

anything that's not an svg,it turns out really blurry. so yeah, you can since it's a hamburger icon, it doesn'treally need to be exact proportion. so you can make it fit to the gridthat you're working with. now we're gonna press r for a rectangle,and create this kinda background for it. and then we can press cmd+option down, and once more to make it jumpall the way to the back. what we want to do now is make surethat we have the correct spacing. and how i'm checking the spacing out isjust simply hovering over the item i want,

and pressing down option. this is one of my favoritefeatures of sketch. and we wanna size this to whereit's 16 pixels from every side. and instead of having to drag anddrop like this, you can actually press down command,and press up, and go up by one increments. between 20. this is looking good. what we can also do nowis make this white.

and go here and press cmd+r to rename it. suppress the background, ibercon. let's clean this up as well. i i like organizing as i go along. and i'm pressing cmd+shift+gto ungrip these. now i have these three rectangles,i can press union and it's shape now, call it navicon. and what we can do is simply selectthese three items that we have, and we can create a symbol,call it "header".

and what symbols do is,they allow you to repeat a lot of differentelements in your design. for instance when you're creatingsomething like a user interface, with multiple screens. instead of having to copy paste or even just create the same element over andover again. you can just simply create a symbol andthen,say it's another screen. we can just simply go toinsert> symbol> header> mobile. and have it right there.

and this really makes things convenient. and it's a great feature that sketch hasit that i haven't really seen any other other ui tool have yet. so we have our header now, and let's go back to the blueprints,or the wire frame's page. instead of having to press this andgo up, we can actually press fn, which is on the bottom left of yourkeyboard, and up to jump pages. and we're back at our wireframes. now what we have here as far as the blogsgo is a featured blog post which is bigger

and more prominent than the others, andthen a handful of blog posts below that. and then a load more button,which loads more. instead of having a pagination, whereit's one two three next, type of thing, you can just simply loadthe next batch of blog posts. and that helps to createa really good user experience. so, let's take a look at whatthe different parts are of a blog posts. we have the category up top,the title, and underlined, the date, andthe number of comments in it. so you'll see that theseare all different titles.

and the way i made these andgenerated the data for these titles, is actually,i'm using a great plug-in called craft. you can google "craft plugin sketch". it's made by the guys at invision, which is a really cool prototyping appthat works really well with sketch. you can go to craft invsion. and simply download the plugins. and you'll see i alreadyhave that up here. and it actually installs a manager foryou.

and it actually is like fourplugins wrapped up into a one, as data, duplicate, library, and sync. we use the data plugin right here,and to create these titles. and how you can access it is,once you install it, you'll see this craft plugin on the side right here, whichis actually quite a perfect place for it. you can go to data, andyou have custom, web and json. now custom is different, kinda pre-populated pieces of datathat the craft plugin comes with. you can generate random names, headlines,articles, dates, and so forth.

i use headlines for this. you can actually go to live websites andscrap data from there. and if you are a developer,or working with developers, you can grab a json file and populate yourdesign with live data from your project, which is really fantastic. so let's do that right now. let's set up one of these blog articles,and then we can populate it withdifferent types of data. so let's jump back to our design.

and before we do that, actually i forgot,we need to put an underline in here, so. something here. and we're going to go to the artboard that header mobile is in, and we're going to create an underline. again press down option,to, to see this spacing, we want it to be flush, soit's zero spacing and let's do and a height of eight, let's just makesure that is the correct height. perfect, and so just copy the hex code,that's actually height of 16.

another great way to manipulatesizes is once you're in the area to change the height, insteadof having to type in different things. if you want to double it just do *2,there you go, and it's really convenient andthen type in the x. and you have document colors andglobal colors. global colors are when you create swatchesand you add them to global colors, still show up on every newsketch file that you create. document colors are specificto this very document. so if you add this,it will only show up on this.

document when you open it up again soi picked this nice blue color. gonna use the same one here. and we have our header now. so we can go up here andpress or resize to fit and it'll be exactly the size thatthe content is in, within the star port. so let's go back andyou'll see that the symbol actually, reflected the changes that we madein the very, in the symbols page. so, this is another great feature ofsymbols, is when you make a change it will reflect it throughout every instance thatthe symbol is being used in your design.

so, let's let's work onour featured blockbuster. so, we have to dosomething like business and let's talk about the typography now,or the type tool. in this design i'm gonna be usingsystem fonts which come with your macs. and i'm going to be using helvetica neueand georgia which are both system fonts. and we're going to be usingthis 4a4a4a color which is a really nice dark gray color. just a quick rule of thumb whenyou're designing user interfaces. you don't want to do just black and whitefor text, it looks a little too stark.

so you want to lighten upthe text color a little bit. if you're going to be designingon a white background. let's go back to the design andsee what is this all about. so, we have a category andyou'll notice that it's small. and we have a 14 pixel size anda 16 pixel line. so, when you're designing on an 8pixel grid, like i mentioned, you can have the size be whatever youwant, but as long as the line height is within the pixel grid that you're creatingin, it usually aligns it pretty well. so we have our 14 pixel size andour 16 pixel line height.

just pretty cool andlet's go regular, do new text style. i'm working off of the alreadycreated text style, but if you are creatingyour design from scratch. you can go down and create new text style,and you can have it be whatever you want. but for the purposes of this designyou already have a category business. you'll see we're usingthat blue color again and it is fourteen pixels size andsixteen pixels line height. and now let's let's focus on our heading. so this is where we can go tothe craft plugin, go to heading.

and let's do technology. it's a pretty dated headline. make my space your best design space. so another one. okay. that doesn't look as dated. so let's pull this up andmake sure it fits within our layout. perfect and let's take a look at our design again and we have h1 mega mobile.

so, h1 mega mobile. see, it's helvetica neue,and it's bold, and it's 32. and we can actually change,let's change the light height here. let's make it 40. and i believe this shouldbe how this looks flushed. okay, so let's pick a new headline. this is a little too wordy for us. perfect. and underneath that let's takea look at our wire frames again.

we have this title and then weunderneath that we have a banner and then we have our metadata which isour post state and the comments. so let's go back. believe this should have sixteen pixel,and it looks good. sixteen and eight. okay, cool. again when it try to work offof a eight pixel grid and it starts to look really nice. and we can go here and i want this to bethe same color as the category color.

so, essentially in the design, you havea different color for every category. for instance, you have business which isblue, you have your podcast which links to the podcast and that has actuallya white color with a blue background. marketing which is red lifestylebusiness again creativity, and so forth. so wanna keep that in mind. go here and we have a banner color orcategory business. let's see 16 believe it's eight,double check, or two actually. that's two and 16 and then 8, perfect. so you can go here, add 2.

and make sure it's 16 pixels down,perfect. and let's create the metadata. this is,we're gonna be using these icons again. so let's bring in the clock svg, and it's a sound, its 16, perfect. maybe eight pixels away. perfect and let's ungroup these. perfect and union, not union.

in fact perfect. put clock renamed this banner, banner. so let's change the color of this as well. okay, great color, 9b9b9b. and this is where we'regonna start using georgia. so, let's do something like better, right here. so, you can see it's a georgia font,and it's regular, and it's 16 pixels, andit's the same 9b9b color.

so, make sure it is 8 pixels down. and it's perfect. so, what we're gonna do here iswe're gonna turn this into a symbol, call it icon-clock. and we're gonna use our dataright here to generate dates. so, let's do, perfect. being from the us,this format bugs me, but it's fine. and we're gonna also do the same thing forour comments. but the comments doesn't needto be created from the craft.

it can just be a comment,just a zero comments. so, go here and do the same thing. 16, we're aligned this,we know where it is, perfect. and undo, and again, go here and create this, perfect. make sure it is aligned well. and we'll create a new area, comments. meta, perfect. a new symbol from here as well.

call icon. so what we're going to is work this simply by selecting all these andpressing command g and call it. post, featured-post actually, dash post. now it seems a little trivial to haveto rename things as you go along. but when you're working with a team or even prototyping this yourself laterin vision or frameware or whatever. it really helps to have organizedelements within their proper groups.

so let's make sure thatthe order is correct as well. and now, this is a new feature in sketch,we're going to actually have resizing tools now that weren't available when iwas first recording the course for this. so, what we have in our options, in ourtool belt is, stretch in the corner, resize object and float in place,now by default everything is stretch, so when you stretch things like this, youwill see that the icon's stretching out. the width for, the width containers forthe text are stretching out, and it just doesn't look all that pleasant. so we can do is actually pindifferent things to corners.

let's say we want to pin this to a corner. that means no matter how we resize this, that icon is alwaysgonna stand the corner. and not get stretched out. it's very cool. so let's do that with this here as well. so if it's not in the cornersuch as this date. it's going to find the nearestcorner which is right here and it's going to try to pin itself to that.

so we're doing the same for this. and the same for this. now, this we can allow to stretch aswell as this and other than that, it should work pretty well whenwe resize it, pretty cool. now, we have that. and let's check out the size here,i believe it's 32. let me double check though. thirty two, yup. and now what we're gonna do is actuallycreate the normal blog posts and

we're actually going toleave out podcast for now. because it's just fast to createthe background in blue and then white over again. so we're gonna focus marketing lifestyle creativity and so forth. so, let's. and let's simply copy this down. to that and then move this down. and then we we call it post,let's call it post one. now let's go to our data.

we're actually going to create new data. gonna add item. gonna add custom. and calls categories and type in business, marketing, life styles. creativity. and we're gonna save that. and we're just going to press this,and going to press new headline. technology's fine, perfect.

and we're going to alsopress state one more time. and what we're going to do now isgo to duplicate, and vertical. before do that let's make sureyou have the sizing correct 64. so what duplicate lets you do is create different instances ofdata that you're creating with specific sizing orspecific spacing between each one. and the difference between doing this andcopy paste is it lets you create and populate new data with every instance andwith definitely every duplication. so let's check this out.

we will see that it createda new title every time and it created a random categoryfrom the list that i gave it. i know this the typespacing is a little off but we can fix that it like really twoseconds, thirty seconds like but. yeah.this saves us quite a bit of time. the only thing i don't like is it createsa group for you and then masks that. so let's delete this mask. and let's ungroup this. let's work from the top orfrom the bottom up.

this is a shorter headline. all right, that's good. perfect, and working is, perfect. and you can do that so forth by actuallyapps that's ready for you guys. and this is what it looks like. so let's just copy this and paste that in. is copy. go back to our design. get rid of this.

simply paste it. paste that correctly. and we want this to jump to the top. so we can press cmd+option+ctrl+up andit'll jump right to the top and we can do the same with the header. so are there any questions so far? so no questions on our front. but what i did find interesting is,i've taken a couple of polls. and it seems as if 38% of our audience

have learned how to usesketch through our content. so whether that's a book or a course. maybe it's one of your courses, adam. or maybe even articles. so that's really interesting to hear. now, 27% are saying, or 33% it'sswitching now, are actually saying that they're learning how to use sketchthrough this live lesson here right now. so good on you. nice.yeah, that's really good.

actually that's increasingnow as i'm speaking. 21% have just kinda winged it. so i'm curious,how did you learn how to use sketch? well, i learned sketchat a very good time. i was looking for a way to really increase my toolbelt of design. i was a developer first soi designed with code, with html, css, but i wanna do some gradient stuffthat i'd couldn't do in css3 yet and whole bunch of things.

and i somehow found out about sketch and i got a trial andi really picked it up within an hour. i think that's why a lot of peopleare already learning sketch in this live lesson is just it's built fromthe ground up with ui design in mind. and before this,you actually just had photoshop and i believe you have fireworks, butmore people used photoshop for ui design. and it's not meant for ui design,it's meant for photo editing. so you had to do a lot of work arounds,get a lot of plugins and extensions to make it kinda hackit together to produce uis.

but this is such an incredible tool. it just helps you right off the bat. and you can figure out within an hour orso. and get right into it. and really focus on your design. and not let bad design get in the way. you can really just focus onwhat you wanna create and this helps you extend yourreach of design skills. it's really cool.

excellent, excellent. yeah.now, we have one question in that time. rene wants to know in your design. why did you get rid of the long headlines? what's your thinking behind that? well, i was thinking that i wouldn'tcreate long headlines myself. i more or less wanted these generatedheadlines as placeholders for actual headlines i'd create. if you were creating for a client thatyou didn't know the content that you

would be creating, you would design forthe worst case scenario. meaning, the kind of 60 characterlong headlines that you saw could be a possibility then youwould throw those in, but for me, i'm gonna be the one developing this. so i know exactly the type ofcontent i'm gonna be creating and that's just the personalreason i didn't do it, yeah. excellent, so do you have a preferred or recommended character lengthwhen it comes to heading sizes? yeah, actually,you can look up seo best practices,

but seo-wise,you don't wanna have it too long. i would say character length orword length, 10 to 15 words is good forseo ranking purposes. aesthetically, i likeshorter length sizes. the flash tutorial, this wouldn'tbe a great seo article headline. but it looks good in the design andthat's the kinda key difference you wanna keep in mind whenyou're designing sites for a client versus when you'redesigning stuff for your portfolio. for your portfolio,you can have aesthetic first and

then for a client you wanna make sure,excuse me, you are being realistic in the typeof content they're gonna be creating. that answer your question? yeah, it does. and now, we've got a newquestion from bobby, as well. he's asking, adam, is css exportedfrom sketch generally usable as is or do you have to do some additional work? well, that's a great question actually,i've used css exports from sketch, but i don't use them inthe way that they export it.

let's just do a quick example,let's do a gradient real quick. oops. all right, so we have this gradient. this actually looks pretty good. so let's rename this,call it background, gradient. so what we can do is we'll copy the cssattributes, we'll open up a text editor. and let's see,this is already a project i'm working on. so you can just press cmd+v, andyou'll see that it creates a note for you. background gradient.

and then, background image and it shows you this css3property of linear gradient. and if you have brackets installed, it actually gives a cool littlepreview of what it's gonna look like. so i don't really keep this note in. i just use this background gradient. and then i'll copy it, and add it to whatever elements need tohave that type of gradient background. so yeah, it is helpful, buti don't just blindly copy paste it.

i'm very particular aboutwhat part of the code i use. excellent, and you know,because you come from a perfect split. of where you were developer previously andyou are now a designer or you also work with design. what is it like using sketch? are there any benefits in sketchthat you would like to highlight to the developers or make designers aware? so that when they are working withdevelopers, they have little things that they can do to the designs to make iteasier for a developer to recreate.

well, i think sketch is actuallyreally good out of the bat to be developer friendly. the biggest thing is, the size,the distance and the measuring tools. with things like photoshop,it's really hard to measure. and you'd have to really send a word doc of all the measurementsbetween your elements. but send a developer a sketchfile they can just go in and press option and know the exactmeasurements and the sizing. and like we just covered the cssattributes if they wanna

be really lazy they can just copythe css attributes for every element. other than that, i like that theyhave a very good layout tool. and universally, almost, if you develop or if you design around a 12-pixel grid or12-column layout, which breaks down to 8 columns on tabletand then 4 columns on mobile, like so. developers can use popular frameworkslike bootstrap or the zurb foundation or bourbon neat which all have 12column layouts as a default. so, it's really easy todevelop them right there. but the then again that's all design.

so you wanna make sure that you'redesigning with good practices in mind. and the actual program that you'reusing like sketch should be able to allow developers to come right in andnot have to worry about learning it. just know that they can use option andcheck out the distances. and press command, and click to gothrough groups like i'm doing right here. this is a group. but if i command click an element, it'llgo right into that layer as you can see, and then you can check outthe different distances from there. so as long as you have goodcommunication with your developer

sketch is honestly one of the bestprograms to hand off to a developer, too. so, there are 15 minutesleft of this live lesson, so i'll let you get back into your design. now, for everybody else that's watching,send through your questions because i'll interrupt adam in the last five,ten minutes, something about there. and field your questions tomake sure that meet the block. all right, i'm going, i'm muting. awesome, thanks forthe questions so far guys. yeah, like into i mentionedjust shoot over question and

i'll be happy to answerduring the end of the course. for now let's finish off this project. so we have these right here and then we have a load more buttonnow that we need to make. let's just simply create that,press t type in load more. and this isn't part of the design but i wanna show you a new feature ofsketch which is text transform. this is a css property as well and you cantransform it to uppercase or lowercase. all through the styling notto the actual typing out

your upper case or lower case characters. so if i turn this off or turn this to lowercase it will changeall that which is really cool. so let's do that,we're gonna center that up. let's see if we have a text style,button text. okay cool we have that, but before wedo that let's create the actual button. see, it is 56, perfect. and we can andcreate a new shirt to call it button blue. the way i'm getting this glow gradienthere is actually i'm using the shadow tool

without a blur. so it gives us almost this kindof border type of look and feel. so that below here and button textperfect and let's center this up. select the two and center this up. now since we have this little border herewe'll need to make this go up a bit. looks good. press ctrl l to turn off the layouts. looking good. that's much better.

okay, so what we can do here is createa symbol again, call it button blue. go to the symbol, and make surethat this text is float in place. and what that does is itliterally floats in place, so you can mess around with the sizeof the button all you want. and what we're going to donow quickly is we don't have too much time to cover this area, butwe will copy this pick a category. all of these and shift. a shift down to move them. and just simply put this here,center this up.

it is, by the way, i'm using big nudgeswhich is pressing shift and up. and you'll notice that it's actuallymoving in increments of 16. the reason forthat is i have a plugin called nudg it. you can google nudg it. and by default the big nudge is 10 pixels, i changed it to 16 so i can workwith an 8 pixel grid much easier. and then you press apply, andchanges it that way, it's pretty neat. cool, we have that, andlet's focus on creating one of.

these areas right here soit's the resource tool. so let's check that out. you have also notice that there are a lotof override options for symbols. so, for instance, we have this right here. maybe i don't want it to say resources. maybe i wanted to say free ebooks. enter andyou'll see that overrode a symbol. so this is a really cool option forinstances where you want to have something that looks similar buthas slightly different content.

so instead of, say yeah, so go to resources, we can do ebook, perfect. that's really cool option, too. so let's go to the actual symbol. we have this resources. which is a group has the banner. had all the copy, the button, and a resources area anda background image and a porter. so let's make that an ourdocument from scratch.

[cough] so let's turn up. on r, r is simply a rectangle, press 0 right here, 0. okay, and rip, call it, all the way down. and c, cmd+v will create an overlay. and before you do that,before we put the image in, let's just create a title for it. so h2 and h3 white. this is two pixels.

and we can can turn on our layout. perfect, andmake sure it's 16 pixels away. perfect, and create our, make sure it's light. copy this right here. h3 white. perfect and we just simplyneed to create a new button. so we'll just use our symbol that wejust created and put that in here. and we'll give that, let's do 40.

40 looks much better. this is where we can use ouroverride again to resources. looks like. [inaudible] it looks good. now we can add our image. so we're going to be using this image. let's copy that,put that in here by pressing cmd+v. see that it's huge.

so what we're going to do now is putthat between the overlay in the mask. i go to mask, right click and press mask. turn off the visibility for overlay, you'll see that it's limitedto this containing mask. so let's scale this down,this is much like illustrator, photoshop option shift,to scale this down uniformly. and what we can do now is we can actuallygo here, and go to gaussian blur. turn that on. we get a nice blurred background.

we can go overlay andsee if we have an overlay area. if not,we can just simply go to our to design. we have an overlay right here,which is 60%. we can actually do a little bitbetter make it less gray or black. we can do straight up black and do something like this. now we can actually go to blue andtype in. that looks much better,now it has a bluer tint which kind of creates a better looking,more uniform design.

and go back here andincrease the blur a bit and there you go. and let's see if we're missing. we're gonna skip this causethis is essentially the same what we're gonna do nowis create popular post. i'm actually just going to copy it andthen show you how exactly i made it. okay, sowe have just basic text right here and then we have h3 which is 16 butit's helvetica bold. and this is where it helps to, everythingis stretch so you can just simply, and one actually, so we can bigstretch it up big nudge stretch,

just cmd+shift right andit's fully flush with the layout. and see if there's anythingelse we can show you how to do. so you can notice that i'm also usingbackgrounds for areas like the footer even though it's just the text right here wehave a rectangle or the footer background. like this. copy that and hide that. in your design you can and paste it and, so it's sa symbol, footer. so, the benefits of saving the area that'sgonna be essentially the padding is.

say you have somethinglike this right here. and let's say you're done with the design. you can simply go to your artboard andpress resize to fit and it will re-fit it tothe area that you have here. now if i didn't have this kind ofbackground area with all this white space. it would just cut it off tothe very end right here and that's not a really goodlooking way to end your design. same principle applies to this headerthat we made in the beginning. i noticed that i added a background andwhen we resized the artboard to fit,

it accounts forthis background that we made. and that's really cool. and yeah, that essentially is howi created the user interface for this design, and if you haven't already,make sure to sign up for the course for sketch 4, andyou will get to see how i made the elements for the bigger design, bigger screen sizes such as the tablet andthe desktop, you'll see i scaled up design sizes forinstance. talk about scaling up typography.

this is very design specific it's notreally something that sketch controls but you have to account for. you have to realize that when you have atype that someone's looking at on a phone, it's gonna be much smaller than someone'slooking at on a ipad or their desktop. a good way to systematicallydo this is you can check out resources like type scale. and what that does is it gives youa really good guideline to follow. and the bigger your screen size, thebigger you can make your type scale for instance.

say we have a desktop size blog. this is using this 1.41augmented fourth type scale. you'll see that each next up headingis much bigger than the last. this is h1, h2, h3, so forth. it doesn't have to be this exact decimal. but you can round it to the nearestnumber that makes sense. for instance, if you're trying to roundthis to the nearest 16 pixel grid you can you can do that, too. and the smaller your screen size gets,the smaller you want to make your scale.

for instance if desktop is 1.414,you can do 1.25. you'll see that the sizechanges aren't as drastic. this makes more sense fora mobile screen size. yeah.did you guys want me to cover anything else that you seehere that i didn't cover? yeah. i'll interrupt you just here, adam. we have reached our one hour limit. let me just quickly fieldfour questions across to you,

before we start wrapping up. sure. first of all, mike wants to know, do youuse symbols across artboard sizes, or different devices? or do you create symbols foreach artboard? well, i used to create different ones foreach screen size but now that sketch 4, these are,actually this is 3.9 i believe. they have resizing tools sowithin a symbol now, you can say pin this to a corner andyou can,

for instance if you don't wantto have different content, so for instance the tablet actuallyhas all of the menu links laid out. but if you had the same sortof format as your mobile, you could simply just,i'll create a one right now. header, mobile. you can simply do this andjust drag it out. and it would make sense ifyou positioned it right. for instance, you have to pin thisto corner so it doesn't stretch. you can do things like this.

it really makes it easier foryou to change it and adapt it to different screen sizes. the only thing that you would wanna createa new symbol for is like i mentioned, when you change your content withina content format within the symbol. all right so right now bobby wantsto know are there any plugins that can automate vertical rhythm oftext element given a base unit? a number that i'm aware of andthe ones that happen now i've tried messing with them andit gets a little too fussy. i would say use the type scalei showed you as a guideline.

and then fit it into your grid. and something i didn'tmention as much is you can control your vertical rhythm by pressingctrl+g, which is your actual grid. and you'll notice thatyou can do things like. just fit it to exactly your grid, and of course you can changethe grid settings here. you'll see that i havean eight pixel grid and i think i've been preachingall live lesson long. and you can make sure if it's nice and

tidy within your design, andestablishes a good vertical rhythm. but as far as like exact dimensions go,it really depends on your project. for instance, if you're working onsomething that's more typography heavy like this, you wanna make surethat your text really stands out. in that case, use a larger type scalelike i am, or if you have something where the text is secondary andyou're focusing more on designs and illustrations, then it doesn'tneed to be as large necessarily. and yeah, it really is a more, it depends. question whether or not.

what exactly your type scale should be. but to answer your question, there's nospecific plugins i can mention right away. melissa wants to know whenorganizing symbols and type styles using the forward slash,what groupings do you find works best? what i like using is for different states,i'm coming from a developer background, i have just the regular oneright here as you can see. and then you'll see i havedifferent screen sizes and then whether or not it's centered. and that helps break things down.

and then the thing i use a dash foris when it's a different color, such as white, so you can do h2,this is a perfect example. you have regular h2 right here andthen you have h2/center. then you have h2-white, andthen you have h2-white/center within that. and that's what works best for me andif it works great for you then feel free to use that but if you find somethingbetter, make sure to use that and let us know about it but this is what's beenworking well for me for over a year now. i've been sticking to that. sorry, i was starting to ask the questionand i didn't realize that i was on mute.

all right, so the last question was frommina, i feel like you may have already answered this, but maybe there'ssomething that you can add to it. she wanted to know why are you leaving somuch space between element groups? is it just looks spaced out, oris there a technical reason for this? well it's both. good design is problem solving, and there's a lot of reason behinddifferent decisions people make. using white spaces universallya very good thing. especially in ui design where you don't,well where pixels are free.

the more something is spaced outthe more attention you can give it. when you're looking at it. if this is all bunched up. first it would look like one big thing andit wouldn't look as nice. and it would look messy. now that they're spaced out youcan actually go through it, and see that there,see the different hierarchy between them. and you'll see that, the more somethingis closer, or the closer something is, the more it belongs to that group.

and the closer it is in the vicinity, the closer you see it in your mind andyou associate it with that. so you'll see that the metadata below andthe category above is close to the title. but the actual groupsthemselves are far apart, because you should be able to discern thedifference between the different posts. and as i mentioned,you can give each different post a little bit more attention,so you know where to tap. and that's the reason i like usinglike space between different elements. excellent, so for everybody that'sattended, thank you very much.

i love that everyone comes fromall different parts of the world, some of these countries i've beento myself, so i really miss and love it when i hear thatyou come from those places. all right, so, thank you adam forgiving us such a nice detailed lesson on creating your ui design for,i think the blog was freelance job? yes, all right, cool, so hopefully we'llsee those changes live on your site soon. yeah, i hope you reallylearned something from this. feel free to send me a message on twitter,it's @__angelamolina, or hit adam up,adam what's your twitter handle.

it's @arasheedphoto, so adam,a, rasheed and then photo. you can hit me up andask anything you want, and i'm pretty good at replyingright away- excellent. so thanks again for having me,angela, appreciate it. and i hope you guys found this useful, andthanks for giving us an hour of your day. yeah, definitely. so you have all registered,everybody that's here watching this live. we will send you an email with an update of where to find this video livejust in case you wanna watch again.

we'll be writing up a couple ofthings about it on sitepoint. now, hector, you asked if whether we'regonna write about the attendance. maybe not so much the attendance, but definitely a recap on whatwe've learned from the session. so look out for that on sitepoint. if you have any suggestions,if you have any feedback, you know how to find me ontwitter @__angelamolina. i'm at sitepoint, sothank you very much for attending, and i love the littlethings that are coming in.

thank you, bobby, thank you, nadia. hopefully we catch you soon, andif you want to learn more about sketch, i've sent a link in the chat room, whichhas a link to all our sketch content. so that's articles, books,and the course, obviously, check out the course on sitepoint premium. it's user interface design with sketch 4,so, it has been updated to sketch 40, andincludes all the new features as well. apart from that, i think you can evendownload a sketch cheat sheet right now, if you go to sitepoint.com, solook out for that, it's free.

so, anything to help you learn, anyway so we'll see you at the next live event andthanks, catch you around. thanks guys. [noise]

mobile web app ui design Tutorial Creating 100% Pure CSS Contents Slider

mobile web app design tutorial

mobile web app design tutorial

thank you guys so much. this is really awesometo be on the stage today. over the past year,i've spent a lot of time talkingabout web components, really teaching developersthe basics of the standards and teaching folks how tofocus on building elements. and we're now atthis place where we have this burgeoningecosystem of elements that are out there.

there's a lot of developersout in the open source world who are creatingelements but also got element sets that have beencreated by the polymer team. we've got the core andthe paper elements. and so we're atthis point where we have this flourishingecosystem and i think it's time forus to start to think about the next challenge, whichis how do we leverage that ecosystem to actuallybuild real applications.

and i'm particularlyinterested in figuring out how to build compellingexperiences on mobile. the mobile web has aton of opportunity, but it's one of those areaswhere for web developers, it's always been achallenge to create a real compelling experienceon a mobile device. and so when i was preparing forthis talk, what i wanted to do was just like pop my phone outand look at the applications that i use allthe time, things i

consider sort ofsuccessful experiences. and i wanted to go through themand just sort of catalog what i see as the kind of commonui and ux expectations in a successful app. so what i've gothere is twitter, i've got pocket cast forlistening to podcasts, and i've got rdo. and one thing that struckme as i was doing this is if i just takethese applications

and i put them side by side,even though each of them kind of feels unique when i'mlooking at it in isolation, when they're alllined up like that, it feels like they're justlike a ton of commonalities in their interfaces. and so using twitteras an example here, i want to just catalog someof those common ui patterns that i see. so up at the top,we have a toolbar.

pretty familiar. and oftentimes, ifyou've got a toolbar, you're going to fill itup with some icon buttons. and below that,you've got some tabs for switching between content. you've got a primarycontent area, and oftentimes,you're going to have like an infinite list ofcontents inside of there, or you might just belazy loading more content

as the user isscrolling down the page. and down at the bottom,you've got a secondary toolbar for doing additionalactions of some kind. now, if we takea step back again and we line these appsup again, like when i was looking attwitter a moment ago, it felt like a veryunique experience. it felt kind ofaligned with its brand and it had kind of itsown thing going on.

but again, i linethese guys up and i can see that they allkind of have those same ui patterns going on. they're all kind of doingthe exact same thing. and the reason theyall look the same is because they're allbuilt using an sdk. so these are examplescoming from android, but the same is true ifyou're working in ios. if you're building onone of those platforms,

you already have this sdkthat's available to you, grab a bunch ofcomponents out of it. maybe you kind of tweakthem a little bit, color them differently. but in general,you're using stuff that's already available tocompose your application. now, on the web, we've kind ofnever really had this thing. we've never had appbuilding primitives. we've never hada mobile web sdk,

and i think it's timefor that to change. and i really thinkthat the way that we're going about doing this is usingpolymer and web components. so my goal today is to teachyou how to build mobile web applications usingthese new technologies. and i basically splitthis up into four parts. [? the very ?] part, i'mgoing to show you just how you can structure theui for your application, then we're going to look athow you can transition from one

state of yourapplication to the next. after that, we'regoing to look at ways to make sure your applicationis performant, because that's really crucial for amobile application. and lastly, we'regoing to look at ways you can make sure yourapplication runs offline because if your mobileapp doesn't run offline, then you really don'thave a mobile app. people are oftentimeson their mobile devices

when they're in low connectivityto no connectivity situations. so it's got torun offline for it to be a real, compellingmobile app experience. let's start with structureand just think about ways that we can compose theui for our application. and really, that's thekey word here-- compose. what i want to do is i'm goingto take as many preexisting elements from the polymercore sets to the paper sets and i want to bolt them togetherto build my application.

so this is the appthat we're going to be working from today, justa really simple contacts app that i threw together. and i'm trying to utilizea lot of the same patterns that i was showing in theprevious successful apps that i had before. so you've got the toolbar atthe top with some icon buttons. you start scrollingaround, you're going to get this sort ofinfinite list of content

inside of there. you've got a drawer panel thatyou can pop out for your menu. clicking on anyone of the contacts is going to do kind oflike an animated transition to show you thatperson's contact details. i get it's really nice, coolcondensing header effect as i scroll around. and also, i've got a littlefloating action button down there in the corner.

i can click that, popopen another screen. these are allanimated transitions that i'm using here. now, if you've seenme talk before, you've probably seen me startoff by using this element. anytime i'm buildingan application, it seems like i'malways starting off with this coretoolbar element, which is just a reallysimple container.

it lays out itschildren using flexbox and it's a reallygood place to get started with oneof your screens. and becausecomposition is really the name of the game,what i want to do first is i want to just throwsome additional elements inside of here, and ijust want to compose the ui for my toolbar. so i've dropped a papericon button inside of there.

i've configured itwith an icon attribute to give me the hamburgermenu from that application, and so i'm going toslide out my menu later. i've also dropped adiv inside of here for the title of my application. now, one of the cool thingsabout the core toolbar is that since it usesflexbox, i can kind of take advantage ofthat a little bit. there's things called layoutattributes in polymer,

and what i can dois i can actually tell the title ofmy toolbar that i want it to flex to takeup as much space is it can inside of the toolbar. this is a reallyhandy trick to know because it means thati can then pin controls to the other side of my toolbar. what i want to dohere is actually add a little contextmenu so i can

have things likesettings and feedback. so to do that, i'm going touse another element called paper-menu-button, andpaper-menu-button's pretty interesting becauseby itself, it really doesn't do anything. it's kind of useless. if you just put apaper-menu-button tag on the page, youget really nothing. it only reallycomes into its own

when you start composingother elements inside of it. that's really how youunlock the potential of it. so i've got anotherpaper icon button that i've thrown insideof here, and that's going to give the usersomething to click on. then i'm going to throwin a paper drop down, and that's going to give methis little animated rectangle thing up there. so when the menuexpands, it's going

to kind of like comeout from the corner, expand towards thecenter of the site. the halign attributethat i've thrown on there is going toindicate which direction it should animate from. so here, we'retelling it to animate from the right edge towardsthe center of the screen. lastly, i'm going to throwa core menu inside of here, and that's going to give me theactual menu items that users

are going to select formy sending them feedback. now, the cool thinghere is that each of those elements that i threwinside of my paper menu button is useful on its own. i can use core menu elsewheremy site if i need a menu. what's awesome,though, is when i start to composethese things together, i get different interestingcomplex behaviors. and it's alsoimportant to point out

that i didn't write any css orjavascript to make this happen. i just nipped togetherthese-- oh, yay. thank you, [? demetri ?]. these elements just knowhow to work together because they're app buildingprimitives, which is awesome. and once i'm happy withthe look of my toolbar, then you take all of this markupand i could throw it inside of another elementcalled core-header-panel. and the core-header-panel isjust a really simple container.

it's got a header sectionup at the top, which will hold the toolbar,content area down below. and the cool thing aboutthe core header panel is it only really cares aboutmanaging the scroll behavior from my application. if i put a toolbarinside of it, it's going to make surethat that toolbar stays sticky up there at thetop of the document and all my other content is justgoing to move underneath it.

again, no css or javascriptto make this happen. these are justsmarter primitives. they know how to worktogether like that. now, when someone's actuallylooking at one of my contacts, i want to have this cool, bigshot of addy osmani's face basically, and i want it todo this cool animating effect. so as the personis scrolling down, it kind of collapses,and it's sort of crossfading withthe background image.

and to do that, i'm using acousin of the core-header-panel called thecore-scroll-header-panel. it's basically thesame component, but it adds this nicecondenses attribute, and it gives me thatkind of cool effect. now, once i have the differentscreens for my mobile site laid out in a way that i likethem, i can drop all of this into another elementcalled core-drawer-panel, and that's going togive me a responsive

scaffold for desktop and mobile. and the way thiselement works, it's basically got a drawer area. any content that iplace inside of there is going to endup in my sidebar. it's got a main area. ends up in theprimary content area. and the cool thingis, this element is responsive by default.

so if i'm on my desktop andi just start dragging it out, you'll see the drawerpanel opens there. i can open and close it. i drag this thing out, andwhen i hit a certain size, the toolbar justpops out for me. this is really nice. again, i'm not writing anybreakpoints or media queries to make this happen. the element's just responsive bydefault, which is really nice.

now, at this point, i've builtthe skeleton of an application. i've kind of shown youhow to put the shell around everything, butwhat we're still missing is the lifebloodof our application. we're missing the content. and when i'm showingthese apps earlier, i mentioned that oftentimeswhat they're going to do is they're going to dolike an infinite list, or of a lazy load ofcontent so the user can

keep scrolling throughall of their tweets, or all of their albums,and things like that, and we can achieve the samething in our application using an element called core-list. and core-list is oneof my favorite elements because i feel like it'ssort of the thing that knits all the scaffoldingand the content together in this waythat i really love. the core-list is basicallya virtualized infinite list.

you connect it toa data provider and then it stampsout a template for every single instance inthat data provider's array. so here, i'm sayinglist.data equals some array. i've got objectsinside of that array. each of thoseobjects has a name. and inside my core-list,i have a template element and i'm just binding toeach of those instances as they come in.

it gives me this really,really performant infinite list so i can go throughall of my contacts. now, as i was buildingmy application, i kind of cameacross this thing-- which i'm going toshare with you as a tip if you want to go out andstart using core-list yourself. one of things thatcore-list does is it recycles its children. that's actually howit's so performant.

it makes a fixed set ofchildren and as they're moving, it's pulling them backaround the other way. so if you have image tagsinside of your core-list, you can end up in a situationwhere you're basically racing the network and you'rehaving stale images fly past the screen, andthen they catch up and change, whichsort of looks weird. so i found that there's anelement called core-image which you can use toprevent stale images

in your application. it's pretty easy. you just drop it in here. you give it a preloadattribute, and what that does is it says, hey,if i'm loading an image, i'm not going to displaythe stale image that perhaps was insideof here before. i'm just going to displaya little background color. and so what we can donow is we can actually

have this cool contacts list. we can sort ofrace the networking and you can see theimages loading in, but what you're not seeing isstale images, which is good. the other thing that idiscovered as i was doing this is that it's really important tomake sure to set your core-list scroll target to yourcore-header-panel-scroller. i know that this is alittle bit of a rough edge, but i wanted to makeyou guys aware of it

if you're going to go out andstart hacking on these things today. basically whathappens when you do this is you'retelling the core-list to listen to the scroll eventsthat the core header panel is firing and that way, the twocan work together in harmony. now, there's two ways thatyou can go about doing this. you can either set thescroll target in javascript. you could say list.scrolltargetequals hpanel.scroller,

or you can do this with bindingsif you want to be really fancy and impress your friends. you could just say scrolltargetequals hpanel.scroller. now, this is one of thosethings which, again, i think it's a littlebit of a rough edge. perhaps we might be able toclean this up in the future so that you don't haveto wire this up yourself, but i wanted tomake you aware of it because it was like thefirst thing i wanted to do

was put one of thoselists inside of one of those fancyheaders, and i needed to set up this linkageto make it all work. now, through the beauty ofcomposition, i've taken my list and i've thrown itinside of my scaffold, and i have this really,really cool application now. now, i want to giveyou a quick recap of what we have inside of here. so up at the top, i'vegot a core toolbar.

after that, a paper-icon-button,a paper-menu-button for my contacts menu. i've got acore-header-panel, which is controlling the scrollbehavior for my home page. i've got acore-drawer-panel, which gives me thatresponsive scaffolding so it works ondesktop and mobile, and i've got a core list formy infinite content provider. now, one thingthat's really cool

to do once your applicationhas reached the state where you feel like it's kind ofshaped up a little bit is to think about waysthat you could change it. and if i look at thisand i just imagine perhaps applying a littlecss to that toolbar and perhaps adding a littlebit more content to the list, then i'm really notthat far from something that looks a lotlike inbox, right. all the parts remainthe exact same,

we're just tweaking slightly theappearance of them-- changing some colors, adding alittle bit more content-- but we've now got a verydifferent experience. and because the core listsupports variable height content-- meaning thatour rows don't all have to be the exactsame fixed size-- we can think about throwingcards inside of here. and if we do that, then we havean experience that looks kind of like g+.

and again, none of mymarkup actually changed. i still have a core-toolbar, istill have paper-icon-button, still have paper-menu-button,header-panel, core-panel, and core-list. so my markup remainedthe exact same. the only thing thatchanged was the content that i'm placing inside ofit, which is pretty cool. now in my mind, this isthe power of composition. when we have a mobile sdkthat's full of these really

good generic building blocks,we can build vastly different experiences just by arrangingthem differently and tweaking them slightly. i think that's huge. so let's go back to ourcontacts app for a second. we've got the basic pageskind of figured out, but i haven't really shownyou how to move from one state to the next, and this is adilemma for a lot of folks. they start building components,they get really excited,

they throw themtogether on a page, and then they're like,how do i go from point a to point b. basically,how do i do transitions? and this is one of thoseareas where we're still working on it, buti think we've got some really coolstuff in the pipeline. one of the elements that i'veshown before which i think is really awesome-- i put thislittle experimental badge on it because it also is alittle experimental--

but it's so freakingcool i like to show it. it's this element calledcore-animated-pages, which gives you a pluggablesystem for transitioning of one state of yourapplication to the next. and basically, theway this works is i put some sections insideof my core animated pages. i configure itsselected attribute to tell it which section shouldbe displaying at the time, and i give it a transitionsproperty and i tell it--

or sorry, transitionsattribute to tell it which transitionsi would like it to play as it moves fromone state to the next. and with basicallyjust that i've wired up this is really coolsystem for animating through different statesin my application. so inside of my app, my markupkind of looks like this. i've got a whole bunch of markupthat makes up every single page and it's all kind ofcomposed together.

and so the way thati'm going to transition from one state to the next isactually take all this markup and turn each section of myapplication into a custom tag. keep all that markup,make an element out of it. then i start nestingthose elements inside of core-animated-pages. so i start withmy contacts page. i drop in an info page forwhen you click on a contact and you actually cansee their profile.

so i created a littlecustom transition here called fade scale. it's on my info pageas an attribute. it's also in thetransitions attribute for core-animated-pages. so now when you clickon a contact, which is going to animate up,so you're adding there and then it goes away. and again, for the pagewhere i add a user,

it's basically the same thing. i nest that elementinside of here. i give it a transition. i add that transition toanimated-pages transitions attribute. i click on my floatingaction button now, pops up. i can add a new user ifi want and it goes away. now, another tip that iwant to share with you is something that i cameacross as i was building this.

core animated pagesdoes this thing where if an elementis not displaying, it's going to make it displaynone, which can totally screw it up if it's tryingto figure out its height or do anything like that. so this magical event herecalled core animated pages transition prepare,which is the longest this event name in thehistory of the world. but this eventdoes magical things

because it basically fires themoment that your element goes from being display noneto being display block. and that means that youcan then do all the work that you need to do to makesure that things are measured and have the right heightand everything like that. again, this is one of the thingsthat i'm sure if you see this, you're like dude, thatfeels like a wart, and i totally agree. i think you're right.

and this is one ofthe things that i know the team isaware of and we're going to work on to see if wecan actually smooth this out for people so you don't have todo all that finagling yourself. but again, i wanted tomake you aware of it so if you're following alongwith this video or something afterwards, you want to try andimplement this stuff yourself, you know how to do it. so at this point, i have all thesections of my site together.

they animate, theydo really cool stuff, but really that'sjust animation. we're not really changingthe state, per se. we're missing the other half ofthe puzzle, which is routing, and this comes up a lot. developers are always like,how do i do routing in polymer? and polymer and webfluenz don'treally have an opinion here. we're not going totell you specifically you have to do routing this way.

there's really two waysthat you can go about this. you can do itimperatively in javascript or you can do itdeclaratively with element. and so i'm going to showyou both approaches, and you can decidewhich you prefer. so if you're goingthe imperative route, looks something like this. it's really as simpleas just listening for a route change usingsome sort of routing library.

here, i'm using flatiron director library, so when i hear a route match, itell core-animated-pages, hey, change whichever pageis currently selected. it's pretty straightforward. now, one of the nice thingsabout routing in javascript is it gives you pretty finegrained control if you want it. so if there'sparameters in my route, i can catch those whenthe route matches. i can go fetch moredata if i need to

and feed that to thepage, or i can just pass those parametersto the page itself, be like, here you go, here'sthe parameter that's coming in, and change. so some interesting stuff there. one thing that is pretty cool,which i wasn't actually using my contacts as iexperimented with it. i think it's a really cool idea. it's somethingthat we're probably

going to be using alot more in the future is this notion oflazy loading imports. so actually, let's sayyou've got part of your site that's four or fivepages deep, someone doesn't need all of thosecomponents right away. there's thismechanism in polymer called polymerimport which you can use to just sort ofdynamically import things. so you can add thatto your router.

you can say, hey, whenthat route matches, that far away route, let'simport some of that new stuff, maybe throw a loadingscreen up during that time. and when it's ready, polymerimport gives us a call back and we can change that page. so that's the javascriptway of doing it. there are also projects outthere which do this in markup with elements. in particular, there'sthis really cool one

called app-routerby erik ringsmuth. it allows you tohandle url changes and update the viewsin your application. it handles hashchange urls,as well as htmls history api. so you get eitherflavor that you prefer. the other cool thing is thatit actually already supports core-animated pages anddoing lazy importing with polymer import. but it does all thatunder the hood for you

so you don't haveto do it yourself. so again, two options. it really dependson which flavor you prefer, but definitelytry both out and see what you like inyour application. so this one, i feel like i havemy application pretty sewn up. it does all sorts of reallyinteresting behaviors. i'm pretty stokedwith the way it looks, and now it's time tofocus on performance.

sorry, that's the wrongslide-- performance. there we go. i love that lady's face. one of the areas that peoplerun afoul with polymer often is the route file size. you'll even hear this. people will be like,polymer's too big. it's just bloated, whatever. and there's some ways thatyou can mitigate this.

first is this thing that istole from glen maddern, who is the creator of x-gif, whichis the most important custom element ever made. yeah. thank you. if you haven't seen x-gifyou should take some time and spend it with x-gif. so one really quickwin that you can get is just conditionallyloading the polyfills.

you don't have to load thepolyfills on every platform. there are platformsthat support them. chrome supports it, operasupports it, chrome for android supports it, and hopefullyvery soon firefox. so all we're doinghere's is just checking to see if the differentstandards are implemented on the page. if they are, we justmove right along. if they're not, thenwe load the polyfills.

so this is an easyway to save yourself quite a bit of kilobytes. just conditionally load stuff. that's one trick. and the other thingyou've got to do is you've got to actuallypop open the dev tools and you got to make sure thatyou're inspecting your page. so i looked at thecontacts app after i built it and wasvery proud of it.

i popped open thenetwork panel there and i saw that i was making109 requests-- which is a lot-- and i'm loading 943kilobytes of stuff. now, keep in mind, ihave excluded the images from this network panel,so that's just my code. holy crap, that's a lot. i recognize that 109requests for some of you might be concerning. but what's going onthere is under the hood,

i'm importing elements. those elementshave dependencies. they're importingtheir dependencies, and so on and so on. it's basically thiswhole tree that's growing out of my application. and so to mitigatethis, we created a tool called vulcanize. and vulcanize is a modulewhich will actually

take all of your imports,concatenate them together, smoosh them all together,take all your javascript and your css, mashit all into one file, and allow you tojust load that one thing into your application. now, it is availableas a node module, but if you are not so stokedabout doing everything on the command line, it'salso available in a grunt task and a gulp task.

and for the contacts app,i just used the grunt task. i set it up once and i justnever thought about it again. it just runs everytime i'm about to push to production, which is cool. now, after ivulcanize and i make sure to put my stuff on a serverthat supports [inaudible], my application isnow three requests, which is a significant change. and i've got it downto 114 kilobytes, which

is pretty nice. now, this is all the codefor my entire application. this is all thejavascript, all the css, all the html for myentire application. so i've got it down to114 k, and this number gets actually evensmaller, much smaller, in polymer 0.8, which is cool. now, the last thingwe've got to do, we've got our app tothe point where we're

ready to put it up there,share it with the world, but we've got to make surewe're thinking about offline. because again, if yourapp doesn't work offline, you really don't havea mobile experience. and i know that we've talkeda lot about serviceworker today, so i will talk aboutit again here because it's so freaking awesome andi'm so excited about it. what i did was i added serviceworker to this application. pretty straightforward.

i just checked to seeif serviceworker exists. if it does, i install it. important thing to notehere is that as i'm installing myserviceworker, i've got to make sure that i'm usingthe root scope so that i can catch any request at sort ofthe top level of my application. if you nest your serviceworkerinside of a subdirectory or something likethat, then it's only going to have access tothe request in that scope, which

sort of sucks. you want to put ithigh up if you can. inside my application,as soon as we boot up, i just try and cacheas much stuff as i can. you'll notice that i'm cachingthe vulcanized bundle of all of my elements. so my ui is just likeinstantly available. i'm also caching the initialresponse from my data service so that there are contactsto populate my list there.

and then the otherthing that i did was as the user isscrolling around, i'm dynamically cachingany sort of image that has a hostname from s3.amazon. so as you pass throughan avatar image and call this s3response method. and really, all it's doingis it's fetching that image, it's caching it, and thenserving up for people. so as user kind ofuses my app, it just

consumes things for them. now, if we popthis open in canary and we've got serviceworker running, we started running our app. and what i'm doinghere is at first, i'm just racing to thebottom of my application. and right now, there's noservice worker in play, and so what it's doingis loading all 300 of my contact images at onceand just hammering the crap out

of the network. and you'll seeit's like, oh god, why are you doing this to me. and it finally allstarts to load in. now let's refreshit and see what happens whenserviceworker's in play. let's turn our wi-fioff, refresh the page. you'll see hereover in the column that our assets are nowcoming from serviceworker.

so i race to the bottomof my application. all those things are justcoming in immediately. there's no wait on thoseassets, which is really cool. [applause] so, wrap up. what did we learn? for structuringyour application, for structuring your ui, you'vegot the core and the paper elements.

so you can composethose together to make a really awesomemobile experience. from moving from one state ofyour application to the next, you've got core-animated-pages,and you've also got imperative ordeclarative routing. kind of depends on howyou like to do that. for performance,conditional polyfills. and most importantly,vulcanize all the things. use vulcanize to bundle upas much as you possibly can.

it'll save you a lot. also, considerexploring lazy loading. it's one of thosethings that we're still trying to figure out what'sthe right pattern, what's the right ux there. but it's somethingthat i think we'll be seeing a lotmore in the future, especially in theworld of polymer. lastly, for offline,serviceworker's got your back.

so as that starts to landin the various browsers-- i mean, even today,experiment with it. as it starts to land in variousbrowsers, put it in your app. it's going to be really awesome. if you want to play aroundwith this contacts app, it's available upon the githubs. it totally has a lotof bugs, so please file bug reports, but evenbetter, submit pull requests. if you want to learnmore about polymer

and you're justexcited by everything you've seen this afternoon,as matt mentioned, we're running polymerevents all over the world. we call these polytechnics. i see some of youwearing the shirts, which means you are cool. if you go toitshackademic.com, you can find a polytechnic near you. if you want toparticipate in one,

maybe you want to runyour own, whatever, all the material is up there. if you set one up,please let me know. tweet about it, whatever. it's freaking awesome, so youshould all go check it out. most importantly,polymer-project.org. as you've all been sittinghere, we've actually secretly been updating the website. so there's kind of anew experience there.

it's just a slight-- it'sjust a nicer coat of paint. it's not a full blownreboot of the site, but now it's a lot easierto find the content that you're looking for. the getting started experienceis a lot easier if you just want to get up andrunning with polymer, so definitelycheck out the site, go through someof the tutorials. and i'm looking forward toseeing all the really cool

stuff that you guysbuild, so thanks.

mobile web app design tutorial Latest CSS Tutorial for Beginners

mobile web app design templates

mobile web app design templates

with the new sharepoint mobile app were working to deliver your intranet in your pocket. today we'll look at how you canuse the new sharepoint app to access and stay connected to important content sites, portals, and people from your intranet, while you're on the go. today you can access many sharepoint experiences from a mobile browser. but, we started this project because we think we can make this easier

faster and also more powerful with a mobile app experience the sharepoint app will be available for windows, ios, and android this year and, it will connect to your environment whether using office 365 in the cloud. sharepoint 2013 or 2016 on-premises. as well as with hybrid deployments the mobile and intelligent intranet come together across both collaborative team sites and organizational portals in this app

bringing together the productivity of sharepoint team sites the broadcast reach of publishing sites and portals. and, the mission criticality of your most important business applications. backed by the integration with office 365 groups the intelligence of the office graph and the security and compliance you expect from office 365. these are our new front door applications for sharepoint. they provide a gateway to get toexperiences in sharepoint and, i'm excited to walk you through them today.

let's start by taking a look at the user experience of the sharepoint app. we're going to be releasing our first version of this app in the coming weeks and, i'm going to show you a first look at the experience on an ios device. i previously logged into my account all i have to do now is launch the app. we support a variety of authentication methods used by sharepoint such as aad, ntlm, fba and others. we will also have support for mobile device management and mobile application management with microsoft intune

so, the app is secured for it and it's also easy for users right away. when i launch the app i land right in the heart of sharepoint the sites experience. the sites tab is where the app gets deeply personal. using the intelligence of the office graph the sharepoint sites i use most often are right here for me to access

without having to do anything to set them up. if the site has a custom logo as you'll see with several of these we will show that. or, we'll generate the acronym that you see if there isn't a custom image also, i can quickly access the sites i'm following as well. so, for sites i want to be able to keep track of i use the follow feature in sharepoint to make certain they're readily available to me

from both the sharepoint app and the web. here at the top, i have the ability to search. as i type, i get suggestions from search. and, search is contextual to where i am in the application. since i started in sites, the app present sites first. but, it's also easy to search across sharepoint. so i can see files, people, and other content. i've been working in this field marketing guide

team site with my colleagues a lot lately. so its prioritized high at the top of my list without having me to do anything. first off, i have a view of the activitythat's been going on in the site. i see documents i've worked on documents my colleagues have been working on and even indicators of what's popular currently in the site. i can bring up the menu here to see the full navigation of the site that's been set up

and that gives me quick access to the resources of the site. this also ensures that the navigation the site owner has set up is readily available to all users. in addition to the site navigation i also have quick access to some of the native experiences we're delivering such as, recent and popular files, lists, and activity that i showed earlier. if i go into recent files i could see content i worked on

as well as what files are the most popular. going back i can follow this site if i want to make certain it's always available to me. i'll also be able to share the site from here if i want to make a colleague aware of it besides sites, the next big section of the app is links. this is where i access the key organizational links and portals that my company want's to showcase. tenant admins can program links for their employees.

these links will show up both in the sharepoint mobile app and also in the sharepoint home web experience. this enables users to quickly get access to their office 365 video portal company or divisional portals an hr site, cafeteria menus or other important organizational resources. here i can see the responsive web experience for the office 365 video portal as an example if i go back, you can see other portals that have been set up for me.

if i open up the contoso web portal you can also see an example of a responsive portal that has been set up for this customer. next up is the people tab. here i can get access to information about people in my organization. with the power of the office graph, i see a refined list of people who i work closely with. i can open up contact information to see organizational details, and what content a person is working on. in settings, there are two things i want to highlight. first off, we have support for using multiple user accounts with the app. this allows me to have both an office 365 account

and also an on-premises or another office 365 account that i can use with the app. one last thing i want to show is shake for feedback. with this turned on anywhere in the app you can shake it and, it will ask you to either report a problem or suggestion an idea. we're looking forward to having you use this to tell us how we can make the experience better.

alright, let's take a look at what we're doing to make a great web experience for sharepoint's home as part of office 365. just like with the sharepoint mobile app the new sharepoint home web experience enables you to easily get to find and discover the places and information you need to be productive. we also want to make it easy

to navigate across the entire intranet of an organization. online, on-premises, and everything in between. today, many office 365 users use the sites page to access sharepoint sites and resources. it's one of the most clicked tiles in the office 365 app launcher. we're modernizing this experience and transforming it into a true home for sharepoint. what was the site's page

will soon be the sharepoint home. and, it's your on ramp to the sites, portals, and content you use in sharepoint. let's take a look at the new experience. sharepoint home displays the sites and portals you're most active in. along with company-wide links promoted by your organizations and suggested sites that are personal for you. these are the same sites i showed in the mobile app as well.

we're using intelligence from the office graph to give users there important sites, groups, video channels, and blogs front and center. and, to provide activity information to see what's going on in each. the content is personalized to me and helps me efficiently decide where to work. i can click into any of these cards to open a document or to go to the site.

again, this is the same set of sites and portals that i saw on my sharepoint app. the user interface is a clean modern design that's easy to use and is consistent across the web and mobile app. and, the sharepoint home web experience is responsive for devices big and small. you'll see i can quickly get to the sites i'm following as well as recent sites i've used. so, it's easy for me to keep track of

and navigate to the projects and places i've been working. i can follow a site and it shows immediately in the left hand list. i can also create a new site from here. up top, you'll see i have a new search experience that provides suggestions as i type. we will also have a modern search results page as part of the experience. one last thing at the bottom here, you'll see a feedback link.

you can click on it to give us feedback or to make a suggestion. we hope you'll use that and we're looking forward to getting your thoughts. that was a quick tour of the new sharepoint home web experience in sharepoint mobile app. the sharepoint home web experience is rolling out to first release customers very soon and we'll be expanding beyond first release over the coming weeks.

the mobile apps are going to be rolling out to the ios, windows, and android stores as each platform is ready to go. keep checking the office blog and tell us what you think. we're super excited about the app and the new web experience and looking forward to getting your feedback. so, remember to shake your device and click on the feedback link in the web

to tell us what you thing. thanks for watching microsoft mechanics www.microsoft.com/mechanics

mobile web app design templates Creating Damn-Simple Calculator with JCalculator