Categories
Online Marketing

Create a Website Online – 5 Reasons to Try Wix Today

This company has become pretty well known over the past few years, and I know that you’ve probably seen a few of their commercials. I’ve actually been using their services ever since they first opened the doors in 2006, but today this company is one of the biggest players in the website building business.

They host 110 million websites globally and they make it really easy for the non-techies of the world to get online quick. So here’s what you should expect from Wix. You know I like flicks, because they offer an easy to use. Drag-And-Drop website builder right out of the box, they literally have like hundreds of free templates for you to use. You never have to worry about learning website code and you never have to worry about finding a separate website host either Wix comes with its own web hosting and you can actually buy your domain right through them.

We have this really cool, Wix app market. That makes it easy to add on extra features to your website like. If you need to accept payments online bookings receive resumes, they make it really easy for you to do business. They also support email, automation, degeneration and scheduling your social media all through their intuitive platform. They definitely have my stamp of approval. Wix is actually great for anything from a personal portfolio, an e-commerce shop or even just a small business website.

It’s super SEO friendly and they even have a little widget that helps you get your site indexed into the Google search right away, so Wix is giving you the power and the support you need to get online to day. If your business needs a new website or maybe you’re just looking to make this switch I’ll drop, the link below where you can sign up and get started if you do need help getting started, just have questions about Wix just go to our website wwlp.

Com and then Hit contact us if you like this article, please tag someone who needs to hear this and give it a like and a share until next time, guys take care.


 

Categories
Online Marketing

CISS216 – Web Development – Spring 2016 – Week 5, Lecture 1 – Feb 16, 2016

First of all, we’re going into you know: we’ve gotten into started going into CSS and with CSS. You really have a lot of power to do a lot with the appearance of the page, and we want to make sure that what we do doesn’t detract from the content of the page, but compliments that it complements it and enhances it.

So it’s a good time to have the discussion about design the other good reason to talk about design. Now is that probably thursday this week and I will see how it goes – um, maybe possibly today or Thursday, we’ll talk about the project and what you need to do to get the project done, because it’s not too soon to start thinking about it, and I always Say it – and you know remember this: I we have it on tape or in a tape boy.

How old am I we have it recorded and in we can go back and play this around May when I say that Mei will come sooner than you think all right, and so it’s never too early to start thinking about your project. So it’s important for us to talk about the project and what you need to do for the project. But before we do that, it’s a good idea for us to sort of come up with guidelines for what constitutes well designed web pages.

And that’s one of your assignments to come up with some pages and some reasons why? And I also think it’s important to discuss it in class and we could do this by looking at good examples and or bad examples, because we find something that is good. Well, we can learn from it. We find something as bad. We can learn from it. We can learn what not to do all right and almost you know the flip side of the same coin.

So last time we were looking at some good and bad websites. Does anyone have any more websites that they would like to bring up as examples of either good or bad? We went for a few of them, alright, fair enough. We went over a few last time. What I like you to do is I, like you to think of websites that you visit often alright, just think of websites you visit often and let’s not think in terms of good and bad design, but let’s talk or think about websites that you visit.

Often, why do you visit those sites? What’s an example of a site that you visit? Often, yes, unemployment, site, okay, and why do you visit that often okay have to file every Sunday. So in that case, there is a site that you can use to perform a service that you need to use all right and – and you need to do it weekly and it provides the service that you need need to use other sites that you visit espn.

Com and Why do you go there, news all right, any other ones? No one ever visits any website except those two people, okay, go ahead, canvas all right! Well. Why? Because again, you need to do your assignments to get your homework in and so on anything else. It doesn’t have to be, it doesn’t have to be something that you think is going to sound impressive. I mean it can be something you know, Wikipedia Facebook, YouTube, Instagram, maybe and so on.

All right. The first thing that I want to get across is the sites that you visit most often and the size of use that you go and you stay on um you probably go to because they provide either good content content that you need or want or services that You need or what all right – and this, in my mind, is sort of the first rule of web design and again I rather rather call them guidelines and rules, because really every problem is a different problem and therefore it’s hard to come up with some observations that Are true for every single website, but this might be one of them and it’s usually said this way and I’ll give you two versions of it and you can pick the version that you like content.

Is king alternately. You don’t like that, one, you can say: content is queen all right either. One. The point is, is that we visit websites not to admire how pretty they are all right. We don’t go to websites because they’re well-designed we go to websites because they either have content or services like Google search, for example, on Facebook. That kind of thing they provide you a service or they provide you content, something at you either want or need.

That’s why? You visit websites all right so when we talk about design, that ought to be the first thing that we consider is the content all right. Some people try to separate content from design. I don’t think it’s possible to do that. The content and having good content is an important part of design. Remember when I speak about design, I’m not just talking about planning out the way it’s going to look and what fonts are going to use arm and what colors are going to use and what images you’re going to use and how it’s going to be laid out.

That’s a part of design, but when I talk about design, I talk about the whole act of planning out what your website is going to be all right. That involves things such as determining who your audience is all right, determining what is important to those members of your audience and then figuring out how to arrange the content in a way that will make it easy for them to find what it is. They’re. Looking for all right, so if we start out with one killer content, our design and our technical skills support that it would be like, let’s see if I can do it with markers.

No, I didn’t want that. There’s design, there’s technical skills, and here is content here – is content yay. Alright, one of those two things fails: the design fails, boom becomes useless, your technical skills fail boom, it becomes useless, so our technical skills and our design, our visual design, our layout, is meant to support the content and enhance the content all right, so technical skills were Dressing in class – and we have been since day one right – technical skills – are learning the different languages learning HTML.

What does a web page consists of? You know what are the tags that we use on webpages? What are tags? How do you nest tags? What are attributes? How do I make a link? How do I make a heading? How do I make a paragraph then CSS, all right, which is how our page is going to look? How are we going to designate what part of our page is the heading section and so on? Finally, a third thing is JavaScript, which we will touch on at the very end of this class design is about how the page is going to be laid out.

What the appearance of the page is, and so on these things support the content. In other words, they should not get in the way of the content, but they should support the content all right. So, let’s come up with you. Let’s come up with some general characteristics of a well designed website, starting with the assumption that the that the website has good content that people are interested in. How can we make a design than to complement that content or enhance that content? What are some things that we can do? Okay, exactly number one.

We can put emphasis on important stuff, first of all, important to who important, probably to the audience right now. It might be also you might want to emphasize stuff that’s important to the organization as well. Right if I was doing a website for a nonprofit organization, one of their primary goals is going to be to get a lot of donations right. So I want to emphasize donations because that’s important to the organization but emphasizing emphasis on important stuff, both for the audience and the organization.

And when I talk about organization I am talking about arm whoever’s, making the site or whoever is having a site made for them. So it could be, a business could be an individual’s portfolio right. It could be a fan club of some, a fan page for some artist or musician or whatever could be a nonprofit organization could be a school. So that’s what I mean when I say organization. How can we put emphasis on the important things? Okay, number one? We can use CSS formatting or things such as the size, what’s another way that we could emphasize something on the page.

I will call this the page organization and layout and things such as headers and so on plus other ways that we can emphasize stuff, color plus other ways that we can emphasize stuff positioning and this one’s subtle. The next one that i’m going to add. We can emphasize stuff by being careful about what we put on the page along with it all right. For example, if I were to have a web page, they had 20 pictures on it, which one of those 20 pictures would be emphasized.

Well, maybe the biggest one or the one that was on the top or whatever. But the point is, is that there would be other things that would potentially distract you from the thing you want to emphasize. So one way that you can emphasize something is by limiting what you put on the site in limiting, what’s on the site, to something that is important, all right, so choosing your content carefully. All these things that we’ve listed here are different ways.

You can emphasize something. That’s important all right: let’s go to a website, let’s go to Apple’s website, so I think it’s thing most people would consider that a fairly well designed website and, let’s take a look at it. Well, what do we notice about this page iphone success? How could we possibly miss the point of this page? We can’t there’s one thing on the page only and it’s big and it’s in your face and it’s positioned and the fonts the images all look good, all right.

So if they had three things on this page, the iphone 6, the ipad, the macbook – then there’s three things competing for your attention. In this case, there is one thing competing for your attention, which is another way of saying there really no competition for your attention. Now. They do have navigation for other stuff, but as we go through and look at, the other stuff will notice a very similar experience.

Let’s click on Mac all right. They have under mac the different models that they have. So let’s say I’m interested in a macbook pro. There’s the features of it and notice with the big images and the way that the typography is the way that the letters are and the colors really emphasizes the points that they want to make. So it’s hard to lose track. It’s hard for the loser to get buried and lose track of the important stuff on a page like this, because there’s so little of it and it’s laid out so sparsely that’s another way that you actually can put emphasis is by putting blank space on the page.

All right, sometimes that’s called white space. It’s called white space, regardless that the color is actually white or if the color would be gray or whatever it’s still called white space. So there’s a paragraph and again a lot of space around the paragraph, a couple of lines that are very big: how many colors do they use on this page? Well, it was black and white. There is other than the images.

We won’t count that there’s blue. What are the blue represent links? You know that immediately, don’t have to think about it. There’s a couple of shades of gray they’re doing that allows the separation. If these were both the same color, they would sort of smash together in your mind, but by using slightly different colors, and then they use pictures now. The interesting thing is: there’s a lot of stuff on this page.

There’s a lot of links. There’s the links along the top of the page there’s a whole mess of links on the bottom of the page, but the design is such that they put the most important stuff boom for this page right out in front of you. Let’s go to a competing computer company. All right, let’s go to, will be a good competitor. I’m thinking eventually a hardware company HP, probably HP com, but i’m going to make sure – and let’s notice already in my mind, that when you go to their home page of their store, have this they have a display.

They have a desktop. They have a touch laptop laptop printer media display and so on. If I go to desktops business elite and so on, there’s just more stuff on this than there is on the ample now. Let me ask the question: does that mean that the apple site is better designed than HP, not necessarily all right? What is the difference? What do you think the difference boils down to between HP site and apple site president’s day sale all right besides that Apple? Never as sales, so that one’s a no-brainer all right, what is what’s the difference between the offerings of HP and Apple as far as the hardware that they sell HP sells a lot more options exactly you want to buy a macbook pro.

How many choices do you have a couple? There’s the 13-inch there’s a 15 inch and then for each of those there’s choices about the processor speed and all that. But there’s not like a lot of options, whereas H he does have a lot of options for all their different offerings, whether you’re talking about laptops or desktops, plus these sell printers and displays, and all that other stuff as well. Alright, so one website could look one way.

Another website could also be well designed and looked differently, because that company has different content. That company has a different story to tell Apple, is very much about directing you down a certain path. All right, there’s only a handful of options, the kind of hardware you can buy. You know how many iPhones are there versus how many Android phones are there? There’s a lot of Android phones where there’s probably two or three iphone models that you could buy right now, all right, four or five, maybe at most all right so ample as a company has one message: we are simple: we will directly direct you down the path That that that you want to go to get you to purchase the thing that you want, whereas HP has a different strategy as a company that we are a company that offers a whole bunch of different hardware, all right, and we give you options as far as What to get so they’re not going to be designed in the same way all right if HP tried to take the approach that Apple did now, let’s go and look at HP, desktops, there’s say 20 of them at least, and there’s a load more button and a Load more button and so on.

If HP tried the approach that Apple did where they showed 11 model per page, they would have dozens of pages just in a desktop section itself, all right, so they organized their content in a different way in a way that makes sense for the product that they’re Selling as opposed to the product of the Apple is selling, so both ways could be equally good for the kind of content that they’re trying to portray, even though, ultimately, the pages look very different, all right so HP has to take a different approach of emphasizing what They want you to see all right.

They want you to see the variety of choices and help you navigate through the myriad of choices, whereas Apple has a limited number of choices and they will. I really want to hit you hard with each choice that you have because there’s not that many choices. Okay, so just with this one topic emphasis on important stuff, we can see that that can be done all sorts of different ways. It can be done by choosing what content we have.

It can be done by the way that we position the items it can be done by the way we organize the page. It can be done by what other content we put on the page. It can be done through color, it can be done through size can be done through image and so on. So when you are talking about emphasizing the important stuff, there’s no formula for doing that, however, these are some of the things you can use your job as a web designer is to figure out, what’s going to work for your particular problem.

