web design app windows

web design app windows

hello. i’m here today to talk aboutdesigning for a mobile mind. about great design fora smartphone websites. so my name is jenny gove andi’m a user experience researcher at google. before we get intoour latest learnings about how to designgreat mobile websites, i want to tell you a storyabout a missed opportunity. a mobile experience ihad just the other week.

so, sometimes iget the opportunity to go and work in new york. and i really enjoythis because i can take advantage of all thecultural opportunities there are there and see someshows or see some event. and when i was therelast time i decided to go and see this great littleconcert that i saw coming up. so in my hotel room, on mylaptop, i booked a ticket. and it was kind of thisvenue which has small seats.

it was nearly soldout, but i managed to get some ticketson a small table that has, like, three seats left. the next day at work iwas talking to a colleague and she was at a looseend for that evening. and so i suggestedshe come along. and so i pulled out my mobilephone and i pulled up the site. and because i workon this stuff, i was pretty delighted tosee from this kind of venue,

a really nice mobileoptimized site. so i pursued that and ifound a couple of buttons. one was for the venue,to choose the best seats. and one was for me topick the seats myself. which in this instance isobviously what i wanted to do, since i wanted to chooseseats next to mine. so i clicked that button,but nothing happened. there was a big white page. very disappointing.

and as i was fumbling aroundthe site, looking for what else i could do to buy tickets, i waslooking for like a call button, maybe i could call the venue. but meanwhile my friendsort of said, you know, don’t worry about it, i’llfind something else to do. so, this was, youknow, such a shame because it was such a missedopportunity for this venue. i was about to purchasetickets and i couldn’t. the venue had done really well.

they’ve done a lot of work ormobile optimizing their site. but they haven’tdone well enough. and i wanted to spendmy money and i couldn’t. so effectively they werethrowing money away. so why are we talkingabout this now at i/o 2014? well, we know that there isamazing smartphone growth. we heard just yesterdayin the keynote, some incredible stats . let’s recap those stats thatsundar started his keynote

with yesterday. so the industry shippedover three million devices last quarter. and they’re ontrack to ship well over a billion phones each year. the number of 30 day activesfor android is over a billion. it’s been doubling every year. and we have people checkingtheir phone 100 billion times each day.

so to put this in perspectiveover the last few years, the media have kind ofmade comparisons for us. one of those onesthey made is, you know there are more mobiledevices, and mobile device subscriptions than there aretoothbrushes in the world. so these kind of stats putit in perspective for us. mobile growth is phenomenal. this very recent graphshows a dramatic growth in mobile usage of thepercentage of web usage.

this is page views. just from may lastyear to may this year. the growth is strong everywhere. and all this growthis great, right, because using our devices isalways such a great experience, right? just like this, just likewe see in the marketing. it’s so easy, these peopledon’t have a care in the world. they’re happy smiling people.

they don’t haveany frustrations. they don’t havefrustrations while they’re trying to check outon their mobile. all the type is legible. well, as a userexperience researcher, i spend my timeobserving people’s use of phones and mobile websites. and in the last few yearsi’ve heard a lot of things like this, fromprevious studies,

i’ve heard the mobile websitesfeel like they’re cut down. they’re harder to navigate. they’re sparser in features. they’re smaller, poor indesign, and unfamiliar. so some of these thingshave been true in the past. sometimes companies have notput all of their inventory on mobile. and people areconfused because they know they can purchasethese things from a company.

or they know that they canget particular information from a company. and they just can’tfind it on mobile. people can be worried thatthey might miss something. they often have a senseof time urgency on mobile. so to get some morecontext, here’s a participant quotefrom a shopping studies that i ran, where oneof our participants described shoppingfor a birthday gift

on a mobile phone. and i’ll quote her. she said, "i was worriedi would miss something. i was worried aboutscrewing something up. and you know her birthdaywas coming up quick." so i think this really nicelyillustrates this quote. it illustrates thatpeople are just trying to get stuff done whenthey tend to mobile sites. so we want to fix the poorexperiences you’ve heard about.

and the good news is, we know itcan be done, because there are some examples of reallygreat sites out there that are engaging users. so we at google have been prettyvocal in the last few years about the importance ofcreating a great mobile site. but given those thingswe’ve heard users saying about mobileexperiences, we think we need to do moreto help you make those great mobile experiences.

so we decided to put resourcesinto creating materials and guidelines to help you. and there’s compellingevidence we should do so. if we look at somecase studies– so the huffington postredesigned their mobile site. and that work led togreat success for them. it resulted in 50% timespent on their mobile device. 37% more unique visitors. and they managed to reach29% of all us mobile users.

so, in a different vertical,plusnet’s telco, in the uk, they redesigned all theirsites through the creation of responsive site. and they had a tenfoldincrease in mobile conversion. and their time toconvert decreased 40%. one more example here. this is the cancer.org, it’sthe american cancer society. and they went mobileand that resulted in 250% increase inmobile visits in one year.

a three times increasein mobile revenue, that donations in thecase of cancer.org. and they saw higherrates of mobile access to key areas of their site. and i love the quote thatcame from the principle of digital platformsat cancer.org. she said she wanted todistribute cancer.org experiences aswidely as possible, to as broad anaudience as possible.

and it was missionimperative to mobilize all the cancer.org content. and i think why thisis so compelling to me is becausethis can go for, kind of, any company really. if you don’t pay for yourmobile users on the web, then you’re missing abunch of your users. mobile web can be agateway to your business. so we’re focusing on thisnow because mobile usage

is growing so rapidly. and because mobile provides anincreasingly important gateway to your business. and we want to putyou in a position where you can create abetter experience for users. we want to develop a betterecosystem for the mobile web. and we want to tell you howthe designs of sites that provide a really goodexperience differ from those that haveuser experience flaws.

and we want to do this on thebasis of data versus expert opinion so that you can haveconfidence in the information that we give you. so i decided to run a study. i wrote a research plan. and then we teamedup with answerlab, which is a userresearch company. and they have to scale. and they helped us toreally make this happen.

and we examined howa range of views is interacted with adiverse group of websites. so i’m going to tell youbriefly how we set up the study. we studied user interaction ona 100 different mobile sites, and these ranged fromreally large retailers, to service providers, and sitesthat had information on them. we also included somelesser known websites that been growingin recent years to make sure weweren’t only capturing

what those bigcompanies were doing. participants brought in theirown ios or android devices so that they werefamiliar with the phone. and this study focusedon smart phones. so there were 119 participants. and although those numbersdon’t seem big by google scale, this is the usability study,so each participant came in for a separate hour, sothat’s 119 hours of the study. and so really, it was avery large usability study.

and participants worked throughtasks for each of these sites. the method we used wastraditional usability testing with think aloud protocol. so they spoke aloudas we had them go through differenttasks on their sites. this provides us withinsight into understanding the details of where therewere problems with sites and where the experiencewas really, kind of smooth and seamless.

and they also providedratings for the site. the result of thislarge usability study were collated to form 25mobile web design principles. and these keyfindings are intended to help you buildbetter mobile sites, and increase engagement andconversion for your business. so we’ve categorizethese into five sections. these are mobile homepageand navigation, site search, commerce and conversions,optimizing form entry,

and site-wide designconsiderations. so these principlesare all about creating a betterexperience for users, enabling them to have a troublefree experience on your site, whatever kind of site thatis, information, retail, e-commerce, or lead generation. so we’re going tolook at some examples from these 25 principles. and we’re going to talkabout the guidance based

off the study results. so let’s start with mobilehomepage and site navigation. so the first and theforemost important thing to do for yourbusiness is figure out the primary purposethat your site exists. in our study wetested interfaces similar to the one on theleft and the one on the right. when users got tothe one on the left they had a particulartask in mind,

but the only actionavailable to them was for them to learn more. it was kind of vagueand they really didn’t have theconfidence that they were going to be able to getto what they wanted to get to. in contrast, in theprogressive site on the right, leadgeneration site, they’ve made it really clearthat users can get a quote, they can find a local agent,they can make a payment.

one women’s magazine site thatwe saw had buttons at the top. and they were labeledspecials and looks. these were very vague,and participants really didn’t know what they would get. so mobile users really wanttheir information here and now. and figuring out what thosekey calls to action are is the primary thingyou need to do. secondary contentand calls to action can be accessed eitherfurther down the screen

or behind the menu icon. the next thing is to keepmenu’s short and sweet. so we saw a number ofextensive menus on mobile, and nobody is going toscroll through them. but we kind ofanalyzed the sites, and we saw thatsome sites have done a really good job of movingfrom desktop to mobile, and reconsidering theirmenu structure for mobile. so macy’s does agreat job of this

if you take a lookat their site. consider how you can presentthe fewest menu items possible, but still keep thosecategories really distinct. you can do some user testingto help you with this. do users understand thedifferent menu items you’re offering,and do they know what would lie beneath them? when mobile users navigatethrough your site, they want an easy way toget back to your home page.

for example, perhapsthey want to get back to do another search,or perhaps they want to start a new browseexperience through your site. in this study the usersexpected tapping the logo on the top of thepage, on the left to take them backto the home page. and they became reallyfrustrated if it didn’t work. so this is a really good exampleof the principle in action. 1-800-flowers doesthis well here.

so let’s summarize thehomepage takeaways. keep calls to actionfront and center. so, even if you’redeveloping a responsive site, you need to think about how thatshould be designed for mobile. keep menu’s short and sweet. make sure you’re not having toscroll a great deal on mobile through your menus, andthat they’re distinct. and make it easy to getback to the home page. next we’ll look at theimportance of mobile site

search. so along with the home pagethat focuses on calls to action, our study showedjust how important it is to provide good,clear search functionality. so the design on theright here, is great. you can see when you doyour such immediately. there’s a nice big search field. now, it might soundsurprising to me, you know, like, google sayssearch is important, you know,

wow. well, i can tellyou that in our team we actually had quitea bit of discussion about this before weactually ran this study. the thought being that, peopleoften find it difficult, so we heard, to type on mobile. so maybe navigationis the primary thing that we should be doingon mobile devices. but we found search tobe really important.

it’s all to do with usershaving that sense of urgency, and wanting to get to theircontent, sort of immediately. so we found that,particularly in retail sites, search is hugely important,and on many other sites too. and often on other siteswhen users couldn’t find that key callto action– i think they’re having afootball match next door. they will turn to search next. ok.

so, often it’s tempting to putthe site search behind an icon. we found that it was muchmore noticeable and visible to people when the sitesearch was an actual field, and people found it moredifficult to find search behind an icon. and i feel like, you know,if site’s like home depot and macy’s can do this well,so can the rest of us probably. so to really scaffolduser’s tasks, the search needs to be smart.

and signs of smartsearch include providing auto-completein the search field, suggesting searchterms and filters, correcting misspelling, andproviding related matches and search results. so all of those things togetherin providing great search is about getting users tothe relevant results as soon as possible. now, the site search resultsneed to be relevant, of course.

and this goes for search resultsas well as auto-complete. so, you can see somedifferences here. too often we saw resultssuch as those on the left. in that example theword kids is surfacing lots of differentthings, but things are particularly usefulfor people in a clothing store in terms of logicallygrouping the responses. on the right, macy’sdo a good job here. they lead you to differentcategories of clothing.

so kids sweaters, kids boots,kids shoes, kids jeans. on other occasions, in thesearch results themselves, we saw lots ofirrelevant results. and people reallydon’t have the patience to scroll throughmultiple pages of results. if the first fewresults aren’t relevant, they might leaveand go away and then you potentially lost that user. one way forwardwith this might be

to consider usinggoogle’s custom search engine in your site. so, filters go evenfurther to helping users find theresults they need. in some cases inour study we found that even thoughcompanies had gone to the extent of making filtersavailable, unfortunately they weren’t discoverable. so, this is a mock-up as youcan see, on the left-hand side.

but it’s an exampleof an actual site we found where people weresearching for clothing. and they had to scroll throughabout six pages of results in order to eventually find thefilters to narrow their search. and they had thousandsof search results. so this was really,really painful. and we found lots of peopleabandon this task in that case. note that the user shouldnever inadvertently be able to filter the resultsto a null set, of course.

but we did seethat in the study. as the user’s usecontrols, make sure that you can do thingslike provide them with the number of resultsthat they’re going to see. and that gives theman idea of, you know, is this the kind ofresults that i want to see? if it’s got 20 items, orif it’s got two items. now another way to assist usersin narrowing the results to get to what they want is in whatwe call a guided approach.

you can think of these arekind of like, pre-filters, or simple questions toprovide more of a guarantee to your users that the searchterms they eventually put in, or the navigation they dohere will lead to the results that they need. so in this example,imagine you’re selling a limitedset of products, like shoes, bagsand accessories. after asking the user whichof these their interested in,

you might upfront ask,you know, whether they want women’s shoes, men’s shoes. you might also ask the size. and then the userknows they’re going to get perfectlymatched search results. and for you, you’re makingyour user more satisfied. the thing thatyou’re doing here is you’re pulling away alot of your content, so that it doesn’t sortof infiltrate the things

that they want to look for. i can give you a reallynice example of this in one of the sites we studied. it was the fightfor providing care. it provides things like seniorcare, after-school care, and pet care. now the last thingthat somebody wants when they do a searchfor senior care is to find pet care intheir search results.

and so they had a guidedapproach like this. and it made sure thatwhatever search they did, they weren’t going to endup with after-school care in their senior care, orpet care in their senior. so a few questions upfront for some businesses can really help ensurethat those users get more relevant resultsright off the bat. and it’s particularlyuseful if there’s one to three keyattributes that you

can ask upfrontto get them there. so let’s look at thetake-aways for site search. make site search visible. that nice, clearfield at the top. ensure that theresults are relevant. implement filters tonarrow those results. and guide users tobetter search results if you’re able to dothat with your content. there were a number ofways that we discovered

the design of site can helppeople towards confession people really want toconvert on their own terms, very definitely. so we want sites towork with people, rather than work against people. and unfortunatelyin the study we saw quite a few examplesof sites themselves being barriers to thatengagement and to that use. so, firstly, beware of makingenemies at registration gates.

don’t require custom accountregistration upfront. and you’d be surprised atthe amount of this we saw. we understand that gettingaccess to customer information and preferences can be reallyintegral to your business, but don’t ask for it too early. many of the sites thatuser’s rated the lowest were those where they wereforced to create an account upfront in order to continue. users want to exploreand browse content,

perhaps get someof their tasks down before they commit to providingtheir personal information. and similarly, let userscheck out as a guest. if you’re enabling peopleto purchase something, or perhaps they cansend off for information you want to aim forthat option to enable users to check out as guests. this is because, in our study wefound that participants really perceive the value of this.

and it’s because, whilethey’re doing their tasks, they’re thinking, i wantto purchase this thing, or i want to getthis information. i don’t want to stop and haveto think of an email password, or whether i want to connectto my particular social network to this account, andwhether that’s ok. so, if you waituntil afterwards, enable users to dotheir tasks, then you can also haveanother opportunity

to ask them to registerand you can offer them tangible benefits aswell, such as perhaps, tracking their order. and remember youdon’t want to negate the benefits ofpurchasing by having a process thatisn’t smooth here. all browsers allow the abilityto auto-complete in forms. so make sure youdon’t turn that off. users really like thebenefit of auto-completing.

so just let the browserdo it’s job at that point. and there are other waysto convert users too. and there you cansee the check-out. so, picking upwhere you left off. now, we’ve talkedabout this quite a lot at thisconference already. and providing users withthe opportunity to do that was really helpful. within this study itself,we saw a number of users

want to pick up onthings later on. after all, in thisparticular situation they were in a usabilitystudy, they often found things theywanted to see later. now this can happen inreal life too, of course. perhaps you want to look atsomething on a bigger screen. another goal. perhaps you’re distractedat this moment, you have to dosomething else, and you

want to just pick upon this thing later. so we painfullyobserved several users copying and pastingthe url, which is really quitehard to do mobile. then going and opening theiremail client, pasting it in. it was really, yeah, itwas really quite painful. and then, of courseyou have the issue that you might lose thatuser because they’ve kind of gone todo something else.

so the best practices we sawhere at this present time is to offer users opportunitieswithin the site itself to pick up where theyleft off later on. so, i’ve seen opportunitiesfor people to pin things. i’ve seen opportunitiesfor people to email within the site itself. you keep all thatwithin the site, but they can email themselves. and obviously, postings onvarious social networks.

