Website Design

Published on June 2016 | Categories: Documents | Downloads: 62 | Comments: 0 | Views: 408
of 8
Download PDF   Embed   Report



10 things you can do to improve your Web site right now We often look at our Web sites and know that they need to be overhauled, but we just do not have the time to do it. A major Web site redesign project can takes weeks or months (depending on the size of your site and the technology underneat h it) to complete. Meanwhile, your site is turning away visitors right now. Here are 10 easy things that you can do to improve your site. 1: Make your contact information more prominent Most companies sites need to sell products, services, and so on. By making your c ontact information easier to find, you raise trust and allow visitors to initiat e the sales process more easily. If you have a phone number you want customers c alling, it should be in large letters, at the top of every page. If you have a Co ntact Us page, it should be one of the most obvious links on every page. 2: Don t mix HTTP and HTTPS Mixing HTTP and HTTPS elements on pages can lead to annoying security warnings a nd incomplete page rendering. Using relative links throughout the page s HTML, and having your AJAX calls detect what protocol to use, will ensure that all conten t comes through the right channel, eliminating those problems. 3: Add better analysis It takes only a few minutes to add Google Analytics to your site, which will hel p you get a long-term idea of your search engine situation and what pages users have problems on and will highlight all sorts of other information. If you have a Web application, newcomer Totango (currently in a public beta) provides simila r instrumentation specific to application events, and it is also easy to add to your application. 4: Create print-specific CSS styles Don t you just hate it when you print a Web page, and the page is mostly whitespac e and navigation? What looks good on a monitor in landscape orientation usually does not work so great on the printed page. Luckily, CSS allows you to define (o r override) styles based on the type of device viewing it. Creating some print-s pecific styles is easy, I ve found that just omitting the navigation, banners, foo ters, etc., and making it consume the full width of the page can do a lot, and i t takes only a few minutes. While you are there, make another set of changes for mobile browsers that resizes and repositions elements to fit mobile devices bet ter. It may not be as good as a mobile-specific site, but it takes a lot less ti me, and anything is better than nothing. 5: Make sharing better with image_src Ever wonder how some sites get their logo or just the right image to show up aut omatically when you share a page on Facebook and other sites? That s done with the image_src item. This simple 30-second change gives you much better control over how your company looks on social networks and makes it easy for people to sprea d the word about you. 6: Ditch the dead weight It s easy for a site to accumulate a lot of extra s like references to JavaScript that is no longer d see what is being included that is not actually r page load speeds will improve and users will be 7: Use alt text junk over time, especially thing being used. Audit your site an needed and get rid of it. You happier. and devel than give sense of tools wil

This one has been mentioned so many times by others, yet Web designers opers still fail to heed it. Putting alt text on your images does more a useful tooltip, it allows search engines and disabled users to make your site. Adding the alt tags takes very little time, and a number of l even identify images without it for you.

8: Write for your audience, not your c-level execs Take a look at the wording on a lot of sites, and they seem more like the new emp loyee handbook than something designed to attract customers. The problem is usual ly caused by management teams who are trying to convey a corporate message (ofte n using a lot of jargon that means something to employees but not to customers). Site visitors don t care about that message. Put yourself in the customers shoes, and reword your content so it speaks their language, not yours, and you will see people sticking around longer. You may even get some search engine benefits too . 9: Get the content out of PDFs and into HTML Many times, we re fed a bunch of content for the site in PDF format (or as Word do cuments). Whether it be through a lack of time or some mandate from someone, the content goes onto the site as-is. Unless there is a compelling reason to keep t he content in those formats, you should take the time to get them into HTML page s instead. My experience has been that most visitors really dislike Acrobat or W ord popping open or a file downloading unless it is absolutely necessary. 10: Remember that silence is golden If there is one thing that will drive users off your site quickly, it s a page tha t makes noise without their consent. All videos should either be muted by defaul t or should require a deliberate user action to start playing. Do spot checks of any advertisements on your site to make sure that they aren t playing videos with the sound on by default as well. Users remember which sites surprised them with a barrage of noise, especially if it happened at the workplace or some other em barrassing moment, and avoid them like the plague. ******************************************************************************** *************************************** 10 ways to make your Web site design project go smoothly Politics, lack of planning, overlooked details, and poor prioritizing can compro mise your Web design or redesign effort. Justin James offers a simple roadmap to lead your project to a successful conclusion. Time and time again, I have seen companies struggle with Web site design project s. Initial Web site design and redesigns of existing sites may each face a few d ifferent challenges, but overall, they are similar. My experience has been that these problems are not technical issues, but project management and cultural iss ues. Often, no one follows a game plan they just blindly rush off and attempt to re/design the Web site with little forethought. On the other hand, I have also been through a number of successful Web site re/design projects (measured by, Did we get a good-looking, usable Web site deployed in a reasonable amount of time? ) . Here are some of the things I ve learned to do that will help make any Web site design project go smoothly. Note: This information is also available as a PDF download. #1: Politely keep those who lack a clue out of the process It is amazing, isn t it, how all you need is a rumor of a Web site project and the c ompany president, CFO, VP of Facilities, and other people with zero Web design k nowledge suddenly inject themselves into the process? Your job (or your project manager s job) is to get them out of the process as soon as possible. There is a right way and a wrong way to do this. The right way is to show these other groups that you will do more than pay lip service to getting their input, while also showing them that you will come to them with a targeting group of que