That’s why web design is not a one-size-fits-all approach. All right. Every organization has its own distinct strengths and weaknesses, and they want to emphasize their strings all right. That’s one of the things that the organization wants to emphasize is their strings all right and therefore the manner in which you emphasize the content on the page depends on a specific problem that you are trying to get all right.

What’s another good guideline for good web design organization, can you elaborate on that or can maybe someone else elaborate on that? Ok, I would say when we talk about organization, we can talk about two things. All right. One thing is the way the overall site is organized. The other is about how an individual page is organized all right both of these fall under the category of organization. Let’s talk about the page, how a page is organized first, all right: what are some good guidelines for organizing the information on a page? Okay, all right, the two sections of a page are obvious, and what do I mean by the sections of a page? Well we’re going to draw a page.

A typical page might look like this. You have a header on the top of the page. Maybe it has a company logo in the name of the company and the purpose of the company. Maybe you have the navigation here then maybe you have the content of the page here then. Maybe at the bottom of the page you have a footer that has other important stuff. So the first thing I would say as far as the organization of the page is it should be obvious all right now.

How do you make it obvious? Well, one way you make it obvious is to make it consistent between your pages. So, in other words, if your navigation is on the left side of the page for the most part, most your pages should have the navigation on the left side of the page. Wouldn’t really be very good if, on half the pages of navigation was over here and half the pages, it was over there or half the pages it was along the top and the other half is along the bottom, or something like that.

So you come up with a structure, the page that you implement consistently among all your pages. The other thing that you do is you emphasize the sections? How do you emphasize sections well same thing with the size, with the color, with white space, with positioning all those sorts of things that we use to emphasize? What’s the important content we can use to emphasize the different sections of the page, so we look even on Apple, which is a very bare-bones site notice that the top line, which is my main site navigation, is a black background with white or grey font.

On top of it, whereas this line, which is a sub navigation, is a white background with gray or black links on it. If we look at HP to stat sale, information is in a different color than the rest of stuff on the page, so that section pops out at us the links are along the top there’s some more links up here that are a different color, so they’re set Off to the side, and so on, so we emphasize the sections of our page.

We do that by having them consistent and use their appearance, to make clear what the sections are and be consistent about that consistency is a big thing in web development. All right, we want our pages to look consistent. We don’t want to have all of our pages, have a certain color scheme and then two or three pages look wildly different. That would be confusing to the user if they came to those pages.

Likewise, if we have the links in a certain position on a page, we should probably have those links in the same position on every page all right. Likewise, if we call something computers on one page, we shouldn’t call it hardware on another page. We should be consistent about the way we term term things notice of what we’re doing is when I talk about changing the appearance of things to make it organized and make the organization clear.

I talk about using fonts and colors, and things like that. Just like I talked about when I talked about emphasis all right. In other words, we don’t make things different colors just to look good. Obviously, we want to pick a color scheme that looks good and we want to pick funds that look good in it and that are readable. However, we also want to pick colors and fonts in a way that helps the user visually organize the way the page is laid out so you’re teaching the user that gee that blue bar that’s on the left side of the page, with silver text on it.

That’s my navigation and that visual cue will carry over from page to page to page all right and that helps them navigate around the system, all right so making the links obvious through the use of colors and formatting and so on. Now, as far as organizing the site, this can especially be a challenge when you have a lot of data on a site when you have a lot of information, a lot of pages on the site, all right, let’s talk about a sporting goods store all right.

What are some of the ways that we can organize the different pages in a sporting goods stores website? Obviously we, you know, sporting goods store, probably sells hundreds or thousands of products. We don’t want to simply have a link. You know a navigation, it has 200 links on it, each of the individual products. How can we organize those products in a way that would make sense to our users separate in two broad categories, and what would be an example, because, there’s probably more than one way we could do this? What would be one way that we would? We could separate our products in two broad categories, outdoor versus indoor, then maybe outdoor, we could separate how all right by activity, hunting fishing in running and so on, an indoor might be basketball, volleyball, etc.

We can also have outdoor warm weather activities, cold weather activities. That’s just one way, though, that we could divide up that topic. What’s another way that we could divide up the products for our sporting goods store all right, clothing, shoes equipment, so under clothing I could have tops and bottoms under bottoms. I could have you know like long pants shorts under tops. I could have sweatshirts t-shirts under shoes.

I could have running basketball and so on under equipment. I could have golf clubs, tennis, rackets and so on. What’s another way that we could divide up the products in our sporting goods store, I sport, baseball, softball, golf basketball, soccer and so on. If that had too many categories, we could break it up in the summer and winter sports or we could break it up into indoor versus outdoor sports if that would help, and so on down the line.

Other ways that we could do it, I’m not saying either these ways or any of these ways are the perfect way. All right. We could do something like buy brand. All right. All the nike stuff goes here. All the Reebok stuff goes here. All the Wilson stuff goes here and so on down the line we could separate by man, woman boy girl, all right price. We could have tennis stuff and again the interesting thing is we could mix and match right.

We could have, for example, if we separate it by type of product shoes running baseball whatever we could then separate running, buy expensive shoes, cheap shoes and so on down the line. There’s a lot of ways that we could divide this up and one nice thing about the web is you can sometimes divide things up a couple different ways, all right arm, for instance like if you used to go, though anyone that that’s old enough to remember when There were blockbuster stores right.

You know you would go into them. They would have to find one place to put a movie right. So, like the movie um Shaun of the Dead, they would have to decide. Is that a comedy or is that a horror movie right? Because they had to put it some on the shelf, all right, whereas if I had an online store like if I had Netflix or Amazon, or something like that, I could put shaun of the dead in comedy and in horror, because I didn’t have to physically put Something on a shelf same thing for an online sporting goods store all right.

I could categorize things a couple different ways if I thought that that would help people find it. Here’s the bottom line for this exercise because we’re not opening a sporting goods store. So we don’t have to have an answer to this question, but we’ve probably talked about this for 10 minutes and we came up with 12 or now three probably a half dozen different ways of categorizing the stuff, especially when you use the divisions and subdivisions and all That so any problem, any topic that you’re going to tackle on a website, there’s a bunch of different ways that you could categorize the information all right.

Your job is to pick one and which one are you going to pick? You should look at it from the perspective of your customers, all right, because they’re the ones they’re trying to find the information it doesn’t. Do you any good to categorize stuff in the way that makes sense for the store employees all right, because the store employees aren’t the one? That’s are going to be shopping on your online store all right.

Oh tennis, rackets, that is an outdoor summer. Sport equipment all right, it should be in a way, that’s obvious to the user coming in where something is going to be categorized so that they can easily find it. So, in order to do that, you have to sort of put yourself the perspective of the user. Let me tell you about one little enhancement that we’ve done and they’re working on revising Elsie’s website, but one enhancement that they did a few years back is that there are actually computer classes in a variety of different divisions.

All right at the time there was a separate business and engineering division, so there are computer classes in engineering, those computer classes in business, there’s also computer classes in arts and humanities, and there are also um computer classes in the math and science division. Well, that sort of makes it difficult for someone coming in from the outside world, because they don’t know what kind of divisions they don’t know.

How are how our college is organized as far as what courses belong in what division? You have a kid coming in from high school, maybe all they know is I like to work with computers. I want to take some computer classes. Show me all the computer classes you have well. If it was organized by academic division, then a student might look at engineering and say: well, that’s all the computer classes. I have.

I have to pick from one of those all right, so what they did is they created a separate IT page and the IT pages for people that say hey. I want to be in information technology, i’m going to go to that page and then that page will show me where to get through information on the rest of the site, all right and here’s the example of it. Computer information technology curriculum at LC and it talks about it.

It talks about all the things that you might want to do: computer science, computer security, hardware, maintenance, digital media, networking programming and software development, web development and so on. The student makes it to this page. It doesn’t matter to them that some of these things are in one division like this might be in arts and humanities. This is in math and sciences. These two are in the business and engineering division.

It doesn’t matter because this is not written from the perspective of an employee of the college that knows where what division all these things are in, but this is written from the perspective of a student that would come in or a prospective student that would come in And just want to know about all the computer programs here so when you, when you need to decide what or how you’re going to organize the content on your page, you ought to look at it from the perspective of your site, visitors.

Not from your perspective, all the most frustrating things about a website – and you hear this – a lot is, and it’s frustrating for everyone, it’s frustrating for the developers of the site and is frustrating for the viewers of the site, but a lot of times. The content is somewhere on the website, but if it can’t easily be found, then is of no use whatsoever. You know that’s typically, one of the biggest complaints that people have about websites is.

I can’t find what I’m looking for now. Maybe they can’t find what they’re? Looking for because it wasn’t there all right, whoever designed the site didn’t what content was most important to the users or maybe it’s there, but the site is just so poorly organized that is impossible to find it either way it doesn’t matter if you’re not finding the Content that you want to from the site you’re going to go somewhere else, you know, compare shopping online was shopping in the real world.

If I go to home depot and i’m looking for a ladder, let’s say I’ve driven a home depot wherever there’s a home depot. I don’t even know, but if I decided gee, I can’t find it here. I’m going to go! Look at lowes instead! Well, I’m going to have to get in my car bundle up because it’s cold outside drive, maybe across town, find a place to park and go into loaves, so I’m kind of motivated to find it.

I took the effort to go into home depot. Hey I’m going to walk around i’m going to look, I’m going to go up and down the aisles because I don’t want to drive across town to go to lowes all right, that’s how it is shopping in the actual physical world if you’re shopping online. If I can’t find something on home depot, how long does it take for me to get on to lowes website? It doesn’t take any time just do a quick google search and I’m there.

So if something is not well organized on a website, there’s no motivation for the person to try to figure out how to find it all right. The typical customer that’s coming in, there’s no more to motivation for them to struggle through a poorly designed planned site to try to find the information they want to, because there’s so many other alternatives. All right, I guess see if the exception of that would be a sight like unemployment, where you have to go and do that or like even dare I say, canvas right, you can’t say well gee, I don’t like canvas.

So I’m going to go, submit my homework on some other site. Well, you could do that, but you’re not going to get credit for it and for this class right, but for most typical consumer sites. If the site is not well organized, then people are simply going to go elsewhere to do whatever it is that they need to do all right. So organization of the site is key, and the organization comes in two varieties: the overall site, that the content is divided in a logical way to make it easy for the people on the outside world to find it and at each individual page.

It’s obvious what the different sections of the page are and what the different sections mean and represent okay, thursday, we’ll talk about a few more of these guidelines and then we’ll get into what you need to do for your project and that will probably take all day Thursday, and probably into Tuesday of next week, all right we’ll see you up in lamb,


 

Categories
Online Marketing

CISS216 – Web Development – Spring 2016 – Week 5, Lecture 2 – February 18, 2016

If you want to do this most of the time, because you can always find exceptions so to just about any of these guidelines that they’re going to be exceptions right, if you’re doing a standard website for standard business or organization, these are good rules of thumb. To follow so kind of summarize, some of the ones that we talked about so far, we talked about a website being, first of all, content having good content and by good, accurate, updated and what the visitors of the site need and again a lot of times when People talk about web design, they focus on sort of the surface of it.

The superficial aspects of it, the color, the fonts and all that and that’s an important part of web design. But just important in my mind, is making sure you have the right content. Then doesn’t happen by accident all right. It doesn’t happen by accident that you have the right content for a website. Everything you do about a website ought to be thought through and planned all right and um sites.

You know you may look at this and say well it’s obvious and all that, but I guess I don’t know. I guess obvious to who the whole point of web design is that you’re going to have a whole bunch of decisions to make, starting with what content you’re going to have on the site. How you’re going to organize the site on what the site is going to? Look like what the pages are going to look like and all these ought to be deliberate decisions all right and they ought to be deliberate decisions guided by the goals of your organization and just, as importantly, the girls of the people that are visiting the site.

All right, so content is a design principle. Choosing the correct content. The site that is well organized is something that we talked about and more organized. We talked about a couple different ways that it could be well organized one is we can talk about the overall site being well organized another? Is the information is categorized in such a way that is clear to the user, where to find everything it doesn’t do any good to have a website that has tons of great information if no one can ever find anything on it all right.

It’s amazing, when I have talked to people that have developed web sites that aren’t particularly good on the most common compare their users is that they can’t find the information that they’re looking for and sometimes what managers or web ball masters or whatever you want to call Them get defensive and say well that content is there, but if people can find it, it doesn’t do any good if it’s there.