often at the moment,this is used for sharing, but we saw a numberof examples of people using this for themselves topick up where they left off, for themselves at alater point and time. and related to this,you need to create a consistent urlstructure on your site. so that when peopledo share url’s from their mobile or theirdesktop they can use them. so on that note,our recommendation

is to build aresponsive site that enables that consistenturl structure rather than resortingto an m dot site where they have be redirectedfor users between sites. and if anyone saw paullewis’ talk today, where we saw the hit thatredirect causes in terms of time lag to loadthat mobile page. so let’s review the commerceand conversion take-aways. so let users explorebefore they commit.

you can always fillthat registration in at a later point. let users purchasesas a guest, and enable users to pick upwhere they left off. optimizing form entry. forms, don’t you lovefiling in forms on mobile? it can be reallypainful, i know. and you know, it’s arguablythe most painful thing that you can do mobile.

so let’s look at afew of these things. now i should say beforei start, we actually learn a lot of thesethings on desktops. but somehow when we moved tomobile we forgot a lot of them. so these are just oftengeneral good design principles, but they mattereven more on mobile. yet that form on the left. design a form that’s efficientfor the user to fill in. and not overwhelming likethat one on the left.

we saw more formsthan we’d have liked to have seen in this studythat looked like that. one thing we found was, it’sreally good to chunk the form. again, this is aprinciple that’s taken from our experiencewith forms on the desktop. and it’s helpful to make surethat those chunks in the form, are of equal size,and equal difficulty. so you can seethis example here. there’s, i think fivedifferent steps to this form.

and the user on theprogressive site can easily see what they’regoing to have to fill in. so make sure yourforms look more like the one on the right–think about your site now. then the one on the left. another useful way to streamlinethe conversion experience for users is to know anduse what already exists in terms of information theuser has already provided. we found that auto-filling,whenever possible,

was of huge benefit to users. it’s a bit sad tohave to tell you this, but when this happens, whenauto-complete and auto-filling worked, the users weresurprised and delighted. of course it shouldn’t be thatway, but that’s the way it was. because they’re so used tostruggling through forms. so they would eitherstruggle through the form or they’d abandon their task andtry to do it a different way. so it’s justfrustrating for users

to have to put it in twice. we’ve all been there,it’s kind of horrible. so for registered users,remember and pre-fill their preferences. for new users, offerthird party check out, and sign-in services. one specific example is to checkthat you don’t require users to, for example, enterbilling or shipping information that hasalready been entered,

that already exists in theirthird party check out account. now every tap counts on mobile. for submittinginformation, users really noticed and appreciated websitesthat would automatically present number padsfor entering zip codes, using the contextualkeyboard in the right way. or automaticallyadvance the number fields as they entered them. it can be really painfulfor users when that happens.

so the experience thatpeople are left with is a really poor one. and you know, two forms canlook very, very similar. we tested two pizzadelivery forms, and they lookedincredibly similar. but the number of tapsit took on each form was very different,because one of them wasn’t doing thingslike surfacing this contextual keyboard.

so seek out anyopportunities to eliminate any wasted taps in your form. and here is some additionalinformation and technical help that you can get on choosingthe best input type. and this is part of theweb fundamentals materials we’ve been talking a lotabout at this conference. so, good labelingis really important. if forms aren’t labeledaccording to best practices, and again users can get totallyblocked and they can’t proceed.

so, they can be labeled, ofcourse outside the field. and it’s becoming more andmore popular to label them inside the field, but justbe careful how you do it, and make sure that if usersback out of that, then the label becomes visible again. because we had auser in our study who was entering their emailaddress, and then they got distracted, and then theycame back, and went back, saw the word address,but didn’t see

that it was emailaddress and started entering their home address. so this labeling needsto be really clear. now working with dates. the recommendation here isto provide visual calendars where you can. because users oftenneed more context when schedulingappointments, and travel dates, and things like that.

provide them with a calendarbecause if they don’t have one they are often unableto figure think about what day ofthe week it is. that’s often the primaryinformation people need, like, i’m going toleave on a friday. and so figuring out what theactual date is, can be complex. and we saw users, again,come out of the tasks that they were doing, and goto find their calendar app. you know, again, you’vegot the possibility

that you could lose them. we found on travel sites,that it was problematic when users had to choose anoutward date and a return date within the same calendar. that seemed to be likean experience that was very difficult for them. it wasn’t smooth, and sothe best practice there is to provide two calendars,one for the outward date and one for the return date.

note also that there are systemways of dealing with dates. but on the mobileat this time you don’t get control of stylingin the custom chrome browser. now remember that i mentionedthat completing mobile web forms was arguably the mostdifficult experience on mobile. well i may have been wrong. because what’s morepainful than that is having to doit all over again because you did itwrong the first time.

yeah, lot’s of nods. so, there are standardbest practices, of course, when itcomes to helping users recover from, andcorrect their errors. we need to provide clear errormessaging, not cryptic error messaging, and weneed to highlight the fields that needto be corrected. we need to make sure thatthe error message isn’t just at the top of thescreen, and nothing

is highlighting the field. but really, the best way toaddress submission errors in web forms is toavoid them altogether. if we can combine thoseclear descriptions with real-time error validation. this was the mosteffective combination for enabling users tojust go through that form once and get it done. and there were examples,but not very many

of sites out there thatwere doing real-time error validation, and it was by farand away the best experience. so let’s summarize the takeawaysabout optimizing form entry. so designing efficient forms,chunking them like we saw. using pre-existing information. streamlining thatinformation at entry. go and test your formson your websites. see how many taps it takes. see if you’re usingthose contextual inputs.

minimize form errorswith labeling. provide visualcalendars for dates, and real-timevalidation of forms, so that your users only haveto go through them once. now there are a number ofsite-wide design principles that we uncoveredduring the course of doing this studyon multiple users. and we’re going tolook at this now. so one of the main reasonsthat you make a mobile site

is because it’s painful to doall that pitching and zooming when desktop sitesappear on mobile. it’s hard to pan and zoomaround on mobile, especially in multi-dimensions. and it often leads to troublewith users viewing your images properly or viewingyour text property. some really frustratingexperiences that users had was when the home screenloaded fully zoomed in. they had no ideawhere they were.

and when a userzooms in on a screen you really losecontrol of your design, increasing the likelihoodof discover-ability issues. so make sure, even if you feelthat you’ve mobile optimized, or made your sitemobile friendly, make sure there aren’t anyaspects of that site that require users to pan and zoom. now images on mobile, whilewe’re talking about that, they can be verysmall and people often

want to see details whenthey’re purchasing something, for example. so, the best thing to do ismake sure those images are tappable and expandable. on retail sites, customersreally want to see the texture, they want to see the details. and participants gotfrustrated if they weren’t able to see these. a good example oftappable expandable images

is provided byjcrew on their site, so i suggest going andhaving a look at that. now location. we saw some examples ofgps location information being badly applied. so the example on the leftis going to be problematic. and the reason is, becausethe user doesn’t really understand what you’regoing to be doing with that. they kind of need to seethe context of how you’re

going to be usingtheir gps location. in our study, when userswere asked to book a hotel room in boston for a conference,that’s the task we gave them, on a particularlypopular hotel’s website, they were prompted toshare their gps information immediately aftertapping the find and book call to actionon the home page. accepting the requestresulted in the location field automatically populatingwith the user’s current city.

but we saw that severalusers automatically accepted this request. they didn’t reallythink about it. and one user becameparticularly frustrated because they were trying tobook their hotel in boston, but it kept bringing uphotels in their home city. and we also saw ui issues. for example, where asite had a field that said current location,it looked to the user

liked they needed totap that, and they needed to interact with it. and then they thought thattheir current location would be populated. but it wasn’t the caseon this particular site, if they left it alone, whichis what the developer intended, this would result intheir current location being detected. but the user just couldn’ttell, and got very frustrated.

so a better experience isto make sure the user always understands why you’re askingfor location information. and then it’s helpfulto let the users choose to populate the locationfield at the appropriate place in the flow, and to aclear call to action, something like find near me. now this point aboutthinking about keeping users in the single browser window. we’ve already lookedat that a little bit.

we’ve looked atit about, in terms of sharing information and alsopicking up where you left off. but you need to thinkabout all the reasons that users mightleave your site. because it’s not reallywhat you want them to do. you want them to stay,you want to potentially have them convert onpurchasing something or getting more information. having the user switchbetween browsing windows

can be problematic becausethey do have this tendency to go off and lookat other things. so think of all theways, one of those ways might be that they go andlook for coupon codes. so we found some good examplesof sites, this site here and then i think we saw somepizza sites, and other sites where they decided toprovide coupons of their own. to kind of stop users doing thisand to keep them in their site. so try and do everything you canto ensure that your users stay

in the browser window. address those reasonsconsumers might leave. now many of thewebsites we tested, and the companies we werelooking at also had apps. and all of them promotedtheir apps in some way. not surprisingly,participants weren’t at all pleased with the situation thathappens on the left hand side. i think we’ve seenthis all too often. this has being describedas the door slam.

the user came toyour site to get some experience of yourcompany, or to do some task. and they didn’tappreciate anything that hindered themfrom doing that. in some cases thiswas where there was perfectly adequate, verygood mobile optimized ui right behind it which userscould actually use. and so, in thissituation, you’re losing the opportunityto engage with users.

so this full pageoverlay or interstitial is not a good idea. it annoyed all but the mostloyal and familiar customers. many sites promotedtheir sites as banner along the top orbottom, and users were fine with thesebanners if they were reasonably sizedand dismissible. they weren’t too happy,however, when the banner started taking up too muchspace and wouldn’t go away.

in landscape orientation,think about that too because thebanners can take up really valuablevertical screen space. so both androidand ios users were used to seeing thesebanner promotions, and they were quite happyif they could dismiss them, or perhaps they wouldwant to use them. but the thing i reallywant to emphasize here is that mobile web isan opportunity for you

to engage your users. you might end upwith a great pool of committed, engagedusers on the mobile web. it’s a gateway to yourbusiness, but you also might have a populationof users there. so make sure that yourpromotions are not getting in the way ofyour key call to action. and this is one of themost important principles. it’s about taking allthese design practices

and creating a mobile optimizedsite all the way through. our study clearlyillustrated how much uses preferred mobile optimizedsites over desktop sites viewed many things, we saw loweruser ratings for desktop sites on mobile, lower tasksuccess, much more errors, all the things you’d expect. however, we foundthat some sites mixed mobile friendlypages with desktop sites. so you start offreally, really well.

you like, yeah, i cando this on this site. hit a button, andthere you go, the text is too small, it’s a desktoppage, terrible experience. and we found that those actuallyrated the worst of everything. and it’s because it reallystopped users in their tracks, right. they’re trying todo their tasks, and it’s even more of adisappointment in a way because it was more unexpected.

so optimize yoursite for mobile, and you need to optimizethe entire site. i know some of the sites canbe really humongous efforts, and their can be thousands ofpages to make mobile friendly. so in those cases, if you canonly do it, sort of in chunks, i really advise thinking aboutthe main navigation parts that people have to go throughto make sure that you’re not providing them withthat experience of going from a friendly pageto a desktop page.

you can look, of course,at your analytics traffic to try and work that out. so the site-wide take-aways. don’t make users pinch andzoom, at all on your site. provide expandable,tappable images. be clear why you need theuser’s location for them, so that that can be used wisely. keep your user in asingle browser window. so think about all thosereasons that they might leave.

don’t let promotionssteal the show, and optimize yourentire site for mobile. so that brings us to the end ofthe principles we’re reviewing. and we hope these thingsthat we’ve gone through are going to be helpful to youdeveloping a better mobile web experience. and i know you’reunlikely to have to memorized this presentation. so the good news is, thatall these 25 principles

are available in awhite paper for you. and that white paperexplains what you need to do. we also have webfundamentals, which is an online resourcethat tells you about how to do some of thesethings on the multi-device web. so if i’ve justcovered the what to do, which is the whitepaper, you can think of web fundamentalsof that as a how to do it. it covers a lot of thetechnical guidance,

how to avoid the commonpitfalls that people make when building sites. and it advocates forresponsive design. and we have a numberof performance tools. the primary one is thepagespeed insights tool. and it’s available to you. it not only gives you insightinto the speed of your site, and how that loads, and whatyou can do to improve that. but it also has someuser experience feedback.

another easy way that you canhelp yourself make a better site is simply to haveusers go through it. this is actually inour usability lab, but you don’t needany fancy equipment. you can just watch afew users, perhaps set some time to do that each week. see where the main problems are. and honestly you justwatch a few users and you’ll comeacross those issues.

you’ll probably seesome of the things we’ve talked about today. and everyone can useanalytics, so trust that data and incorporate itwith your user testing. and then you’llexplore a pathway to getting moreconversions on your site and improving theexperience for users. so, creating a mobile websiteis really imperative these days. and what i want tosay is it’s not just

about shrinkingdesktop to mobile. responsive design is a greatunderlining technology. you’ve got the one codebase, which in the long term will make things easier. but you do have to think abouthow those elements of your site are going to surface,and what’s important at the different device sizes. the different context thatusers are using those in. so i want to concludewith, now is the time

to really make improvementsto your mobile site. think about all of theresources and the effort that’s being put intocreating desktop sites. and think about applyingthat same resource and effort and putting that intoyour mobile site. so to get going on mobilesites, we have the principles, we have webfundamentals, and we’re going to develop a betterexperience with more conversions, so that you canhave happy and more engaged

users. so thank you for your time. and i’d be gratefulfor hearing from you. so feedback on thepresentation will be a great. please check out the principles. and i’m going to be aroundfor discussion and q and a after this talk. thank you.

web design app windows

My Dream : DSLR Camera with Instagram Effects

Ditulis dalam sosial. Leave a Comment »

web app wizard design

web app wizard design

to develop an app with rollbase, you firstdefine an application foundation, from which rollbase generates application pages.the app foundation includes objects, fields, and the relationships between objects. let’stake a look at how to design the foundation. we’ll use the quick create wizard to createa simple app in less than five minutes. we’ll use a simple library app as an example.the app should help librarians track which books have been borrowed, who borrowed them,and when they are due to be returned. it helps to plan the objects and relationshipsbefore creating them. for object names, we’ll choose nouns to describe the information theapp will store and manipulate, such as user for member data, title for the books, andcheck out to record the borrowing event.

rollbase has a built-in user object to managedeveloper and end user accounts so we won’t need to create it in the wizard.this slide shows the two objects we will create, their fields, and the relationship betweenthem. one checkout can contain many titles and over time the same title will belong tomany check outs. in a check out record, the values for title(s)and user will be provided by the related records, so, we only need to create the fields to storethe dates. now let’s see how quickly we can create the foundation for this app.from the rollbase home page, we can click quick create start to launch the wizard, orfrom any application page, you can expand the administration menu and select new applicationto open the create a new application dialog.

as you see, you can create rollbase applicationsin a variety of ways. we click guide me through it to open the wizard.first, we name the application. next, we add objects. we start with the titleobject, using the singular form of the name. we click add object to add check out. attributesadd built-in fields and behavior. neither of our objects have attributes, so we cango to the next screen. we add fields to the title object, the firstis author(s), with a text data type. we click add field and enter publisher, whichis also a text field. finally, publication date with a date type.select check out to add its fields. this screen shows them all.on the relationships page, we select title

to add the many-to-many relationship betweencheck out and title. click + to add the relationship, and the wizard automatically fills in theother side of the relationship. click submit, and rollbase creates the libraryapplication. application at a glance shows the standardset of pages that rollbase created for viewing and manipulating each object. these objectsand pages act as the foundation of our application. click view your application to see how thesepages make a basic user interface. the vertical menu provides navigation betweenthe pages for managing title and check out records.here, i’ve added title records for testing. remember, we didn’t write one line of code,but our app includes functionality for creating,

deleting, and updating records, along withall of these operations. the next step would be to add business logic,which we cover in the next video in this series. this completes our look at the rollbase quickcreate wizard. thanks for watching.

web app wizard design

My Dream : DSLR Camera with Instagram Effects

Ditulis dalam sosial. Leave a Comment »

web app with material design

web app with material design

roman nurik: hi. i’m roman, and i helped designand develop the google i/o 2014 android app. in this video, i’ll dive intohow we use the new material design approach tobuild a visually striking, consistent,and adaptive android app for this year’s conference. so what exactly ismaterial design? at first glance, it may justseem like a new visual design