stions driven by their areas of expertise. The wrong way is to just stop invitin g them to the meetings or ignore what they have to say. When you involve them in the process in a limited subject matter capacity and take action upon their recom mendations when sensible, everyone walks away feeling like they played a part. W hen you give them the cold shoulder, those who have been shunned will turn every problem with the new site into an opportunity to say, If only they had listened to me . #2: Prototype on paper before coding One of the attractive aspects of HTML is that it is relatively quick and easy to prototype designs in. One of the fatal flaws of too many Web projects is that d esigners start prototyping in HTML before doing anything on paper. HTML prototyp es do, of course, play a valuable role in the design process, but my experience has been that it is best to not create any until the design concepts have been n arrowed down to one or two (three, at the most) potential designs. HTML prototypes take a lot more time to create than paper prototypes (particular ly of the wireframe type). You can sketch out a few boxes on paper to represent na vigation elements, logos, footers, etc., in a few moments in a meeting, and ever yone can get the idea instantly. Alternatively, you can spend 30 minutes hashing together a skeleton of HTML, adding Lorem ipsum text all over the place, findin g a location where the IT department will let you upload it, putting it up, test ing it, tweaking out a few obvious glitches, and sending out an e-mail with the link. After all of that, what happens? The people who look at it get confused because it is a basic prototype. They want to know where the logo is, or why they clicke d on the Contact Us link and nothing happened, or why the navigation elements ar e in the order you put them in. In other words, HTML prototypes are deadly, prec isely because to those inexperienced with the concept of a prototype, it looks l ike a really bad design. They get hung up on precisely the things that make it a prototype. So do your initial prototyping on paper, and with the time and energ y you save, you can make sure that the few HTML prototypes you do make are more fleshed out. #3: Build your site map before you start designing One of the deadly sins in Web site design is trying to draw up a design without having a site map. I m not saying that you need to know every single page before y ou can decide whether to put the navigation at the top or on the left. What I am saying is that the navigation hierarchy gets driven from the desired relationsh ip of pages to each other. And since it is impossible to decide where to place n avigation elements without knowing how many items will be in each one or how man y elements you will need, a site map really is the prerequisite to a site design . For example, let s say that you settle on having a navigation bar directly underne ath the header, and after you ve invested a lot of time in this design, you discov er that your site would be better served by a list of links on the left instead. That s a lot of wasted time. Get your site map first. Once you have a decent idea of how the pages relate to each other, then you can start drafting designs. #4: Don t worry about the home page or link names One of the most common stumbling blocks I have seen organizations get stuck on i s the home page of the site. For whatever reason, there is this tendency of any meeting about the Web site to become a shouting match over what the home page sh ould look like. As the technical person, I try to squash these immediately. Some thing like this usually does the trick: We are wasting time worrying about the content of the home page when we need to b e focused on the design of the site. The home page s design will be identical to t

he rest of the site, unless there is an overwhelming reason for it not e only difference is that the content area will be much more free form showcase what is inside the site. Let s get back on track with the Web , and once we have that nailed down and we are in the content creation can decide what content needs to be on the home page.