So, therefore, the host site ought to be organized and it ought to be organized in a way that makes sense to the users or the site visitors. It doesn’t do any good. If I, as the web developer, understand the way the site is organized and it makes perfect sense to me, it needs to make sense to people outside of the organization. It may need to make sense to the users, so the sight of all ought to be organized and individual pages ought to be organized, and this is why we use things like color and borders and putting space between things and different fonts and so on.

We don’t just do it to make the pages look nice. Obviously we do want the pages to look good. No one wants the development of the website, but we do it in a purposeful way to sort of help guide the user through the way that our pages are organized. So it becomes obvious that that green column on the left side of the pages of navigation, all right and the contact informations in a blue strip on the bottom of the page or whatever.

Alright. So our pages are organized and we use these things visually. To help emphasize the stuff that needs emphasis alright, so that would be a second guideline or web development. A third guideline is consistency, and that also can mean several different things. Consistency in terms of how pages are laid out now that doesn’t mean that every page needs to be laid out in an identical fashion, all right, but there should be some sort of consistency to it.

You don’t want to make it look like. You are visiting two different sites as you navigate around your website, so stuff should appear in a consistent place, and usually that means having a banner on the top of the page having a navigation somewhere either along top along the left or along the right. Maybe having a footer with additional information and then having an error area for content information.

Now we can go to different sites and see that not every page is organized identically, but there is some sort of consistency. All right. Consistency also relates to the terminology that we use within our website and I’ll give you an example of how that could be very confusing years ago. I work for a software company that dealt with people in the food business all right now in the vocabulary of that business principle, manufacture and maybe even one other word principal manufacturer now, maybe even been another word all meant the same thing.

Alright, so we’re developing a website, we will want to keep the use of the term consistent. If they’re calling those people principles, we would want to call them principles on every page. We wouldn’t want to call them manufacturers on one page and principles on the other, because that would be confusing to people all right, so you want to be consistent with the way that you phrase things so, for example, on the site for colleges, maybe for college.

Maybe we would have a page for prospective students and we call it prospective students. We wouldn’t want to call that something else on another page call it future students or something like that, because people love to see that and think that that means something different so be consistent in the terminology that you use call things the same way all right. That’s a guideline. Another guideline is sort of a consistency between the appearance should singer to match the content.

Does anyone know what I mean by that that your parents should match the content? Yes, okay, if your page is about space, you don’t want to put unicorns and ponies about on it. That’s probably a good idea. Does anyone else have another example? The example I always give is, I think, of two examples on you know how many of you have been on the barbie website within the past month or okay. Well, that’s fine! You’re not allowed to answer this question.

Only the people that have not been on the barbie site. What color do you think is the Barbie website pink, let’s see if you’re right, you don’t have to justify or explain. That’s: okay, no, no judgments. Okay, I’m pulling up the site for Barbie and looky here sure enough. The main colors is pink all right. Okay! Does someone named a heavy metal band? How do you spell that august burns red? This is a slightly surprising others, guys what color their site is going to be and what would you have guessed black and that’s what what I would have guessed to it’s, not black, but it does have a certain look for it.

Let’s go my old school. Let’s try Ozzie yeah well, Black Sabbath would be cheating but Ozzie. I think it’s fair game all right and again Wow lookie. Here, it’s mostly black all right. So the point is: is that could you imagine both ends might be very well designed sites? You know we didn’t spend a lot of time looking at them, but I’m going to say yeah both of my well design sites, but they look totally different.

Well, why is that? Well, they have different audiences in mind and they have different sorts of content and the appears that they picked match the content that they had now. These are very obvious choices, but you could have less obvious choices as well. What sort of look would you want from a bank? You may look very professional, you wouldn’t want unicorn gifts on the side or you wouldn’t want pastel colors or something like that on again.

The other word that a lot of people – and I think it’s this a dumb word, but but people use it all the time is branding right. You want to get across your brand’s. Look, you know Apple. I think we looked at them the other day. We could almost guess what their site is going to. Look like the whole idea of Apple computers is meant to be they’re, very sophisticated and designed and sleek and simple to use, and all that and the website matches that corporate image alright um.

On the other hand, the kids website, if it was done up in a very serious manner, like a new site. Well, you know everyone have any appeal to the audience, so I think the good way to summarize that would be to say that the appearance of the site should match the content in tone. Now, here’s where we might point out that there could be exceptions to this. There might be an exception to this, where you don’t want the appearance of the site to match the tone.

There’s one website that I’m thinking there’s a classic example of this. I’m thinking of the website the onion, the look of the onion is a satirical newspaper, so it’s meant to be fun. It’s meant to be humorous, I’m not going to pull it up because who knows what’s going to be on their page today? I don’t. I don’t want to have to explain to my Dean why I brought something up on the screen, but the onion is meant to be humorous.

It’s meant to be a fun site, yet it looks like a new site. It’s done in a very professional looking new site. Look well, that’s like part of the joke. It’s like pretending that this is a real real life newspaper and hear some humorous stories that came up with so that’s the case where they did. They broke this guideline that they did it deliberately, because that sort of adds to the appeal of it so again getting back to these.

These are pretty solid guidelines and, most of the time you should follow them. But if you think hard enough, you can find exceptions to all of these um one other good. Well designed a guideline is be sure. Your purpose is clearly stated and again you go to the website. You should know immediately what the websites for you shouldn’t have to guess that G, what is this organization again that can be done or that could not be followed and it can be effectively done.

For example, there was a 44 either halo, a halo, 2 microsoft created a site called. I love bees and it looked like it was a sight for a beekeeper when you first went to it looked like it was just a hobbyist website, but then, when you got into the site it became clear that something else is going on. They they made. It look like something had infiltrated the system and blah blah blah blah blah, and it was like some backstory information for the game halo now, in that case, they intentionally didn’t make the site match the content of the appearances like match the content and they didn’t.

They hid their purpose why the thought was is to make it viral where people would be talking about it. Look I found this site in G. Isn’t this weird and it got people talking about that site and it was a very effective ad campaign form. Let me see if I can put it on, I am going to i’m going to use a site called the Wayback Machine. The wayback machine allows you to go and see what websites look like years ago.

There’s wan na see if I love, peas, bees as long as live it. It isn’t the original one. So I’m going to go and pull up the wayback machine. I think we use this in what I want to show leo burnett last time, because, unfortunately, they made their website a little better. So I couldn’t use it as a good example. So let’s go in and pour it out from december of 2004 and notice. How, in the background, it looks like a nice little site about bees, but you get this sort of fake error message and you can read the mission log and there’s bill audio clips and so on and so forth.

So this is a way. This is an advertising campaign and array for for them to go interest in it forget people to say gee. I wonder what this site is about all right and it went viral and people passed it on and it was part of a good marketing campaign. So all of us any of these guidelines that we have you could think of cases where you can serve baked the guidelines. Do keep in mind, though, that you better be clever if you’re going to try something like that right, because otherwise people are just going to look at and say this is dumb all right and and ignore it all right.

So um sort of the default is to go by the book and do these things but um, especially for websites that are safe for the entertainment business or for creative field. Then it’s okay, probably to think a little bit outside the box, because people expect that from creative sort of organizations. Well, as you know, if you’re a CPA, firm or something people aren’t going to expect your website to look like a game or look like it’s a children site or something like that all right.

So we could probably talk about more of these, but um in some respects. Well, one thing I hear from students. Sometimes when I teach the section of the course is there, like all these things are common sense. You know who would make a site for Barbie that looked like a site for a heavy metal band. You know who would make a site where pages were inconsistent and didn’t look like each other. Well, my point of all this is: is whatever we do in creating our site ought to be done as a set of conscious decisions, we’ll just throw things together.

We think about them in advance and plan that we’re going to do and in that way that’s going to give us the best results. So it’s like writing. A term paper is just like planning a cross-country Drive. You could shoot by the hip and say I want to go to California, so i’m going to get my car and drive rest all right. You’d probably end up at keller in california, eventually, but you wouldn’t necessarily take the best or most efficient route, all right, so playing and deliberately thinking about each of these steps is armed what we want to do in terms of developing a site so for your project.

There’s a procedure that I want you to follow and it starts off thinking very general and then it narrows down to more and more and more specifics all right. The basis of this is number one starting off by thinking about the content of the site. What are we going to put on the site? Remember, we said last time that content is king or content is queen. It rules. People don’t come to the site to your site to admire the beautiful design.

People come to it to get some information or to do something that they need to do so thinking about in deciding what your customers need to do, or what information they need is sort of the first job all right and to actually probably the first two jobs. All right, we think in general terms, and we think in more specific terms, then we start thinking about some of these other things. How are we going to organize the information? What is the appearance going to look like and so on? So, let’s pull up in canvas the description of what I want you to do and we’ll go through as much as this as we can today and we’ll finish this up on Tuesday.

These kinds of things, in my mind, are reading the heart of web design. Not what colors you’re going to use or what fonts are going to use that comes later. It’s just like designing an automobile yeah, making the interior look nice or making the outside look nice! That’s important that as an appeal to people all right, not the designing! The car to be safe, designing the card to be a fuel-efficient, designing the car.

So it’s easy to repair. Those are all things that are probably more important than that. It looks nice all right. So here’s an overview of the project somewhere over here. All right you get to pick whatever topic you like, I suggest you pick something. That’s fun all right pick something that you’re interested in you’re, going to probably work harder. If you develop something that, if you develop a site for something that you’re interested in then, if you just randomly picked a topic all right, I the student, it did a website about his motorcycles.

Well, he loved his motorcycles he’s not about to put pictures of his motorcycle on a bad website all right, so he worked hard to make sure that website looked good to do his motorcycles, proud all right and I would suggest you do the same approach now pick A topic that’s enjoy that you enjoy pick a topic, that’s neither too narrow or two brow broad okay, and this is where I can help all right. Neither to know or to broad is a good idea.

Um to know would be under arms are too broad would be something like I’m going to do a website about sports. Well, you can’t possibly cover everything about sports in six to eight pages. All right I mean how many sports are there. You know you can barely scratch the surface. On the other hand, you know if you picked a topic of the history of the Cleveland, Indians, mascot slider, there might be a little too narrow.

I don’t think you could get six to eight pages out of that. So the idea is, is you want to pick a topic? That’s like right there in the middle, where you can get six to eight pages, with the content and you’re doing a good job covering it, and it’s neither to broaden or too narrow, and this is where I can help almost any topic that you pick um can Be either expanded or contracted to be the right size? So if you have an idea about this um, you know we can talk about it.

Um a lot of people pick article games, something related to article games. The article games itself would be a big topic right. So you can know that down by saying I’m going to do about mobile article games. Maybe article games from your phone or puzzle, article games, rpgs or whatever it’ll pick a particular game or game series. I’m going to do about the final fantasy series or something like that.

Another way you could either expand or contract that on to to meet the requirements of six to eight eight pages. Each page should contain a reasonable amount of content. There’s some judgment in there right. What is a reasonable amount? I guess useful guide, what you see, typically on their own pages on the web. You know a page with one sentence on. It is probably not enough content, a page that has 15 paragraphs on it, there’s probably too much content on it.

So think, in terms of what you normally see on a website for appropriate amount of content, we want the site to be technically sound, well designed and to effectively communicate the intended message. All right. The site is done. This project consists of two parts: a design document which is sort of your plan and then the final deliverable, which is the finished website, all right, I’m going to talk about the plan.

First, the plan consists of five sections and just as a memory aid you can get, you can use words that all start with s for each of these sections. The approach that I’m taking here was in a book that used to be a required textbook for this class and you can still find copies in our library or probably even through safari books online, and that is the elements of the user experience. Yes, no, no! No! Technically sound, technically solid, alright think a sound like not not like audio sound but sound, meaning like in other words like will be you know, the the foundation of that house is sound.

It means it is solid, alright, so, in other words, you use the proper HTML and CSS your links work. Your images work you’ve coded in a way that technically is correct and solid. All right strategy section relates to the goals of the site. Scope relates to the requirements of the site. Structure relates to sort of the sitemap. Skeleton relates to the page layout or sometimes called a wireframe and finally, surface relates to a prototype.

Think of a prototype is sort of being a rough draft of your website again. Any task that you do is better is going to be better. Typically, if you think about it before you do it all right. Does it matter if you’re writing a term paper or planning a trip or planning repairs in your house or anything like that? Any project that you’re going to do, if you’re flying by the seat of your pants and you’re just winging it as you go along you’re not going to get as good results is.