language full of brightcolors and subtle shadows. but it’s reallymuch more than that. it’s a system that wepioneered that informs all of our visual interactionand motion design decisions across mobile, desktop,wearables, and beyond. now every year atgoogle i/o, our team spends several whole monthsworking on the conference app. we do this for two reasons. first, it’s obviouslya great companion

for the developers attendingthe event and those tuning in at home. second, and arguablymore importantly, it serves as a referenceapp for android design and development best practices. now, this year’s app usesmaterial design and features of the l developer preview topresent content in a rational, consistent, adaptive,and beautiful way. let’s take a look at some ofthe decisions and outcomes that

informed the app’s design. in material design,surfaces and shadows play an importantrole in conveying the structure of your app. the material designspec outlines a set of layout principles thathelp guide decisions like where shadows should appear andwhat is drawn on each surface. for example, here’sour first iteration of tabs in the myschedule screen.

it was problematic fora number of reasons. the single shadowbelow the action bar conveys that there aretwo sheets of paper, one for the actionbar and another for the tabs andschedule contents. the problem is that thebottom sheet is too complex. the ink that representsthe contents of a surface should be pretty simple. here, ink is doing too muchwork, painting not only

text and icons but bordersand background colors. the result is visual noise. our final iterationwas much stronger, creating a clear separationbetween chrome and content, and letting the inkfocus on painting only the important stuff–things like text, icons, and accent strips. another area where surfacesplayed a role in our design thinking was the detail screen.

in our first release,as you scrolled, the top banner cross-fadedbetween the session image and the session color. our concern thoughwas that this design bent the physics ofmaterial design too far. it’s as if the textwas sliding along a surface whosetransparency changed throughout the animation. a better approach, whichwe introduced in an update

to the app on june 25, wasto create a shorter surface below the image onto whichthe title text was printed. this surface had amore stable opacity. before scrolling, the surfaceis adjacent to the one containing the body text,forming what we call a scene. and as you scroll, this surfaceand the floating action button attached to it risesabove the body text, allowing the text toscroll beneath it. this aligns betterwith the physics

in the world of material design. and the end result is a morecoherent visual interaction and motion story for our users. now, another key principleof material design is that interfaces should bebold, graphic, and intentional, and that the foundationalelements of print design should guide visual treatments. color plays a huge rolein making that happen. in material design, uicolor palettes generally

consist of one primaryand one accent color. large color fields likethe action bar background, for example, take on the 500shade of the primary color, while smaller areaslike the status bar can use a darker shade,like the 700 value. the accent color is used moresubtly throughout the app to call attentionto key elements. the resulting juxtapositionof a tamer primary color and a brighter accentcolor gives the app

a bold, colorful lookwithout overwhelming the app’s actual content. in the i/o app,we actually chose to use two accent colorsused in various situations. most accents were pink 500,while the more conservative light blue 500 was a betterfit for the add to schedule button, which was oftenadjacent to session colors. and speaking of session colors,we color the detail screen based on the session topic.

for example, androidsessions are green. this gives the screen thatbold and intentional look. and when choosingour topic colors, we used a materialdesign color palette which contained dozensof great color options. we also needed to make surethat each color contrasted well enough with the floatingaction button and session images. here’s our test graphic thatlet us visualize this contrast.

finally, we ensuredthat topic colors had a consistent brightness. desaturating our test filewhen choosing the colors helped in that process. now another foundationalelement of print design that’s important insuccessful material design is layout, andmore specifically, margins and whatwe call keylines. now from previousyears of the i/o app,

we’d already beenaccustomed to using a 4 dp grid for sizing things. for example, our buttons andlist items were 48 dps tall. however, the guidance onkeylines for material design was new to us. after we started adhering tothe spec and, in particular, aligning titles and othertexts to that 72 dp keyline, we immediately felt thatclean, print-like rhythm in our screens.

adhering to the keylineallowed for very fast scanning of ui text and informationon our screens. gestalt principles for the win. now while we’re onthe subject of layout, remember that material designapplies across many device types. it’s right therein the principles. a single underlyingdesign system organizes interactions in space.

each device reflectsa different view of the same underlying system. now luckily, the specoffers some great solutions for designing acrossmultiple screen sizes. for example, many of thescreens in the i/o app represent collectionsof sessions. for these situations, the systemoffers a number of containers, like lists, grids, and cards. each of these can be usedacross different screen sizes

to representcollections of data. we originallythought to use cards to represent session items. it’s a pretty natural choice. but in some cases, wewanted to conserve space by overlaying text and images. this simpler, morehomogeneous presentation was less appropriate for cards. the card shadowsin corners would

hinder the scanabilityin this context. we thought a grid wouldbe a better choice here. with grids, we could varythe number of columns based on available screen width. and each grid tile could takeon different aspect ratios. the resulting presentationwas very flexible and worked great, notonly on phones but also 7-inch and 10-inch tablets. finally, there is a crucialelement that ties everything

together, and that’s motion. while a big part of the motionstory of material design is in transitionsbetween screens, apps can trulydelight users when motion is used in waysbeyond the obvious. let’s take a look at someof the delightful motion we introduced in the app. first, touch feedback ripples. they’re super, super satisfying.

they’re also built in as soonas you switch to the material theme in l. but wewanted to make sure that they looked reallygood on any background. so we customized ripplecolors for many elements to ensure the ripples werevisible but still subtle, regardless of the background. we also used both thebounded and unbounded styles where appropriate. but my personal favoritedetail hands down in the app

is the floating buttonthat adds or removes a session to your schedule. on touch, a little ink ripplereveals a new background color, and the plus symbol spins andtransforms into a check mark. finally, while it’s a bit hardto tell in this animation, if you press andhold the button, its shadow grows,almost like the button is lifting up tomeet your finger. the end result isyou end up pressing

the button a few times just tosee its delightful tricks again and again. i do it many times a day. so those were some ofthe design decisions we made for the i/o2014 android app. material designinfluenced everything, including surfaces, shadows,color, layout, and motion in the app. overall, the systemplayed a huge role

in helping us create a visuallystriking, consistent, and adaptive android appfor the conference. now make sure to checkthe material design spec at google.com/design for moreon this new design approach and how it can helpyou improve your apps. and if you’re anandroid developer, check out the code forthe i/o app on github to see how the design isimplemented both for android l and for earlier versions.


web app with material design

Tutorial Creating 100% Pure CSS Contents Slider

Ditulis dalam sosial. Leave a Comment »

web app website design

web app website design

today, i’m gonna show you how to make an amazing parallax wordpress website (music playing) hi, my name is hogan and welcome to the tutorial! today, i’m gonna show you how to make this amazing parallax wordpress website and this tutorial isn’t for people who want to learn how to code a website or build a website that is like facebook or amazon but if you want a website up and running within a few hours that is simple and clean and modern without learning a lot of code then this is tutorial is for you. so this video is basically perfect for freelancers, online entrepreneurs,

small to medium sized business owners, or even if you want to be a future web developer then it’s great. so by the end of today, you’ll have a fully functional website that is seo-friendly, woocommerce compatible, meaning you can add a shop to it , it loads quickly, and is super mobile responsive so let me give you a tour of the website and show you how it works and what i’ll be covering in this tutorial okay, so let me show you a demo of how it works. so basically inside the website and let’s turn on that builder and i’m super excited ’cause it’s really amazing basically, you’ve got all these different modules which are built in, you can drag it to these different sections on your website

and it saves a lot of time. you don’t have to download anything additional but i’m gonna show you how to create this image which is the parallax scrolling background and it’s really cool but something that is really more cool is that you can add in, you know, gradients free background, a video background, or a slider-type background as well so you can just set that very simply. you just have to upload the images and i’ll show you where to get amazing images for free as well so then i’ll show you how to add in this text. really simple to edit. it’s just like a word editor so if you delete that text, change the text, and you can just click on save

and basically you’re done. i’ll show you how to add in your buttons all the text here for your quote section. it could be a mission statement show you how to add in this image here as well as this featured module so you can just drag and drop it. and if you make a mistake, then you can just undo it. you can also save the revision and and if you make any big mistake, then you can load the revision so you don’t have to start over again and for these different sections, you can actually drag the whole entire section so for example, this gallery, you can move it up here

above the service section, like that so it could be about me and then gallery section like that that’s really up to you, how you want to change the layout of the page. you can change the colors like that, but with the gallery section, it’s really cool because you can showcase your work and when people click on it, it opens up in a live box so when people click on it, they can view your work like that and i’ll show you how to add in this video section which is really cool because when people are watching that video, the background is darker

to focus attention on that video itself okay, scrolling down. i’ll show you how to add this blog section and i’ll show you how to add in blog posts as well how to add in text, images and video and also how to customize the widget area and scrolling down. i’ll show you how to add in this parallax background with these icons and this map as well, this google map and then i’ll show you how to customize the footer section as well as add in the social media icons and when people click on it, it scrolls them back up so that’s a really good user experience and if you scroll down like that, you’ll see the header design is also a sticky so it stays up there

and it provides a great user experience and what’s really cool about it is that it’s a one-page website so people can click on the different sections and it will scroll them down but you can create as many pages as you want but if you know how to create the first page, then you’ll know how to create any other page for example, you could create a page like this and this has a really awesome parallax features so this is a layout which is actually built-in to the theme but i’m actually gonna show you how to build the website step by step so you have a good understanding and the skills how to build your website

that way, you can enjoy a lot more if you want to check all the layouts, you can check the demo website in the description so parallaxdemo.com and let’s go back to our homepage you can also add in a shop as well but i’m not gonna be showing you how to set that up in the tutorial because that’s gonna make this too long but it’s actually really easy because it uses a really simple plug-in called woocommerce so if you click on that

and that shows your product and people are able to buy from your store and this website is actually super mobile responsive so it’ll scale down really well on all mobile devices, on tablets and things like that as you can see, it looks really awesome and that’s basically it. so basically if you like what you see, follow this tutorial and i’ll show you how to make this website step by step and you can have an amazing, clean, modern website by the end of today so i’m gonna go through an overview of what we need to get started okay, so before we get started, i’m gonna go through exactly what you’ll need

so the first thing that you’ll need is a domain name and, basically, that is your web address so for example google’s domain name is google.com. your one will be basically your name or your business name.com and the second thing you’ll need is hosting and hosting is basically where all your website files, for example, your text and your content, your images, are stored so the people all around the world can access it 24/7 so those two things are must-haves and all websites that you see online have those two things so if you have those two things, then you can skip ahead

the third thing that we’ll need is to install wordpress so wordpress is basically a content management system and, basically, all that means is a platform where you can build your website and you don’t need to know any code and installing the theme, this is basically the drag and drop builder that we’ll be using and that is amazing so i’m gonna go through the cost. so for the domain name, normally it would cost you around $13.00 a year but i have a coupon code which will get you a domain name for $5.99 for a year and for hosting, it would normally cost you around $10.00 a year i mean $10.00 a month, sorry

$10.00 a month but i also have a discount and i think it would be $8.00 or something so around $8.00 per month and install wordpress, that is free and installing the theme, it’s also free so the total costs to start, it’s around $14.00. so $8.00 a month would be around $.30 a day so that’s really affordable and it’s really cheap to get started so if you have any questions, make sure to drop it down in the comments section and we’re gonna begin so you can open up your browser and then either click the hostgator link in the description below

or you could just type it in here. so type in "host…" "…gator" ".com" and then hit on enter so i’ve basically been using hostgator for about 5-6 years now and they’ve got amazing live support so you can contact them if you have issues and they’re affordable, and they’ve got a money back guarantee so let’s click on get started now! normally, i recommend getting the baby plan because yu can host unlimited domains

for the hatchling plan, you can only have one single domain name so with the baby plan, you can share it with your friends and family and it’s just the best option so business plan is probably a bit too much for what you need. so we’re gonna click on sign up now so i’ve got to enter in domain names. so you to sort of choose a domain name and sometimes it might not be available so you might have to try again. so parallaxdemo and then click on the outside here if it’s available, it will give you a tick. if it’s not, it’ll become an x so i normally recommend that you pick a .com extension because people type that in

to their browser because if you get like a .club, if people type in a .com, they won’t reach your website then you’ve lost some traffic so i’m gonna scroll down and for the domain privacy protection, we’re gonna untick that and then we’re gonna scroll down here to the package type and we’re gonna select the baby one and i recommend choosing 12 months because you get a bigger discount but you can month to month if you need but normally, if you’re building a website, you’re probably gonna have it for more than a month anyway so just get a bigger discount. so i’m gonna go 12 months

for your username, you just need to type that in. security pin, type that in and then all you need to do is to just fill in your billing information here and your credit card details you can also pay by paypal as well and you’d be asked to long in to your paypal account after when you check out so i’m gonna quickly fill those in so after you’ve filled your details in, then you can scroll down and you get the additional services so we’re gonna untick all these services because you probably don’t need them at the moment

and if you followed my channel, i actually made videos to show you how you can set these up for free using some plug-ins so scroll down and you’ll enter a coupon code here so type in hoganchua h-o-g-a-n-c-h-u-a. and then click on validate so this basically gives you a bigger discount. so, as you see here, you get a 35% discount, you also get a $5.99 domain name so after when you’ve done that, you can click on "i’ve read the terms and services" and then just click on check out now!

and then after when you’ve checked out, then you’ll either get a paypal login we have to log into your account and pay the amount or you get a confirmation page that looks like this and once you’ve got that confirmation, then we need to go back to our email to check our details, to login to our cpanel to install wordpress so log in to your email account and you should get a email, something like this: hostgator – your account information so just click into that and what i want you to do is click on the control panel url and then you’ll need to copy over your username. copy that to your clipboard. and then also copy over your password

and basically paste your password and username into here so i’m just gonna type mine in ’cause i’ve changed mine and then click on log in so once you’ve done that, then i want you to scroll down let’s just close that for now scroll down to software and services and click on quick install wait for that to load so you can either click on wordpress here to install wordpress or you can scroll down and click on install wordpress here

and i want you to click on install wordpress and click on this drop-down and you should only have one domain. as you can see, i’ve got a few domain names so let me try to find that parallax demo and leave this one empty for your admin email, type in your email address for the blog title, so this is the title of your website i’m just gonna name it "logo" for now

and you can change that later on so don’t worry about that. your admin username, so this is your login username that’s about it and click in install wordpress click on no thanks on the web designer and that will take about 30 seconds to install the wordpress on your new website once that is done, then click on view credentials and let’s click on the admin area. sometimes when you’ve just bought your domain, it might not actually be up yet because it takes time for hostgator to set it up on the back end

so hopefully it’s up by now click on that. so luckily it’s up for us if it’s not up yet, maybe take a 15-minute break or something. worst case scenario would be about 24 hours but normally it’s pretty fast so copy over your password and your username let’s type in my username here -oops and paste in my password. click on log in so congratulations, we’ve basically installed wordpress and this is your wordpress dashboard

so it looks a little bit overwhelming at first but it’s really not. we can close a lot of these things this is basically our dashboard to control everything okay, so let’s go to visit our website and see how that looks so our website is pretty plain now and it’s got no content or anything so it doesn’t have the drag and drop builder because we haven’t installed the thing so we’re gonna go back to our dashboard and we’re gonna configure some basic settings so let’s close these things to clear things up a little bit dismiss that. close that, close that close that and close that

so that’s cleared up everything now what i want you to do is to go to users and click on your profile so we just want to set in a new password, an easier password so you can remember click on generate password and i’m gonna hide that i’m basically gonna set in a new password.you don’t have to but then you’ll have to remember this password but they’ve emailed you this password anyway. so let’s go to confirm that and update profile

so once that is done, i want you to go to settings and click on permalinks and i want you to click on post name. so basically what this does is it sets the title of the post or the page in the url because you don’t want a url structure that has "?p=123" because that doesn’t explain anything to your user and it’s not good for search engines. scroll down and save so once you’ve done that, then i want you to go to plug-ins and click on plug-ins and basically plug-ins are sort of application that enhances the functionality of your website so for example, on your phone you’ve got apps like pokemon go, you got whatsapp, instagram those are all apps for phones but plug-ins is sort of for websites

so we’re gonna deactivate these so select all and deactivate first, apply and i want you to delete them because it might conflict with our wordpress builder theme so select it again and delete apply and that’s done so we’ve basically configured the basic settings now i want you to click on appearance and click on themes so we’re gonna install the ultra theme by themify that includes the drag and drop builder

