Tag: design

Today, on Episode 14 of The Edge of Innovation, we explore web design best practices and discuss Paul’s new book on this topic.

Show Notes

Sign Up to Download Paul’s new eBook: “24 Website Must Haves”
A Complete SEO Solution
How to Attract Interest in Your Business
Tips for Killer Landing Page Design

Transcript

Sections

Consistency
Choice of Images
Navigation
Adobe Flash
Accessibility

Introduction

Paul: This is the Edge of Innovation, Hacking the Future of Business. I’m your host, Paul Parisi.

Jacob: And I’m Jacob Young.

Paul: On the Edge of Innovation, we talk about the intersection of between technology and business, what’s going on in technology and what’s possible for business.

Consistency

Jacob: So, Paul, the next thing you talk about is maintaining consistency. And I have to say that this one strikes a bit of a chord for me, because every, almost every blog I’ve ever gone to, or been interested in at some point, has had a post that starts out, “Sorry I have not blogged in a while.” And it just seems like consistency is a major problem.

Paul: Well, it is. I mean, it’s a lot of work. You know, we’re doing some active social things for several clients right now, and it’s a lot of work. It never stops. It is something you have to consistently doing every day.

You know, if you think about it, you know, you go to work, if you have a job and you go to work, and I you try, started dressing like a slob, your boss is going to say something. Or maybe you’d just get fired. You know, the performance suffers. Or the perception of you is going to be different. And it is relentless. You have to do that every day, because they are paying you money to do something for them.

The same thing goes for the web and all this internet and social media stuff. You can’t just do a little bit of it, there’s a voracious appetite for information out there. And if you’re not part of that clamor, for lack of a better word, you will be forgotten, because something else will fill that space.

So, if you want to be top of mind, right there, you need to be coming up with an article, you know, blog posts, tweets, all these different things very consistently. And that consistency is on the order of like three blogs a week.

Jacob: And I would say that, in some ways, it has to be an assessment of what’s your capacity, and then what can you maintain. And so, if it is going to be the three blog posts, maybe they’re not three blog posts that are a thousand words each, but they are blog posts of maybe a hundred words each that are consistently done. And those are the type of things that capture and maintain an audience for what you’re doing.

Paul:  Right. If you, if you turned on television, and they had a repeat, you know, of your show. “I saw that. I don’t need that anymore. I’m going to turn it off.” Or if you… I don’t watch news on TV, but if you watch the news, and you turn it on, and the person is all disheveled and the lighting’s bad and the signal is bad, and they talk about stuff that happened two weeks ago, you’re like, “I don’t need this. You know, my time is valuable.”

So, that consistency. And I also think that there’s a consistency to design and layout and the way it looks, so that people can navigate it, so that it feels the same. That, that’s significant.

Jacob: Yeah. Excellent. And so, along the lines of how things look and feel, you go on to write about using the right images. So, talk me through that.

Paul:  You know, there’s a lot of stock photography out there. Stock photography is basically a photographer goes out and takes a picture, and submits it to these catalogs, and people use it, and it’s posed people in all these different scenarios. And, there’s expensive stock photography that looks pretty good. And then there’s bad stuff that looks really bad. And you shouldn’t use it. It adds no value to a site to have stock photography.

You can easily find very good, sort of, contextual pictures, like you know, a road or, you know, a train, or something like that that evokes an emotion that you can use and stuff. And there’s great sources for things like that. There’s some open source ones that are free, and…

Jacob:  You can find those links on the show notes for PaulParisi.com.

Paul:  Yeah. Absolutely. But just to get three or four people standing around pointing at a computer is just not good. You will get so much better if you hire a reasonable photographer, friend or whatever to come in and take a decent picture. You’ll get more benefit from that than from using any stock photography.

In fact, I’m at the point… Well, I’m a little sensitive to it, because I’m aware of stock, and I can see it. I’m just like, “Is this company is business or what’s the deal here?”

We did one for a client that we did use a piece of stock photography. It took us a month to find it. You know, it was a train car that, and it’s a spectacular picture. And I don’t think you’d find it on a lot of websites. But that was stock. We actually tried to have somebody take some pictures. That didn’t work out the way we wanted. But this was a spectacular picture, and it looks great. But then the rest of the photography in it, you know, we wanted to have professional photography taken.