If you step back and think systematically of the approach that you’re going to take. All right, the first section is strategy, and that’s where you you do a couple things in the strategy sections. First of all, you come up with a high-level description of the site. Maybe I’m going to do a website about the article game, tetris all right now that by itself is not probably sufficient, the more specific you can define your purpose, the more or the better that you can actually go and achieve it.

So maybe I’m going to develop a a website about the game tetris and it’s meant for students that are learning how to develop article games or is meant for gamers or is meant for the general public, or maybe this meant for all three groups is meant for Everyone, maybe is meant for kids, you know: hey kids, you know you like playing your fancy new fangled article games. Here’s one of the early article games that started the ball rolling all right.

Maybe it’s meant for old-timers, who haven’t played a article game in years, but finally remember playing tetris all right, the better that you can define your purpose and define your audience the better job you can do creating your website another example. Let’s say I was going to do a website about classical music. All right, I could go so many different directions. With that right, I could define a website.

I could create a website about classical music for the general public people. That really don’t necessarily know a lot about classical music. Maybe they played in the band in school, but they don’t really know a lot about it and have thought about it. Since a music appreciation class I had – or maybe I can develop it – for people who are fans of classical music who want to know about new releases and concerts in the area and so on and so forth.

Maybe I want to develop it for adults. Maybe I want to develop it for high school kids. Maybe I want to develop it for children, the more clear that I can describe what I want the better off i’m going to be, because then I can really target the needs of those particular groups. You know the first rule of any sort of communication is to know your audience all right. So it’s not enough to say this is a topic.

You focus on the topic that you’re going to have and you think about who the audience is going to be all right, so you can imagine a site about classical music. If my audience was musicians, let’s say it’s going to have a lot different stuff than if my site was for listeners right. My site was for musicians. I might have information or articles about where to get your musical instrument repaired if it’s broken, all right or advice on buying a used musical instrument or what are some local community groups that you can join if you want to play in an ensemble or something like That, if I was developing it for high school kids, maybe I include a page about what concert.

Etiquette is ok, because you know people at classical music concerts can get really fussy all right. You don’t walk in in the middle of a piece. You wait until the pieces over and then walk in after that. So if you’re late you stand outside for a few minutes till it’s done, you actually don’t applaud in the gaps. You wait until the entire piece is done so for peace has three parts: there might be a slight pause between the first and second part.

You don’t applaud there. I think it’s silly, but that’s the way. It is right. You should probably one applaud right. I mean come on. You know, but again that’s sort of the expectations that people have so maybe for younger people. That don’t know that you might have a page about that. Oh page, about what are the main instruments of the orchestra. Now, musicians going to know that right, they’ve been playing in an orchestra, since they were ten years old, probably but a high school kid or someone hasn’t been exposed to classical music might not have any idea what that is.

Maybe examples of different eras of classical music. Again, a musician might know that you know very well, but a lay person wouldn’t necessarily know that. So when you develop your strategy, you don’t just pick your topic, but you think a little bit about the audience that you’re going to be reaching now. This is where, when you identify your audience, really, you may have multiple audiences is going to visit your site depending on again how big or specialized the site is all right.

For example, we have a school, you know with learning community college who are some of the different audiences that could be visiting Elsie’s, page or different groups of people that would be visiting Elsie’s site right, graduating seniors from high school, so graduating high school students were thinking About where to go to next year, that’s one group of people and for me, the parents of graduating seniors, all right.

That’s another group people in the workforce that maybe they’re working at a job that they don’t really like, and they want to upgrade their skills. All right would another group be traits people that already in a trade or people that are looking to get in a trade yep, people are looking to get into a trade all right again, maybe they’re working in a job that they’re not really crazy about, and they Might look to see you know: are there classes on welding or welding programs, or you know, nursing or culinary or things like that, other groups of people, instructors, faculty and staff all right? We would go on that site to look for certain things when our meetings are when grades are due.

Don’t read anything into this because I love my job, but when is spring break his class kids is, you know, do we have a snow day today? You know all these things are things like faculty and staff might visit, and we can probably think of others to just off the top of my head community members right. You may not be interested in getting a degree in graduating from LC, but maybe you want to participate in some of the cultural events at LC.

Has you know, there’s all sorts of different performances at the stocker Center there’s also our non-credit classes, where you can come and take a class in this that or the other that isn’t necessarily like four degree. But you can pick up your skills. I know they have for people that have no computer skills. They have like non-credit classes just to like to teach people how to use the mouse and how to move around and stuff like that or they might have a class in photography.

You know that’s non-credit, it’s not a first semester, but maybe it meets four or five sessions and teaches you the basics of a topic, just a personal growth or whatever lifelong learning, um people that I want to use a fitness center. All right. Fitness centers a great facility and as a student I think you get to use it for free. You just have to go and sit through one of their our. What would you call it orientation sessions and then you can use that for free.

I mean great facility in there. The plane is. Is that, especially when you’re talking about bigger projects, there isn’t one group of people called the user? There are multiple groups of users alright, and you want to do your best to hit the most important needs of all those different user groups. Now there might be some overlapping right. Parents of a high school senior probably have some of the same goals as graduating.

Seniors people in the community that are looking to maybe change careers might have some of the same girls as people that are brand-new out of high school that are looking at starting their academic career, but there are going to be differences as well right, someone who is You know in their mid-30s might be interested G. Will the college courses that I took 15 years ago transfer, whereas a high school student probably doesn’t have that question alright? So the first of all communication is to know your audience on websites.

You don’t just have one audience and a mistake that a lot of web developers use is they talk about the user as though there’s one kind of user that’s visiting their site or in reality, there’s several different kinds. So what you do so you develop a high level description, you identify the audience groups and you create what are called personas now. This might sound hokey, but what you actually do is you make up a fictional person that represents a group of people.

James is an 18 year old, high school senior at Olivia hi, who is interested in what you know, who loves computers and wants to do wants to work with computers? Lisa is a 28 year old person who is working in retail, who does not want to work in retail anymore? Who wants to who is interested in healthcare careers? You actually make up fictional people and little back stories about them now. Why do you do that? Will you do that for a couple reasons you do that, first of all, to show that hey my website isn’t just appealing one group of people, but I have identified two different groups of people and then, when you’re going through and making decisions about what content.

That’s on the site and how to organize it. You try to look through those people’s eyes. What’s going to help James find information about computer careers, what’s going to help Lisa find information about health care, careers and so on and so forth. Alright, that’s what I mean by creating these user groups and identifying these user groups and creating personas, then. Finally, you come up with goals for these grooves.

Alright, you actually, I think I just said you have three goals for each for the user of prioritize list of three user goals and our that your project will address and three of your goals, in other words, three goals of the organization that you’re doing this. For all right, but really you could define goals for each of the personas. You know a high school kid. One of their goals might be to find out.

Does LC offer the program that I’m interested in all right go for a parent of a high school senior? Might be, how much is it going to cost what financial aid is available for students going to LC? What are the rules about financial aid? What do I need to do to make sure my student gets financial aid and so on? So that is the strategy section right up top. We don’t think about how the site is going to look or what colors were going to use or what fonts we’re going to use or anything like that.

We start at the goals of the user identifying who the users are identifying, what the goals are for the user and identifying the different users that are going to be visiting the site and again there could be goals for each user group different goals, goals for a Community member might be what are the non-credit classes available for someone with my interests, what culture events are going on at LC this weekend and so on.

Alright, this becomes very challenging when you’re dealing with large websites all right, because there’s so many different groups of people and they all have different goals, but for the kind of websites that you’re doing is going to be a little easier. For example, let’s talk about my classical music site. Let’s say I’ve narrowed it down and say that I want to do a classical music site for high school students.

All right. Welcome by three different user groups be among high school students visiting my classical music site. Those who play an instrument, those who want to play an instrument third, might be high school music teacher all right. So if you are offering the course in music, you know you could use this site as a resource, so it may be geared towards high school students, but another kind of visitor to it might be a high school teacher that is going to try to incorporate your Site into their plans, article games, you know if I did a article game on tetris who could the groups of users be people that have never played tetris people who have played tetris? Who the third group be that’s a good question, but i’m sure we could think of something people that play the original tetris but haven’t played it since then, alright, so no matter what your topic is, we want to be in this section.

We want to be very specific and narrow down the specific audience and narrow down our to not just one audience, but several different groups that compose our entire audience and when we want to identify what the girls are. The goal should be simple sentences, for example, or goal for people high school students that run a play. An instrument might be what instrument is right for me right. What instrument is right for me, you know, maybe they would involve having audio clips so it’d, be they could listen to them and say: oh, that one sounds pretty good or all that one doesn’t sound so good.

Alright, what you don’t want to do in your goals? Section is talk about general web design. You don’t want to say a goal of my sight is to have a clear navigation. Of course you want to clear navigation right. That’s not really a goal of why someone is visiting your site to go and see how good your navigation is. This is content-based, in other words, what content people are expecting to get out of your sight.

That’s what the goals represent. All right. We spent the longest time talking about this one. The next four parts of this actually go fairly quickly. The second one takes a little bit of time. The third fourth and fifth, one will breeze by so we should wrap this up on Tuesday of next week. Any questions at this point, if you have not already read through the documentation about the project and will finish up that part on Tuesday


 

Categories
Online Marketing

Web Publishing Tutorial: Creating a Custom Grid File

So we can implement a grid system. We’re going to assume we’re using the 960 grid system which comes in 12 and 14 column variations, and it defines 940 pixels of content 940 pixels wide with 10 pixels of gutter on either side of the design now for demonstration purposes will focus in on a 12 Column grid system, but to use a 16 column, we just need to use slightly different values when we set up our guidelines, remember with any grid system online, we’re focused in particular on columns on the vertical lines.

We always want to apply more control and more precision to how our widths are set up than our heights and that’s a main reason for that to get started here. We’re going to go ahead and create our first guideline and we’re going to use those guidelines down the road to guide us as we create boxes and shapes that represent our wire frames. Now, in order to do this, we need to use the rulers in Photoshop and, if you’re looking around – and you don’t see rulers in your version, it may be that you don’t have them active and so to turn them on.

You need to simply tap the command. Our key combination or control our if you’re on a pc, i’m going to do that now and you’ll, see that actually I lose my rulers because they’re already on but command R or ctrl R is a toggle combination. So I just tap it again, and that brings my rulers back now. The other issue that may come up is, we have here a 1200 pixel wide document, its 2,400 pixels tall, and you may have a similar document but you’re looking at your ruler, values and they’re.

Just not matching up now in this case they are. Maybe your values are a lot smaller, though what could be happening is even though you’ve created a document in pixels, your rulers are still up to measure things in inches and any time we’re doing web design. Everything’s a lot easier if we switch everything over to pixels. So in order to do that, all you need to do is tap the command, K or control k.

Key combination: that’s going to open up the global preferences window for photoshop and we’re actually going to scroll down here to the units and rulers subsection and we’re going to check out the units values. Now, I’m all set, my rulers are set to pixels. You can see here, though there are a number of different possibilities and type as well is set to pixels and i’m going to leave both those values.

Just as is so i’ll cancel out of here. Okay with my values, confirmed with my rulers, set up, I’m ready to go ahead and create my first guideline, so I’m going to move my tool set over here on the left a little bit over to get it out of the way, and now I can click And drag from my rulers over on to my document and i’m just going to hold down my mouse or my left trackpad button as I do this and then move this right over onto the document as soon as I release there.

I have my guideline now. If I’m not happy with the placement, I can always move a guideline after I’ve created it. In order to do that, I want to make sure i’m using the move tool which, in my tool palette here, is the very first one. So I can either click on it or I can use the keyboard shortcut v to select the move tool and now I can easily move things around, including my guidelines. So if I hover over this you’ll notice, the cursor changes indicating I can move it left or right and then I can click and drag it in either of those directions.

Now you’ll notice, as I move this guideline, that a little window pops up showing me my exact pixel value for that particular location, that’s a really handy indicator and unfortunately it’s limited to cs6. So if you have an earlier version of Photoshop, you won’t be seeing that value. What you’ll notice, in either case, though, is as I move this even if I’m very careful I’m jumping ahead by four five pixels every time I move my cursor and that’s not very good for the kind of precision work we’re trying to do now, so an easy Way to get more control more precision over what’s happening is to zoom in on the document, and I’m going to tap the Z key to move over to my magnifying glass and because I’m in Photoshop cs6 I’m going to actually click and then drag over here.