so if you look the video below, in the youtube description, there’s a link there to download that theme so click on that theme and download that to your computer and you also got another link there which includes the content of the tutorial so it’s got the images and everything so you can follow along, step by step, and it’ll be awesome so download that on to your computer and it should look something like this it should look like themify ultra.zip if it automatically compresses into a folder, like that, then you need to right-click it and compress it back into the zip file. so i don’t want that anymore

this one will appear in a zip file and then you can double-click it or you can right-click it to open it up and it basically includes all images that we’ll be using so once you’ve done that, then we’re gonna go back to our website and we’re gonna click on add new and then we’re gonna click on upload theme click on choose file and then we’re gonna go to desktop and then i’m gonna find the files and click on open so make sure that its a .zip file that you’re uploading click on install now

so that’s gonna take a minute or two. you can see the progress down here but if you have issues installing that theme, then make sure to go to my website http://www.hoganchua.com and then go to my faq scroll down to theme installation and if you read these, it will probably help you out if you still can’t fix it, then make sure to leave a comment down below so let’s go back here so once that is done you should get a "theme installed successfully". and i want you to click on activate and that will basically activate the theme for us so i want you to click on x. so don’t import that, click on x

and once you’ve done that, you can dismiss this notice up here so let’s take a look at our website now. so visit our website so this is the website with the theme installed. as you can see, it looks a lot better but we’re still gonna configure it so before we actually start building the website so the first thing that we’re gonna be doing is adding in some pages so to do that, click on the dashboard again and then hover over pages, click on add new. just click on that and then i want you to delete the sample page first ’cause you don’t want that. just trash that and click on trash again

and delete permanently for that page and click on add new and i want you to type in home. this will be our home page and that’s basically all you need to do so click on publish and if you want to add additional pages, this is where you add your pages all you need to do is click on add new, type in the title of your page and then update now because this is a one-page website, i won’t be showing how to build and add these new pages but definitely you can add it on later on so what we’re gonna be doing now is i want you to go to appearance and then click on menus so i’m gonna be opening up a demo website that i built before so i can refer to it

so let’s click on that so basically for the menu name, i want you to type in top navigation. it doesn’t matter what name you set it as. it’s just for you as a reference. click on create menu and then what i want you to do is if you have pages here and then you want to add it to your menu, this is your menu then you need to select it and add to menu and that will appear here because this is the home page, we probably don’t need that because people know that when you click on the logo, it goes to the home page so it’s sort of a waste of space

so i don’t do that but what we’re gonna be doing is setting in some custom links the custom links are the links up here which will link to our different sections on our website so what we’re gonna be doing is clicking on that and i want you to copy your url you don’t want anything after that "/" so you don’t want wp or anything like that you just want your website url. copy that select that and paste that in make sure that is correct and then when you’ve done that, type in "#" and then in lower case "about" for your link text, this will be about and then click on add to menu once you’ve done that, then i want you to repeat the process. this one will be for services

link text will be services so the name, it could be work or anything like that it doesn’t really matter but probably just follow along for now and then you can edit it later on paste it in again.the next part will be gallery, i think oops, forgot to add in a title next one will be blog add to menu. okay, close that and next one will be contact and then link text will be contact add to menu

so once you’ve done that, then if you want to, when you create new pages, you want it to automatically add into your navigation menu up here, then you can select this thing up here which i will and for the theme location, you have to select main navigation so it will actually appear up here and then click on save menu so once you’ve done that, then i want you to go to visit website and that will be your website and your menu up here and if we go back to our dashboard, i forgot to show you something that is really important let’s go back to our pages and we created the home page, if you click on view

you’ll see that it has /home/. the home page is not actually something just like that with the plain domain url you want to set it to this url here. you don’t want to have /home at all so to do that, what i want you to do is to click on customize sometimes it takes a few seconds to load or automatically take you to themify options. click on that click on static front page and you want to set a static page and for your front page you want to select home save and publish and then close that

so for your home page right now, it would be just your domain url.com so that’s what you want and only then will you be able to see the themify builder so now what we’re going to do is configure some the themify settings and also to set in the header and also to set in the page layout so what we’re gonna do is go back to our dashboard hover over themify ultra, click on themify settings and then the first i want you to do is scroll down and for the google fonts, i want you to select show all google fonts

so it’ll show more fonts that you could use for your website so you can click on save and once you’ve done that, then i want to click on default layouts and default layouts is basically where you can set up the default page layouts for your posts or your pages so what i would like to do is i like to right-click and visit our website open it in a new tab so you could see what’s going on and then, for example, if you want to set the page layout, you would scroll down this is where you set up your post layout page layout is down here

so we’ve got the sidebar here and we’ve got a title here we don’t want that so for the page sidebar option, we want no sidebar and we want to hide the title on all the pages and we don’t want people leaving comments on our pages so we want to select that and then click on save and then i can just refresh that and then you’ll see that it should be gone so basically you’ve got a blank canvass to work on

and that’s great now what we’re gonna be doing is setting in the header so let’s go to theme settings here and if you scroll down to the theme appearance here, then you can look at header design and i want you to select the…i think it was the 9th option so this is the header that we want. so let’s select that and save and let’s give that a little refresh okay, and that is basically the headerdesign that i want okay, so you’ve got a lot of options there but i want mine just nice and simple

okay, you can disable the sticky header if you want to. so the sticky header is for example, if you are scrolling down, the header actually stays there i feel that’s quite nice for good user experience but that’s up to you so i’m gonna leave that. i’m gonna exclude the side tagline the search form, and exclude the rss so this is the tagline this is the rss and this is the search so we’re gonna exclude that

and then what we’re gonna do is save it and give that a little refresh okay, looking awesome since we’re here, i’m also gonna show you the settings for the footer please scroll down, just a little bit. you’ll see the footer design so i’m gonna exclude the site logo for the footer and this is basically the back to top bottom. i like that and i’m gonna leave that there and some of you might want to remove this thing here. so i’ll show you how to do that now we’re gonna scroll back down and should see footer text 1 and footer text 2

so basically this is the footer text 1, this is footer text 2 if you want to remove this, then all you need to do is to hit on space and then just click on save and that will remove that for you okay, that’s nice and simple, and done now what we’re gonna be doing is adding in the social links for your footer so to get the important things out of the way first. so let’s go to social links here and basically all you need to do is paste in your profile url. so i’m gonna quickly show you how to do that okay, so copy over your facebook url

go back to the website, paste the facebook one into there close that, get your twitter one copy that, paste that into there if you have google plus or if you don’t, then you just leave it empty and it won’t show up but if you do, then you can just copy that over uh, youtube and make sure you can subscribe to my channel. that will be awesome. so let’s paste that into there and let’s say you have instagram or you have something but it just doesn’t show up here so you can add that on. all you need to do is click on add link

and let’s type "instagram". and the link, you can just copy over your profile link paste that into there and you need to click on insert icon and we’ve got all the icons here. just click on brand scroll down to instagram and once that is done, then that is done. so you can rearrange everything just by dragging and dropping and that’s pretty much it. so you can set up the icon color and the background color but for this tutorial, we don’t need to and just leave it empty for now so let’s click on save and what you need to do now is go to appearance go to widgets

and then you’ll need to go to themify social links. you need to hold it and drag it and you need to put it into footer social widget and drop it into there because these are external links, linking out to another website, i want to open the link in a new window okay, and click on save once that is done, we will then visit our website. hopefully, that would show up okay, awesome. so go to our social links down and i’m just gonna quickly close these windows okay, so the next step is showing you how to change the colors and where you can add in your logo and things like that so we’re gonna click on customize here

and then wait for that to load a little bit so we’ll be in themify options. click on advanced for more options and then basically to change a logo, all you need to do is click on site logo and tag line so click on that. click on site logo if you have a logo already, you can click on logo image and you can upload your image through here so your logo has to be a .png file. that basically means it’s a transparent file and that is the best file to use now you also want to change the size, you can change the size here. and if you want to move the logo position,

then you can select this option here but for now, if you don’t have a logo, then what you can do is just select site title and enter in whatever site title you want and then you can pick from the hundreds of different fonts here. so for example, i’m just gonna pick on open sans and i’m just gonna save it as maybe 16 pixels or, i don’t know, maybe 24 pixels. like that and then i can change it to bold and i might change the color to white because i’m gonna set the header color to a dark gray

so once you’ve done that, you can close that like that and then if you want to edit the background color of your header section, then you’ll need to click on header and that will be your header wrap so the header wrap color would be probably be a 3b3b it’s a nice, neutral color either go for a dark gray or white color. so i’m gonna be going through some design tips in just a moment because a lot of people, you know, they go off to build their own website, they don’t really follow the rest of the tutorial where i give these tips and things like that and the website doesn’t turn out that great

i know that because a lot of people send me the url because they have problems with their website and things like that. and it doesn’t look good, okay and if your website doesn’t look good, then people are just gonna click off your website in a second and basically there would be no point in building a website in the first place so i’m gonna explain those tips in a second if you noticed that on the demo website, we actually have a transparent header, the reason why we set a dark gray header is because not all pages can be transparent so you’re gonna have to have to set a background color regardless so what we’re gonna dow now is we’re gonna close that. and close that

so i’m gonna explain some basic design techniques i’m not a designer but these are some of the really important tips that i’ve learned when building my websites so these are like tips that top websites such as apple, uber,tesla, they all use these techniques you could ignore these if you’re a designer or something like that but if you’re just beginning then i recommend that you watch this part so the first rule or the first tip is that i recommend sticking to one font family for example, if you go http://www.apple.com or if you go to http://www.tesla.com,www.uber.com they don’t use many different fonts

so this is a chrome extension called whatfont and you can basically see what font they are using they don’t have 3 or 4 different fonts. you don’t need to make it really fancy by using a lot of fonts just stick to one especially if you’re just starting out and there are two different types of typefaces. one is called sans serif which is sort of the modern and clean type where serif is a little bit more traditional and it’s really good for long reading or blogs and things like that but if you just want to build like a modern website, then i got some recommendations so open sans, roboto or lato and you can also try railway, montserrat and pt sans so the second tip is to choose just one main colour. again, you don’t need a lot of different colors to make

a website look great. as you can see, apple, they just keep it nice and neutral. it looks really simple and nice so what i recommmend is going to a website called kalua….i think that’s how you pronounce it let’s click on that and also check out some color meanings so colors are really important because each color represents a different sort of perception or feeling you don’t want to pick the wrong color for your business. so read up on that and choose the right color i don’t know what’s going on here but click on advanced and proceed to that website so you can look at this website and let’s say you pick a blue sort of theme, you pick a blue color click on that and you can click on edit, sorry

and then you can get the color code here so after when you’ve done that, then scroll down so i recommend using a lot of neutral colors especially to separate your content for example, if you go to apple and go to one of their pages for example this map page and if you see that the white background and it separate the content at the back with a gray background scroll down and you’ll see that they separate the content white background with a light gray background and also divide the line with the gray which is a neutral color and you can also use the neutral color for your header sections and also your footer sections

and also anywhere that you don’t know which color to use and also make sure to separate your content. so use a lot of white space because white space makes things look really simple and clean and also use divider lines and background colors such as this dark gray and then make sure to crop your images before you upload i’ll be showing you how to do that in the tutorial itself but if you don’t follow along, then this is the ideal size to crop your images at so 1800×1000 for your hero images and hero images are basically the image that goes from here to the other side

and then for your blog featured image, i recommend 1165 pixels times about 665 pixels so your blog featured posts are, for example, scroll down here so that’s your featured post. so that’s the size i recommend and for your body font, you want it to be between 15 to 25 pixels so as you can see, like a 28 pixel font size is a little bit too big and it doesn’t look very professional so what i recommend is around 16 pixels. that is the best size that i found and for your line length, you want it to be between 45 to 90 characters across so keep it easy to read you don’t want a line of text which is like this

it goes from there to there and it’s just really hard to read so you want to make sure that it is between 45 and 90 and when you’re using headlines and subheadlines, make sure to define some sort of heirarchy using your font size and colors and also the boldness of the text for example, this is a good example but this is not so good the reason why it’s not so good is because when you’re first looking at it, it sort of like you don’t know which line to focus on because they’re both the same colorand they’re both bold

you want it to be something like this. bigger, bolder, and with a lighter color like this it just looks a lot better and then i recommend not using pure black for your backgrounds or with your texts. so i recommend using dark gray instead if you’ll notice like when you go to any website, you’ll notice that they don’t use pure 100% black it’ll either be like dark gray or just a gray color. so if you go to apple this is not a black font, this is like a really dark gray font this is not black either. it’s really, really dark gray because the reason is it’s just too much contrast between the white and the black

and then the last one is to organize all your content and all your images before you actually build your website and it will make things a lot easier and i also recommend taking a look at websites that you like and forming your layout so that’s pretty much it and i’m basically gonna start building the website now so i’m just gonna close all those and i’ll leave that one and back to our main navigation section right here so this will be the main navigation and the menu container is basically where we can edit the menu location

so we’re gonna set that to relative so once you’ve set that to relative then we’re gonna make sure that it’s sort of centered so i’m gonna type in 3 pixels and you’ll see that it moves down we’re gonna minimize that and for the menu link, we’re gonna click on that and we’re gonna make sure that the menu link is open sans as well so open sans is the font that we’re gonna be using on this entire website but the funny thing is, by default, it’s already open sans so whatever font that you’ve chosen, then make sure to apply it here

and the size, i’m gonna set it to 16 and then for the menu link, i want to change the color to white but you’ll notice that it doesn’t actually change the color. so just set it to white regardless because we need to set the menu active link for these colors here now for the menu link hover, i want you to set this to sort of a light gray so it will be e6e6e6 so this keeps things really professional. so when you hover over it, this link will actually be white i’m gonna show you in a second so this is the menu active link. the reason why it is the active link is because

we’re actually on the home page at the moment and all these links are actually on the home page so i’m not sure if you know what i mean but, for example, if if i’m on the mac page, then the active link color right now is gray so if we go back here and we change the menu active link color to white, then it’ll be white. and when you hover over that, it’ll show up as a light gray for your menu active link hover, we want to keep it consistent so make sure it’s the same as the menu link hover so copy that to..oops. to here

and paste that in there and once that is done, then that is all good for the drop down container, that basically means the settings for the drop down box. so you can set the styling for that as well now the next thing we’re gonna be setting is the footer section for the footer, we can click on the footer and it’s pretty nice having a white footer already so you can keep it that way if you want to but for this tutorial specifically, i’m gonna change it to dark gray so i’m gonna change it to 2929

and 2929 is a little bit darker than our header now what we’re gonna be doing is setting that and then going to footer font and changing the footer font to white so we can actually see the text and this is a link so we’ll need to click on footer link and also change that to white. and that looks pretty good and that’s about it. you’ve also got other settings here but i’m not gonna play around with those everything looks good and we’re gonna click on save close it and that’s pretty much it. so the next part is really important. it’s the first row where we’ll be setting in our hero image

the parallax hero image that you see here and this is really important because this is basically the signage for your business you want to make sure that it is clean and also the image is not blurry and this is probably the most important part so let’s go and find our images first so i’ve got some really good places where you can get images and you can go to http://www.unsplash.com and you also got another place called http://www.stocksnap.io and another place called http://www.pixabay.com so all these 3 places, you can get the images from here and you can use it for free without

crediting the author of the image or anything like taht or even for commercial purposes so this is a really popular website and you can use these ones too if you can’t find any images if you still can’t find any images, then i recommend checking out http://www.photogene.net now this is where you can get images for a dollar and they basically have a bigger library so choosing the right image is really important because you don’t want to misrepresent your business or your service so for example, if you go to a restaurant or something and you see a salad. like a picture of a salad, sorry and when you order it and when you get that salad, it looks nothing like the one in the picture

so you’re not meeting the customer’s expectation and that’s not a good at all so you want to pick a correct image that represents your business so for example, i’m gonna show you how to download it and then we’re gonna crop it so let’s say you like this image here. we’re gonna click on that all you need to do is click on download and that should load up really awesome image. right click and basically save that image on to your computer create a folder and make sure that everything’s organized but i’ve already got the images and you can basically download the images to follow along the tutorial

it’s in the youtube description so once you’ve got that image on your computer, then i’m gonna close all these and then we’re gonna go to a website called http://www.fotor.com so this is where we’re gonna edit our images and i like this because you’re able to add text to it, you’re able to enhance the image. the default wordpress one, you’re not able to do that so after when you’ve downloaded it, click on open and i wanna go to my contents folder and this is the image that i’ve chosen so if you’ve downloaded to contents, select your image uncropped open and then close that. and you’ll notice that the image here is really, really big