to be. Th and will site design phase, we

Without taking a stand on the home page contents, you can spend months talking a round it without ever actually designing anything for the Web site. Like the home page, everyone loves to get together and scream about what the wor ds on navigational links should say. Whether the link says Contact Us or Get in Touch with Us is not something a Web site design project needs to spend time and resources debating. Again, take a stand on the topic and remind the group that link wording is a content level discussion, not a technical/design level discuss ion. #5: Forget about the content, too, while you re at it On that note, you will want to try to keep all content discussions out of the de sign process. The home page and the links are two areas that are especially cont entious. But there is also a tendency for people involved in the process to get hung up on what any given element will actually say. My experience has been that if you stick to Lorem ipsum text throughout the process, you make it easier for people to focus on the design itself, not the content. The last thing you want is to turn every design meeting into a grammar and spelling check competition. T his also applies to images. Don t put any real images on the site for anything that is content and not design until you are headed for production. Why? Because the head of Project X will get hung up on the fact that you used the product from Pr oject Y on the Products page instead of concentrating on things like color and p lacement. #6: But don t let others forget about the content Ever notice that in nearly every Web site project, the people who jump on your c ase about making your deadline never seem to have the content ready when you ask for it? Ironically, while it is your job to make sure that your working group d oesn t get bogged down in content, you need to make sure that everyone else is sta ying on track with getting the content ready. All too often, you spend months hammering out the perfect design, and then it la nguishes on the staging server for months, waiting for various departments to cr eate their content. Sometimes, in the case of a redesign, someone says, Just reus e the old content, even when it s not appropriate to the new site map. Either situa tion is bad. Once you have that initial site map together, you need to get a sec ond group going (probably led by the Marketing department), devoted solely towar d generating the content that the site map asks for. Of course, as this group ge ts its work done, the site map might change. This is normal. At the same time, i f the site map changes radically and that forces a need to reconsider the design , better to have found out now rather than later. #7: Organize the site around the users, not the organization A common mistake when designing Web sites is to have the site map look an awful lot like the org chart. The problem with this is that unless the Web site is an org chart, users are not likely to use your map that way. For example, let s imagi ne that your company makes telecommunications gear and their accessories. Produc t X is a router made by the router division, and Product Y is the T1 module made by the module division. Users don t not want to navigate to different sections of the Web site to find the router and the related T1 module; they want to find Pr oduct X and Product Y next to each other, because to the user, they are related products. When working on your site map, ask yourself, Is this relationship valid in the users eyes or are we just organizing based on internal silos? #8: Don t overlook SEO, usability, and accessibility

Three specialized areas that are woefully ignored during Web design projects are SEO (search engine optimization), usability ( Can users use this? ), and accessibil ity ( Can users with disabilities access this? ). It s tempting to think the SEO just h appens or to assume, If I can figure out how to get around the site, it s usable, or, Special needs users won t be interested in our site anyway. Wrong, wrong, and wrong . SEO takes a lot of work. I try to keep up with the field, and a few years ago it was mostly, Write clean HTML, use appropriate metadata, and make sure your conte nt is targeted. Now, there is a lot more to it. If you want to leverage your Web site as much as possible and minimize the amount you need to spend on paid ads, you might want to bring in an outside expert (or groom one in-house, for large c ompanies) to give you some guidance. You don t need consultants for usability, although they can be helpful in providin g an objective opinion. But you should keep usability in mind from Day 1. You do n t want to invest three weeks on a special feature that everyone loves, only to f ind out afterward that its design is confusing. It s far better to say, I don t think people will be able to use that when the idea is first brought up. Likewise for the site s overall design. Better to have the usability baked in from the get-go t han to try to bolt it on at the end, after committing to the design at large. Accessibility is still mostly a technical challenge, but it is important to unde rstand the relationship between certain design/development ideas and accessibili ty. For example, if you have committed to having some fancy AJAX widget, make su re that it either contains nothing that can be discarded or that users who can t u se AJAX widgets have an alternative means of getting to the same information. Us ability and accessibility need to be rigorously tested by real users, too, as oppo sed to merely following a checklist. #9: The details make the difference Have you ever been trying to buy a product online and left certain sites because they seemed fly-by-night? Chances are, it was minor details that made you feel uneasy. Recently, I wanted to make a purchase and I got a bad SSL certificate erro r because the certificate was for the right domain but a different hostname. Whi le I was willing to accept that, a lot of people won t go to check out if their br owser tells them the certificate is bad. Mistakes like typos, JavaScript or othe r errors, and incorrect SSL certificates will ruin your chance to give the user a good impression of your company and its products. So make sure that you have t he office spelling and grammar pro check out the wording, have real users batter the site looking for errors, and go over everything with a discerning eye looki ng for any glitches. If spending 5% of the project timeline finding these small errors can increase sales by even 5%, it s worth it. Even if you absolutely must l aunch the site without the final quality check performed, there is no reason you can t do it post-launch. #10: Have a game plan! Having a project plan in place is extremely important. Everyone involved needs t o know what is expected of them, whether it be providing input into the site map , content, or graphics or selecting an SEO consultant. It s also important to prop erly set expectations on the goals and timelines. I have seen Web site design pr ojects literally spend months hung up on minor points like What goes on the home page? while the rest of the site design was not progressing at all. I have also s een situations where the site design itself was done, but someone forgot to code up some widgets for it, or get the IT department to set up the new domain name, or have the e-mail administrator make an account for the Contact Us system, and so on. Make a game plan and follow it. ********************************************************************************

