You spent hours making your design perfect. The images have been meticulously Photoshopped. The calls-to-action have been revised and refined countless times. You know exactly where you want the user’s eye to land and precisely how you want it to move. And with the emergence of eye-tracking technology, it’s finally possible to know whether or not it actually works. “Technology has made it fairly easy to measure where people look, ” says Kurtis Morrison, Vice President of Client Services at EyeQuant. “EyeQuant has made it extremely easy to validate your design ideas in just a few seconds.” Morrison was kind enough to let us pick his brain about how eye tracking can lead to more effective web design. Shutterstock: Which elements are most critical in effective web design? Is it the F and E-Shaped patterns (layouts that take advantage of users’ natural tendency to read the left side of screens the most) that come up so often when eye tracking data is discussed? Morrison: In general, you should emphasize the 3 “W”s: the content that conveys what the page is about, why users should care, and where they should go next. I don’t think that necessarily means conforming to an F or E pattern. It is absolutely possible for content outside of the F or E pattern to be seen, as long as it has attention-grabbing properties. For example, if it’s high-contrast, centrally located, and uncluttered. Are there any best practices in web design that have been challenged or even disproven by eye-tracking data? Absolutely. For example, the conventional wisdom that people always look at faces is a myth. We’ve run eye-tracking studies on thousands of different websites, and we know there’s definitely a relationship between faces and attention, but the idea that people are always going to look at them is simply not true. Another one is people believe that if you want some text to stand out, you should just make it bigger. I’ve seen pages with huge text that was very relevant to the users, but was completely ignored. What should designers know about selecting and using stock images? If you want people to look at an image, the most important thing is that it’s high in contrast — both within the image itself, and compared to the rest of the content on the page. It’s not just color contrast that’s important, but also luminance contrast. You should place it above the fold, in a central location or toward the top left. Also make sure that it’s not too cluttered — it should have some room to breathe on the page. How effective are image-heavy elements like rotating banners or slideshows? Motion is proven to be a factor that initially attracts attention. That said, they’re also likely to be annoying, and they usually contain offers that are only relevant for a sub-segment of people coming to the page, so people won’t want to look at them for long. They generally have a negative effect on conversion rates for business websites, so I don’t recommend using them. Big hero areas ( like Apple’s) are increasingly popular. Are these actually effective? Hero shots can be extremely effective if the image is relevant. Otherwise it’s just a distraction. If you’re using stock photography, it’s important that you choose imagery that supports your message [and isn’t] taking too much attention away from other key content on the page. Are long-form scrolling pages successful, or is keeping important elements above the fold still the best strategy? Every day, users seem to be getting more comfortable with scrolling. I’ve certainly seen long-form websites that are very successful. At the same time, I’ve also seen data that suggests the average user still spends most of their time viewing above-the-fold content. I think it’s better to be safe than sorry. You shouldn’t assume users will scroll. Rather, you should assume that you’ll have to earn it by making a good impression above the fold. What can eye tracking teach us about designing buttons for links? You have to remember that humans are creatures of contrast, so it’s important that there is a high amount of contrast between the button and the background color, and between the button text and the button itself. Based on eye tracking data, is it ultimately better to design for where you want the user to look, or where you know the user will look? As a designer, you have the power to influence where people will look. You’re not a slave to a particular layout or pattern. Positioning of elements on the page is only one factor that affects what people will see. That means you can make people look where you want them to look as long as you understand the building blocks of attention: contrast, positioning, size, and white space.