i don’t want a really big image because it’s gonna take too long to load and people are gonna click off your website if it takes too long to load so click on re-size and click on the lock to make sure everything changes proportionately and i want you to type 1800 and that’s a good size then go to crop type in 1800 again and type in about 1000 in height

so i found that a good height for the hero image and then i’m gonna move it to wherever i want. i’m gonna put it probably just above that person’s head and click on apply. and afterwards when you’ve done that, you can click on enhance to enhance the image or you can edit the basic settings, add text, or things like that but i think the image is good already so i’m gonna save it i normally say this is normal quality because you don’t need a big image and basically save that to your computer and after when you’ve done that, then we can go back to your website and we can basically turn on the builder so after when we’ve turn on the builder, then this is basically a row

we’re gonna be adding in a row background. so click on the row options and we’re gonna change the row width to full width so it goes all the way across. from here to there click on styling and for the background type, we’re gonna select image but you can also select gradients, you can also add a video. so you can upload your video here and if you want to know where i get my videos from, check out my website and go to my blog post and click on my ultimate list for building wordpress websites and i’ll list everything that i used so let’s go back here and you can also add in a slider as well

and to do that, make sure to also set the image size to original and set it to full cover if you do add a background slider and we’re gonna go to image and then we’re gonna go to browse library. don’t click on upload because it will automatically resize your image and will make it really blurry so upload that, select files and we’re gonna upload the hero image this one here, 1800×1000 and open and when you’ve done that, insert file url

and it should show up. if it doesn’t show up, then what i recommend is to just click on save or to refresh your page and redo it andonce you’ve done that, then for the background mode select parallax scrolling and if you don’t want the parallax scrolling feature, another popular option is the full cover option which basically means that image is just static it will bascially just stay there and that’s a popular option for the background position, you want to select set as center and then after when you’ve done that, then we can click on save

so as you can see, there’s a little gap up here and we want to close that gap so let’s click on save first and let’s close the builder to do that, we need to go to edit page and i want you to scroll down to themify custom panel and for the content width, you want to set full width so you’ll need to do this if you want to set a hero image on all your pages so update that and then click on view page and hopefully that gap will be gone

and now what we need to do is to add some text and buttons in there so turn on the builder and then what we’re gonna be doing is dragging in a text module and then you can type in your title. so i’m gonna type in parallax and then i want you to highlight that text and click on toggle toolbar so i want you to select heading 1 for this and you can preview that to see what that sort of looks like again, that looks pretty good. and you can sort of set the heading 1 style in the actual module itself in the text module itself you can go to styling and then you can click on the heading tab

click on that and you can actually set the font color and things like that here what that basically does is it’ll edit the heading 1 for this particular module only so sometimes it’s convenient but i recommend setting it for the whole entire website universally because it is more convenient and it will save you more time later on so i’m just gonna delete that and leave that for now and then we’re gonna set it in about 2 minutes so we’re just gonna click on save for now and then what i want you to do is to drop in a text module

and then this will be your subheadline. so infinite…… ….possibilities and for this one, i’m gonna go to styling and for the font, i’m gonna set the font size to 24 pixels and you can go to text to sort of preview that and that’s what i want you to do for now and then click on save next part will be adding in your button. dop in a button module the text, we’re gonna type in begin. and for your link, so wherever you link your button to then this is where you paste in your link. so for example, i want to link it to apple

i’m just gonna copy that link paste that link into there and then if it’s an external link, then i suggest that you select open link in a new tab so i might just do that and give it a little preview so you’ve got your color optionshere, you’ve got your style, the button options here but i don’t really like the color options here so i’m gonna show you how to style it properly so go to styling and click on button link here and what we’re gonna be doing is changing the button so it looks like this so it’s an outline, a transparent one

so for the background color, you want to set that to transparent so this is basically the transparent meter thing. so drag it down to zero for the background hover, so this is the color when you hover over it. so this is white so change that to white for the link color, this will bascially be white. like that anfd for the color hover, this would basically be gray. so when you hover over it, it turns gray, that link so go back here and the color that we’re gonna set is 3b3b and for the decoration, keep that as is

so as you can see, you don’t have a border yet so you need to scroll down and for your border, you want it to have a white border and you also want to set the thickness of the border to 2 pixels and there you go. looking great, click on save so now the cool part. let’s click on the row options click on styling. scroll down and i want to set the font color to white so what you’ll see now is everything inside the row will turn white. so this is just the more efficient way of doing things and that’s how i do it so i recommend doing it that way. and then you want to align everything in the middle so we just align everything

in the center like that now we’re gonna add some spacing on the top and the bottom to do that, we’ve basically got the padding and we’ve got the margin so both of them add space but they’re a little bit different so imagine that there is an invisible box around this image and margin basically adds space inside that invisible box. so if we deselect that and we set in 5% here the it’ll add space outside the invisible box because you don’t want space so make sure to delete that and deselect this one and then put in 17.5%

padding to the top so it adds space outside the invisible box and that’s what you want and for the bottom, 17.5% as well i use percentages because it is more mobile responsive it resizes better than using pixels and once you’ve done that, then we can click on save now the next part, we’re gonna click on save. we’re gonna click on close so let’s set the heading 1 font universally. so click on customize and click on headings

so this is the heading 1 and if you need to double-check, you can right-click and inspect that and you should see heading 1 there so what i want you do to is click on this and change the size to 80 pixels or whatever you want and change it to the font that you selected. what i want is open sans and i also want to change the font width to bold to make it stand out a little bit more and, like i said, it gives it a little bit more heirarchy. for example, this is most important second most important , third most important. and that is basically it. and you can click on save and then you can close it so what i want you to do now is to turn on the builder

and i want to move this infinite possibilities a little bit so i want you to double-click on the text module. click on styling and then for the margin, deselect that and you can actually type in -2% and that will basically move it up. so – is the space in between click on save okay, that’s looking pretty good. now i’ll show you how to set the transparent header so for every page that you want to set as transparent, you need to go to edit page and then scroll down to the themify custom panel click on page appearance

scroll down and then for teh header background type, select transparent header you can also edit the header color if you need to so after, click on update and then we’re gonna view the page so that’s a really nice transparent header now and i also have a really important tip: sometimes you might have chosen an image that is sort of a different color and you won’t be able to to see your menu items up here so one way of making it stand out more is actually adding in an overlay color so you can go to the row options

and go to styling. for the row overlay, you can set in a more darker color. so set it to black change the opacity and, as you can see, your whites will stand out more because if you set in a overlay color and it’s darker, it will stand out more so your menu item will stand out a lot more so that’s one way of doing it but the best way i recommend is using a gradient because with a gradient, you’re able to set it just for the top part. make it darker just for the top part so what we’re gonna do is we’re going to click on this black thing here and then drag the opacity down to about 25%. and then click on this white one here

and then drag it up to about 20% and then once you’ve done that, then drag the opacity here down to 0 so what that does is basically it adds the darker shade up here only so for example, it goes darker like that so imagine that it’s darker up there then it will make your whites stand out more so let’s click on save save that and close that and that’s pretty much it and everything looks great

and one more thing i want to show you is you can actually add in animation effects so if you double-click on that, you’ve got your animation effects here and what i recommend is just keeping it really simple so for example, we just set in like a fade in this might be just a 1-second delay and then i might set in another fade in which will be a 1.5-second delay 1.5-second delay and the bottom might be a 2-seconds delay and that actually gives it a cool effect when people actually land on your website

set that to 2 and save save it. close it okay. 1,2,3. amazing. so congratulations! that is probably the hardest part of the tutorial and we’re gonna be moving to the next part: the quote section so we’re gonna add in a quote so let’s turn on the builder again and i want to set the background color to a dark gray so click on the row options and click on styling for the background color, set it to 2929. that makes it dark. and then click on save

now i want you to drop in a text module and i’m just gonna go to my demo website and copy over that quote so copy that to your clipboard. go back here and you don’t want to just paste that in. anytime when you paste in pasting in something in from another website, try to paste it in as plain text. so click on this icon here close that. and then you paste it in so that will remove any styling on that text so once you’ve done that, then i want you to the styling tab

and for the font, because it is a quote, i might set it to a different font so pt serif and then we can change the font size to about 24 pixels and then you can give that a little preview i’m just gonna change that color to white here. okay, that looks good now i also want to align it to the center. like that and theni want to make this text a little bit smaller right here so waht i’ll do is i’m gonna change that to a heading 6 and then what i’m gonna do is go to styling and go to heading

and i’m gonna set the heading 6 here because i’m probably not using it this much on the website and this is just a little bit more convenient sometimes so pt serif and you want to change the font size to 14 pixels which makes it a little bit smaller give that a little preview, see if that works okay, that looks pretty good and that’s it. click on save and all we need to do is add some spacing. so to do that, i just go to the row options. go to styling untick this and for the padding i want to set it to about 5% to the top

4% to the bottom and that is pretty good and obviously you can add some animation if you want to. and click on save so in this section, you can put in a customer quote, what you do, your mission statement or anything like that we’re gonna move on to the next part. so the next part, we’re gonna add a little about me section and to do that, we need to set the column to this one here, the last one click on that. so you basically have one small column here and one big column so this column, we’re gonna drag in an image module. drop that in there and for the image url, you want to click on browse library

upload files, select files and then you can put in your image but if you have been following along, then you can download this image here stare into the distance. click on open and then all you need to do is insert file url and give that a little preview and you’ve got a lot of settings here but i don’t think it’s really necessary so we’re just gonna click on save and then the next part, we’re gonna drop in a text module here basically, we’re gonna type in about me and then we’re gonna change that to heading 2 and then we’re gonna click on save. i’m not gonna set it here because we’re gonna be using it quite often so

i want to set it universally set that in here and drop in a text module below here you can type in about yourself or about your company so i’m just gonna copy the text over from my demo and then paste as plain text drop it in there like that give that a preview to see if that’s what you want and that’s done, really simple. click on save what you can do is you can also change the column width just by pulling it like that so that is really useful and that looks about good to me

and what you can do is also hover over here and select the column alignment. so basically it will align the image and the text on the right hand side here to the center so that looks really nice so once you’ve done that, then what i’m gonna do is click on save for now and let’s go and edit the heading 2 tag. i will also show you where you can edit the body, text, fonts and stuff like that so close that and we want to go to customize and what i want to do is

i want to go to headings. this is the heading 2 tag make sure that is open sans or whatever your default font is and also i’m gonna change the color to about a 4d4d which is sort of a dark gray and that makes it a bit lighter and i like that a bit more and i also want to change the font width to i think 500. that looks about good and then we minimize that. and if you want to change the body font, click on body body font and then change it to whatever font that you’ve chosen. by default, it’s already in open sans and make sure to don’t change it to any font bigger than 25 pixels. i recommend 16 but by default, it’s already 16 anyway

and then we can also change the color but i find a dark gray color really nice and professional but if you do want to change, maybe change it to sort of like a 4d4d. or something like that which is also a dark gray but i’m gonna keep it as default. that looks pretty nice and then click on save and publish. close that and then we’re gonna scroll down. we’re gonna turn on the builder again and we’re gonna add in some padding and i also got something cool to show you so let’s add some padding first. so options deselect that

and then for the padding, i want to set around 6% for the top and around 4% for the bottom and a really cool thing is, let’s say you made a mistake, then you can actually undo things and you can also redo it as well and you can also save this revision so for example, your microsoft word can save it, well it’s the same for this builder you can click on save revision add a comment to it, about, and click on ok and if you have any troubles, then you can load revision so after when we’ve done that, we can add the services section so we’re gonna click on the row options and what we want to do is set in a background color

now, we want to set in a light gray so f6f6f6 and that’s a really nice gray to separate the content, to make things professional once you’ve done that, then click on save and we’re gonne drop in a title. so text this one will be services or it could be work or anythingthat you want. set it to heading 2 and the click on save so it’s very convenient that you set it in the heading 2 already so you don’t have to do it again and then what we need to do is drop in a feature module put over that and for the feature title, you’re gonna type in your service or whatever

you want. so for example, it might be web design andn then here, you want to paste in a little description so i’m gonna copy over some text here. copy that select and paste this text paste that in there and then scroll down and you can give it a preview and that’s what it probably looks like. but for the layout, you want to select this one. the last one and then we can add in an icon. or you can add in an image. that’s up to you but i think icon is really good for this section

so for your icon, click on insert icon and i want to look for a paintbrush. so scroll down. it starts with p okay, paintbrush and then you can give that a preview okay, i might change the color of the icon to a light gray. 949494. which looks great. preview and you can add a circle around it if you want to by setting in a percentage to about 2% for example, 100% change the color to the same one give that a preview

so you can also do that if you want to as well. so i’m gonna delete that, actually change the icon to medium. and what you might also want to do is to link that services to another page where maybe you can describe a little more about your services so for example, i’m just gonna copy in this url here paste it into there and if you give that a preview, you’ll see that the link changes to red if you want to change the link color, which i recommend that you do, go to stylinh and scroll down to link for the link color, i might set it to 4d4d

like that, which looks good and for the color hover, it is basically when you hover over that link then you can change the color. i might change that to 3b3b and for the text decoration, set that to none and then click on save and hopefully that’s all good that’s all good and the next step is really simple hover over feature and let’s say you want to have 3 feature modules. select the 3 columns and hover here on the right. duplicate duplicate again

and all you need to do is drag it and drop it to the section that you want and to change it, just double click it and then you can change the title and text as well as the icons so i’m just gonna quickly do that okay, that’s done. now you need to add some padding. so click on the row options go to styling and make sure everything is in the center align that and for the padding, i want to set around 5% to the top and about 2% to the bottom

now the next part we’re gonna be doing is the gallery section. it’s really simple first of all, drop in a text module, type in gallery set this to heading 2 and click on save so for your gallery, there are basically 3 options: you can use the gallery module which i’ll be using or a image module, or a slider module so for a slider, you’ll have a slider and people can click on that and it’ll open up in a light box as well it’s pretty simple to use but i just like the gallery options ’cause it’s just nice and simple and it works well so drop that in and for the gallery layout, select grid

insert gallery and then i want you to upload files, select files and then after that, i want to click on gallery so these are the images that i have cropped already to about 1000×666 so there are 6 images and i recommend cropping them all to the same size so that everything is consistent and professional open that and it should take a minute or two to upload so when that is done, click add to gallery and then update gallery

and then you can preview that to see what that sort of looks like so you’ve got 6 images and you can select these to display the image title so give that a preview you can do that if you want but the important part is setting the thumbnail width so for the thumbnail width, you want to divide it by 2 of the original width so for example, 1000 divided by 2 which equals 500 and you want to make sure to divide by 2 for the height as well so that makes sure everything is resized proportionately

and won’t appear blurry so 666 divided by 2 would be about 333 and after when you’ve done that, you can preview that so it can be divided by 3 or divided by 4 depending on what you want but it has to be the same. if you divide this by 3, then you’re gonna divide the height by 3 as well and for the columns, because we’ve got 6 images, i want to set 3 columns 3 images per column, sorry and that will look really nice and once you’ve done that, i’m just gonna deselect that actually then you can just click on save pretty much

and that is done and then we’re gonna go to the row, add some padding styling, align everything to the center scroll down to padding deselect that and we’re gonna set padding to about 5% as well to the top 2% to the bottom so let’s click on save and let’s see if that opens up in a light box close that and let’s click on a image. okay, that works well

and that’s really nice. and you can add this gallery module to any page that you want so let’s turn on the builder and let’s move on to the next section. so that will be our video so for the video part, i’m gonna upload a background that you see here a parallax background so let’s go her. go to row options and go to styling and for the background image, i want to browse library and go to the content folder that you’ve downloaded. so click on background video background for youtube video

and then click on insert file url and once that is done, then set it to parallax scrolling and for the background position, maybe set to center and what i want to do is add a overlay color so i want to set this to black and then change the opacity down to about 20% or so and for the hover color, i want to set that to a little bit darker. so i want to set the opacity to about 65 or 70% so it goes darker when people hover over it so if you just save that, then when you hover over it, it goes darker so when people are viewing the video, the focus is on the video