************************************* 10 common Web design mistakes to watch out for When you start designing a Web site, your options are wide open. Yet all that po tential can lead to problems that may cause your Web site to fall short of your goals. The following list of design mistakes addresses the needs of commercial W eb sites, but it can easily be applied to personal and hobby sites and to profes sional nonprofit sites as well. This information, based on the article 10 ways to improve the design of your comm ercial Web site by Chad Perrin, is also available as a PDF download. #1: Failing to provide information that describes your Web site Every Web site should be very clear and forthcoming about its purpose. Either in clude a brief descriptive blurb on the home page of your Web site or provide an About Us (or equivalent) page with a prominent and obvious link from the home pa ge that describes your Web site and its value to the people visiting it. It s even important to explain why some people may not find it useful, providing e nough information so that they won t be confused about the Web site s purpose. It s be tter to send away someone uninterested in what you have to offer with a clear id ea of why he or she isn t interested than to trick visitors into wasting time find ing this out without your help. After all, a good experience with a Web site tha t is not useful is more likely to get you customers by word of mouth than a Web site that is obscure and difficult to understand. #2: Skipping alt and title attributes Always make use of the alt and title attributes for every XHTML tag on your Web site that supports them. This information is of critical importance for accessib ility when the Web site is visited using browsers that don t support images and wh en more information than the main content might otherwise be needed. The most common reason for this need is accessibility for the disabled, such as blind visitors who use screen readers to surf the Web. Just make sure you don t in clude too much text in the alt or title attribute the text should be short, clea r, and to the point. You don t want to inundate your visitors with paragraph after paragraph of useless, vague information in numerous pop-up messages. The purpos e of alt and title tags is, in general, to enhance accessibility. #3: Changing URLs for archived pages All too often, Web sites change URLs of pages when they are outdated and move of f the main page into archives. This can make it extremely difficult to build up significantly good search engine placement, as links to pages of your Web site b ecome broken. When you first create your site, do so in a manner that allows you to move content into archives without having to change the URL. Popularity on t he Web is built on word of mouth, and you won t be getting any of that publicity i f your page URLs change every few days. #4: Not dating your content In general, you must update content if you want return visitors. People come bac k only if there s something new to see. This content needs to be dated, so that yo ur Web site s visitors know what is new and in what order it appeared. Even in the rare case that Web site content does not change regularly, it will almost certa inly change from time to time if only because a page needs to be edited now and then to reflect new information. Help your readers determine what information might be out of date by date stampi ng all the content on your Web site somehow, even if you only add last modified o n fine print at the bottom of every content page. This not only helps your Web si