Choice of Images

Jacob:Â Well, and I think that, I mean, along those lines, you have to be very, very careful with your images, because you could get in a lot of trouble by just Google searching.

Paul: Oh, definitely.

Jacob:  Using… I mean, we did it. We had a client where we were doing a website, and they said, “Use this picture.” And it was up on the test website, and I did a little bit of just two minutes of searching, and I was like, “Well, guys, first off, this is a copyrighted image, and then secondly”they were, they were doing industry work and you know, I was like, “This is a plant that’s in Iran. Don’t know that you want that association with your website.” And it was very interesting to kind of recognize that, you know, most people will just grab a picture off Google image, and they’re just throw it in. And they can get sued, like legitimately. It’s a legal issue.

Paul:  Yeah. It sure is. I mean, that’s… Having been a photographer myself, that is a creative work. And it’s like writing a book. And somebody using that, it’s wrong. And it’s very easy to prove that you’re in the wrong, because you… It’s a direct copy.

So, using the right images, critical. You know, absolutely critical. And I would say don’t use stock photos.

Jacob:  Excellent. And along the lines then, going back to sort of the skeletal work of the website, the navigation and the design of the website, talk us through this chapter on navigation.

Navigation

Paul:  Sure. Well, navigation just… You know, we all use GPSs because we don’t know how to get there, and things change. You know, the roads get closed or we’re using Waze now because of traffic and all these different things. Well, your website shouldn’t be difficult to navigate. It should be drop-dead simple. And you don’t want to hide things under a lot of menus. So, make the navigation simple, fairly flat.

Now, if you’re Samsung, that’s going to be hard, because how do you approach Samsung? Am I looking for Samsung USA, or am I looking for Samsung headquarters, or am I looking for refrigerators? That’s a hard problem that most of our customers won’t have. They may perceive they have that, but you need to force them, you need to force yourself, into thinking through it from a simple structure.

You know, if you really have to say, “I do wedding, birth, child, teenager, high school graduation photos, and those are all going to be menu items,” you’re going to make… It’s hard to choose that.

Jacob:  Right. You need to choose something like “Life moments.”

Paul:  Yes, exactly. And then maybe have a longer page that has a navigation at the top that says, “Weddings” and things like that. And it lets people experience your site without having to dig through it.

Jacob: Yeah. Excellent.

Jacob:  Alright. So, from navigation and figuring out the correct flow of a website and the images along those lines, how do we think about animation? You have a chapter here on animation.

Paul:  Sure. Well, in the early web, you know, things moving around, like gears or dots or marquis or…

Jacob: GIF or “JIF”, whatever you…

Paul:  Yeah, all that kind of stuff, you know, there was all, “Oh, that’s cool,” and you thought that would be interesting. Well, we’ve learned that it’s a little bit disturbing to have unexpected things move on a web page, because you’re processing it where your eye goes by the nature of who you are. But now, if you have something in your peripheral vision move, you all of a sudden get distracted by that. So, now you’re literally fighting for your viewer’s attention.

So, animation is not a good idea in any form or fashion.

Jacob:  Now, would you include audio and, in addition to video animation, audio in some ways, that automatic–

Paul:  Well, yeah. I would never put audio on a website. First of all, it could, embarrass somebody. In other words, they’re browsing in a train or a restaurant, and this music starts playing. And it’s like, “Oh, gee. Close that.” It may not be anything bad, but that’s…

Jacob:  Well, I go to dictionary.com and somebody automatically starts talking to me about some word meaning, and it drives me up the wall.

Adobe Flash

Paul:  Right. So, I do think that you want to be able to have people play it when it’s appropriate. Now, what… A little bit of background is Adobe came out with this technology, I don’t know, probably 15 years ago now called Flash. And what that was is a way to animate things on the web. And it was revolutionary at the time. Steve Jobs didn’t like it for some reason and decided he was not going to support Flash on the iPhone or on any iOS devices.

And there was a lot of reasons for that. Not… The biggest one was security. There was a lot of Flash security holes, and you could use it to do things that weren’t good. But that wasn’t the primary reason he didn’t like it. And I honestly don’t know what it is, but I think it’s actually quite technical, and why it does work and doesn’t work. And it’s a proprietary mechanism to do it.