not focusing on the background the background will look great when you’re scrolling but when you’re watching the video, the it’ll be focused on the video so let’s drop a video module in there and this is so easy. you just need to grab a video so just go to a youtube video this is the video i found, it’s pretty cool copy the url and all you need to do is to just paste it in here and then all you need to do is click on save and that is done

and we probably need to add some padding to the top and bottom as well so go to your row options, go to styling for your padding, deselect that and we’re gonna set about 6% to the top this time and we want to set about 3% to the bottom click on save again and then we can save it so let’s have a little preview. okay when you hover it, it goes darker. and let’s see if that video works okay, so that’s awesome and that’s really simple. so let’s pause that video and scroll down. now the next part will be the blog section here

but before we can actually add in a blog section is we need to add in the blog post itself so right now, i’m gonna show you how to do that. how to add in a blog post how to addin images and video as well so what we need to do is we need to go to our dashboard so go to our dashboard and hover over post. click on it and then we’re gonna delete the sample post so trash that first and click on trash and delete that so to add in a blog post, click on add new

and then all you need to do is basically just add in a title "inspire the world". and you can paste in your text here. your blog post i’m just gonna grabe some text so i’m just gonna grab this text here copy that and i’m gonna paste it here as plain text so if you want to link it to another page or another website highlight the text, click on insert link and you can paste in the url here

or if it’s another page or post, you can type in the title but what i’d like to do is click on the options here and for example, you want it to link to this website here, copy the link paste it into there and you can open link in a new tab but if you have pages and posts already on your website, then you can just select that from here that’s pretty cool so add link and to add in a image, we’re gonna hit enter there and we’re gonna paste in the image between here so all you need to do is click on add media

and we can just upload files, select files and click on the blog folder and for this one, we’re gonna select this one: blog 3 body image and i’ve cropped this image to 1165×775 click that image and open and then all you need to do is click on insert to post and that image will appear, so it’s a really small image but you can edit that by clicking on edit changing the size to full size

and if you want it aligned to the center, click on center. update done. super easy. and if you want to resize it, you can just sort of drag it. like that and a video is even easier. click on enter and let’s say we got a new video this one here you can copy that url and basically just paste url here. so in about a second, it will load up super, super easy and that’s pretty much all you need to know. now we need to add in a category

so to do that, click on add category and this oen might be travel, so type in travel and click on add new and for your tags, it might be, um, peru and this might be the place that you’re traveling to or something like that and then you can separate it by columns, i mean comma and click on add and that will add in your tags.tags will basically help people who are trying to search for a specific blog post

and it will help for search engines as well now we want to set in a featured image the featured image is something like this but this is the image in the blog post so you can set it to the same one but we’re gonna set it to a new one so set that in and we’re gonna select this one, blog 3 featured image click on open. so i’ve cropped the image to 1165×665 so that’s the ideal crop size and you should crop it to that size as well

and then pretty much you can publish that and that is done and we can view that blog post and we can have a look at what it looks like so that’s pretty much it and that’s done and what i want to show you is how to actually sort of style it so if you want to change some of these fonts and you want to change the color or if you want to change the style so it just shows the date and also show you where you can customize the widget area here as well but before that, i’m gonna add 2 more blog posts so you can actually hover over here and click on post

so that’s a shortcut. so i’m gonna completely add those in so i’ve added it in my last blog post. now, what i’m going to show you is how to edit this post date thing because that’s what a lot of people asked me to do and it’s really simple. so you can go to dashboard and then hover over themify ultra click on themify settings and then you want to click on default layouts and then scroll down and then go to default single post layout and you’ll see the post date thing. you can either hide the date or you can display it just as a in-line text instead of that circle style

so you can select that and you can save it and let’s go back to our blog post so you can click on all posts here ad let’s go to preview that and that would be disappeared. so you got your date like that and yeah, let’s show you how to edit it. so go to customize and once that is loaded up, then we can go to post because this is a blog post. so click on post and basically this is a post title. so we can change the post title here so click on post title and we’re gonna change the color to maybe a 3b3b-oops

’cause you don’t want to select the black one, it’s too dark and that would be pretty good. it’s a really dark gray and that looks great. and you can edit the size and everything taht you want.this is the post meta and you can edit the post meta here for the post date, you can click on post date and what you can do is probably you might align it to the center click on taht and it will align to the center. you can change the size as well to size 14. like that and that looks great and what else you want to know? you probably might want to know how to edit the styling for the sidebar here

and that is also really easy so that is what we call the sidebar here so click on that and you’re able to edit all the sidebar fonts and also the colors and if you’re scrolling down, you’ve also got the comments section if you want to change the comment button color, you’ll need to click on forms and this will be the form button and you can change the color here so you’ve changed the color. i’m gonna keep it as defaut and then that’s about it. so i’m gonna save it and publish and close it

and now what i’m about to show you is the widget area so let’s go to our dashboard here and then we can go to appearance. click on widgets and then what we can do is arrange the sidebar so i’m actually gonna open this up in a new tab so you can see what is happening so click on view so if you look at the sidebar here, you’ve got the search, recent posts, recent comments, and as you can see and then what we’re gonna do is i’m gonna remove these. delete that delete the recent comment. you can keep those if you want to but i want to delete it

so i’m gonna delete that, i’m gonan delete the search and the categories there and i’m gonna put in featured posts so drag it up and put it in the middle and you can just change the title to maybe popular posts you can also set the thumbnail as well by selecting this and then you’ve got a range of options here. click on save and then that is done. so let’s preview that and see if that’s changed so taht is pretty good. so you can add a lot of different widgets here

and i’ll probably be uploading more videos on how to customize this section here, for example how to add an image, how to add in your instagram feed facebook stuff and twitter and things like so make sure to subscribe for more videos but i;m gonna leave it at that so now what we’re gonna do is we’re gonna go back here and make sure you save that and thenw we’re gonna go to visit our website and we’re gonna scroll down to the bottom section and we’re gonna add in our blog post finally so we’re gonna turn on the builder

and then what we want to do is drop in a text module and we want to type in blog or you can type in latest news. whatever you want and then we’re gonna set a heading 2 tag save it and then to show your blog post, we can drop in a post module just underneath so you can show this on any page that you like. so the post layout, if you preview that this is the current post layout i want to select this one. this one is called i think it’s the grid 3 layout. so as you can see

and you can set the specific categories you want to show, limit the number of posts but i want to display none for the content excerpt is basically a littler summary of it. give that a preview and if that’s what you like, you can keep it like that i want to get rid of the post meta which is this section here and you can hide that and basically click on yes so that looks about great. now let’s go to the row and let’s align everything to the center and let’s add some padding, deselect that, and the padding we’re gonna set here is about

5% to the top and 2% to the bottom and that should be good. so click on save and that’s looking good and the next part we’re gonna be doing is the contact section so we’re gonna be adding in a parallax background as well. so if you go to our home page and demo site scroll down, a parallax background and some icons so go to row options and go to styling, background image, click on browse library and then after when you’ve done that, go back to the content folder and select contact background click on open and insert file url

select to parallax scrolling, select the background position to set as center and let’s add in some padding now, so we’re gonna set some padding deselect that and we’re gonna change that to about 10% to the top, 10% to the bottom so we can see more of that image scroll down and that’s about it. we also want to set our overlay color so the text in here is a little bit more visible. so i want to change that to a little bit darker so change it to black here and then change the opacity to about 10% or something or 20% and for the hover overlay color, you want to make a little bit darker so maybe about 30% or 35% and then you can drop in a text module

and this will be contact heading 2 and then let’s drop in the icon module. icon would be dropped like that and the icon, we’re gonna put in the address first. so we’re gonna select icon and let’s look for a map. so m scroll down and that one looks okay we might select the white map and for the label, we might select melbourne, australia click on preview and that looks about great and then you can link it up if you want to. you can also change the button style but i think that’s pretty decent

so we’re gonna click on save and really easy. again, you just need to set in how many columns that you want so 3. and duplicate these ones. so duplicate it and duplicate it again and basically arrange it here and then basically you can just double click and change it so this one will be an e-mail address so i’m looking for a e. envelop type in my e-mail change the color, maybe a green one click on save and like your last, it will be a phone number. we might change that to orange

insert icon and let’s look for a p so select the phone maybe and type in your phone number and now all we need to do is align everything to the center row options, styling and let’s change the font to be white and then align it to the center. save it and that is complete. so we can save that and if you want to drop a map module, then all you need to do is drop in map underneath and set in an address. it can be your street or anything like that

i might just type in hawaii. and for your zoom, let’s zoom it to 3 you might want to zoom it a little bit closer and as you can see, there’s something that went wrong and basically you need to set in an api. i’m gonna quickly show you how to do that but before we do, i’m gonna set the height to about 400 and i’m gonna save it and then i’m also going to set the options here to full width so the map goes all the way across. so save that and save that and close it so the map isn’t shoing right now. don’t worry about that. let’s go to our dashboard

go to themify ultra, themify settings and then waht you need to do is go to google map and you need to get an api key so click on generate api key and basically you need to log in to your google account and then you need to click on get a key and it might take a few minutes, maybe. so we can create a new project and enable once that is done, it says that you’re ready. then all you need to do is copy the code so copy that api code and you can close that now and go back here and paste that into there

click on save and, pretty much, it should work. so let’s visit our website and let’s scroll down to the bottom and you should see the map work like that. and that is pretty good so, okay – i don’t know why that went bold but if you do want to change the thickness of that font, then we can go back to customize and that was a grid 3 if you remember correctly and we can edit that font. so don’t worry about that so let’s go to…..scroll here, post and that was a grid 3 so click on the grid 3 post title scroll down and you want to set the font weight to normal

and then that would change. and you can also change the size here as well save close that and that is pretty much complete. our website is pretty much complete so there are still a little few things i want to show you which is really important one of them is the sticky header. so if you go to the blog post and you should see the sticky header here as white. you don’t want that because you can’t see it so if you go to customize and then you can go to sticky header

you can basically set the background color so scrolling down. you want to change the color to 3b3b. and click here and bascially, the color will stay the same but i like to add a little bit of transparency change it to about 75% or something like that. that looks pretty good and then we can click on save now once that is done, we can close that. then we can go back to our home page and we’re gonna set in the row anchors so the row anchors are basically when you click on the menu link, it will scroll down

to the specific section you set it to to do taht, we can turn on the builder and basically, we need to set the name for the row so click on the row options and for your row anchor, you need to name this section about because we’ve named the menu about to be about as well so when you click on about, it will scroll down to about but you dont want the hashtag # in front of it now the next one will be services, gallery, blog, and contact so click on the row options here

this one will be services and it is really important that it is exactly the same as the one that you set in. services, and the next one will be gallary next one will be blog. options and lucky last will be contact scroll down to contact and let’s close it. and before you try anything, let’s refersh the page first so let’s go back here and if you click on the about, then it should scroll down to about, and as you can see the url here is #about services, it will scroll to services and it will change

gallery, blog, contact now one thing is if we actually resize the screen. resize it, resize it you’ll see that the text is not as responsive and that’s not great. and the background doesn’t look great either so i’ll show you how to fix that quickly in about 2 minutes so i’m gonna resize that back. go to customize and then what you want to do is you want to click on styling, mobile so click on that, click on headings heading 1 font which is this heading 1 font and you want to change the size to 50. so what that does is

when people are on a mobile, then the title of the heading 1 will be 50 pixels but if they’re on tablet, then the size will still be 80. desktop will be 80 but when it’s on mobile, then it will be changed to 50. so you can take a look at anything else on your website that needs changing and you can edit it specifically for mobile devices. alright and that’s pretty much it. save it close it and now let’s fix the background. so this is really cool so let’s go to turn the builder

and then all we need to do is duplicate the row duplicate the entire first row. so duplicate and i want you to scroll down to the second one, the duplicate one, click on row options go to styling and i want you to change the background mode to full cover and basically what that does is that full cover is a bit more responsive and when it resizes, it looks nicer as you’ll see in just a moment and what we’ll also do is change the padding to about 25% to the top and also 10% for the bottom

so do that and the most important part is setting the visibility so you want this row to be visible on mobile devices only you don’t want it to be visible on tablet and desktop so hide it. click both that and save now, let’s go back to our original row go to options, visibility and you want to hide it for mobile. so save it save it first and close it and once that is done, if we actually resize to mobile size then you’ll see that is really nice. so the background is really responsive

the text here is also really responsive. so you can apply that principle anywhere on your website now the last thing i want to show you is how to add in new pages and something really cool as well so to add in a new page, hover over here. shortcut. click on page let’s say you want to create a new service page, service page number 1. and click on publish really simple, new page ther’s a new page and it will appear up here if you set it to automatically appear but a really cool thing is you can turn on the builder and you’ve got a lot of layouts that you can actually import so if you go to layouts her, you can click on load layouts

and you’ve got dozens f dozens of layouts that you can import so the reason why i didn’t show you guys these at the very start is because if you’ve imported it, then you wouldn’t really know how to use the builder and how to use the theme and you won’t enjoy building your website and using it and in the end, you’d probably just give up so i want you to guys to know how to use it and then you can do this later so you can click on parralax. you’ve got some awesome layouts. for example, this one here you can replace it and it should take a second to reload so this is the parallax layout

and you’ll notice that it doesn’t go all the way across and there’s a white space here. you won’t notice it because it’s also white but if you save it and close it, we need to go to edit page and then you’ll need to go to page options here. set it to full width for the contend width. update it and basically you can view page and then you have a really, really awesome layout that you can basically turn the builder and update anything that you want. so replace the image, replace the text and you would be good to go

so to create a drop down menu, it’s really simple you can hover over here, click on menus. this is a shortcut and you want that to be a drop down of services. just drag it and drop it it has to be sort of like indents so it has to move in like that that means it’s below services and visit website and then when you hover over it, you’ve got your service page like that and you can also build your layouts and load it on separate pages or different websites just by saving your layouts

and you can also export your layouts as well and that’s another really cool feature that’s built up and the last thing to finish our tutorial is to add in the favicon logo. so that’s the logo up here, as you can see and we can go to dashboard and then we can go th themify ultra, themify settings. and for the favicon, click on upload i recommend uploading a png file again and it has to be a size of 32×32 pixels so click on that, if you’ve been following along it’s already included in the contents folder click on open

visit website and basically you’ve got your favicon so basically the website is complete okay, let’s a have a look at our website and it looks pretty awesome we’ve got our footer section and, yeah, that’s pretty much it so if you guys have enjoyed the video, make sure to give the video a big thumbs up subscribe for more videos, i’ll be posting more videos and also make sure the share the video with your friends. and if you have any questions, just drop it in the comments section below and let me know what other videos you want to see

and yeah. see you guys in the next tutorial

web app website design

Outdatedbrowser : A Javascript Library to Detecting Browser Version

Ditulis dalam sosial. Leave a Comment »

web app website design inspiration

web app website design inspiration

listen, i’m no designer. it’s the besti can do to make sure my socks match. so i put off creating my website for months.and months. but finally, i realized it really was what i needed. i sat down in front ofthe computer, created a new account on wix and then… well, then what. i didn’t know the best way to go about makinga website that would look good! i started by browsing through wix templates to get someideas, but i wanted to see what other businesses had done. that’s when i discovered the wix “explore”page. boom! with one click, i was transported to a mecca of creative, beautiful websites,all designed by regular wix users.

let’s have a look together. each day, wixselects an outstanding website and features it here as the “wix of the day.” this gallery is full of past sites that were selected. the best feature on wix explore is that youcan easily find out which template was used to create each site. if you see somethingyou really like – a feature, a widget, an app, a great transition or animation – youcan probably use it on your website as well! plus, the drop down menu on the bottom ofthe explore page allows you to choose categories, so you can find inspiration from sites thatare most relevant for you and your business. inspired by all this beauty, i found a sitei loved and clicked on the “try me” button. in no time, i had created my own site fromthe same template.

in fact, i loved my final site so much thati thought, what the heck – maybe it could be picked as a wix of the day. so i sent theurl to wixofday@wix.com. why not try it too?

web app website design inspiration

jQuery Plugin to Create Image Gallery, Pull Image from Flickr and Picasa (Google+)

Ditulis dalam sosial. Leave a Comment »

web app walkthrough design

web app walkthrough design

hi i’m brett slatkin, asoftware engineer on the google app engine team. app engine enables editors tobuild web applications on google’s infrastructure. i’m here today to show you howto quickly build a guest book application using app engine.let’s get started. first we’ll create a directoryfor my new application and bring it into my editor. then i’ll create an "app.yamo"file with my