Whoop click and drag the other way, and that’s going to allow me to zoom in on the area. If you have an earlier version of Photoshop, you can actually just go to the zoom tool, either click and drag a square over the area that you want to focus on or just keep pressing the mouse button or the left track pad button over the area. You want to zoom in on so now that I’m zoomed in I’m going to just scroll over a little ways here and I’m going to hit V to move back to my move tool.

And now, as I move my guideline left and right you’ll see. Not only can I move it to the nearest pixel, but I’m actually ending up with some decimal values here as well. That’s a little bit frustrating too, because I want to stick to pixels well an easy way to not only stick to integer values, whole integer values, but also to get a little more control over my movement is to hold down the shift key as I do this.

What that’ll do is snap the guideline to the different hash marks on my ruler here so, for example, between 300 and 350, I have four different hash marks, so that means, if I hold down shift, I can go from 300 to 310 to 3. 20. 30. 40. All the way over 250, so down to the nearest 10 pixels, I can move this left and right, which is exactly the kind of control I want for what I’m doing. So. If I wanted to create another guideline, all I do is come back to my ruler.

Click and drag it over and I have my second guideline now the trick is: where do I actually put these guys? Well, I want them in very particular places based both on the 960 grid system. I am based on the fact that I have a document here. That’s 1200 pixels wide well to help us out. I’ve created a document and you can actually download this from the course site in lore. Let’s go ahead and open that up for a second here, so we can see where it is so.

I’m inside of war and web publishing, I’m going to go over to resources to grab this document and it’s the guide placement for 12 and 16 column, 960 grids, so I’ll click on that and I’ll click to download. It’s like I’ve already grabbed it a couple times and I’ll pop it up here. So what this document gives us is the pixel values that we want to use for each one of our guidelines and each line in the document represents a different column, and so we need to guidelines for each column.

In this case, the left guideline is going to be at 130, the right guideline at 192, 10 to 70 and so on all the way down. If I wanted to use a 16 column grid, I would just use the values listed under there. I went ahead and printed this document out, so I have it at the ready and just remember it’s not only assuming a 960 grid, but it’s also assuming a 1200 pixel wide document, and so that’s going to mean that all of our guidelines are going to be Lined up just right so that our web page is centered on this 1200 pixel document.

Let’s come back into Photoshop in fine tune, the ones we’ve already created here. We know we want our first one to go to 1 30, so I’ll hold down shift and move this on down down to 130, and I know I want my second one at nine or 190, rather so I’ll move that to 190. My third one is going to be 2 to 10, so i’ll click and drag hold down shift that snaps to my hash marks on the ruler move that to 210, and my next one is going to be at 270, so i’ll jump over to 270.

Ok, I could keep going just like this and create all my guidelines. Show you one more way to do this, though, that’s available in all the recent versions of Photoshop, and it may be a little faster, especially for those of you using older versions who don’t have the benefit of the little display that pops up and shows me. My exact pixel value as I drag so it turns out. We can create these guidelines using the menu and we do that by going to view up in the menu area here at the top, and we come down to new guide and it’s going to give us two options.

Basically, we can choose the orientation. Remember we’re sticking with vertical, so that’s good and then we simply provide the position value. So I’ve created my first four guides. I know my fifth one has got to be at let’s see here to 90, so i’ll type in 290 and hit ok and there’s my guide so back up to view down to new guide and I’ve created 290. So 350 comes next punch that in and there’s my next guide.

Well, there’s always a way to do things faster and it turns out. Even this can be sped up a little bit by using a keyboard shortcut, and this is actually a good trick to know any time you want to speed up something that doesn’t already have a keyboard shortcut available. This is a really great flexible way in Photoshop to customize the interface so you’ll notice. If I come to view new guide, does not have a keyboard shortcut set up for it, and I know that because to the right here, there’s no key combination as you’ll notice.

On some of these others like, if I wanted to see extras, I can do command H and, as we saw earlier, rulers our command are well. I have no keyboard shortcut for new guide, but that doesn’t mean I can’t set one up and in order to do that, all I need to do is come over to the Edit menu and then come down to keyboard shortcuts from here I can choose my different Menus and I’m going to go back over to view because that’s where the command, I’m looking for libs and I’m going to scroll down and there’s so many different things that can be mapped to keyboard shortcuts.

But I’m going to come all the way down to new guide there. It is and to provide my shortcut. All I need to do is literally click in here and then type the shortcut literally type, the shortcut that I want to use for this particular command. Now the trick with this is because there are so many shortcuts already set up. It can be tricky to find one. That’s not in use now, I’m pretty sure if I do command shift one that that is a available shortcut.

So let me try that command shift. One: okay and if you’re on a PC you can do ctrl shift one to do that as well. I’ll do command shift one. I got no warning telling me that it was taken, but you’ll notice. If I get rid of that and do say command R, which we know is taken now I get a warning saying it’s actually going to replace that old command. So I don’t want to do that so I’ll undo that and again we’ll do command shift.

One control shift: one is a possibility, if you’re on a PC, although frankly you could make this anything. You want just make sure you remember how you’ve set up your shortcut, so you can easily get back to them. Okay, command shift one and will enter in there to save that, and then click. Ok, now that we’re back in our document, we can command shift one, and lo and behold our new guy dialog box opens up.

We can set the position we just did 350. So now we’ll do 370 and we hit enter and there’s our guide command shift. One to create another guide will do 430 and we’ll just go through a couple of these, so you can see how fast this process really can get. And again I printed out the document with the ruler values or the guide values I should say so. I have that right beside me here to speed this up and i’ll do one more okay, so once everything is done, we can zoom back out and we’ll have ourselves the makings of a really good wireframe document with our 12 different columns or if you wanted to You could use a 16 column grid, no problem right about this time.

It’s probably a good idea to save the document, save all that hard work that we’ve put in here and in a follow-up lesson, we’ll talk more about actually creating wireframes and we’ll see you then


 

Categories
Online Marketing

How to Select the Right Keywords I Free Google Adwords Training

So there are tools available to find appropriate keywords. There’s a lot of different tools online that you can use. Google has what’s called their keyword planner. It’s right in Google’s under tools and settings here you come over here to planning and you can use the keyword planner and you can find keyword and AD group ideas.

You can get suggested budgets and you can find you know, search volume and forecast as well. So a lot of times we’ll be searching for a specific keyword or we’ll think. Oh, look. This keywords going to generates a lot of results. It gets a lot of activity, but then later we find out like the search volume, there’s some very low. So you can get all this information using the Google Keyword, planner right under tools and settings here.

So, let’s review the four targeted keyword, matching options to control which queries trigger hats. There’s four keyword match types that are important for you to really understand. If you don’t understand the different types of keyword match types, then you will burn that budget. I’m telling you you will lose money, I’ve seen people, you know waste tens of thousands of dollars just because you know they didn’t understand the difference between broad match and exact match.

So, let’s review the differences between each one.


 

Categories
Online Marketing

Lucijan Blagonić: Moving the design process to the browser

I work together with my brother Emanuel, As you can see from this picture. We look the same so you know we are brothers, We run a small family agency called Blagonic Brothers and our goal was always to optimize our process and provide extra value to our clients.

That’s why, over the years, we were focused on delivering our designs as HTML and CSS templates, as opposed to static images, and this proved to be one of our great advantages in the future. That’s also the reason I’m doing this. Talk for me, it started almost a decade ago with this great book by Jeffrey Zeldman, Designing with Web Standards, and this was during those prehistoric times of the Internet, while there were no rules or guidelines on how to create great Websites, this was our starting point for most of The designers or turning point Mr.

Zeldman preached why web standards Are important and for me personally, this made me a better designer I wanted to excel at building web Standards compliant websites, so I’ve grown quite fast and writing HTML and CSS because it was important for me. To deliver those designs that are both accessible, that works great in the Browser and not just look good and when you’re taking a problem, we want To solve it around the web or on your mobile, we have to find the right tool.

The right Approach to solving that problem, building websites is hard and it Hasn’t gotten easier over the years, most designers spent a lot of time. Designing Websites in Photoshop or Sketch or other graphical programs, but the results of Those website of those the programs are not websites they’re only Representations of websites a static images – and this is not a problem by Itself, but a static image reproduce can often set unrealistic expectations for Overall experience when presenting static designs to clients, I always try to set expectations in Advance so that we can focus on the functionality and not only eye candy.

That’s why I spend more time in code than in Sketch. Nowadays, for example, you can easily test Interactions on a static mock-up: yes, there are tools like InVision or Proto.Io or something like that, but you can’t really test how it would work. In the browser, so you always have Some overhead work that you have to do to test something that won’t necessarily Work in the same way, and there is still no easy way to design for Different resolutions in graphical programs responsive web design.

It’s Still the most natural thing to do in the browser directly and although working With content has gotten easier over the years there are plugins for Photoshop and Sketch, which lets you generate and input dynamic, content and Then test with those, it’s still sometimes much easier. If you want to Test, for example, a really long title to just fire up the inspector change, the Heading and see how that breaks the whole flow of the page and one of the Main problems of delivering static design mockups to developers that we can’t Specify everything we can specify only the visual layer and that visual layer can Often be misleading, our website should be a work of art that can be Put on the shelf and admired it should be a functional thing.

That actually solves a goal we pre–defined earlier for users and if we were to Test, for example, this HTML prototype. If we were to create this website as an Html prototype to test it in browser. We would get two completely different results: Completely different feedback by designing a perfect use case on a Desktop and transforming that on the mobile, if, if you were to choose like low Contrast, tax or or large background images they don’t fit well and the Mobile, we would get unreadable text and maybe the most important call to action.

On our site in this specific case would become completely invisible, and this is Not something we want to do so everything is great when we are at home, I working from our Wi-Fi, but When we are on a mobile connection like edge, then things start To get bad and if you had like this kind of website, That load slowly, the overall user experience with you could pretty degrade or due to poor choices of fonts font, weights or font sizes.

The text in the Browser would not be legible. All the fonts and the static markups Look great in the browser: it’s a completely different thing to do to a Different font, rendering technology and browsers and some basic things like Skipping content sections using the keyboard to navigate to to the site, like I personally do on modals and Carousels and something like that can be frustrating if it doesn’t work, so this is also something that we Couldn’t test in an image and small touch? Targets are usually Evident only on smartphones and tablets, you can’t really design those in Photoshop you can’t really test those in advance and you’d believe that we’ve Mastered the hover and focus states by now, but still designers, don’t design for These things they often forget about it because they are designing only for the visual layer, which is not often deep enough, and one of my favorites is that When I get on this page that uses up a badly implemented parallax effect, The whole browser, on my whole hand, computer chokes, and this is a really bad experience, and these are these are, of course only some of the Things that I see when I visit the website, someone else might see a completely Different thing: we should instead modify our approach to making design decisions.

We should set some fixed ground rules before we start to design and if we Define our expectations before we start to design, then we can tackle these Challenges during the whole process and not at the end and it’s important to Mention that with the average website weighting almost two megabytes, if you want to really keep Performance in mind as one of your main goals, then you have to think in advance after you added everything.

It’s too late. And if you want to create a page, it is simple to use. If you want to think about accessibility. Then that should be one of your main goals. Yes, it’s nice to create beautiful Animations and interactions but make it functional first and polish after that, You will always score points with users if you are creating a functional Interface and designers cannot often get carried away by building animations the That they tend to forgot that the whole the whole website is unusable and with thousands of Available web fonts to choose from it’s hard, not To get distracted when setting type so please keep your readers in mind.

Try to choose the font that that fits the context that fit that fits that the copy That the client has sent you that you can use and although we came a long way with Accessibility, we have good tools, libraries and Resources and accessibility is also very well very well received in our WordPress community as well. This live captions, for example, prove it. This is Still something that we have a long road ahead, designers and developers often say but Yeah but people with disabilities, like those users with disabilities, are only a Small percentage of our whole user base, but this is simply wrong so next time you design that custom Checkbox, you coded in java script with two lines of code: think about how you’re affecting that Something that by default works and if you are making the whole thing unusable for someone else who doesn’t Necessarily use the computer the same way you do and to name only a few.