te s visitors, but it also helps you: The more readers understand that any inconsi stencies between what you ve said and what they read elsewhere is a result of chan ging information, the more likely they are to grant your words value and come ba ck to read more. #5: Creating busy, crowded pages Including too much information in one location can drive visitors away. The comm on-sense tendency is to be as informative as possible, but you should avoid prov iding too much of a good thing. When excessive information is provided, readers get tired of reading it after a while and start skimming. When that gets old, th ey stop reading altogether. Keep your initial points short and relevant, in bite-size chunks, with links to more in-depth information when necessary. Bulleted lists are an excellent means of breaking up information into sections that are easily digested and will not d rive away visitors to your Web site. The same principles apply to lists of links too many links in one place becomes little more than line noise and static. Kee p your lists of links short and well-organized so that readers can find exactly what they need with little effort. Visitors will find more value in your Web sit e when you help them find what they want and make it as easily digestible as pos sible. #6: Going overboard with images With the exception of banners and other necessary branding, decorative images sh ould be used as little as possible. Use images to illustrate content when it is helpful to the reader, and use images when they themselves are the content you w ant to provide. Do not strew images over the Web site just to pretty it up or yo u ll find yourself driving away visitors. Populate your Web site with useful image s, not decorative ones, and even those should not be too numerous. Images load s lowly, get in the way of the text your readers seek, and are not visible in some browsers or with screen readers. Text, on the other hand, is universal. #7: Implementing link indirection, interception, or redirection Never prevent other Web sites from linking directly to your content. There are f ar too many major content providers who violate this rule, such as news Web site s that redirect links to specific articles so that visitors always end up at the home page. This sort of heavy-handed treatment of incoming visitors, forcing th em to the home page of the Web site as if they can force visitors to be interest ed in the rest of the content on the site, just drives people away in frustratio n. When they have difficulty finding an article, your visitors may give up and g o elsewhere for information. Perhaps worse, incoming links improve your search e ngine placement dramatically and by making incoming links fail to work properly, you discourage others from linking to your site. Never discourage other Web sit es from linking to yours. #8: Making new content difficult to recognize or find In #4, we mentioned keeping content fresh and dating it accordingly. Here s anothe r consideration: Any Web site whose content changes regularly should make the ch anges easily available to visitors. New content today should not end up in the s ame archive as material from three years ago tomorrow, especially with no way to tell the difference. New content should stay fresh and new long enough for your readers to get some v alue from it. This can be aided by categorizing it, if you have a Web site whose content is updated very quickly (like Slashdot). By breaking up new items into categories, you can ensure that readers will still find relatively new material easily within specific areas of interest. Effective search functionality and goo d Web site organization can also help readers find information they ve seen before and want to find again. Help them do that as much as possible. #9: Displaying thumbnails that are too small to be helpful

When providing image galleries with large numbers of images, linking to them fro m lists of thumbnails is a common tactic. Thumbnail images are intended to give the viewer an idea of what the main image looks like, so it s important to avoid m aking them too small. It s also important to produce scaled-down and/or cropped versions of your main im ages, rather than to use XHTML and CSS to resize the images. When images are res ized using markup, the larger image size is still being sent to the client syste m to the visitor s browser. When loading a page full of thumbnails that are actual ly full-size images resized by markup and stylesheets, a browser uses a lot of p rocessor and memory resources. This can lead to browser crashes and other proble ms or, at the very least, cause extremely slow load times. Slow load times cause Web site visitors to go elsewhere. Browser crashes are even more effective at d riving visitors away. #10: Forgoing Web page titles Many Web designers don t set the title of their Web pages. This is obviously a mis take, if only because search engines identify your Web site by page titles in th e results they display, and saving a Web page in your browser s bookmarks uses the page title for the bookmark name by default. A less obvious mistake is the tendency of Web designers to use the same title fo r every page of the site. It would be far more advantageous to provide a title f or every page that identifies not only the Web site, but the specific page. Of c ourse, the title should still be short and succinct. A Web page title that is to o long is almost as bad as no Web page title at all. Achieving success These considerations for Web design are important, but they re often overlooked or mishandled. A couple of minor failures can be overcome by successes in other ar eas, but it never pays to shoot yourself in the foot just because you have anoth er foot to use. Enhance your Web site s chances of success by keeping these design principles in mind.

Sponsor Documents

Or use your account on


Forgot your password?

Or register your new account on


Lost your password? Please enter your email address. You will receive a link to create a new password.

Back to log-in