Html5 was not ratified at the time. It was coming out, and it had the ability to do everything that Flash did. So, there are ways, if you want to make an animation, in Html5. Unfortunately, there’s not a lot of tools to do it yet. Let’s say you have a product, and you want an animation of it that… Or maybe even like, let’s say you have a map, and you want to show how the little car drives across the map, and you know, that’s your ad or whatever. You didn’t want to do a video but you want to actually animate pieces of it. You would want to do that in html5.

If you do it in Flash, which people are still doing, and people open it up on a browser, Google Chrome, it won’t play. If you open it up on an iOS device, iPhone or an iPad, it won’t play. So, now you have lost all of the investment in that.

And if you have things that are currently Flash, you need to seriously take them down, because if they open it up, there’s going to be a box there that says this requires a plugin.

Jacob: And then they have to go download it, and it’s confusing.

Paul: Yeah. And it honestly… Downloading that could compromise your system, because Flash is that exploitable. And so It annoys me, some of the big companies that still have Flash requirements.

Jacob:  Sure. I run into it regularly.

Paul:  Well, I mean, YouTube is a good example. It requires Flash. Now, they’re changing that. They’re, I believe, like over the past week or so, it’s been, they’ve finally moved over to completely html 5.

Jacob:  Oh, nice.

Paul:  So, that’s a big thing. And so, but animation isn’t a generally good idea. You know, there used to be, like, you know, you’d have a horizontal bar that would have like a shine move on it, and that’s just not a great thing.

The only animations we really use are image sliders, where we have a banner image up at the top. That sits there for five or six seconds and then shifts to a new one.

But even those, a lot of people are saying that there isn’t…that’s not really good. Because depending on how much people sit there, they may never see your first, second, or third, or fourth image. So…

Jacob:  And I think that goes along the lines what we’re talking about with first impressions. What exactly is your website for, and what are you trying to do? Are you trying to be cutesy for people and give them a little fun experience? Or are you actually trying to communicate information and appeal to them for your business?

So, along those lines, what exactly do you mean with this chapter on accessibility?

Accessibility

Paul:  Well, you have to make sure that the site works with the technology that the people are using. There’s two aspects to accessibility. One for handicap. So, people that are not able to see or see at good resolution, you want to make sure that you have accessibility parameters built in. So, you want to have a picture that is of a train car. But you want to have alternate text on that that says, you know, “train shipping car,” so that when a screen reader technology goes through that and reads that to a blind person, it will say, “Image of train car.” So that’s one huge aspect to accessibility, and it’s often overlooked.

And the same thing where you have a… We were just working on a site yesterday where we have a dropdown menu, and if you click on the menu item, it drops down. But you can also click on the menu item and have it go to a page. You know, if we do that in the touch environment on iPad or iPhone, how’s the person going to know that that touch does two things. So, don’t make it do that. When you click on that, the only thing it does is drop the menu down.

And so, that’s really where accessibility is and then making sure it works across browsers. One of the biggest banes of the internet’s existence has been the existence of Microsoft Internet Explorer 9 and even previous versions, because it did things differently. So, we as developers had to always make these, “But if it’s Internet Explorer 9, do it this way.” All these caveats.

And it was such a pain in developing applications, web applications for broad use, because you’d basically have to write the application, then you have to put all these ifs in. You know, the way it dealt with the way the font size changes, or whatever it might be, a box model or things like that.

Thankfully, we can pretty much abandon that now. The number of people that are using IE9, you know… There’s even in a lot of the platforms, there’s a piece of code that will say, “If you’re viewing this site on IE9, it may not work. Download a more modern browser.”

Jacob:  Please join the modern world.

Paul:  Well, yeah. I don’t know why people would insist on not doing that. I don’t think they realize it, you know.

Jacob:  Excellent. Well, Paul, thank you for talking us through the first part, two parts of your book, 24 Must Haves for Your Website or 24 Website Must Haves. And we’ll be back next week to talk about the second part of Paul’s e-book, 24 Website Must Haves.

Also published on Medium.