There are, of course, many more goals you can set. These are only some of the goals I set When I start to design good design can be hard, but we can pull it off by making Decisions and meeting our users where they are in the browser designing in the browser Doesn’t presume that designers need to know how to write HTML and CSS, but it Presumes that they should be aware of how certain things work in the browser They should be able to talk to their team members, front-end developers, back-end developers to work together.

Browser here is really a synonym for making decisions, an actual feedback and usage, and that assumptions I found that style guides. For example, Help transpose the design process from a single point of view to include multiple Perspectives, we talked about earlier, not only the visual perspective and that helped deliver a better experience. Style guides are in a way of changing the way we deliver design.

Nowadays and 10 years ago, we were used to Delivering like different iterations different pages like static PSD’s or Images that what that was okay at a time, but now it’s much easier to just Deliver HTML templates because all the interactions, all the responsive, Breakpoints, all the different resolutions can be can be tested in an Html and style guides builds upon these ideas for helping us define a set of Standards and guidelines, we are effectively building a design system.

That way, and one of the great things about style guides, is that they Are encouraging modular thinking it’s in our best interest to keep things Simple and to reuse things as much as possible and modular thinking is Responsible for the delivery of the building blocks or LEGO bricks, they are a part of that design system and where we once delivered only HTML templates. We can now deliver our HTML chunks.

Which can then be used to create different pages, different variations and They say that one characteristic of good design is consistency. Well, having all components laid out on a single page can help us in making sure that we don’t over do with fonts or Colors and by observing how certain interfaces work and look on their own and As a part of a whole system, we can get a broader perspective on consistency.

And colors and fonts are only an example of that visual consistency. We need to Get right components presented in style guides are by nature self-documented for Example, let’s take up navigation tabs component if you were to See a page where that component is in the hole, noise of other components or different things, then you’d have a hard time to see how that component would work alone. You would not be sure if you can just paste it in the sidebar or use it somewhere else, but when you’re looking at that component, Stands out in the style guide and you’re quite sure how that works? You can see what the modifiers are and You can see how you can actually use it somewhere else.

You know that this is a building, brick You can use to build something and living style guides also referred to. Sometimes as front and style guides combine the power of automation and Templating to to display those styles components in code examples; basically, every pattern we see on the Website is a reproduction, an instance or duplicate or the actual components used. In the project and, for example, if you change the style of that specific Component, even slightly the changes will be visible throughout the site and in our style, get as well.

You have to remember that if the style Guide isn’t updated accordingly, it will become obsolete over time and then we have no use for style guides. But besides automating, it’s important to be able to Pass dynamic data to each module to each component and see how different content Shapes our design, we can’t work with lorem ipsum only I try to define a set Of variables for each component and then pass custom, custom content values that Way I can use that single HTML chunk of code on different places and get Different results and testing long titles or different images is not a Problem and by combining those two automation, Dynamic data we can get reusable code patterns and then generating different Variations is simple because we are always using only one HTML, so what we actually deliver.

Two Designers and developers and clients well a set of rules and guidelines. It’s Much harder to deviate in the future, if you have everything laid out to the Detail what colors are used where what fonts and things like that, but we’re Also, during those components, those building blocks we’re delivering a design system. Components that follow the rules and guidelines we set before – and this is Important, if you want to have the project that can involve after that and This goes without saying, but we we are also delivering examples of different pages.

And different flows, for example, our user onboarding process or web shop check out Or something like that, and since we have automation and dynamic Content already in place in our workflow, then it’s a breeze to Generate like dozens of pages with different forms, if it’s necessary, but we Are also delivering our best practices, our expectations and our goals about Accessibility and usability, and things like that and if we strive to include Our best practices in our process – and this will also reflect in our delivery.

And although style guides can be daunting to start with, there are plenty of tools and resources. That can help you get started, but it’s best start simple and complicate gradually. I found that styleguides.Io is a really great place to start. It holds a different collection of tools. Articles, it even has a podcast and you can see What kind of style guide generator tools would help you in your process, but you Can start simple start by creating an interface inventory? This is basically, in my case, a spreadsheet where I’m trying to document all the Different components and pages I have on a project and I try to list their Basic properties, like names descriptions I try to define naming patterns for Navigation components and what’s more important, I try to take a look of each Component from multiple perspectives, so if, for example, if i’m working on a carousel component, I try to specify what Other third-party libraries i’m going to use to make it accessible and I try to Write everything down and after that you can define the colors font choices.

Different form examples default elements and, if you’re using this is Preprocessor, which most of us are using nowadays, then your LESS or SASS or Stylus Variables is a pretty good place to start. You have already defined all the Important things that shouldn’t be changed and should be only used on the side and now it’s time to display them to others and design. Discussions are Usually, usually much more productive when we can focus on a specific Component as well, where, before the client would comment on The whole page like “, I don’t like this” “, But I can’t explain why”.

He can now also Comment on a specific component and he can see that typography and colors are Only building blocks of that design of that design system and discussing an Improving overall design then starts with the smallest component. First and since you’ve taken a modular Approach, you already have the building blocks and you have to include These patterns in your style guide, but if you really want to keep your style Guides relevant then they should be based on your codebase.

You have to find a way that suits you best to automate the process of Generating and updating those style guides, in my case, i’m using a Knyle Style Sheets. In short, KSS is a CSS documenting methodology which enables documenting Important things like description where it falls in the style guide, maybe we define an HTML example. I can Also include those HTML chunks directly into as a reference in CSS code and this Allows me to generate quickly and without much problem examples for different state of buttons.

Or different things and the best part of designing in the Browser is the thing you can use all sorts of tools from testing from your Browser inspector that is already built in or to third-party scripts and services For example, if you want to test accessibility, you can use this awesome great little. Js library, by Khan Academy developers, you include it on the site and it Highlights all the potential problems, accessibility problems you might have in An HTML, for example, maybe the color contrast Isn’t good enough and you can correct that – and this is not something we could Do in Photoshop, so this is one of the great advantages When you are working with live code or if you are not happy with your page Page Speed score: you think the site could be could be loaded faster.

Then try to do a Few changes try to see if that background article, the Client insisted to be put on the website really helps and benefits the user and You can then use and leverage those results to your clients and stakeholders. To actually make the right decisions, it’s much easier to talk with numbers; And starting with style guides can be hard and implementing this approach into our Own process and existing development process can be challenging, but designer’s Job is not always easy, but going that extra mile pays off and all the good Design can be hard.

It makes perfect sense by designing in the browser I’m able to communicate better with my Clients by designing in the browser I dramatically reduce the delivery time. While also being able to add extra value to the project which the client was Really happy afterwards and by designing in a browser, clients can become a part of that design. Process from the start, thank you.


 

Categories
Online Marketing

Web Fonts – The State of the Web

”, My guest is Dave. Crossland He’s the program manager For Google Fonts And today we’re Going to be talking about the state of web fonts –, what are they, how to use them? Effectively and what’s new, Let’s get started, [ MUSIC PLAYING ], So Dave. Thank you. For being here, My first question is: About why web fonts, What do they bring to a website? Beyond the standard fonts like Helvetica DAVE, CROSSLAND Well, Web fonts really express a certain kind of Feeling for organizations They express a brand And you can have a web Page without a article, but you can’t have a Web page without text You have to have fonts And so a brand at its core Would be like a logo, a color and a typeface or a font, And so web fonts bring The kind of rich design that we have in print Media to the web, RICK VISCOMI And according To the HTTP Archive nearly one third of Websites use a font from the Google Fonts API, So why are developers turning To the Google Fonts API DAVE CROSSLAND, I would say That Google Fonts is fast, easy and free And so on.

Our Analytics page we’ve clocked up over 22 trillion. Font views in total since the service Launched in 2010 – And I think that being on Google’s content, distribution networks, we benefit From cross-site caching, So when you visit the First website that uses a font like Roboto, it’s downloaded and you may see Some latency there, But then on all Subsequent websites, which use the font From Google Fonts, then it’s in a cache And loads instantly across the different websites, We also try and Make it really easy So the font’s API Abstracts, a lot of the complexities of web Font technology from you, So we serve different formats.

To different browsers, For example, with better Compression formats, like WOFF2, only the newer Browsers support those, And so we serve WOFF2 files. To those newer browsers And we serve other Formats to older browsers And then finally We make things free and we have a directory of Hundreds of choices which everybody can choose from Now, of course, if you Want a particular typeface, then it may not be Available in Google Fonts and you would go and license That font for your usage, But not everybody, has the Sophistication in design or the resources To license fonts And I think it’s important That everyone in the world is able to do typography, RICK VISCOMI, So I don’t Know if developers truly appreciate how complicated Web fonts are under the hood.

I got a taste of this when I Was at YouTube a few years ago, I helped change the Default font to Roboto, and it was not as easy as just Changing the font-family CSS style, There’s a lot you need to do to Make sure that it goes smoothly for the users and they Have a good experience, For example, like YouTube users, Are from all around the world, They have different languages. Different alphabets, What are some of the Things that developers need to be concerned about For an international audience, DAVE CROSSLAND International Users face a challenge because the file sizes Of fonts, for them can be larger than just For European languages Traditionally Google Fonts has done a kind of slicing of Fonts into language or writing system sets, So we might have, for example, Latin Latin Extended Cyrillic Cyrillic Extended Greek Greek, Extended and Vietnamese: That’s your current support for Roboto that’s used on YouTube.

We also support Other languages — Hebrew, Arabic, Thai, Many different Indian writing systems And the biggest Challenge has been for Chinese Japanese And Korean fonts, A typical font for Indian languages can maybe be two or three times Larger than a European font, But for East Asia it can Be a hundred times bigger And so we’ve been able to Use a number of technologies, for example WOFF2 Compression which is now a W3C standard this year, And also the @ font-face Css has a new aspect called unicode-range.

Unicode-Range allows us to Slice, the fonts into pieces, dynamically And the browser will Only download the pieces that it needs, So that means that We were able to slice a Chinese, Japanese or Korean Font into over a hundred slices And therefore the Latency of each slice is similar to your European font, This means that the experience Latency is much better And because the Slices are cached across different Domains then the font gets faster and faster To load over time, RICK VISCOMI Custom fonts have Also been used for icon fonts to show images And more recently, they’ve Been used for emoji as well, So we’re moving beyond just Text and on to these other ways that we’re using to communicate, But it’s not without its Own challenges, right, DAVE, CROSSLAND, That’s right! Font technologies are always Improving and evolving And the use of emoji as a kind Of special case of icon fonts is particularly interesting.

I think that there’s a Debate in the web development community about how To best approach this Using images for icons, whether That’s PNG or SVG vector images is –. There are some advantages there. One of the advantages To using icon fonts is that aligning icons with Text in labels is often is a common use case And getting the alignment Onto the baseline of text can be tricky when You’re dealing with two elements: — a text Element and a image element And so icon fonts can Play a good role there.

They also have good legacy. Support because obviously text systems work everywhere. Unfortunately, for Emoji and color fonts that’s a little bit. More complicated because there are Different color formats for different platforms, And so one font file needs To have a lot of data to support all of the Platforms at once And they can look different On different platforms, So yeah emoji as web fonts Is still I think, kind of — is a cutting-edge thing, But it can add.

Consistency – and I hope we see more developments – Of that in the future RICK VISCOMI And going Back to the Roboto at YouTube example: one Of the things I remembered that was kind of tricky Was when we would have font-weight bold in our styles, That would default to Weight 700 by the browser, But our designers decided that It looked best as weight 500, So we actually had to go back. And change all of our styles from font-weight, bold To font-weight 500 And it became kind Of a new way that we had to ingrain into Our style development, But there’s something new.

That’s Coming out called variable fonts, How would they help Address the situation, DAVE, CROSSLAND, Yeah Variable fonts can help a lot. It’s a very exciting. New technology, It’s part of the Opentype standard, which is the font format that that’s Widely supported in pretty much all platforms today And variations allows you To do runtime interpolation between different sort of styles, Or faces within a font family, So traditionally you would Have like a thin weight, a regular weight, a bold Weight and extra bold weight And in CSS you’ve only Had up to nine weights — 100 through 900 With variations, then you are Able to specify weight, 154 and dial in a very specific And dynamic weight You can animate these weight.