application configuration. i’ll type my application name. version of this application,in this case the first version. version of the apis i’m goingto be using. and the runtime,which is "python." then i declare how my url isgoing to map to my application. in this case, i’m going tohave all urls go to single

python scripts called "main." i’ll create mymain python file. i’ll type in a very basic,"hello world" application. now i’ll go to the terminaland start the development web server. and now that the server isrunning, i can go and view the "hello world" application. now let’s do something morecomplicated and build a web application.

to do this we’ve provided avery basic web application framework called "web app." i’ll import the "web app"module and then define a handler, which will handlethe requests from the application. the methods of this classwill handle htp requests. in this case, i just want tohandle a get request, and i’ll print out a"hello world" message. text "schema handler" i’ll use "wsgiref," which is

python standardweb application container. and i’ll define a"wsgiapplication" throughout all url’s access to myreally basic handler. and of course, tell phythonto run my main function. now let’s view thisin our browser. great. it showed upand it’s working. now let’s do some templates tomake this page look better. we provide a basiclibrary for doing this. let’s create a template fileusing django templates.

to begin with, i’ll just havesome html that says, "hello world." i’ll import ourtemplate module. and then render the template. and then i can viewthis in my browser. now let’s implement a basicui for our web application. i’ll go back into my templatefile and start writing my ui and html.so first i’ll have a form. in this case, i want to post.

and the form will havea couple of fields. since it’s a guest book, let’sstart off with the message i want to have. in this case, it’s just textfields with "message." and we’ll change the "submit"button to say "shout." and now we can go backand view this in our browser. so let’s have our webapplication handle the post request and then dosomething more interesting. i’ll modify "myhandler" tohandle post requests, as well

as the "get" requests. now let’s hook thisup to the data store. to use the data store, i’llimport the dv module and to find a model class that sayswhat fields will have to store in the data store. in this case, my model classwill be called "shout." and i’ll have two fields. first, the message. and then the time themessage was left. now, in the post method, i’lluse the request parameters to

create a new "shout" andput it in the data store. then i’ll redirect the userback to the main page. then i can go back to mybrowser and see this is working right now. now we’re handling posts andputting posts and putting data in the data store,but we’re no retrieving it. so let’s create a query to getthe data back out and present it to the user. to do this i’llcreate a "gqlquery."

and then i’ll use the resultsof the query to populate my templates. and passes valuesinto the template renderer. then if i go into my template,i can use the results of the query and render themto the user. in this case,i’m using django templates. now i can go back to mybrowser and see this is immediately working. and there are my tworequests from before.

now i can type of fewmore messages. you’ll see they are not inany particular order. so i’d like to add a sortorder to my query. new messages go to the top. i’ll modify my model to haveanother property, which is"who set the message?" in this case, it’s optionalbecause some of the messages were sent withoutan explicit sender. then i’m going to go to mytemplate and add

that new field. it would also be good to havelabels on these input fields. then i need to make sure thatwhen i create my shot i’ve correctly populatedthe "who" field. i’d also like to render whosent each message. so, i’ll go back to mytemplate and add that too. in the case the "who" field isempty, i’ll just say it’s from anonymous. now let’s go back to thebrowser and see what

this looks like. you can see all the messagesare from anonymous because none of them has a sender. let’s add a new onewith a sender for me. you’ll see my namehas appeared. one last thing i’m going to dois fix the title to point out this is my applicationcalled "shoutout!" for this application,i’ll use the app config tool. i’ll just type, "appcfigupdate" to deploy my

application and then thenaming application directory. and we’re done. now i can access thisapplication on appspot.com. now let’s leave a message. that’s it. we built anapplication and deployed it. we hope that you checkout google app engine. we look forward tohearing your comments. if you’d like to learn moreabout app engine, please join us at google io, google’sdeveloper event on

may 28th and 29th. thanks for watching.

web app walkthrough design

Free Image Patterns for Web Background

Ditulis dalam sosial. Leave a Comment »

web app user interface design

web app user interface design

>>roman nurik: all right. we are good. i thinkwe are ready to go. thank you everyone for coming to our session, android design forui developers. today we are going to talk about how to implement some of those awesomepatterns that we have documented on developer.android.com/design. my name is roman nurik. i’m on the androiddeveloper relations team. >>nick butcher: hi, my name is nick butcher,also on the android developer relations team. we focus on ux and design to help you guysbuild awesome applications. some of you might know us from android design in action, ourweekly youtube show every tuesday on youtube where we talk about how to design awesomeandroid applications. so today’s going to be slightly different. we will be focusingmuch more on the code. this is a developer

conference. we will talk about building thecool applications not just design them. >>roman nurik: we will cover three main themestoday. first is app navigation where we will talk about some of the newer patterns as wellas some of the existing navigation patterns that are out there. then nick will talk.>>nick butcher: i’m going to tell you all about responsive design. what it is, why youshould care and how you can go about building it in your apps.>>roman nurik: if you pay attention, if you guys are on your laptops, if you pay attentionto a single section of this session, please listen to nick. so whenever he talks, listento him. >>nick butcher: no pressure.>>roman nurik: i will finish off with a discussion

of the holo visual language specifically howto implement some of the visual characteristics that are a part of holo style and theme. sofirst let’s talk about app navigation, shall we? so anytime we talk about navigation youthink about a couple of different ways to navigate. so one of those important ways islateral navigation. basically the way this which you switch between sibling elementsor kind of members of a single collection or a top-level sections in the app. so theaction bar, as probably many of you know, is one mechanism or one tool that gives youaccess to lateral navigation. so you can use things like tabs or a spinner in the actionbar to provide kind of access to sibling sections. we’re not going to talk about how to implementthe action bar. we have a good training class

on developer.android.com/training that talksabout how to do this. implementing effective navigation. implementing lateral navigation.please take a look, it’s really awesome. we do want to talk about compatibility for theaction bar. so as many of you know, the action bar is not available on versions of platformbelow api 11. but we have been working on something called actionbarcompat will giveyou access to the action bar and all versions 2.1 and above. the native apis here, you haveactivity, fragment activity, get action bar. the apis for action bar compat will be similar.the overall structure of the code doesn’t change. you swap different imports, swap indifferent names for classes and things and you’re done. so this is not available rightnow, i should mention. this is still something

that we’re working on. it’s going to be availablevery soon. if you’re using the i/o app right now. it is using the action bar compat library.it is coming sooner rather than later. like i said, it will be available on android 2.1and above. you will be able to use it on those versions which is basically all devices outthere. and a very important note here is that if you are already using actionbarsherlock,there’s a phenomenal library by jake wharton. you shouldn’t feel like you should switchover to this version of the compatibility library. this is a phenomenal library. it’sgoing to be very similar in terms of apis and so actionbarcompat we recommend for newapps. if you are creating a new app, consider actionbarcompat. basically what this means,if you are thinking about the action bar,

not using it because of compatibility, youno longer have that excuse. >>nick butcher: no excuses now. just use it.>>roman nurik: exactly. another component is viewpager. we talk about lateral navigation.we also think about swiping left and right or the swipe views pattern. now, viewpageris kind of the conical implementation of that pattern. it’s covered very well in our trainingclasses so we’re not going to go into too much detail there. the reason i mention ithere, we should really be using it if you are using any sort of horizontal paging orbuilt this kind of conical implementation. >>nick butcher: whenever you see tabs, thinkswipe. >>roman nurik: exactly. we do want to covera new pattern that was just formalized yesterday

in an update to the android design guide callednavigation drawers. so navigation drawers are for main navigation. if you have disparatesections in your app, navigation drawers is another tool you have for navigation. i’mnot going to talk about all the guidelines here. all the documentation is published.if you click on the navigation drawer section, you will see all that stuff. i will say that– as many of you saw in the google play music part of the keynote, the navigation drawerhas a slightly different style than you’d expect. it doesn’t slide the content out ofthe way. the action bar stays fixed. not sliding the content out of the way is one way to furtherindicate that this is really a piece of the app’s chrome. it’s a piece of chrome likethe action bar that sits atop of your content.

so the content is stable there. the otherthing that this does is it helps preserve the horizontal gesture space. so if your contentinvolves things like swiping to dismiss and things like that, it’s still very compatiblewith this pattern. >>nick butcher: in contrast to what you weresaying about action bar, if you are using some of the other community libraries outthere, you might consider moving to this official library because this implements all of ourbest practices and ux that we recommend you use. so really do consider that.>>roman nurik: exactly. i want to show you a quick video of what this looks like. theactivity content, you press on the left, bezel, it peaks for a bit. you can interact withit, of course. then you can also kind of swipe

to hide it. you can also touch on the actionbar’s top left area to show and hide it as well. so there are a lot of kind of uniquelittle things about this, this pattern, and we’re going to talk about how to implementthis pattern using some of the new features in the support library just released yesterday.so to implement a navigation drawer, the very first thing you do is in your activity contentyou replace the top level layer with a drawerlayout. it works on api 4 and above. which is basicallyevery device out there. this drawerlayout contains two children — should contain twochildren. the first is the actual activity content. so everything that you had in youractivity before. and then the second child of the drawerlayout should be the actual drawerthat slides out and that’s usually going to

be something like a listview or a gridviewor something. generally a listview. now, you can set the width of this to fix that widthto whatever you want. we recommend somewhere between 240dp and 320dp of width. you canvary that, of course, by device if you find on larger screen devices you want a slightlylarger drawer. now, that gets you — just doing that getsyou all the edge swipe stuff. it does a lot of things for you. but another important partof the drawer is how it interacts with the action bar. so for that we have another componentthat’s part of the support library r13 called actionbardrawertoggle. that’s basically kindof a helper method or helper class that ties the action bar with the drawer. so you simplycreate a new — substantiate the actionbardrawertoggle.

give it the activity. give it the drawer layoutitself. you give it the icon to show on the top left because that icon is custom for navigationdrawers and then you basically set this action bar drawer toggle instance as the drawerlistenerfor the drawerlayout. now, one quick note about the icon. it’s available for download.we have both holo light and holo dark variations and all the densities available for download.you should customize this. changing the colors and such, make sure you customize this tofit in with the theme. one other important — i guess, very important part of the actionbar drawer toggle is that you need to pass through the onoptionsitemselected method fromyour activity. this takes care of actually handling button presses on the action bar’stop left area. basically it just handles the

android.r.id.home click. that’s basicallyit for navigation drawers. that’s really all the main code that you need. it’s really easyto do. you guys should absolutely start using it if it makes sense for your app. again,this is all available in the support library r13 which was pushed yesterday.so one last note, i guess, on navigation is up navigation. so we had a talk — full talkdedicated to up and back navigation last year from adam powell and rich fulcher last year.this year we wanted to give you tips and tricks for up. the first thing to do to implementup is tell the action bar to show the up button. you can do that by using this method here.now, jelly bean, as of android 4.1, you can automatically — or the system will automaticallyhandle up presses for you. you simply give

a parent activity name for each of your activitiesand the system will take care of taking you to the right place when you press up. forearlier versions of the platform, you can use this meta data element to supply thatsame value. that’s worth noting that in a lot of cases you have to customize where yougo when the user presses up. rather than handling all the up stuff yourself, simply overridethese two methods. you override the getparentactivityintent method to tell the platform which activityto visit when you press up. you can also customize what happens by providing extras that youwould then handle in that activity. then you can also override the oncreatenavigateuptaskstackmethod to basically customize what happens when you are navigating up outside of yourcore task. so this happens, for example, if

you get to your app from something like gmail.pressing up should stay within your app. this let’s you customize what happens there. you’llsee that it still mirrors the overall structure of your app, how you got to that activity.so i think that’s it for navigation. i’m going to go off and hand things to nick to talkabout responsive design. >>nick butcher: thanks, roman. part of thejoy and strength of the android is the variety of devices. small phones, big phones, tablets,everything in between. as developers that can perhaps seem daunting to make sure yourui is going to look great on those different sized devices. so luckily android has beenbuilt from the very beginning to deal with this kind of difference sized devices. soit has lots of greats tricks in there. relativelayout

and layout weights and so forth will helpto you build a scalable ui. i hope that you are using all these things already. the problemwith this is that scaling your ui up and down is only going to get you so far. i will outlineissues you may run into if you are relying on scaling techniques and how you can betterwork around them. so one of the challenges you might encounterif you are scaling is something like this where you have excessively wide layout. herewe are running text and images to the entire width of the device and it produces quitean uncomfortable reading experience which is hard to scan. ideally, aim for line lengthof 45 to 75 characters. anything longer is going to feel very uncomfortable and not easyto use. we don’t have great tooling for automatically

detecting line lengths. but you can use themulti-config editor which will help you to get an idea and visually inspect what yourlayouts is going to look like on a variety of different devices. one hint that you mightlook for that you run into in this issue is whenever you find yourself typing this, likelayout_width="match_parent", stop and think how is this going to scale up to larger devices?is this going to lead to this excessively long line length issue? another challengeto run into is something like this, where you end up with a very unbalanced kind ofui. so here in this example application. we can see all of the content is kind of, like,clustered together tightly into the top left-hand corner leaving a huge space around. you canencounter this behavior if you are using a

list-driven application. and you end up withthis huge amount of white space on the other side on larger devices. what you really wantto ideally go for is a more balanced look. you want to be able to step back and squintat your application and have an overall balance distribution of your content. a missed opportunityis the last one. when your app is running on a larger device, you want to take advantagethat you have this extra room, extra space. put your content first, really enjoy it. here’san example of an application which is perhaps showing a lot of imagery. the images comeout very small and you can’t see them very well. such a shame that you are not actuallyreacting to the amount of space available on the device and showing them off.so those are some of the challenges you might

get into in scaling approaches. here are strategies.the first strategy is combination. this is where you have more space available to youon a device. you combine different content. on a phone or smaller device, you have twolayouts which you combine together when you have sufficient room. building this kind oflayout is easier if you are already embracing fragments. fragments have been pretty wellcovered. i will not take you through them. they are building blocks to reduce your appdown to so it makes it easier to define individual blocks and lay them out differently. you onlyhave to code them once and then move them around.to build this kind of master detail, you can use this trick alternate layouts. all of thoseactivities includes a single fragment filling

up the whole screen. on larger devices, weoverride that same activity and include both fragments at once. i’m using the layout-wresource qualifier. devices that have 600dps of width, pick up this configuration instead.easier than writing all that, is using this template. use this code to create a masterdetail flow. work through the wizard. give it to your objects. it will generate the activity.it is getting much easier to create this kind of layout.>>roman nurik: it’s worth noting this isn’t currently available in android studio, torwould be able to tell us. it is not available but it is something we are going to work onto get it in there. this is an important tool. >>nick butcher: and another tool for buildingthese combination approaches is another custom

layout that has just launched in r13 of thesupport library, just went out yesterday. that’s a slidingpanelayout. the slidingpanelayoutthat you use to build these two-column views. you see this is my master; this is my detailedpane. if there’s enough room it, will lay them out next to each other. if there isn’t,like the case on the right, it will overlap so one is on top of each other. sliding thefinger across will reveal them, the master pane again, and you can click or slide backto go to overlapping view. it is worth calling out differences to how this is different thanthe drawlayout. these two panes really are in the same plane. so unlike the navigationdraw where chrome comes across the top, these are content panes. they move together so youcan think of them as being very tightly connected.

>>roman nurik: to summarize it is to say thatdrawer layout is for primary app navigation. really kind of chrome versus content. thisis all about content. this is effectively a tool to take master detail flows and simplifythem across different orientations and tablets. >>nick butcher: awesome. to implement thisslidingpanelayout, you define it as root layout and give it two children. the first childis going to form that master or left-hand pane and the second child is going to be thecontent pane. so you define a layout width for each of those and if the sum of thosetwo widths exceeds the amount of space available on the device, they will overlap and you havethis sliding behavior. if the device has enough room, it will show them side by side. youcan also set a layout weight of one on the

content pane which means it will expand tofill the extra space like when it is shown on its own. you can really think of the contentpane’s layout_width as the minimum size. this is an easy way to build a responsive layout.so that was it for combination-type strategies. the next strategy to go on to is what we callmacro reflow. the idea of this reflow is to rearrange the major blocks of your content.so here is an example where we can see when shown on a larger device in landscape we reflowit down to rearrange the content blocks to avoid those problems of having really excessiveline lanes or unbalanced content. here you can see by using fragments, we just definedthe content once and very simply just using a different layout, just specifies an orientation.when it is landscape, they will be stacked