By Karyn Greenstreet When you’re self-employed, choosing a website designer is a crucial decision, as a good website can bring you more business and a bad one can drive away prospective customers. Below are some important things to consider when selecting a website designer for your project. What Types Of Web Designers Are There? I don't think there is an "official" definition, so I'll give you MY definition: Website Designer - helps you to determine the page layout, graphics, text location and colors of your site, as well as the navigation and how pages will cross-link to one another. He may also do the actual computer programming and graphic art work for the site, or may hire out that work to a programming specialist. A Website Designer is the project manager for your site design. Website Programmer - takes the design from the Designer and creates the code to make the site run. She is also responsible for all the technical stuff that happens behind-the-scenes to make sure the site works properly for your visitors. Graphic Designer/Artist - creates or choose the graphics for the site, including page layout, colors, logo, photos, illustrations, etc. Think of this person as the "visual artist" who creates the brand image for your site. Internet Marketing Consultant - helps you to determine how your website fits into your overall marketing strategy, and how to get more traffic and sales from your website. Sometimes, if you’re lucky, you can get all four of these skills from the same person. A Note on Copywriting You may find a designer who can also help you with the text for your website but don’t count on it. Be prepared to do your own copywriting, or hire a professional copywriter. Copywriters charge per page, sometimes up to $500 a page ($5, 000 for a 10-page website.) Here are 6 Copywriting Steps for Non-Copywriters from my blog. And when writing headlines, check out my blog post on 3 Headlines Formulas that will help you create the best headlines for your website text. Consider a hybrid solution: get advice about simple website copywriting principles from an internet marketing consultant, then you write the text. Have the consultant edit the text to make sure that it works on the web. Who Is A Good Designer And How Much Do They Charge?

Now we can go ahead and create a header for your page to tell people about the site. This is done using the tag. You can also use h2, h3, h4, h5 or h6 depending on what the title is and how important it is. Here’s what you need to do: Welcome to my awesome website!! The tags signal to the browser that this section is the main body of the page and it is required on all web pages for them to function correctly. Inside this, we’ve put the H1 heading to welcome people to the site. Step 3: Add some text and an image to the web page The final step in this tutorial is to add a paragraph of text to introduce your site to the visitor and include an image for them to look at too. A picture tells a thousand words, so they say! Hey there! You've reached the most awesome website in the entire world: MyAwesomeSite.com. We'll share cool tips, tricks and advice with you on how to be awesome - just like us. The element is a paragraph, and is where most of your content will be. Content management systems (like WordPress) will add these in for you automatically, but it is very beneficial to know how to use them yourself to better customize your site. The tag is obviously for an image, and you can specify a source URL using src=...". Note: you need to have uploaded an image to a web server, or have access to a hosted image to do this. Your first website using HTML

Photoshop and Fireworks are the two most popular applications used to design websites and pages, but often designers are familiar with only one and not the other – or, in the case of beginning designers, they don’t know which application to use. Both Photoshop and Fireworks have strengths and weaknesses, and it’s important to know where each excels or falls short when deciding which is best for your web design projects. To help you make this decision, I’ve broken down the pros and cons of both. Photoshop (PS) Photoshop was created by brothers Thomas and John Knoll. The first version (0.63) was released in 1988, and the 1.0 version was launched in 1990. The main purpose of the application has remained the same since its inception: to edit and manipulate images and photos. Photoshop PROS: Photoshop is the most popular software on the market for photo editing and design; it’s a market standard. Layer styles make it easy to have several different effects in a single object or layer. PS has a wide range of filters, which can be used to improve photos or bitmap areas. PS’s sharp image processor allows for an excellent preview of your work and the ability to detect even the tiniest imperfection. PS has great font management and font preview features, as well as adjustment layers, layer comps and blending effects, all of which can help you easily refine your design. PS’s professional colour-management tools are second-to-none. Smart Objects lets you duplicate an object and change its properties without affecting the original. Photoshop CONS: It’s a heavy application for any basic computer. It takes up a ton of processing power and memory. It was originally developed for photo/image manipulation, so it doesn’t always feel intuitive when using it for web design. It can be difficult to manage different versions of the same file. You need to duplicate content in order to have more than one version of the file, which can be time-consuming. Files get usually large in size, approximately 15MB for a single-page composition. The Smart Object feature isn’t so smart if you accidentally delete all the objects from the composition. There’s no library or other back-up storage option for the Smart Objects. The positioning of layers and objects can be imprecise and annoying. You can’t handle graphics inside PS with a pixel-by-pixel approach. You end up with border artifacts, especially when using vector objects. It can be difficult to save and export to the web with PS – the files are large and the process requires a steep learning curve. Fireworks (FW) Fireworks is a software based on xRes, which was an application built by Fauve Software and later acquired by Macromedia. Fireworks is a hybrid application, which means it can work with bitmap and vector graphics together. It can easily handle large files, even those larger than what can be stored in the memory. This leads to impressively lightweight and fast performance. In 2005, when Macromedia was acquired by Adobe, FW was brought into the Adobe Creative Suite 3 as a web design and quick-prototyping tool. Fireworks PROS Fireworks is (and always has been) a tool developed to create and edit websites, not just edit photos. FW is lightweight in memory usage and handles files very quickly. FW has an excellent mix of both vector and bitmap tools. It’s flexible – it can open and export PSD files. The source file (.PNG) is very light and remains small, usually about 10MB. FW makes slicing and exporting small parts of a composition simple. You can be pixel-perfect when moving objects. You can also move objects by typing the distance. It’s easier on your wallet! Fireworks’ pricetag is a third of Photoshop’s. Fireworks has three great features for creating a website:

When you create color palettes for your web design projects, are you testing the color combinations for contrast? If you're not, you might not be considering the eventual readability of the design and thus losing potential audience. I’ve been working on a process to help me ensure good color contrast and readability in my projects. Thanks to some helpful color contrast accessibility tools, I think I have something that is working and wanted to share with others in the event that you find it helpful, too. I should mention that I’m far from an accessibility expert. My goal here is to simply show that a little bit of effort can go a long way when it comes to selecting colors with optimal readability in mind. Check out W3C for a more thorough explanation. Also, check out Contrast Rebellion for an interesting look at the contrast problem. 1. Establish a color palette (with tints, tones, and shades) While you can use color contrast tools to help you establish a color palette, you can also use the tools to help find good options within an existing palette. In this case, I’m using a pre-existing color palette and showing how I'm using tints, tones, and shades to help create more color contrast options. 2. Find a good color contrast analyzer There are plenty of good color contrast testing tools available on the web. Find one that works for you and use it to test background and foreground color combinations. Here are some options: 3. Examine body text contrast First, it's helpful to establish good body text values. I usually start with a neutral color palette and aim for the lightest gray with a AAA (Section 508 compliant) rating (here's a good plain language explanation of ratings, WCAG 2.0 Level A/AA/AAA versus Section 508.) The AAA rating ensures optimal readability while some brightness allows for softness in the text. Note that the color names are custom names that I've assigned to the colors (from previous article, Giving Colors More Colorful Names.) #373D3F or "Raven" is my lightest gray within a AAA accessibility rating. 4. Evaluate button and link luminosity The next step is to find a good color option for buttons and links (the actions). I take a slightly different approach here. Instead of going for AAA, I’m looking for AA (a reasonable standard to strive for) so that I can get a brighter color to contrast from the static text and draw attention to important links. For these purposes, I'm testing white (#FFFFFF) in combination with various colors. The blues and reds have a higher success rate while the yellows and greens not so much. I go with "Darkest Alice" (#107896) for good combination of contrast and luminosity. "Ruby" (#C02F1D) is also a decent option. 5. Establish various color combinations It’s good to identify some additional color combinations for attention-grabbing call-outs and other possible needs. My base example with dark gray "Raven" text and a bright "Darkest Alice" blue for links and buttons. Example with darks on a lighter background. Example with lights on a darker background. 6. Document in your style guide The last step is to keep a reference guide handy with your test results while adding notes to your style guide. Your clients and audience will be impressed that your colors are chosen for thoughtful reasons - optimal readability - and you'll sail through QA testing with additional options should you need them. Sample documentation for a style guide. Summary That's really all there is to it, but you could break this down into three even simpler chunks if you like: Reading Text: For reading purposes, find a high contrast pairing for most of your body copy (the heavy lifting). Action Links: For links, explore colors that are both luminous and high contrast to make it clear where actions are. (If you've done this right, there will be some contrast between your reading text and action links.) Extra, Extra!: Create and document various color combinations for call-outs intended to draw extra attention.

In just a day, you’ll find out about the most innovative techniques in the 7 online sessions delivered by the most sought-after speakers right now . You’ll also be able to communicate directly with them during the event, and will have access to the recordings afterwards. About the sessions and Speakers Javascript in Responsive Web Design. Roundup of plugins and solutions applied to RWD. by Dave Rupert Retroffiting Sites for Responsive Web Design. Create responsive projects with minimal HTML changes. by Ben Callahan Adaptive Images in Responsive Web Design. Tips and tricks for work with responsive images. by Christopher Schmitt Let's Do a Bunch of Simple Stuff to Make Our Websites Faster. Chris will talk about our websites performance. by Chris Coyier Do you want to be a RWD Summit attendee? Take part to win Starting today, you can get a free ticket just by taking part in our Facebook or Twitter competitions. The instructions are very simple. The impact of your tweet is very important, as it increases your chance of winning. The tickets will be allocated on August 24. You have one week to do it! RWD Summit 2012 is an exceptional event for any web designer. That’s why, even if you don’t get one of the tickets we’re offering, we invite you to explore the sessions at this event fully, as well as the other upcoming events organized by Environments For Humans, like the Web Performance Summit 2012 on August 29, where

A properly designed and constructed website can literally transform your business. In simple terms your website needs to be found and, when visitors arrive, it needs to be appealing, while providing the information that encourages them to contact you so that you can convert them into sales. We produce websites that a professionally designed that are extremely easy to manage and customised to match your needs. One thing we pride ourselves in is the fact that we don’t outsource our work to overseas companies. We are 100% locally managed and run. Experienced Custom Web Designer We have 8 solid years of experience in designing all sorts of websites for Perth based businesses. We will make sure your newly designed website is focused on generating customers for your business. It is crucial to consider this from the beginning as the main goal of your site is to attract visitors and convert traffic into sales. You need to help users navigate through your pages and find what they are looking for. As a general rule, it is best when key information can be found “above the fold” so users do not have to scroll down to the bottom of the page to find what they are after. Customised, Creative and Affordable Web Designs We spend the time getting to know about your business, what’s important to your customers and then we go about incorporating that into the design so that customers respond to your website. Getting a visitor to respond to your website via telephone or your contact form is called a conversion. This is because you have converted them from a visitor to a prospective customer. That is the main and most important goal of a website. As an example if you had a website with a 20% conversion that had 100 visitors, then you have 20 leads. If you have a website with 1% conversion and 1000 visitors then you have 10 leads. The first website gets double the leads with 1/10 of the traffic. That’s why conversion is so important. You can generally buy more traffic but if your conversion rate is low, you will need to spend lots of money to get the same result as someone with a better website conversion. This is what we focus on at the design stage. We are a Perth Based Custom Web Design Company with a Local Office This means that you can get support when and how you want it. Unlike many of our competitors who have their support outsourced, when you ring us you get a Perth staff member who was most likely involved in building your website to handle the issue. We have a range of staff who can help you from web page builders, graphic designers, programming, content setting, email support and how to use your Content Management System or CMS. We develop websites that are self managed and are easy to use.

Why on Earth would you want to buy a desktop PC or Mac in 2016? Simply put, there are computing needs that mobile devices like laptops and tablets can't fulfill as well as the stalwart desktop. Here's what to consider when deciding on your next desktop PC. It's About the Power Desktop-class CPUs and graphics processors are simply more powerful than their mobile counterparts for the same money. They give you the power to finish whatever task you're working on in less time. Desktop components are less expensive in general, so instead of buying a $500 laptop with a competent Intel Atom processor, you can buy a $500 desktop with a powerful Intel Core i5 desktop CPU in it. You can get desktops with screens that are already built in, or they can be connected externally to a monitor. In either case, you're almost guaranteed to have a bigger display than even the largest desktop-replacement laptop, which tops out at about 18 inches in size. Another plus is that expandable desktops can accommodate multiple graphics cards to support more than two simultaneous displays. For some sensitive situations, buying a desktop gives you physical control of the computer and its use. Limiting access to desktop PCs lets you control who sees confidential business data, and the combination of a desktop PC and a large screen means that parents can monitor what their children are doing online via a quick glance across the room. Which OS? Windows? Mac? Other? You probably already know the answer to this question, but here's a quick rundown of your choices: Windows 10 is the latest iteration of Microsoft's operating system. Desktops with Win 10 and previous versions are what most people typically use, so you'll be assured of the best compatibility and widest selection of third-party software. This also applies to browser plugins, since some only work with Windows. Apple's OS X is currently up to version 10.11 (El Capitan). It's a great choice if you're already in an Apple-centric household, since it interfaces seamlessly with devices like iPads, iPhones, and with all your iTunes purchases and subscriptions. Chrome OS has the best buzz of the alternative desktop operating systems, since it essentially runs the Chrome browser on desktop PC hardware. You'll need to use always-on Internet service for the best results from this cloud-based ecosystem, but homebound desktops are usually connected 24/7. Desktops with Android and Linux are harder to finder, particularly in retail configurations, but both have their merits. Android lets you use more than two million apps, but in practice many have scaling issues on desktop screens, and you'll definitely run into problems with the lack of an accelerometer while controlling some games. While it has its fans, Linux is more of a do-it-yourself operating system, where you'll have to rely on your own faculties for installation, sourcing programs, and support. Chrome OS, OS X, and Windows are certainly easier choices if you simply want to buy a desktop and use it right away. How Much Desktop Do You Need? If all you need to do is surf the Internet, write word documents, or make simple spreadsheets, then an entry-level desktop is the way to go. You will have to make some compromises in terms of graphics, power, RAM, and storage compared with higher-end systems, but then again, you won't be paying as much, as entry-level PCs typically cost less than $600. You'll find a wide selection of Intel and AMD processors in this category, from the budget AMD Athlon X4 and Sempron, as well as Intel Atom and Celeron up to the slightly more expensive (and much more powerful) Intel Core i3 and i5 processor. You should look for at least 4GB of system memory, while 2GB is acceptable for sub-$300 systems. 16GB of eMMC flash storage is found on the least expensive desktop, but 64GB of flash storage or a 500GB hard drive is a better option for most users. A sub-category of entry-level desktops, the chromebox (and its all-in-one counterpart, the chromebase) is a desktop that runs on Google's Chrome OS. Both can be found for as little as $179, utilizing free and paid Google cloud services to store your files, install your programs, and manage your digital life. If you spend a great portion of your computing life online, they're a great alternative to yet another inexpensive Windows desktop, but given that they typically have scant onboard storage (think 64GB maximum of flash storage), you'll need a good wireless connection to be able to access the cloud-based storage and apps. Midrange desktops will stay functional longer, thanks to more CPU power and speed, memory for multitasking, storage, or a larger built-in screen. You will be making some tradeoffs compared with high-end systems, but even demanding users will be able to find a midrange system that will last them for at least five or six years. Look for a capable AMD A8 or A10 processor, or an Intel Core i5 CPU in this category, along with 8GB to 16GB of memory, and a 1TB hard drive or at least 256GB solid-state-drive (SSD) storage. High-end systems offer top-of-the-line components, like the latest CPUs that will give you all the power you need for multimedia projects, loads of storage (a 512GB SSD or at least 1TB hard drive, but typically 2TB or more), 3D graphics capability for gaming, or a combination of all three. These high-performance machines typically start at $1, 500, and can go up to $5, 000 and beyond for workstations or gaming rigs with customized paint jobs and multiple GPUs. While sticking to one of the three price ranges, we recommend that you buy just a little more than you need for the tasks you do now if you can. That way, you future-proof your purchase and won't have to shop for a replacement for a while. What Do You Need to Do? General-purpose desktops, which are the kind you typically see in retail stores, are well suited to general office tasks, surfing the Internet, video conferencing, and the like. They're designed to be a jack of all trades: good at most tasks, but rarely great at specialized functions like multimedia creation or gaming. Performance PCs, which include multimedia machines and workstations, will give you more power for complex creative or math and scientific projects. Faster processors with four, six, or even 18 cores make quick work of your tasks. More memory (8GB to 16GB) is installed, so you can keep larger images on screen while editing a video, rendering a a 3D model, or processing a humongous spreadsheet full of numbers that you have to graph. You'll also find extra storage in the form of large hard drives and SSDs that will let you hold a multitude of work documents and program library files.

Tags. The problem is that your javascript files will be loaded first, and consequently your content will be loaded after. By placing Javascript files at the bottom of your documents, you’ll ensure that JS files will be loaded only when the content has been properly displayed. ... Use HTML semantically HTML is not a programming language. It is a markup language, used to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, and more. If you started to create websites in the good old 90’s or in the beginning of the century, you know how dirty the markup was at the time. But happilly, it has evolved. Among other things, it is important to use html element semantically. As an example, a navigation menu should always be an unordered list: Test WHILE you build to avoid cross-browser issues One of the biggest mistake I ever made when developing html, CSS, and javascript, was not to test my pages on multiple browser while I was writing them. Instead, I used to write all my code and just view in Firefox to see how it was rendered. In theory, this should be good. But as you know, cross-browser issues are a major problem for front-end developers, especially due to IE. If you test your documents on Firefox/IE/Chrome while your writing it, cross-browser rendering problems will be much easier to fix. I have lost hours not doing it, so I hope this final tip will help you saving your precious time. To test on multiple versions of IE, I use this very handy tool. Happy coding 😉

In the last few years, the number of mobile users and devices has grown exponentially. As a result of this, providing a seamless, high-quality user experience on desktop, tablet, and mobile is more important than ever. Responsive Web Design (RWD) is arguably one of the best ways to tackle the issues that arise when designing for multiple devices. Wikipedia defines RWD as “an approach to web design aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices.” To fully understand why we have RWD and why it is a big deal, it’s helpful to know a little bit of the history behind it. Fixed-Width Design Until the last few years, website were specifically designed to fit well on most desktop screens because the overwhelming majority of internet users surfed the web on desktop devices. Most monitors were 800 or 1024 pixels wide and as a result, websites were designed to fit those sizes. However, eventually other size screens began flooding the market, and web designers wanted their sites to look exactly the same no matter which screen users viewed them on. RWD is the modern solution to the fixed-width problems of the past. Perhaps surprisingly, fixed width designs are still somewhat common. In the early 2000s, terms like fluid design and liquid layout were, sort of, primitive versions of RWD. The Mobile Revolution Mobile phones gained the ability to access the internet in the late 1990s but could only display basic textual data. It wasn’t until the mid-2000s when smartphones were popularized that mobile browsers began to display what we now consider to be “real” webpages using CSS 2 and Javascript. For the first time, cell phones had the ability to display websites the exact same way as desktops, but there was still one problem, they weren’t very navigable for the user. Mobile users had to pinch and zoom to do anything and load times were incredibly slow, especially when smartphones were still running on 3G speed. Ethan Marcotte: The Godfather of RWD Web designers and coders may or may not know the name Ethan Marcotte, the man who coined the term “Responsive Web Design” in a paper on A List Apart . In the paper, he described how the design landscape was rapidly changing due to the exponential increase in mobile users. He then proposed that the only way to move forward was to respond to these changes with flexible and fluid web design—RWD. RWD, at its core, combines three concepts—media queries, flexible widths, and flexible images. Without going too in-depth, it is important to note that none of these concepts were new or revolutionary on their own. However, when Marcotte discovered a way to combine and use these concepts together, RWD as we know it today was born. Why RWD is Important Mobile users are taking over, and for companies to be successful in the new mobile-dominant internet space, their websites must be optimized seamlessly for all devices. RWD websites have one URL and one set of code, so you do not need to design multiple websites or worry about multiple URLs; whether the user is visiting a website on a tablet, their smartphone, or a laptop, they will see the same site. And the website will automatically reorient and organize itself to fit the device’s screen being used to view it. With RWD, your website has the right design for every device. Not only that, it will save you money from both a web design and administration standpoint. You only need to design one website, and you only need to administer one website. As if that wasn’t convincing enough, RWD produces the most seamless, high-quality experience you can provide users who are likely to browse your website on multiple devices. All in all, the positives greatly outweigh the negatives when it comes to RWD.