Changes using CSS animations And in CSS4 there’s more Direct support for this RICK VISCOMI So does that Mean that every font is now going to be able to be Completely customizable, Or are only a few fonts going To be eligible for this DAVE CROSSLAND Well, it is something that font developers Need to add to fonts, And so in that Way it breaks down the traditional wall between the Font maker and the font user And so variable Fonts create a kind of dialogue between the two, So as a font user, you Can customize the font, but only in ways which the Font maker has provided for, And so that means that you don’t Need to become a type designer yourself, but it means that you Have that flexibility that you didn’t have before And the variations are Not only for font weight, There’s, also font width, There’s slanting And there’s also optical size, And those are all part of The OpenType standard today Optical sizing, means that When you change your font size from 10 point to 70 Point then, the letter forms will actually react and Respond to that change, And so, as your font Size gets larger.

The letter forms will Become more elegant And as it gets smaller They can become more legible, more readable And there’s also all other kinds. Of variations, you can imagine, which aren’t part Of the standard and are specific to each font, Things like rounding and many creative options. Google Fonts is commissioned. To sort of experimental trial fonts from type designer David Berlow at Type Network.

The first is Decovar, which Has a lot of variations which are decorative so rounding Different kinds of serifs different kinds of Stroke patterns And this can be used as a Kind of graphical device, Because variations Can be animated, I think there’s a lot. Of potential there, The other typeface is Amstelvar And Amstelvar is A text typeface and it has a set Of parametric axes which go far beyond Just weight and width and into things like The ascender length descender length and A lot of variations which can be used together, To create more readable text, RICK VISCOMI, I’m Especially interested about variable fonts, We’re going to have to Have you back on the show once they’re a little Bit more established, Then we can talk about The state of them, But where could Developers go if they want to learn more about Any of these technologies DAVE CROSSLAND Microsoft Edge has on their developer site a Really good variable, fonts demo site That’s a great place to learn.

More about variable fonts, There’s also the Design.Google.Com/Fonts articles website, where the Google Fonts team publishes articles about type and Typography in collaboration with the Google Design team And then there’s Also material.Io, where you can get the Material Design, icons, font and learn more about Material Design guidelines, RICK VISCOMI, Well, there you go, The links are in The description so go check them out.

Share your web fonts stories. In the comments below Don’t forget to Like and subscribe so you can tune in For another episode of “, The State of the Web” Every other Wednesday, Thanks for reading and We’ll see you next time, [ MUSIC PLAYING ]


 

Categories
Online Marketing

Develop to Design – A guide to emergency design for front-end developers

I will be talking about develop to design a guide to emergency design for front-end developers. This talk is primarily aimed at developers working in small teams who find hiring a designer too expensive, or for people who are interested in designing the experience for their own products. The experience of using an application starts even before registration, and it has to be maintained even when the user is not using your product.

Even minor things like the way you format and send your registration mate makes an impact on the user’s experience of the app design. Is hard and as developers we tend to focus more on functionality, but it is fun and it is a problem and problem solving is what we thrive on. We need to understand that design is more than making things pretty and goes a long way in developing to make your user happy.

I would like to stress on the importance of making conscious design decisions avoid making design mistakes that lead to jarring user experience by understanding a few simple concepts while having robust functionality. That said, there are no idle clad groups to design just conventions. Who am? I am an intermediate-level front-end developer, who is learning about design and user experience for the user, because at the end of the day, you are responsible for what you deliver see a at meta refresh


 

Categories
Online Marketing

How We Designed Chrome – Designer vs. Developer #20

What you want? It’s always they want more and more, but they never use those things, and it’s really hard and quite brave thinks they know we’re going to script stuff away. There was internal talk about how chrome is built, and I think back to that time, where Internet Explorer was the dominant browser, Firefox was just was fighting and like the developer, tools were becoming quite prevalent and Safari was was, was just released.

I believe and Google designs to build a browser. So how do you start in that environment? Where there’s so much competition chrome was released in 2008 yeah, but actually we started on it in 2006, oh wow and the team at Google that started on Chrome was actually we were all working on Firefox. When I first joined Google, the beginning of 2005. The idea was to work on making the web better. One way to do that is work on making browsers better.

So we started out as a team working on making Firefox better a year and a half into it. We made the switch to actually building our own browser, and that was a big, big, complicated decision right, because you know we had already. We had been going down a certain path right. So looking back, I think or a number of factors right. First off we thought we could do a really good job, so that had to be true yeah, but also you know there were a lot of things about browsers in those days that I think created, frustrating user experience.

Yeah you got to go about going back 2006. You know applications like Gmail, yeah Maps and YouTube, and so on. These things were becoming popular and other folks were building complicated web applications like this and your typical browser. In that day, if you were to leave Gmail running overnight, you come back the next day and your browser to feel pretty sluggish and bogged down because of just the weight of these applications and so way back then we we had the idea.

That would be really nice to split up the browser into multiple processes. Right operating systems had gone through a revolution from the days of windows, 3.11 to Windows, NT and so on. Yeah we’re pre-emptive multitasking was the thing OS 9 to OS 10. Could we use pre-emptive multitasking? Could we take advantage of actually multiple processes on these systems for web browsing and seemed pretty pretty pretty like, actually seem possible? If you are thinking about a browser from scratch? Yeah I mean in terms of like the UX of again is like going back to the beginning of like browsers or the browser’s of that time.

It reminds me a bit like search before Google’s like search was basically portal sites and the search input field was like almost the most least important thing, but then Google came along. It’s like Nana, that’s the wrong user experience with when chrome came about. It was quite radically different because I know remember this phrase is a Content, not crime, yeah um, so just making that kind of UX decision of like you know, because it was all toolbars and remember when you install anything everything.

It’s all fact you back, then, is very common to find a user with internet explorer and they had installed multiple toolbars. So it’s not just one tool: Bartlett, multiple tours and there’s it’s great absurd. Screenshots of people was, you know those browsers had like five toolbars and it’s not a lot of room for the content right. So one of the things with Chrome’s content now chrome idea was to really remember that the whole point is people want to engage with the web application of the website.

The web content and the browser site try to get out of the way just facilitate helping. You use the web, and so even when we designed the extension system, we resisted the idea of having a first-class way or proper way to do toolbars or sidebars. We really didn’t want extensions over you really. You know using up screen space when that screen space to users really want that for the content. So we designed things, like extension buttons.

That would be the primary access point tried to guide things in a way that would um preserve that notion and even the UI of chrome itself. We tried to keep it very minimalistic. We you know we spent a lot of time in the early days. Thinking, if we’re going to introduce another browser, it’s got to be so awesome right, it’s got it and what does that mean? It’s got to have like the most amazing features.

It’s got it like have a whole new take on browsers. It’s got to be radically different. Ui, surely that would be the reason why we’re doing this right yeah, but in and we tried many different things: putting tabs on the side. You know fancy user gesture kinds of things, Mouse gesture types of things I mean none of that really felt right, and we can do that process. We came to realize what what actually we were doing and what really would set chrome apart is that as a browser, just works better yeah like creating software.

That’s not frustrating is actually hard to do yeah, and I think users appreciate it and so started to think about it, and what does that really mean for us? It was like all products should be pretty simple right should try to try to come up with elegant UI choices. Keep it simple: it should be performant but, like I said, browsers, browsers, have a history of being janky and not well-behaved, and and and you, the user has an expectation when they click on something, especially when it’s the chrome of the UI and when it’s the the Browser UI, they click on it.

They say close this tab. It should close right away yeah, you know par for the course. Those days was. You click close that click to close that tab, and you see you might see a beach ball on Mac, os10, yeah or nothing happens on Windows. You start to see the application not responsive problem right, but in chrome, because we went with this multi-process architecture. We were able to guarantee that if you click close on the tab, it’s gone yeah and those are examples of like responsive UI that you know.

Sometimes, when we talk about performance speed, we mean like how did welded perform on a benchmark, but a lot of times. It comes down to like was experience, smooth, responsive to the user input. Did it actually do what the user wanted it when the user wanted it, that kind of thing, so, simplicity, speed. We also put a big focus on security and stability, so we had these four s’s yeah, and that was the thing that we just repeated to ourselves: if you’re not sure what to work on work on one of those things.

Yes, work on making a simpler design work on making a more performant work on making it. You know more secure so and really with security we mean making it so users feel safe on the web. I feel in control of their privacy. They understand what’s going on, but also that it’s the system is protecting you from malware and so on and again our multi-process architecture not only helped us make something more performant, but also something more secure, a browser more secure and, finally, it helped a lot with stability.

We knew that starting from scratch, with a browser that might actually be the biggest concern, is it going to just crash? Is how do you? How do you exercise enough of the browser in your testing to know that you’ve got it right? We based the browser on not on Firefox, and we based it on WebKit, which is what, at those days that was Safari 2.0 Safari, 3 had just come out and WebKit Safari was known to not necessarily be the most compatible with the web right.

Modern web standards, driven by Firefox, were just becoming a thing. Internet Explorer has had a lot of quirks about it. Internet Explorer 6.0. A lot of quirks, especially thinking about like flowed yeah, that with the flow, though we had a box model. All these things were very impactful to like how web pages were built. If a developer was testing a lot with Internet Explorer, there would be the quirks that they would code to if they were testing.

A lot was Firefox we’d, see that and the Safari it was like. Well, probably, they weren’t testing with Safari, and so it was a big challenge in a big fear. When we launched Chrome, is it going to just crash all the time yeah? How are we going to? How are we going to manage that? So we put a lot of effort and in fact that same issue in forms like our choice of the user agent string. If anybody’s seen the user agent string of Chrome, it’s kind of hilarious because it mentions ever every browser ever since chrome came along.

And that was part of navigating this whole like does it work conundrum we always taught in software development and UX, add more features, because more features means more value, so I mean: was there ever pushback or was there like a fair, maybe we’re taking away too much From the browsing UI, we certainly ugly launched, and it originally chrome, without an extension support, and even the bookmark manager when was was, was revised quite a bit.

I’m going to post the initial beta things like this, so we we intentionally went with a very minimal approach, but we also really encouraged the team to try a lot of things with the idea that, knowing going into it that we would probably throw away things that Aren’t good yeah, that was the I don’t know the mantra if you will like. Let’s just try a lot of stuff and if it doesn’t work it’s okay, we just throw died, it’s not the end of the world.

We don’t have to ship everything we dry. I think that was really liberating and really helpful, because there were a lot of folks on the team who had different had had interesting ideas and and it’s empowering for people to try stuff. But it’s also, you know appropriate that we, we don’t just say because we built it, we should ship it looking back. What would you say were the best decisions you made and also for two part.

What would you regret in terms of like oh yeah, things that you did, that you’d wish you hadn’t? I mean you can also I’m an engineer. I was definitely an engineer at those days and I feel really good about some of the decisions we made. As an engineer from an engineering focus, you know we really put a lot of. We talked a lot about how important was that we were building a product, not building a platform.

I mean ultimately is a product that carries the web platform, but what I mean by not building a platform is that sometimes there’s a temptation as engineers to go off and build framework and and tools for creating the product that you’re actually there to create you. And we really resisted that a lot tried to make sure that we focused all as much of our energy on like actually building a browser which was very helpful to make sure that that that’s what we did so, for example, we said first we’re just building a Windows browser – and that meant, let’s just use win32 straightaway, all the Microsoft API is not looking for any cross-platform toolkit framework to build our UI.

Yes, one day we’ll bring this to Mac one day, we’ll bring it to Linux. You know, and so on, but like for now we’re just building a Windows application and when we went to finally build a Mac product a product for us 10, we told some of the engineers at Google. We said hey, you want to come work with us. We’d love for you to build the best browser for OS 10, and we want you to approach it. The same way that we approached building for Windows, which is all the UI, should be cocoa.

It should all be native, and we want you to have the freedom and flexibility to both embrace the native operating system primitives, but also move quickly as those primitives change, as the iOS evolves. So, let’s build a Mac focused product again with this idea that it’s we’re building product on a platform for building browsers, but what ends up happening as you do this and we did the same thing with Linux.

What ends up happening as you do this? Is you know we start to realize. We were coding same thing three times, yeah right and later on. Things like Android came along and iOS and Chrome OS, and so our world got a lot more complicated and what we ended up doing is, or is this arc from the singular I’m building a product to I’m starting to build platform things that helped me build that Product across and different platforms, yeah and that came afterwards – and I think that was actually somewhat healthy in a bit it.

To a certain extent. I kind of have some regrets that we built Chrome so much as a monolithic product. So while there is some code structure, that’s healthy and good, and – and there is somewhat of a layer cake, if you will there are – there – are some cuts that some some extra layers in the cake that should have been there. And now we have a lot of complexity because we didn’t make some of those cuts earlier.