next to each other. when they are in portrait,they will be stacked on top of each other. really simple but makes a huge difference.so the next strategy to know is what we are calling micro reflow. so rather than takingthese major blocks and moving them around, it is actually going to look at the individualblocks and change representation depending on how much space they have to layout. sothis kind of micro reflow makes huge use of what we call dimension files. hopefully alot of you are using these already. i want to stress it in case anyone isn’t. this approachmakes huge use of dimension files, so i hope a lot of you are using these. just like inyour layouts, i hope none of you are hard coding strings into your layouts. the sameis true for your layout configurations and

your sizing and dimensions and so forth. youreally want to be putting all of those things into a dimensions file or a style for tworeasons. firstly, it let’s you reuse these same dimensions across different screens throughoutyour app so you can have consistent margins and consistent text sizing throughout yourapplication. and secondly, it let’s you override them and provide alternative sizes and dimensionson different sized devices. in this example we’ve defined standard dimensions for textsizes and margins and line spacing, for example. define them in this dimensions file and usethem throughout the application’s’ different screens. and then on a larger device, youcan provide different sizes so it’s really simple to use the same layout but bump upthe text sizing and other margin sizes or

line spacing to get a better experience ona larger device. >>roman nurik: this helps recompose your screenson larger devices to rebalance. when you step away and you squint and you look at the screen,you kind of see everything smooshed to the top left. this type of approach will reallyhelp rebalance things. it’s very, very important to use this technique especially for tabletuis. >>nick butcher: one point to especially callout here. in this example, i’m using the sw or smallest width qualifier. what this doesis looks at smallest width of the device which is the width in portrait. it just uses that.so it’s an orientation agnostic qualifier. the reason i’ve chosen to use this here issome of these dimensions, you don’t want them

altered just because you rotated a device.it can jarring to change text size when you rotate your device as it will re-layout soalso chaninging text size could cause confusion. using something like sw, orientation agnosticqualifier, you can keep dimensions stable while some dimensions will change.so some examples of doing this kind of micro reflow is margin point. sometimes you can’tuse combination or reflow to move around or show more content on the screeb but you stillwant to avoid unbalanced or excessively long line lengths. instead, you can simply introducepage margins. so a technique for doing this is setting a style onto your content containerhere called marginpoint. we will use that style to provide the layout width of the contentcontainer. on a smaller device, the style

is going to say match the parent here. it’sgoing to grow up until you reach max much size you want the content to reach, here we’reusing 600dps. when it reaches that size, it will clamp and never continue to grow anylarger. also by setting a layout gravity of center, it will put the content in the centerand have these margin points so you don’t get this excessively wide or unbalanced feel.>>roman nurik: two quick points. the w600dp modifier, qualifier, if you will, so it’simportant to note that that is the width of the screen and not the width of the content.so if your content has extra padding or margins or such, make sure to account for that whenyou are doing the math to determine the switching point. another point i wanted to make is thatthis might not work for every scenario. it’s

perfectly okay in some cases to use dialogson tablets and full screen activities on phones, phone size uis. the way to do that is to usethe theme.holo.dialogwhenlarge theme. customize that using a similar resource qualifier basedapproach. >>nick butcher: so the last point to giveyou on doing this kind of micro reflow approach is switching from lists to grids. so as imentioned before, listviews can feel unbalanced when they grow to larger devices. it’s goingto be great to switch over to a grid representation that you have content that works for it. somethingthat has a consistent height or has a very visual kind of graphic which you can include,this can work really, really well. so to build this kind of approach, instead of using alistview, you simply use a gridview in the

layout. you then use an integer resource forthe number of columns attribute. you can then define the number of columns it will showbased on the size of the device. by default, going into single column which will give youthe listview representation. on larger devices, step up to two or more columns. you simplyneed to respect that change in your adapter. so in your adapter, you can query that verysame integer resource and find out how many columns the gridview wants to use and inflatea different layout for the individual item so it can be a list style item in a singlecolumn or grid style layout in multiple column view.>>roman nurik: gridview and listview are very similar in terms of api. they both inherit– they both sub class the abslistview class.

so switching between listview and gridviewon different cases, that’s also possible as well. so definitely feel free to do that inyour apps. >>nick butcher: cool. those are some of thechallenges you might encounter with a scalable approach and how responsive design can helpto you get around them. and one point i wanted to make, in all of those kind of strategieswe just talked through, never once did we talk about a phone layout and tablet layout.each of them was based upon the content; it took a content-first approach.so by defining your content on, you know, these switching points, instead of thinkingin like strict device terms you kind of future proof yourself a little bit. who knows whateversize and shape or orientation aspect ratio

device is going to come around the corner,and you want your application to be able to cope with them. by putting you content firstand thinking about your content to size it, whatever device comes along we’ll just pickthe most appropriate one that’s going to work for it.so now i’ll hand it back to roman to give you pro-tips on implementing the holo visuallanguage. >>roman nurik: so holo visual language, thatmeans a couple of different things. just for some really quick exposition or i guess background,i guess, back in android 3.0, honeycomb, we redesigned or rethought the ui for androidand that kind of manifested in this holo visual language.and there are two major tenets that i can

think of right now about the holo visual languagethat are important to note as we go through the process of implementing it.the first is a refocus on content versus chrome, so we want to spend as many of the pixelsas we have available to us on content rather than showing boxes and borders and thingslike the chrome. it’s kind of like a refocus on showing theinformation rather than the machinery behind it that makes everything work.the second tenet, i guess it’s a sub-tenet of the first one, is really a focus on spaceand typography to communicate hierarchy rather than things like borders and boxes and soon. so as we go through this process, keep thatin mind because that’s kind of what influences

some of these decisions.so the very first thing you need to do to implement holo, use the holo visual languagein your app, is to inherit the theme.holo theme or one of its descendents.so one thing to note is this is only available on api 11 and higher, android 3.0 and higher,so one thing you can do to mitigate that is to have this kind of switching behavior forthe base theme. you can inherit theme.holo.light, for example, on api 11 or higher and thenjust theme.light, which is available everywhere in other versions of the platform.>>nick butcher: this trick of actually having a base, like a level of indirection betweenthe inherited theme from the base theme, which has like a different switching point is reallyhandy because some of the platform behaviors

which you want to take advantage of may havebeen introduced in different api levels and using this base theme behavior lets you insertthem into your hierarchy. it’s really handy. >>roman nurik: we use this a lot in the i/oapp which will be open sourced at some point very soon so you can see how we make use ofthis. i do want to mention that when we releasethe actionbarcompat library it will handle a lot of this stuff for you for your activitiestheme or your applications theme. simply you would inherit theme.appcompat.light,but the file name might change. rather than switch on this you can just inherit on this.this is again coming soon. so once you’ve inherited the theme.holo theme– we should figure out a better way to say

that. once you’ve inherited that theme it’stime to use some of the resources that the framework gives you for free. and one of thefavorite things that you like to say, nick, is lean on the framework. use what it givesyou for free so you don’t have to reimplement all of this stuff from scratch.>>nick butcher: there’s nothing worse than trying to imitate the way the stock ui looksbecause you might overlook a slight detail. you can actually just reuse the same stylesthat we used to build it and then you will get the exact same consistent behavior.i think i stole that saying from rich fulcher! >>roman nurik: exactly. so one thing you willnotice is that in the next couple of screens, next couple of slides, we’re going to be usingthis question mark android colon syntax, and

that is basically a theme attribute reference.we’re basically accessing something that is stored in the theme, whether it be a dimensionfile, like the listpreferreditemheightsmall, which is the standard item height for a smalllist item, or a style resource for like loading spinners. so for example, to create a largeloading spinner or indeterminate — indeterminate progress view, you simply create a progressbar and set its style to the question mark android progress bar style large attributes,theme attribute. and then if you want to use drawables, forexample, we have built in drawables into all the themes so you can use the listchoiceindicatorsingledrawable as, for example, the drawabletop attribute in a textview or drawableleft orsuch.

so really you get a lot of stuff for free.i definitely advise you guys to take a look at the docs for the android.r.attr java class,i guess. it contains a whole bunch of these you can use in your apps.so i want to talk a little bit about that space and typography stuff. the first is space.take a look at this screen. so i think there’s kind of a fundamental problemwith this screen in that it’s lacking visual hierarchy, visual structure.there’s kind of just floating elements out in this massive space that don’t really haveany sort of hierarchy. so one way in which we can fix this is to introduce dividers.so these dividers are basically just that, they divide different sections of the screen.it’s really kind of using the minimal amount

of pixels possible to introduce hierarchyrather than using boxes and borders and things. to implement these dividers it’s fairly simple.you simply set the show dividers attribute on a linear layout to middle to draw thesedividers in between the different children of the linear layout, and then you providethe drawable to draw in that space. and as you can see here we provide — thesystem provides a standard drawable for that space.it’s also, you know, worth noting that in addition to using dividers to introduce hierarchyyou should still be using the standard 16 dp margins and the standard 48 dp visual rhythmthat we talk about in the design guide, and that will really help establish a structureand kind of like a rhythm to your screens.

so another thing i wanted to talk about withdividers is divider padding. so if you provide the divider padding attribute here, it’s eightdp’s, it will actually draw some space above and below or to the left and right of thedivider, and this really helps introduce further hierarchy.so in this case imagine that we didn’t set the divider padding on the dividers betweenthe text and the delete icon. it would just look like a table. it would just look likea grid of things and it wouldn’t be clear what the real hierarchy was. but as soon aswe introduce the padding you can immediately see that these are a set of list items andwithin each list item there are two separate touch targets.so going along with this theme of refocusing

on content rather than chrome, we want to,you know, also do that for buttons. we don’t want to keep drawing borders and boxes aroundbuttons because we can do that in a different way.so this borderless button style, which is very commonly used with dividers, it reallyhelps kind of simplify your ui. it really helps focus on the content over the chrome.so one thing to note is that it is borderless so you do need dividers to set its kind ofboundaries, but when you touch the button, you — it does light up to indicate that thisis the touch region. this is the thing you’re acting on.so to use them you simply create an image button or a button and you set its style tothe borderlessbuttonstyle theme attribute.

this gives it to you all for free.another type of — another variation on borderless buttons is a button bar, so if at the bottomof a dialogue or bottom of a screen you have two actions, you can use this button bar styleon your linear layout and it will automatically create the dividers and apply the weightscorrectly. actually, it doesn’t apply the weights. nevermind. so it automatically adds these dividers, andwhen using button bars, make sure that you do the order of the buttons correctly. thepreferred button should always be on the right, so save versus discard or delete versus cancel.even if it’s a negative action, like delete, the preferred item should really be on theright. it’s very important as of android 4.0

and above.so use that button bar style and then each of the buttons in that — i’ve been sayingthe word button way too much. >>nick butcher: it’s lost all meaning.>>roman nurik: yes. each of those buttons needs the buttonbarbuttonstyle to apply — somebodyneeds to count how many times i just said the word button. it’s like 20.anyway, it’s very straightforward. again, this is very little code. you’re not reallydoing much. you’re just setting styles. >>nick butcher: lean on the framework, leanon the framework. >>roman nurik: yes, take it away. again, ithas that touch highlight. another thing to think about is how do youprovide this touch feedback on things that

aren’t buttons, things that may have kindof layout or a view hierarchy within them. reto touched on this in his session earlythis morning. i’m not going to cover it in detail, but really using selectableitembackground,which is a drawable, it resolves to a drawable, using that as the foreground or backgroundon a view is really kind of a great way to do that.also, if you’re using a list you can use the list selector attribute to provide the rightdrawable to use there. >>nick butcher: i can’t stress how importantthis touch feedback really is. as you kind of pare back on the crutches andthe chrome, you need to communicate to the user what is interactive and what does something.anything that is interactive really needs

to react visually react whenever you touchit. so using things like this can really communicate that.it also will communicate the bounds which you can interact with. so as you use the borderlessbuttons, without using the bounding boxes, touching it will highlight the entire interactivebounds so the next time the user comes back to the element they have already this modelof where they can interact and where they can’t.>>roman nurik: exactly. so another important visual element in the holo visual languageis list headings. so list headings are basically the things that separate different groupsof list items, and they should really be 14sp, bold, all caps, just like action bar tabs,for example, and they should have a 2 dp separator

below them.so you don’t really have to figure all this stuff out, you can actually just use a listseparatortextviewstyle,set that on the textview and you automatically get the styling.if you do end up customizing this with your brand’s accent colors, then by all means usethose values. this is kind of a great tool to use for releasing, i guess, the space tothe list, the content itself in the list. so we’ve been talking about space a lot. iwant to take a brief moment to talk about typography, which is incredibly importantin the holo visual language, so as of android 4.1 we’ve given you this really robust typographicpalette, i guess, for use in your apps. so you can use new weights and variance of robototo really help to communicate structure.

rather than using text sizes to communicatestructure and hierarchy, using weights is kind of a nice way to do that.so a couple of quick notes don’t use thin for really small text. it’s best for largeheadings. also, light is best for headings as well.and condensed can work really well for like news article headings.light does work well in body text, but you do need to be aware of kind of the minimumsizes that you should be using. >>nick butcher: as a rule you probably wantto be sticking to regular or light on slightly larger type sizes and reserve thin and maybelarger light for things you want to stand out essentially by having larger size, butlighter type looks really, really good.

>>roman nurik: so quick note, this is android4.1 and above. if you want to use this in earlier versions of the platform you can downloadthese fonts at google fonts and you can import them into your project.one last quick note, another important part of the holo visual language is again thatfull-bleed images using as much space as you can dedicated to content.one of the things you run into sometimes is not all photos come in the same aspect ratioso what you can do is you can use an image view. you can use an image view with a consistentaspect ratio and drop in an image, set the scale type on the image view to center cropto actually make sure that the image fits nicely in the image view and doesn’t kindof mess with your layout.

so one thing to note here is that this doesend up cropping things in some cases. you know, that’s really good for — it’s finefor things like bacon photos or meat or like landscapes. not so good for like photos ofpeople where their eyes may be cut off. it’s kind of creepy.so definitely the center crop technique is very good for making sure that your uis staynicely aligned and fit. when using these full-bleed images, it’s bestto kind of introduce separators between them. very light separators, maybe one dp or so,to really make sure that colors of different images don’t bleed into each other.so before — that was a lot of stuff to cover and obviously there’s a lot more. we can’tcover everything, but the last thing i want

to cover is producing holo assets.so, you know, as we showed, you can use xml and some minor styling stuff to really providea lot of the assets for your apps; however, you do end up still needing things like iconsand — and png files and so on, and there are three really good tools for that.the first is the android asset studio which will generate icons for action bars and notificationicons. it will apply the right sizing, coloring and opacity and so on.the second is the action bar style generator that assuming your theming your app with yourbrand’s accent colors, which you should be doing, you simply drop in those accent colorsinto this tool and it will generate automatically all the different assets that you need forthe action bar, tab indicators, as well as

the selectable item background stuff. it willautomatically create these kind of like accented, pressed and focused states.>>nick butcher: and the right hierarchy so you just drop into your project. super simple.>>roman nurik: right. and lastly there’s the android holo colors tool, which does the sameexact thing for like check boxes and buttons and things like that.now, i really want to mention that jeff and jerome who wrote these two tools are in thedeveloper sandbox, so if you have bugs to report, go harass them.they’re really awesome guys. if you want a demo, a live demo of what this looks like,definitely check them out. >>nick butcher: they’re great tools. justuse them.

>>roman nurik: there are no bugs remarkably.i think that’s it for our talk. thank you once again for coming.i want to do a quick shoutout that we can’t take questions right now, but nick and i bothwill be in the android platform office hours where we’ll be able to take questions.i also want to mention that we have an android design in action live design lab. what isit, tomorrow at 2:00 p.m.? so if you want to come and learn how to design an app fromscratch without using computer tools, we’re just going to be sketching and wire framing,definitely go check it out at 2:00 p.m. tomorrow. >>nick butcher: and for those of you remotewatching on the live stream and so forth, then we’re actually quite active on google+,so follow us on google+ or join the android

designers community. the developers communityis also good. and join in the conversation on the hash tag #adia and the #androiddesigntag. and tune in to android design in action every week.thanks very much. [ applause ]

web app user interface design

Killer Resources for Optimizing W3 Total Cache into Next Level

Ditulis dalam sosial. Leave a Comment »