We didn’t modularize necessarily as much as we should have. But again I think that came from that that focus some were just building this product and he does. I don’t need to be extra. We don’t need all that extra modular modularity, and now we find ourselves wishing he had a maybe done a little more, a little more forethought on that. What would you say, the decisions that were made that were actually really good to the success of a break, yeah yeah, so design examples in engineering examples.

There was this one one concept that was came up very early, which was – and we wrestled with this a bit. So the content area of a tab right, we started with the idea that there are some. We will actually have some browser UI that lives in the tab. So, for example, when you open a new tab, page there’s there’s some content shown to you, suggestions about things. You might want to do yeah. We started out building that natively and we started to find ourselves discovering an uncanny valley, because development users have this expectation that things inside the tab behave like web pages.

But building that not using web technologies meant that some things were subtly not right: yeah selection, behavior, wasn’t there context menus? Not there and the same. You know just things were subtly different, and so we scrapped that and we built the new tab page using web technology, and now it fit better everything we didn’t have all those little niggling little bugs you just felt natural. It felt natural it fit with the product.

On the flip side, we had some dialogues and some of those dialogues, mostly they were built natively, but a few of them were built using web and they never felt quite right, and so then we came to this. Discover that, like, let’s be opinionated about this, if it’s a dialog, it’s done natively and if it’s in the content area, it’s done with the tab, and then we avoid this sort of uncanny valley situation.

When chrome came out, there was a designing for best viewed in Internet Explorer, 6 yeah, and it’s interesting. You say like at the time. Webkit was not the priority of web developers. Now, we’ve shifted 10 years later, we’re seen best viewed in chrome or best viewed in WebKit browsers. So there’s this constant fear that we’re possibly entering back to the past, where, if, if, if development stops, then users and like the web technology becomes like a stagnant, oh yeah, that’s a great question.

I think that oh there’s a couple different things that happen with ie6 right, so, first off Microsoft stopped evolving the guys and we’re not stopping evolving api’s. We our mission, is to make the web better, and so it continued invest in that and the way we invest in that is, it’s very important to work with the standards community, the other browser vendors in particular and web developers, so that we get it right.

One of the dangers of shipping an API, if you’re the only one, only browser shipping it is that you might come to find that there’s a better way to do that. Api, yeah, a better design and then the end result is we’ll be tempted to ship. The new design as well the better design, but we won’t we’ll – have trouble leaving behind the old design so now we’ll ship, two ways to do something yeah or in the worst case three ways to do something.

If you look at CSS gradients, you will see. There’s multiple ways: yeah – and this comes from this – this this phenomenon. Where browser ships it early, then they learn that oh gee. I wish I’d done it differently and then they ship it that way too, and then oh yeah. I wish they would do it differently and they ship it that. Finally – and so you end up with a multitude of ways to do things in the web platform, gets really complicated and we don’t want the bad develop web developer to be thrashed by all of that.

Right, we want to keep it simple and make sure the api’s work well, so we want to do our do a good job, and that means spending time with other browser, vendors spending, time with web developers, learning understanding all the use cases and being very deliberate in The standards process, but we should still be able to ship something. Finally, and sometimes we do have to take some calculated risk yeah right.

Sometimes we are the first browser to ship an API, but we hope to do that in a way that stands the test of time, you’re looking for pain, points and you’re, trying to understand the why it is that people have these problems so that you understand their Mental model and you avoidable, designing in that way again.


 

Categories
Online Marketing

How to check for accessible colors — A11ycasts #17

Really Really different, Whereas if you take two colors that are very Close together on the color wheel, it ’ s, going to be harder to tell the two apart Now the reason why this is important in web Design is because often times our whole goal is convey some information to the user, usually Through text and images, But if the contrast of our text is a little Too subltle and too mixed in with the background, it might be difficult for the user to read.

The page and that might sort of degrade the user experience. So what I wanted to do today is walk through Some of the process that I use to sort of check the page and figure out if it has appropriate Contrast and how to tune it up if I find some issues But to start follow me over to my laptop And I have a little presentation that I want to show you It kind of walks through how we measure contrast.

On the web, So here I ’, ve got a set of text boxes on A white background, and up above you can see, I ’ ve, got these numbers up here for some Contrast ratios, So I ’ m measuring in terms of luminance The difference between this foreground color and this background color Now on the web. We actually have guidelines That try to instruct us what our contrast minimums should be So the web content accessibility guidelines, In section 1.

4.3, they say for body text: you want to aim for a contrast: ratio of around 4.5:1, for, like smaller text or your general body copy For larger text, something that is 14 point. Bold or 18 point you can ratchet that contrast ratio down just a little bit to 3:1. So if we go back and we look at our image – Of contrast, we ’ ve got these first. Two examples would meet that minimum contrast requirement.

So this one is just pure black on white, so its 15.9:1 Thats really high contrast. This one is a little more of a subtle grey But we still have 5.7:1, which is pretty nice. These last two, though, are just a little too Low contrast, so they wouldn ’ t quite meet that requirement. We can also actually bump this up, though Theres a enhanced contrast recommendation in the web content accessibility guidelines, As well So this is for situations where you know you Might have either an older audience or a low vision audience.

In that case, we can bump the contrast ratio. Up to 7:1 or 4.5:1 for the regular body text. So if we go back – and we look at this example – Here, really only this first one would meet that enhanced contrast, ratio requirement So consider who your audience is going to Be when you ’ re, building your site or application, and that can help decide where you want to Aim on the contrast ratio scale, I use a number of different tools to try to Figure out, if I ’ m nailing those contrast, ratio, minimums And actually my friend Louis, has done this Really cool thing where he has put together this accessibility testing for the web handbook.

Called OATMEAL, which stands for Open Accessibility, Testing Methods for Experts and Lay folk. He actually has a whole guide in here about How he measures color contrast and the folks on his team do that, And so we ’ re going to kind of follow this Guide a little bit, We ’ re not going to use all the exact same Tools, but this is a really cool methodology that you can check out and use in some of Your own apps to maybe figure out your process, So what I ’ ve got here is a website called The accessibility blog and we ’ re, going to follow two of the steps in that OATMEAL Guide doing a sort of semi-automated check using a tool like aXe And then we ’ ll, do a more manual spot.

Check using a WCAG, color contrast analyzer, So starting on this site, the first thing: I ’ m going to do. Is pop open, my DevTools, I ’ ve already installed the aXe. Extension For Chrome, If you actually check out our previous episode, On A11ycasts and I’ll leave a link to this down in the show notes we covered all the different Ways that you can install aXe on your system, So I ’ m just using the extension for Chrome Here – and I ’ m just going to open it up and check out this page and hit the analyze button, And you ’ ll – see that it tells me over here.

On the left that I have a few elements that do not have sufficient color contrast, I ’ ve. Got about 7 issues here: It ’ ll! Try to give me a CSS selector to the Elements that need some work, but there ’ s an inspect button that I often use to just Inspect the element in the Dom – and I can scroll up and say who exactly is this Alright, so we ’ re starting of with these Little anchors up here in our navigation – and this is one those areas that I see a lot where It looks like we ’ re, actually pretty close to having good contrast here, but we ’ re.

Sort of on the bubble – it ’ s, a little unclear. Are we hitting that or not So? What I ’ ll often do. Is I ’ ll. Take this Foreground color and I ’ ll, take this background color and I can use another tool this one That I often use is called Lea. Verou: ’ s, Color Contrast Checker, so I ’. Ll also include a Link to this down in the show notes, And then we can just drop in our foreground.

And that background color, and we can see that the contrast ratio of these two is 3.6 So its not quite where we want to be for smaller text Again, we want to bump that up to about 4.5. So this is an area where I know that I need To go back, and since I also have some of these elements right here that are even lighter, And since I know that this is pure white text – and I can ’ t make it any brighter, my only Real option here would be to make this header bar a darker blue, so that all three of those Links pop a bit more Another thing that we might notice in our Tool, if we step through some of the options, is that we also have areas down here like This little sub-heading, which we ’ ve, got a kind of subtle, grey on white thing, going On and again we can take that into Lea Verou: ’ s, Color Checker and we can figure out.

You know, Are we on the bubble One option if we want, we can make the text Bigger so we can maybe hit 3.0 contrast ratio That ’ s one option we just make the text Sort of larger, if we ’ re on the bubble Or we darken the foreground text because The background is pure white, so we can. ’ t really make the background any lighter, So we can go through and we can work through. Our CSS and tune those colors up and that ’ s really what a tool like aXe is doing It.

’ s actually, looking at the CSS values, For background and foreground, But there are some situations where a tool Like the aXe inspector is not going to be able to tell us if we have contrast issues And that ’ s in situations where we don ’ t have clearly defined foreground background. Colors So, for instance, over here on the right, I ’ ve, Also got this advertisement, and these are pretty common, where you have some text over An image background and the text itself might even be an image right So for a tool like aXe.

It can ’ t pick out. Two distinct foreground background colors, so we ’ re going to need to use another tool. To figure out, if we have contrast issues over here, So the tool that I like to use is the WCAG 2.0 Color Contrast Analyzer, It ’ s, another Chrome extension and I ’ m. Going to warn you, it ’ s a little bit buggy, but I ’ m going to walk you through how I Use it and maybe point out some of the issues, so you can work around those, But basically what we do here is after we ’ ve.

Installed the extension we ’ ve got this extension up here in the top right click. On that, What I found to be sort of an issue here is On retina monitors, if you try to tell it to analyze a region and you select a region, It ’ ll, be sort of off Like it sort of zooms in and it doesn. ’ t. Seem to be able to handle retina that well, So, instead, I ’ ll tell it to capture visible Content And what this is going to do, you can see That it ’ s already sort of zoomed in what this is going to do.

Is it ’ s going to try To scan all the pixels on the page and it ’ ll highlight the contrast between that pixel And the ones next to it, So you can pick out those areas that have Low contrast, While it ’ s scanning, so it will take a while Right, it ’ s, only up to 27 %. So far, so I can walk through some of these settings for You, though, So the first one here is asking us what level We ’ re measuring at So again.

I mentioned that we have the minimum Contrast ratio of 4.5:1 or we can take it all the way up to the enhanced contrast ratio. Of 7:1 right So again you can choose your target there. Then there ’ s. Also this pixel radius option And at first I wasn, ’ t quite sure what this was for by default, it ’ s set to one. So it ’ s. Going to compare the two pixels next to each other, but it goes all the way up to 3 Often times when we ’ re working with text.

On the page, it ’ s, not a clearly defined. The text ends here and the page starts here. Instead, it ’ ll, do a sort of anti-aliasing Thing So if we go and we look at the image of our Text this D: here it ’ s, actually sort of three colors. So we ’ ve got a couple greys and then the Solid white and that ’ s, what forms the body of that character When it ’ s, asking us what pixel radius that We want to use it.

’ s, basically asking us what sort of anti-aliasing range do you want? To accommodate, for So what I do is I tend to set it to 2. That way I can analyze a couple pixels next To each other, Alright cool, so it looks like it just finished. And what it ’ s doing here? Is it ’ s drawing these white outlines to show us areas of high Contrast And any place where it gets sort of noisy Kind of like right in here we can tell that we have slightly lower contrast If we go over and we look at that ad, we can See that yeah we definitely have some issues here So up at the top, where it says developer.

Friendly, it seems like it: ’ s, doing ok.. We can toggle this mask on and off. So when We hide it. We can see that when we get to the body text inside of this ad, it actually Is even more translucent than the header and when we get down to the bottom and it Mixes with that background, it ’ s, really really tough to see. So this is an area where we know we might Have to go back to the designer and say “ Hey, I can show you this and I can definitively Prove that there is a contrast issue here, and this is a place where we need to maybe Tune it up Either give the text a backing, so it pops A little more or figure out if we can use a different background image, something that Doesn, ’ t interfere with the text as much ” So yeah using these tools and using a guide.

Like OATMEAL, you can, through you, can analyze the contrast for your site or application. Maybe look for problem areas tune. It up make sure users have a better experience That about covers it for today. So if you Have any questions for me, as always, you can leave them down below in the comments Or hit me up on a social network of your choosing, As always. Thank you so much for reading. And I ’ ll see you next time.

If you want to learn more about color contrast, We ’ ve got some additional articles. You can check out in our playlist Again thanks for reading and I ’ ll see You next time,