Custom Web Design V/S Website Templates

As an entrepreneur you are continually looking how to save cash and make your business profitable. Regarding the matter of making an online vicinity for your business, much the same as your promoting materials and office’s appearance, your website needs to venture a professional picture. The more professional looking your business shows up, the more respectable it looks.

Numerous entrepreneurs don’t generally comprehend the distinction between having a custom web design done and utilizing website formats. In this article we’ll take a gander at both methods for having your website assembled and the expenses included.

Custom Web Design

Numerous think having a custom web design is excessively costly yet we should take a gander at the upsides of procuring a web designer over utilizing a free website layout or buying one.

Advantages of custom web design:

  • Unique design: With a custom web design it is made only for your business. Your website will be not the same as anybody else’s.
  • By employing the right web designer, it will be built so it is search engine friendly. – How the foundation coding of your website is done will impact your accomplishment in the web indexes.
  • The website will be more versatile to your organization’s requirements. In the event that you have done your website arranging, you will have a rundown of elements you wish to have. By organizing this rundown of website components, you will give the web designer a thought of what to suit for later on if your current budget doesn’t permit all the features to be actualized from the begin.
  • Scalability Just like versatility, in the event that you have arranged what you need later on for your website, a great web designer will think seriously about this as they select the advances to utilize while constructing the website.

Different focuses to contemplate when choosing if custom web design is for you are:

  • Are you wanting to keep up the website yourself?
  • If you don’t plan to figure out how to code a website (or have somebody on staff that can do this well) then you are going to need to demand that a content management system be consolidated into the web design.
  • Are you allowed to utilize the design made for the website for different purposes? The website design ought to consolidate your organization’s marking. On the off chance that you have effectively settled your organization marking, then that marking ought to be consolidated into the website. For a business that hasn’t built up a marking or is experiencing a patching up, then you are going to need to know whether you can utilize the design on the website somewhere else, similar to your letterhead, leaflets and signage to specify a couple. This will build the cost of the custom web design, yet then you will have everything match.

Another thought if considering a custom web design is, simply have a template made consolidating the website theme. You can then, on the off chance that you have the right stuff, reuse the layout topic to make the web pages for your website.

Website Templates based Design

There is a misguided judgment on how advantageous and practical utilizing free website layouts or obtained website formats is. We should take a gander at a few focuses about website formats:

Website formats are useful for:

  • Getting motivation on hues, designs and elements. You can’t have your web designer duplicate these, however they do give the web designer a thought of the look you would like.
  • Very low budget where you have to get up and running at the earliest opportunity. On the off chance that financial plan is keeping you away from getting your business up on the Internet, then perhaps a website format may be the best approach.
  • Shorter improvement time. Doubtlessly utilizing a website layout would incorporate a shorter advancement time needed for your website. Not so much, read on.

Presently onto different contemplations when picking a website format.

Utilizing website formats do have a few ruins:

  • There will be a huge amount of other individuals utilizing the same format. Unless you pay the “Select” cost for the format, the layout website is going to continue offering that same layout to anybody that goes along. Remember, regardless of the possibility that you pay the selective cost, there are other people who have purchased the layout preceding you despite everything they have the privilege to utilize it. On the off chance that it’s a truly engaging format, there may be loads of other individuals who have as of now purchased that very layout.
  • You will be restricted on the customization of the website layout. Without web page coding abilities, you are as yet going to need to either invest the energy and cash to figure out how to code a web page or contract somebody to help you.
  • Some layouts are laid out certain. Significance in the event that you fuse your own particular illustrations or have broad content, the format could break.
  • Some website formats are not assembled to be web crawler inviting. As clarified above, it is vital how the foundation coding of your website is finished. If not done accurately, it could hurt your showcasing endeavors on the web.
  • Antiquated coding. On the off chance that the website format uses antiquated coding, it may not work in all browsers. Browsers particular elements are another indication of antiquated coding.

Custom Web Design or Website Template?

At the point when choosing if a custom web design is the best approach or if a website format is a superior decision remember that you need your business to emerge from the group and be paramount.

To keep up or assemble the website yourself you are going to need to contribute some time (and cash perhaps) into realizing everything to building a web page.

Presently, take a seat and make sense of precisely how much every technique for building the website is really going to cost. Incorporate the time it is going to take you realize whatever you have to figure out how to utilize a website layout and contrast that with the expense of a custom web design where you will have time to market or manufacture your item in the same time span.

There is an old saying: “Time is Money“. Remember that when picking betweencustom web design and website layouts.

Characteristics of Proficient Web Designers

Of the many technology-related careers and professions today, one of the most exciting (and most lucrative) fields, is web design. Well, take a look around you, and you’ll see everyone logging online to do research, shop for groceries, pay bills, book airline or concert tickets, apply for jobs, run advertising campaigns, etc. This explains why small, medium and large companies are always on the lookout for web designers who’ll design, and maintain their online portals. Here’s a look at a few of the key characteristics of proficient web designers.

1. A Good Web Designer Has Above-Average Design Skills

One of the key characteristics of Website design Egypt experts is that they have in-depth HTML skills. Web designers who know how to write the HTML code by hand are sought-after because writing the HTML code by hand eliminates “code bloat”, which is notoriously created by programs like Dreamweaver and WordPress.

An expert web designer also knows CSS, or Cascading Sheet Styles, which controls font sizes, colors and does away with code bloat too. They’re also proficient at SEO, graphic design, social media marketing and networking, as well as setting-up mobile websites.

2. Expert Web Designers Create Clean-Cut Websites

Another key characteristic of seasoned web development Egypt experts is that they always churn out professional-looking and clean-cut websites. If the designer knows nothing but fill the site with obnoxiously flashing affiliate banner ads and other links at the top of the home page, then they’re just trying to earn a living through advertising, and not their web design skills.

3. They Reach Out To Clients, And Always Find Solutions

Apart from being technically proficient, a good web designer Egypt always reaches out to his or her customers too. The web designer makes it a point to schedule daily or weekly meetings with customers, so they could both review the processes, and they can directly get feedback from clients too. Good web designers also know how to look for solutions, and not just settle for shortcuts.

4. They Are Proficient In SEO

Apart from building or designing websites, the web designer Abu Dhabi should also be armed with SEO, or search engine optimization skills. It’s because if he or she doesn’t know an inch about SEO, how are they going to make the website more visible, and search engine friendly? With SEO, a truly good-looking website will gain better online traffic, and will enjoy wider visibility too.

5. They Are Innovative, And Know Their Client’s Market

A skilled web designer always approaches a project with a fresh and innovative mindset. He or she also has a critical view of aspects like user interface and graphic design, and has a habit of pushing things forward, and exploring new boundaries. The designer also has ample knowledge of the industry or niche that he or she’s working for.

6. They Are Proactive and Collaborative

Even the most seasoned web designers will experience a couple of road blocks and hurdles along the way. But for seasoned web designers, there’s always a solution for any problem, and the best way for finding solutions is to ask fellow designers for advice and help.

A seasoned web design expert also keeps his or her co-workers and clients in the loop always. This means that they keep everyone updated and consulted, from day one to the final stages of web design and development. When hiring one, make sure you carefully check the designer’s credentials, so that you’ll get the best and brightest web design Egypt experts.

Proficient web designers are also ethical individuals. They use their special skills to maximize the website’s utility for its users, as well as to make sure that site visitors are offered the greatest ease of navigation. They also fully comply with local and international codes of conduct and standards, and do not use illegal methods or non-compliant software.

What is Invisible Design ?

Design is not always an in-your-face art. It is subtle, usable and often undefinable. Quite simply, good design is often invisible.

And just to be clear – invisible design is not about adding layers or transparencies or hidden meanings to projects. It is about creating great user-oriented projects that work functionally and visually.

It’s something I heard over and over again when I was starting out as a young designer. If you have to “decorate” the canvas, you are over-designing it. The best design – the design that really makes a project work – is invisible.

But how to you achieve that invisible design? Especially when web design is a quite visual tool. (As a bonus, a few websites that exemplify the idea of invisible design are featured throughout this post.)

So before we get too far along, design is visible. There’s no argument about that at all. But the techniques and tools you use, should not be glaringly obvious to the common user.

Much of design is about “feeling right.” Users want to engage and interact with something. They don’t necessarily understand why. That’s invisible design.

Though the concept had been pounded into my brain long before I heard him say it, Oliver Reichenstein, founder and director of Information Architects, is quite famously known for emphasizing this invisible design concept. Here’s a brief bit from an interview with The Verge.

“Good design is invisible. Good screen design happens in the subatomic level of microtypography (the exact definition of a typeface), the invisible grid of macrotypography (how the typeface is used), and the invisible world of interaction design and information architecture. Minimum input, maximum output, with minimal conscious thought is what screen designers focus on. And just as type designers and engineers we do not try to find the perfect solution but the best compromise.”

Invisible Communication

Nanamee
Day trip

When you create a webpage or mobile app or even interactions for a smartwatch, you are designing some type of communication. The design needs to support the message and not get in the way of it.

You will create an experience with all the design tools at your disposal. The end design is not for you, and not even for other designers, it’s for a wider audience that does not understand (or care to think about) color theory or spacing or typography. They only know if these things come together in a way that feels cohesive, usable and interesting.

That’s why it is important to think about design as an invisible tool.

Different Types of Invisibility

Bill Bbyron Wines
Thank Bot

When we talk about invisible design, a few different things come to mind. Each type of invisible design is important and likely impacts your work in a variety of ways.

  • Invisible products and placements, such as brands or advertising that you might not even notice. (This is important for app and game designers that often have to think about where placements appear in their design.)
  • Invisible interactions and notifications that happen so seamlessly that you perform an action or task without thinking about it. (Such as alarm or alert on your phone.)
  • Invisible aesthetics that create an emotional connection and bond with users, making people desire engagement. (That’s what we will focus on.)

Design Techniques

Hto

Invisible aesthetics are rooted in the basics of design theory. It’s not a trend or application of a cool new UX feature. It’s using text, color, typography, images, icons and techniques to share a message. So let’s go back to some of the basics and how they can work for you.

espn
Rebuild
Usmnt
  • Text and language: The words you use convey a tone and emotional response from users. Use language that communicates the way you want people to feel when they interact with the design. Is it formal, lighthearted, comical? Should it make you feel passion or want to act in some way? Also think about the rhythm of the words; how do they sound when you read them out loud?
  • Color: Every color or color combination has a feel to it. With emotional and cultural considerations to think about, color choice can take a lot of time. Take care with the color palette to select colors that help users perform specific actions as well as create the right feel, harmony and balance.
  • Typography: Typefaces can have meanings of their own as well. From clean sans serifs that take on the meanings of their surroundings (Helvetica) to complex blackletter styles (Baroque Text) with a feeling of formality, the type of letterform you select will convey a specific feel. When in doubt, stick to sans serifs or simple serifs with uniform stroke widths in a regular weight.
  • Images: What is happening in the images you use? This includes photos, animations and videos. Are the people happy and smiling? (Are there people at all?) Are the colors warm or cool? Is the action fast or slow? Proper pacing and flow — think of it as a walking speed – can create a certain comfort level for users. Action that is too fast or slow, can start to bring attention to that fact and users will focus on it more than the image itself.
  • Icons and UI elements: A consistent set of icons and user interface elements works wonders on the path to invisibility. A set tells users how a site works and how to interact with it with a standard display even though the action or specific look in each icon might be different. The invisibility happens when the user does not have to think about how it works. Think of the shopping cart icon that almost every retailer uses as an identifier to check out or view items. Users don’t have to think about how to navigate to the final step or make a purchase; this element directs them to the appropriate action.
  • Other techniques: There’s a whole toolkit of design techniques out there than can work with or against your design — drop shadows, text effects such as bevels, strokes and frames, spacing, underlines and the list goes on. They key with any of these techniques is use. If you are opening the tool in editing software and clicking “apply” while using the default settings, you are probably doing it wrong and will end up with a garish effect. These effects should be used in such a way that the user does not look at an image and comment that it includes a great shadow (although a trained design eye might notice it). The design effects should only contribute to the overall message and goal of visuals.

Conclusion

Now think back to what Oliver Reichenstein said for a moment. He emphasized both “micro” and “macro” elements. This is key. To be completely invisible, the design needs to be perfected down to each detail.

Design simply and with purpose. Don’t over embellish or add in trendy elements just because you want to use a technique. Design the little pieces so that they work seamlessly and design the big picture so that it paints a complete image of what your project is supposed to portray. Don’t overthink it: Sometimes a simple solution is the correct solution. (Maybe this whole idea of invisible design is what helped flat design take off, and why it has remained so popular.)

Have you stumbled across website designs that you think work beautifully and invisibly? Share them with us in the comments.

How to Create a Linked Cascading Style Sheet (CSS)

Over the years, web design and development standards have changed. One of these changes is in the use of Cascading Style Sheets (CSS) to control the overall appearance of a website. Utilizing CSS in your website design enables the you as the developer to make sweeping changes to the entire site while only modifying one line of code.

Begin by opening a simple text editor such as Notepad (in the Accessories folder of the Windows programs menu).

The first style modifications you will make are going to affect the entire web page so you will begin by adjusting the background color and text color of the entire page. First type body {

Now try changing the background color by typing background-color:immediately followed by the color code and ending the line with a semicolon (each line within a style tag must be ended by a semicolon). The color code can be entered in several ways.

  • Hexadecimal notation – a six-digit alpha-numeric code that lists the red, green and blue values, in that order, for that color. (i.e. #000000 is black, #FFFFFF is white, #FFFF00 is yellow).

Red, Green, Blue percentage – uses a percentage value to denote how much of each color is represented (i.e. rgb(100%, 100%, 0%) is yellow and rgb(100%, 50%, 0%) is orange).

Red, Green Blue values – this technique is similar to the percentage but the value used is from 0 to 128 (i.e. rgb(128,128,128) is white and rgb(64,64,64) is grey).

Color name – certain colors can be entered as a text value like black, white, red, blue, green.

To affect the text color type color: followed by the desired color. Use any of the techniques listed above for changing the background-color.

Close the body tag by typing an ending }

In this example, we will make similar changes to the <h1> tag (Header 1) by next typing h1 {

Modify the font that will be used by the browser to render any text contained in this tag. Here we will be using the verdana font which is one of the default fonts installed with most Windows operating systems. A good rule of thumb is to list two desired font-types and then a font class. You would implement this by typing font-family: verdana, arial, sans serif; However, as we’ve shown here, you can simply chose just one font.

To modify the size of the text, type font-size: followed by the desired size. The size can be defined in pixels and ems. For now, define the text size at 22px.

Change the color of the text using the same methods defined above for affecting the body style. In this example we’re making the text grey by typing the hexadecimal color codecolor: #CCCCCC;

Don’t forget to close the h1 style definition by typing }

To modify the paragraph tag begin by typing p { and make changes similar to those made in the h1 style definition.

Once you are satisfied with your style definitions you must save the file in a format that the browser will recognize. In this case we will save the file as styles.css though you can actually name the file as you chose so long as it ends in .css (i.e. mystyle.css, myfile.css, sitestyle.css). For people using Windows Notepad, make sure that the “Save as type” drop down box says “All files” or an additional .txt file extension will be added. For this example, we will also save our CSS in the same folder as the web page we are working on.

Still using your text editor, open the html file where you wish to link the CSS.

Insert the following line of code somewhere between the <head> tags:”'<link rel=”stylesheet” type=”text/css” href=”styles.css” media=”all”>”’

  • link rel=”stylesheet” (The link relationship with the document, is a stylesheet)
  • type=”text/css” – tells the browser what type of document you are linking to.
  • href=”styles.css” – the path to the location of the style sheet.
  • media=”all” – specifies the type of media the link tag is referencing.

Refresh or open your browser to see the changes you’ve made to your web page.

How to Use Basic Web Templates

While there are many ready-made templates available, they can end up feeling just like everyone else’s website, especially those people who used that template. But writing a Web page layout from scratch can be difficult. Instead, you can look at free templates that just show you the layout, rather than providing images, colors, and designs, and then use your own logos, images, colors and more to create exciting websites that look unique to you – even though you used a template.

Step 1 – Choose the Template for the Layout You Like

Most Web designs can be put into 3 basic layouts:

  • 1-column layouts
  • 2-column layouts
  • 3-column layouts

For this tutorial, I’ve chosen the 2-Column Centered Flexible Width Website Templateas the base of my new website.

Step 2 – Make any Basic Structural Changes to the Layout

The template I’ve chosen will work well, but there are a couple things I need to add or change. Primarily, I want to have a navigation bar across the top of the page, not just in the narrow column. I also need more than just a sub-head as the footer, so I’ll convert that to a <div>. The specific changes I made include:

  • Removed all the optional borders from the design
  • Zeroed out the margin on the h1 headline:
    #container h1 { margin: 0; }
  • Added a horizontal menu (minus the colors) from my horizontal menu template
  • Added a footer <div> at the bottom
    <div id="footer"> ... </div>

    and used the h2 CSS:

    #container #footer { clear: both; }

View the Layout

Step 4 – Choose a Color Scheme for Your Layout

It can be hard to choose a color scheme for your website.

I typically choose the color based on something that I know is going to be an integral part of the design. Such as:

  • the site logo
  • photography of the site
  • favorite colors of the client

For my design, I knew that I wanted to build a site around a wonderful photo of the sunset from our recent trip to Hawaii. The photo had lots of great colors in it, and I finally decided on a color scheme with these colors:

  • #653A59
  • #D78F00
  • #FBF382
  • #CA8A89

I edited the sunset photo so that it was exactly 1000px – the maximum width I’d set for the page. I also faded it a little as I’m going to use it as my background and I didn’t want it overpowering the page. Then I took my edited sunset photo and set it as the background of the entire page:

body { background: #999 url(hawaii_sunset.jpg) center center no-repeat; }

Then I played around with the other colors for other elements of the page. Such as the links, headlines, and text:

a:link { color: #D78F00; } a:visited { color: #653A59; } a:hover { color: #CA8A89; } a:active { color: #FBF382;} #container h1, #container h2, #container h3{ color: #653A59; } #container p, ul li, ol li, dd, dt { color: #000; }

Finally, I changed the hover color for the navigation bar to match my color scheme that I’d chosen.

ul#navigation li a:hover { color: #000; background-color: #FBF382; }

View the Layout

Step 5 – Work with the Fonts and Typography

Right now, the text on my page is all the default font of the browser. This is boring, and doesn’t match the tone of the content. I use several things to help me decide what font families to choose for a page:

  • Sans-serif fonts are easier to read online, so I like to use them for body text
  • Serif fonts are more formal and I like them for headlines, especially h1 headlines
  • Fantasy and script fonts, while often fitting the tone better than other fonts, are not widely available
  • Comic sans is often the default for script typefaces, so I try to avoid that style
  • I like to use fonts that are similar on both Windows and Macintosh, so my readers get a similar experience

Compare fonts on Windows and Macintosh

After looking at the chart, I decided to use Palatino Linotype and Palatino as my primary serif typeface choices with Book Antiqua and New York as alternatives. So I set up my headlines with this font face. I wanted to use the sizes as reference to their priority as well. This is the CSS I wrote:

#container h1 { font: bold 2em/2.25em "Palatino Linotype", "Book Antiqua", Palatino, "New York", serif; } #container h2, #container h3 { font: "Palatino Linotype", "Book Antiqua", Palatino, "New York", serif; } #container h2 { font-size: 1.5em; line-height:0.8em; } #container h3 { font-size: 1.25em; line-height:0.8em; }

For the standard text on the page, I wanted a sans serif font, so I chose Geneva and MS Sans Serif from the compatibility chart. I wanted the font to be a decent size, with the list in the narrow column slightly smaller. If I thought there were going to be other tags in that column, I’d change the style selector to reflect other text options.

#container p, ul li, ol li, dd, dt { font: normal 1em/1.25em Geneva, "MS Sans Serif", sans-serif; } #thin-col ul li { font-size: 0.9em; }

I used ems as my type measurement because it flexes with the browser font sizes. This makes the page more accessible. However, whatever measurement style you choose, you should use it throughout – don’t mix ems with pixels or points with percentages. If you do, you can end up with some strange looking effects.

View the Layout

Step 6 – Add Content

If you’re like most designers, you could do more, and you probably want to. That’s fine. Design away. But don’t forget to add content to your page so that you can launch.

5 Most Common Interaction Design Mistakes on the Web

Designing an interaction has never been easy. It involves deep analysis of user behavior and meticulous planning. With new technologies and interaction design patterns emerging, things are not getting easier.

Users are harder to impress with glossy images, smooth hover effects and unexpected animations, but the dilemma remains the same — how can you create a delightful user experience that generates conversions along with users’ smiles? If you’re aware of common design pitfalls, you’re far less likely to make them.

To make it easier for you — and perhaps to let you know that you’re not alone — here is a roundup of the most common interaction design misconceptions.

1. Overwhelmed with Innovation

Web designers are a creative lot. We want to express ourselves through our work. We’re always looking for innovative ways to make designs stand out. However, when it comes to IxD, innovation doesn’t always work for good. It might even be bad for your site. Users crave familiarity and often they are tuned in to certain ways of operation.

Randy J. Hunt, Etsy’s Creative Director and author of Product Design for the Web, put it clearly: “Hey, designers: stop trying to be so damned clever.” In this article, he explains in greater detail why you should not go overboard with innovation in designing for the web.

Take the Iotorama website,for example. It looks beautiful, the music is soulful, but with with all those balls moving, the user is left wondering what to do. Don’t get me wrong, the project is fantastic and super-creative! I liked the gamification idea, but it’s far from intuitive.

Overwhelmed with Innovation

Here’s another example. The guys behind the Safety on the Slopes project came up with a neat interactive webgraphic that informs users about the dangers of winter sports. It’s innovative and at the same time intuitive, immersive and fun.

Irwin

2. Confusing Navigation

The “don’t be too clever” rule spills over to navigation as well. Some designers attempt to be original by experimenting with eclectic names for pages. For example, the Chijoff website leaves users wondering what exactly they deliver and how to hire them. It takes a bit of browsing to figure that the “Co-Create” page is supposed to be the equivalent of “Services.” And even then, after reading through the whole page, the user is still left wondering what to do … the end of the page has a small form to sign up for the latest industry news and tips! There is no form on the “Contact” page either, only postal and email addresses. They just do not make it easy for people to get in touch with them, or hire them.

Chijoffco

Can you guess what “Universe” is for on the Maison Margiela website? It actually links to their Facebook page. Who would have thought?

Maisonmargiela

In contrast, check out the legworkstudio’s website. It’s strikingly creative and unusual. The navigation is clear and unambiguous. There’s no chance a user will get lost.

3. Clutter

There was a time when websites tried to put everything they possibly could above the fold. Those days are gone, yet many sites still make this mistake. Take this online store:

Flipkart

The designer tried to stick to a simple color scheme, but the sheer number of boxes, logos and fonts in different colors on this page are enough to leave a user reeling. The search bar has catchy “So, what are you wishing for today?” text, but the overall look and feel of the layout is rather outdated.

EBay is the one major online retailer that gets this right. Instead of cramming their website with product images, promotions and multiple calls to action, eBay has kept it clean and simple, highlighting exactly what they want the user to see first, with clear prompts on what to do next.

ebay

4. Contrast, Baby!

Contrast is one of the most important means of establishing visual hierarchy and drawing user attention to certain elements. In web design, contrast doesn’t imply only color usage, but also size, shape and positioning.The most simple and vivid example is this site. They guys succeeded in consistency, but the general look of the background and buttons are not inviting when it comes to placing an order.

Modern themes

Compare to this. The color choice is close, but the result is radically different. Plus, the creative scrolling effect smoothly introduces the new amazing product feature — reflective material. Cool, huh?

Bjornborg

5. Neglecting Form Styling

Form design is one of the fundamental parts of user experience. Each website has a goal — whether it is to generate leads, directly sell products or provide information. Unfortunately, there are many websites with glossy homepages that prefer to bore users to death with long forms and complicated CAPTCHAs. Unless the users has strong prior motivation, they’ll just leave.With effective cross-browser solutions like JCF, it’s time to forget about ugly default form elements and move toward a more immersive user experience.

Dkkma

Another irritating thing is when the form is too demanding or not well tested. For example, the sketchybusiness.io form highlights all blank fields, even if they are not required.

Mostlyserious

If you look at the mostlyserious.io form, you’ll definitely like the hover and active button states. Plus, the “Don’t be shy” note adds a sweet, humorous touch.

Finally…

Don’t be too lazy to test! What matters to you might be different from what matters to customers. Where do they encounter problems and get stuck? Is it the navigation, fancy parallax effect or long-loading video? One of the biggest benefits of user testing is that you can step into the shoes of users, focus on their needs and make improvements. Don’t try to restrain your creativity. Just keep in mind that site visitors might get confused and frustrated.

What are the worst IxD mistakes you’ve seen? Share your thoughts and stories in the comments.

Getting Started as a Freelance Web Designer

Start with an Emergency Fund

The best thing that any budding freelancer can do for herself is to set up an emergency fund. Whether it’s 3 months or 3 years, you should have enough money in a relatively fluid (ie. not your retirement account or your house) source to tide you over through lean patches. Every beginning freelancer will experience lean patches. Whether you choose to save that money by working at another job while you freelance part-time or you wait until that money is saved before starting out is up to you.

The important thing is that you have that cushion. Other benefits to an emergency fund include:

  • You can relax because you don’t have to take that job and you won’t seem desperate to clients.
  • If you’re more relaxed, you’ll be more creative.
  • If you’re more creative, more clients will want to work with you.
  • The more potential clients you have, the more work you’ll have.
  • The more work you have, the less you’ll need the emergency fund, so you’ll remain relaxed.

Create a Business Plan

A business plan often seems very rigid and boring to most creative freelancers. But creating a business plan leaves your creativity a place to grow without being side-tracked. If you treat your freelancing business seriously, your clients will take you more seriously. And a business plan is a great start. It doesn’t have to be extremely technical, but it should outline what you want to achieve from your business and what types of jobs you plan to accept.

Decide on Your Pricing Structure

Rather than worrying about how much to charge, first you should decide how you’re going to charge.

In other words, are you going to charge by the project? by the hours? set pricing? sliding scale? If you’re starting freelancing with a stable of clients who want to work with you, firstly congratulations, but secondly, you probably already know how you’re going to charge them. For the rest of us, it’s probably easier to come up with a flat rate for a specific project type – say a 5-page website. But you can also charge an hourly rate. Make your decision between flat-rate vs. hourly billing and then you can determine how to set a price for Web design work.

Come Up with a Standard Contract

If you have a standard contract ready you can get your first client to sign on the dotted line much more quickly than if you have to build it from scratch every time. Some things I include in all my contracts include:

  • Dates – dates when approvals, access details, and content are due to me, when plans, wireframes, designs, and final documents are due from me and any other dates I can think of
  • Job details – how many pages I’ll build, or hours I’ll work, or what project I’m building
  • Forfeit details – is there a penalty? How long until I stop working on the project?
  • Pricing – how much up front, how much on delivery of plans, wireframes, designs and final delivery?

These are not all that can or should be in a contract. But if you create a general outline ahead of time, you’ll be able to fill in the details more quickly.

A Professional Site

Your business website is where a lot of your clients are going to come to find out about you. Make sure that your website is as professional as you are. You don’t have to keep your pricing or portfolio on the site, but it should be well designed and act as a premier marketing tool for your business.

Business Documents

Web designers often forget to create professional documents to surround their business. I’m not talking about just business cards and logos, but also billing and invoicing documents, contracts (see above), letterhead, and so on. Just because you’re a Web business that doesn’t mean you won’t need printed documentation. You might not need a lot, but if you have at least the template ready to print for when you need it, you won’t be scrambling at crunch time.

Find a Place to Work

It can be tempting to think that as a freelancer you can pick up your laptop and work at the local coffee house, but that’s not a realistic business location. Guaranteed the first business phone call you take will be right when the group of students come in to boisterously applaud their school’s latest victory.

A quiet location with access to power and a phone or cellphone reception is best. There are options like coworking in larger cities or perhaps you can find a freelancing friend to share an office with. Many freelancers work quite successfully right out of their homes. I’ve worked with freelancers who worked out of their bedrooms or living rooms. The one thing they had in common was that their families understood that when Daddy was at the computer, he needed quiet time.

Always Be on the Lookout for New Clients

You never know when you’ll find someone who needs your services. I’ve gotten a job while waiting for an Americano at Starbucks. The key is to be friendly, have business cards ready, and be willing to brainstorm at a moment’s notice. Just because someone works for a corporation doesn’t mean they can’t hire a freelancer. And if you have some good suggestions for a new area on their site or a great change to improve their existing site, you might get a job right on the spot. Even if networking doesn’t pan out immediately, you have gotten your business card out there, and you haven’t lost anything.

Working as a Web Designer

Website design, while a relatively new industry, is now an essential part of a company’s image, brand, and advertising, marketing and public relations campaigns. The side of web design that would be considered graphic design is the creation of the actual look and feel of a website. Many web designers are also involved in web development, creating the functionality behind a working website. Even if someone wants to just focus on the design side, an understanding of the technology behind websites is essential to create designs that are both attractive and functional.

Type of Work

Work for web designers can include:

  • Designing websites to hand off to developers
  • Designing web banner ads
  • Creating animated flash websites
  • Creating mockups and site wireframes
  • Understanding web technologies
  • Understanding browser and operating system differences
  • Working closely with web programmers

Software Used in Web Design

For someone working on the design side of website, Photoshop is the most popular software. Often a designer will create one or several layouts in Photoshop and hand them off to a developer, who will create a working site based on them. For those continuing into the development side, products such as Dreamweaver, GoLive, and countless HTML and CSS editing programs can be used.

The Technology Side

There are often differences between web designers and programmers, each with their own goals in mind. Web designers are looking to create the most beautiful site possible, while programmers want something fast and functional. Being a great web designer means understanding both sides, and creating websites that look good and that are designed with function in mind (therefore avoiding these differences).

While the ability to code by hand may not be necessary, it is important to know what types of layouts are feasible, how they will appear in different browsers, and what typefaces and color combinations work well on screen rather than on paper. These types of questions make web design an interesting and challenging profession.

Definition of Script

Definition:

A script is a small bit of code that enables web browsers to do something rather than just displaying static results. Scripts are used in web design to create dynamic pages andDHTML. The most commonly used scripting language in web design is JavaScript, but many developers also write scripts in ActiveX.

Some Simple Scripts for Web Pages

  • Image Rollovers and New Windows
  • Form Validation
  • Add a Google Map to Your Web Page
  • Include HTML in Many Documents
  • If you want to learn more about scripting web pages, you should check out the About.com JavaScript site.

    Examples: JavaScript and ActiveX are both examples of scripting languages.

How much programming does a Web Designer do?

Question: How much programming does a Web Designer do?

I received the following question from Jennifer:

What percentage of the time does a Web developer/designer use programs like C++ etc? ... If I don't like the programming aspect of computers, can I have a successful career in Web design development?

Answer:

Trying to decide what kind of Web developer you want to be can be tricky. There are so many options:

  • Design
    Including CSS and layout as well as graphic design
  • Programming
    Writing CGIs or Flash applications or even Ajax Web 2.0 applications
  • Content
    Writing the text or creating the images that will be used on a Web site
  • Databases
    Including working with XML, database administration, and connecting sites to databases
  • Information architecture
    Setting up the informatics behind a Web site, and making them easier to use and navigate
  • Metrics
    Watching the pageviews and tracking to validate the efficacy of Web design work
  • And much much more…

If you’re going to be a Web programmer, languages like C++, Perl, PHP, Java, ASP, or JSP will feature heavily in your daily workload. But designers and content writers don’t use them at all. You would use C++ to write CGIs and scripts to make your Web pages dynamic and interactive.

There are lots of other jobs in the Web field that don’t require any programming, they have titles like Designer, Program Manager, Information Architect, Content Coordinator, and many others.

I took the programming route because it worked for me, but I’ve worked with hundreds of Web developers who wouldn’t know a block of code if it bit them in the foot. :-) And they wouldn’t want to know it.

What about the money or job prospects?

It may be true that a Web programmer could make more money than a Web designer, and a DBA would make more than both. But if you do Web programming for the money and you hate it, you won’t be very good at it, so you won’t make as much money as someone who really loves it and is very good at it. The same is true for doing design work or being a Web DBA.

I’ve worked on jobs where I had to do everything – design, code, and content – and other jobs where I only did one part of the equation. But when I’ve worked with Designers who don’t code, usually the way we worked it is they would come up with the design – how they wanted the pages to look – and then I would work on building the code (CGI, JSP, or whatever) to make it work.

Focusing on the parts of the job that you enjoy doing will let you get better and better without a lot of struggle – as it will be fun. And the money and job prospects will come from that.

The 10 Best Free Web Editors for Windows

I have evaluated over 100 web page editors for Windows against over 40 different criteriarelevant to professional web designers, web developers, small business owners, and beginning web designers. The following editors are the 10 best free web page editors for Windows, both WYSIWYG and text editors, in order from best to worst.

Each editor below will have a score, percentage, and a link to a more detailed review. All reviews were completed between October 2013 and February 2014. And this list was compiled on February 24, 2014. The editors were ranked based on their scores for Web Designers. But in the case of a tie, I explain the order below.

If you’re still not sure which editor to choose, then fill in my questionnaire: Web Design Software: Which One is Right for You?

1.  Microsoft WebMatrix Profile

WebMatrix has really improved since version 2 and version 3 adds a lot of useful features that rocket it to the top of the list. It’s not a WYSIWYG editor, but it has a lot of features that make it inviting to the enterprising beginner. One thing I like best about WebMatrix is how it will help you install various open source tools likemySQL databases or PHP onto your web server if you don’t already have them there. It has lots of plugins available for things like shopping carts, mobile support and more. This is a pretty amazing free editor.

Version: 3
Score:
Web Designers: 53.2%
Web Developers: 63.7%
Small Business: 48.6%
Beginners: 45.8%
More »

Aptana Studio - Screen shot by J Kyrnin
Aptana Studio. Screen shot by J Kyrnin

2.  Aptana Studio

Aptana Studio is an interesting take on web page development. Instead of focusing on the HTML, Aptana focuses on the JavaScript and other elements that allow you to create Rich Internet Applications. One of the things I really like is the outline view that makes it really easy to visualize the DOM. This makes for easier CSS and JavaScript development. If you are a developer creating web applications, Aptana Studio is a good choice.

Version: 3
Score:
Web Designers: 49.1%
Web Developers: 62.2%
Small Business: 33.4%
Beginners: 32.3% More »

Komodo Edit - Screen shot by J Kyrnin
Komodo Edit. Screen shot by J Kyrnin

3.  Komodo Edit

Komodo Edit is my favorite text web editor. It includes a lot of great features forHTML and CSS development. Plus, if that isn’t enough, you can get extensions for it to add on languages or other helpful features (like special characters). It’s not the best HTML editor, but it’s great for for the price, especially if you build in XML. I use Komodo Edit every day for my work in XML and I use it a lot for basic HTML editing as well. This is one editor I’d be lost without.

There are two versions of Komodo: Komodo Edit and Komodo IDE. Komodo Edit is open source and free to download. It is a trimmed down version of the IDE.

Komodo Edit tied with Eclipse and CoffeeCup Free HTML Editor for Web Designers. I placed it first because it scores better for the other three categories (Web Developers, Small Business, and Beginners).

Version: 8
Score:
Web Designers: 39.8%
Web Developers: 59.8%
Small Business: 25.0%
Beginners: 24.8% More »

Eclipse - Screen shot by J Kyrnin
Eclipse. Screen shot by J Kyrnin

4.  Eclipse

Eclipse is a complex development environment that is perfect for people who do a lot of coding on various different platforms and with different languages. It is structured as plug-ins so if you need to edit something, you just find the appropriate plug-in and go. If you are creating complex web applications, Eclipse has a lot of features to help make your application easier to build. There are Java, JavaScript, and PHP plugins, as well as a plugin for mobile developers.

I ranked Eclipse second because it has a much higher Web Developer score than CoffeeCup (it tied with Komodo Edit there too).

Version: 4
Score:
Web Designers: 39.8%
Web Developers: 59.8%
Small Business: 23.9%
Beginners: 19.1% More »

CoffeeCup Free HTML Editor - Screen shot by J Kyrnin
CoffeeCup Free HTML Editor. Screen shot by J Kyrnin

5.  CoffeeCup Free HTML Editor

The CoffeeCup Free HTML editor is a text editor with a lot of potential. A lot of the features it has in the menus require that you buy the full version. The free versionis a good HTML editor, but I would recommend you purchase the full version of the editor to get the real juice from this product. One important thing to note: many sites list this editor as a free WYSIWYG editor, but when I tested, you have to buy CoffeeCup Visual Editor to get WYSIWYG support. The free version is a very nice text editor only.

This editor scored equally well as Eclipse and Komodo Edit for Web Designers. It ranks 5th because it didn’t rank as well for Web Developers, but if you are a beginner to web design and development or you’re a small business owner, this tool has more features appropriate to you than either Komodo Edit or Eclipse.

Version: 10
Score:
Web Designers: 39.8%
Web Developers: 48.5%
Small Business: 48.6%
Beginners: 45.8% More »

NetBeans - Screen shot by J Kyrnin
NetBeans. Screen shot by J Kyrnin

6.  NetBeans

NetBeans IDE is a Java IDE that can help you build robust web applications. Like most IDEs it has a steep learning curve because they don’t often work in the same way that web editors do. But once you get used to it you’ll be hooked. One nice feature is the version control included in the IDE which is really useful for people working in large development environments. If you write Java and web pages this is a great tool.

Version: 7
Score:
Web Designers: 37.7%
Web Developers: 52.2%
Small Business: 21.7%
Beginners: 19.4% More »

Visual Studio - Screen shot by J Kyrnin courtesy Microsoft
Visual Studio. Screen shot by J Kyrnin courtesy Microsoft

7.  Microsoft Visual Studio Express

Microsoft Visual Studio Express is a visual IDE to help web developers and other programmers get started creating applications for the web, mobile devices, and the desktop. There are versions of Express specifically for web development, Windows 8 development, Windows desktop development, and Windows Phone development. This tool is built to help you get familiar with the Visual Studio IDE platform where you can do even more than you can with Express.

Version: 2013
Score:
Web Designers: 36.9%
Web Developers: 40.6%
Small Business: 21.7%
Beginners: 19.4% More »

BlueGriffon - Screen shot by J Kyrnin - courtesy BlueGriffon
BlueGriffon. Screen shot by J Kyrnin – courtesy BlueGriffon

8.  BlueGriffon

BlueGriffon is the latest in the series of web page editors that started with Nvu, went on to KompoZer and now culminates in BlueGriffon. It is a free WYSIWYG editor for Windows, Macintosh, and Linux. And it will build your pages in HTML5 (both XHTML and HTML) as well as HTML 4.

This is the only WYSIWYG editor that made this list, and as such it will be more appealing for many beginners and small business owners.

Version: 1
Score:
Web Designers: 32.4%
Web Developers: 28.4%
Small Business: 43.0%
Beginners: 49.9% More »

Bluefish - Screen shot by J Kyrnin
Bluefish. Screen shot by J Kyrnin

9.  Bluefish

Bluefish is a full featured web editor for Linux that also runs on Windows and Macintosh. And the 2.0 release adds a lot of great new features. There is code-sensitive spell check, auto complete of many different languages (HTML, PHP, CSS, etc.), snippets, project management, and auto-save. It is primarily a code editor, not specifically a web editor. This means that it has a lot of flexibility for web developers writing in more than just HTML, but if you’re a designer by nature you might not like it as much.

Version: 2
Score:
Web Designers: 31.5%
Web Developers: 43.4%
Small Business: 21.5%
Beginners: 23.5% More »

Emacs - Screen shot by J Kyrnin
Emacs. Screen shot by J Kyrnin

10.  Emacs

Like vi, Emacs is found on most Linux systems which makes it easy for you to edit a page even if you don’t have your standard software. Emacs is a lot more complicated than vi and so offers more features, but I find it harder to use. Feature highlights: XML support, scripting support, advanced CSS support, and a built-in validator, as well as color coded HTML editing.

This editor is really intimidating to anyone who isn’t comfortable writing plain HTML in a text editor. But if you are and your host offers Emacs, it is a great, very powerful tool.

Version: 24
Score:
Web Designers: 28.7%
Web Developers: 44.1%
Small Business: 16.1%
Beginners: 15.3% More »

What is your favorite HTML editor? Write a review!

Do you have a Web editor that you absolutely love or positively hate? Write a review of your HTML editor and let others know which editor you think is the best.

What is Content Marketing ?

I have been writing for years about the importance of content on web pages. And while good articles, nice photos, amazing videos, and other forms of web content is important, there is more and more evidence that there’s more to creating content than just the content. You have to create content that attracts the customers you want visiting your website. This is called “content marketing.”

Content marketing is a marketing technique to create content that is valuable, relevant, and attractive to a specific audience.

The goal of content marketing is to drive customers to specific actions. Instead of advertising or pitching your products, you provide information to your customers that gives them more knowledge so that when they do pick a product it will be the right one for them. Not necessarily yours.

This article talks a lot about content marketing in the form of the written word, but the content can be anything your customers want: videos, podcasts, photos, recipes, craft instructions, tutorials, music, and so on. The only limit is how the content relates to your brand and the products you are trying to sell.

Content Marketing is About Loyalty

Consumers are smart. They know when we are trying to sell them something. But instead of trying to sell something to people, you should be trying to generate trust in yourself and your products. Once people trust you, they are more willing to listen to you.

And a great way to encourage trust is to provide useful things for your customers with little or no outlay from them.

For example:

  • Most packaged food products include recipes on the label for using that product. Plus, cereal marketed to children often has games or puzzles on the box for kids to play while they eat.
  • Many businesses offer free magazines to their customers—airlines have in-flight magazines, grocery stores have circulars with articles as well as ads.
  • The articles on About.com, this website, are all provided free of charge. Yes, there are advertisements, but at the end of the day, you don’t have to click on any of them in order to access the information. There is no “pay wall” or other payment gateway between you and the articles.
  • Some websites request just a small thing from customers in order to get free content. For example, I am offering a free chapter of my book Sams Teach Yourself Responsive Web Design with HTML5 and CSS3 in 24 Hours to anyone who signs up for my mailing list. In this case the information is virtually free, only requiring a small exchange from the customer to get it.

Content Marketing Should Deliver What Customers Want

One of the key features of content marketing is that it has both real and perceived value to the customers. If you are tempted to slap up a 400-word article on the benefits of using widget A in business and call that content marketing, then you’re probably not going to get a lot of interest or sales. When you are developing a content marketing strategy for your website you need to consider the following:

  • Is your content in-depth?
    One 400-word article wouldn’t cut it, but 100 might, especially if you arranged them in a useful fashion and made them easy to read and use.
  • Is your content relevant?
    If your customers aren’t interested in the free content you’re providing, then it’s not going to work as marketing either. Do research, find out what your customers want, and build your plan based on what they are looking for, not just on what you want to create.
  • Can you keep delivering it?
    If you’re going to give people a podcast or a blog or even just short articles on a topic, are you prepared to keep creating new ones for at least a year? The more consistent you can be in creating new content to add to the content you already have, the more customers you will attract.

Content Marketing is Not for the Faint of Heart

When you start working with content marketing, you need to be prepared to work at it for a long time. It may often feel like it’s the only thing you’re really working on. But the more content you generate that is relevant, useful, and timely for your customers, the more customers you will gain. And once they trust you, they will be more interested in finding out what you’re selling, and be more receptive to buying from you.

How to Use Multiple CSS Classes on a Single Element

Cascading Style Sheets (CSS) allows you to define elements with classes to provide additional information about that element, give it different styles, and connect with it via JavaScript. And you don’t have to limit your elements to just one class. If you need to set multiple classes on an element, you add them simply by separating them with a space in your attribute. For example, this paragraph has three classes:

<p class="pullquote btmmargin left">...</p>

This sets the following three classes on the paragraph tag:

  • pullquote
  • btmmargin
  • left

You can then assign these as classes in your CSS:

.pullquote { ... }
.btmmargin { ... }
p.left { ... }

If you set the class to a specific element (i.e.p.left), you can still use it as part of a list of classes, but be aware that it will only affect those elements that are specified in the CSS. In other words, the p.left style will only apply to paragraphs with this class.

Advantages of Multiple Classes

Multiple classes can make it easier to add special effects to elements without having to create a whole new style for that element. For example, you may want to have the ability to float elements to the left or right quickly. You might write two classes left and rightwith just float:left; and float:right; in them. Then whenever you had an element you need to float left you would simply add the class “left” to its class list.

I like to use multiple classes for things that I want to keep standard across the entire site.

For example, if I always want the bottom-margin for elements that have a bottom-margin to be 10px. By creating a class that only encompasses the botom-margin:10px; I can add it wherever it’s needed.

Multiple Classes, Semantics, and JavaScript

Another advantage to using multiple classes is that it gives you many more interactivity possibilities. You can add new classes onto existing elements using JavaScript without removing any of the initial classes. You can also use classes to define the semantics of an element. This means you can add on additional classes to define what that element means semantically. This is how Microformats works.

Disadvantages of Multiple Classes

The biggest disadvantage to using multiple classes on your elements is that it makes them very complicated. This can make it hard to determine what styles are applying to the element as well as any scripts that impact it.

When you use multiple classes you run the risk of having the styles for one class override the style for another. This then can make it difficult to figure out why your styles aren’t applying even when they should be. By using a tool like the Webmaster tools in Chrome you can more easily see how your classes are affecting your styles and avoid this problem.

How Much Should a Web Design Cost

It can be exciting to get started on a new business, and in a lot of ways, the web has made it easy to get a newbusiness website off the ground quickly and with very little cash. Here is a common scenario for small business owners (all prices are estimates):

  1. I’ve got a great idea for a website, and the perfectdomain name for it is available! ($10)
  2. I’ll get a decent web hosting package, with a good price. ($150 for two years of hosting, pre-paid)
    1. I’m going to use WordPress, and this theme is perfect. ($40)

    At first glance this looks great, $200 to start a business! And you don’t even need a designer. And for many businesses, this will be fine at first.

    But once you get past the initial stages of the business, you will notice that the theme you bought isn’t doing all that you want it to do. Many technical people will start looking at plugins to try and get it running the way they want, but ultimately, their site is going to look and act like every other commerically themed WordPress site out there. And to differentiate your site you’re going to need more.

    You’re going to need a killer design and possibly some web development work on top of it. And all this is going to cost you money.

    What to Pay For

    The first thing you need to know when trying to budget web design costs is what you’re going to need. There are a number of things that can cost you money, including:

    • Is this a new site or a redesign?
    • Do you need blog or content management functionality?
      • Do you have graphics already created for the site? Or are you using a template? Or do you need completely custom images created?
      • How are you planning on servicing mobile customers?
      • Do you need multimedia (Flash, video, etc.) on the site?
      • How much content do you have and how much do you need created?
      • Do you need other special features like social media, SEO, ecommerce, or something else?
      • And who is going to maintain the site?

      Below I will go into details about all these things, and a general idea of how much you should budget for them. The prices I list are based on my experience and prices may be higher or lower in your area. Be sure to shop around and request proposals from any designer or firm you’re thinking of hiring.

      New Sites Often Cost More Than Redesigns

      When you’re starting from scratch, so is the web designer. They have nothing to work from, they can’t look at your site and get an idea of what you already love or hate. They advantage to starting from scratch is that you can work more closely with the designer to get the exact site that you want (for your budget). But you should assume that you’re going to pay at least an additional $100 more than if you were redesigning an existing website.

      For your budget, you should start with at least $500 as a base cost for building a site from scratch, and $250 if you’re looking at a redesign.

      Blogs and Content Management Tools

      If you’re already running a WordPress site then you have the advantage of already having some type of content management on your site, but these tools (including WordPress, Joomla!, and Drupal) have their own challenges. Creating a site using these tools takes more time than building a site from scratch using HTML and CSS because you have to integrate the designs into the CMS systems. Decide if you need these tools by reading this article: Dreamweaver vs. Drupal vs. WordPress – Which is Best to Use.

      And don’t assume that if you already have a WordPress theme it should be cheaper. Many themes are sold as-is and designers are not licensed to change them. Often, the cost of purchasing a theme that can be modified is as expensive as just building a new theme from scratch.

      Your budget should include another $200 if you want a blog or CMS. Include this in your budget even if you already have the system running. If you don’t have it running, you should plan to include another $200 to get it installed and running.

      Graphics

      Graphics are tricky because they can be difficult to create and stock images are expensive. You don’t want to skimp on this area of your site, however as graphics can cause you more grief down the road if you’re not careful.

      If you supply all of the images, you will still need to budget some funds to get those images integrated into the new design (budget at least $250). And don’t assume that if you’ve already got a template you want to use that you won’t need any images re-done. Customizing templates can take time, and you want to be sure that the designer has the rights to customize the images in the template. If this is the route you go, you should budget $500. And if you’re looking for the design firm to create an entirely new design and images for you, either in a template or not, you should budget at least $1200.

      But that’s not all there is regarding images. You will probably also need icons and buttons created to go with your design. Budget $350 for them. And any other custom images you need you should budget another $450. The more images that you need, the more money you should budget.

      You should always make sure that your designer uses licensed stock images (where to find stock photos) or creates brand new graphics for your site. Be sure to get the license information in writing for any images you will use on your site. Otherwise, you could be looking at a several thousand dollar bill from a stock photo company down the road. And companies like Getty Images are very serious about their licenses, they won’t hesitate to bill your site even if you’ve only used one of their images. If your designer is going to add stock photos, budget at least $100 per photo—and remember that this could be an annual fee.

      Mobile Designs

      Mobile devices are getting more and more common and your design should at least make a nod towards mobile customers. The best designs are responsive to the device viewing the page, but creating that type of design is difficult and will cost more than a simple site for a desktop web browser. The best sites are designed to handle at least three different device sizes: smartphones, tablets, and desktop computers. You should budget $750 to get a responsive design, and expect to add on $150 per device size (such as tablet in landscape and portrait) beyond the basic three. (Mobile designs are different from desktop designs: Writing a Mobile Friendly Website)

      Multimedia

      Multimedia like Flash and video can be difficult to integrate with a website. And if you’re having the design firm create the multimedia devices the you should be prepared to pay more. You should budget $750 to get some basic Flash or video on the site and another$750 or more to create the multimedia.

      Content Creation and Addtion

      The cheapest way to go is to create all the content yourself and add it into the site yourself. Most designers have no problem delivering a design template that you populate for no additional cost. But if you want the design firm to add the content you’ve already got into the site, you should budget around $150 per page of typed content (more if they have to type it in) and $300 per page if you want them to create the content for you as well.

      Special Features Always Cost Extra

      With the above elements, you will have a website that most people would agree is sufficient, but there are a lot of extra features that many designers can provide that will up the price, but can also improve your business:

      • Site membership and registration $750
      • Forums or chat rooms $350
      • News feeds of both your content (outgoing) and adding content to the site (incoming) $400
      • Contact forms and surveys $350
      • Email addresses for the domain and auto-responders $300
      • Newsletters $500
      • Advertising integration (such as with AdSense) $250
      • Photo gallery $250
      • Ecommerce: shopping carts, catalogs, payment processing $1500–$5000 or more
      • Metrics: custom reports, Google analytics, etc. $500–$2000
      • SEO: page optimization, submission to search engines, etc. $500–$5000
      • Social media: Twitter, FaceBook, etc. $500–$3000

      And Don’t Forget Maintenance

      Websites don’t just build themselves, and the best are changing all the time. Maintenance is something that most businesses forget to budget. Or if they remember, they think that they’ll just do it themselves. But the first time you delete your entire home page by mistake and lose eight hours of sales trying to get it back up and running, you’ll wish you’d spent the extra money on a maintenance contract.

      Maintenance contracts vary greatly depending upon what you expect from the firm. You should budget a minimum of $100 per month to have a designer on call if you have a problem that you can’t fix. And if you expect them to do additional work such as creating new images, adding new content, maintaining social media or newsletters, etc. expect the price to go up. Many designers dislike doing site maintenance, so it can sometimes be hard to find a firm that will do it for you.

      So, How Much Does it All Cost?

      Features Basic Site Some Extras Full Site
      Base site costs $500 $500 $750
      Content Management or Blog $200 $200 $750
      Basic graphics $250 $500 $1200
      Additional graphics $300 $300 $500
      Total: $1250 $1500 $3200

      Adding in addtional features increases the price.

      Features Basic Site Some Extras Full Site
      Mobile $750 $900 (one extra size) $1050 (two extra sizes)
      Multimedia $750 $750 $1500
      Content $300 (2 extra pages) $750 (5 extra pages) $1500 (creating 5 pages including content)
      Extras $250 (photo gallery) $500 (photo gallery and ads) $5000 (or more)
      Maintenance $100 per month $250 per month $500 per month
      Total: $2050 + $100 per month $2900 + $250 per month $9500 + $500 per month

      So, for a minimal site you can spend as little as $1250 or as much as $20,000 or more. What you budget should be based on what your business needs, but this article should give you a good starting point.

      Remember that all these prices are estimates, especially on the low end. You should treat these numbers as a starting point in your negotiations with your web designer.

      Web design prices fluxuate all the time. You may spend more or less depending upon the size and scope of the design firm you hire or if you decide to outsource or offshore the development and design work.

Make Things Fade In and Out with CSS3

One fun trick you can do withCSS3 is make your images and other elements fade in and out using the CSS3 properties: opacity andtransition. This is a wonderful tool to make your pages more interactive by creating greyed out areas that come into focus when a reader does something.

The Basics: Change Opacity When Mouse Hovers Over

The first thing you need to know how to do is change the opacity when a customer is hovering over an element.

For my example I’m using an image with the class greydout:

<img src="puppy-in-shade.jpg" width="300" height="266" class="greydout">

To make it greyed out, I add the CSS:

.greydout {
-webkit-opacity: 0.25;
-moz-opacity: 0.25;
opacity: 0.25;
}

Then, to make the image come clear when the mouse is over it, I add the :hoverpseudo-class:

.greydout:hover {
-webkit-opacity: 1;
-moz-opacity: 1;
opacity: 1;
}

As you can see on my examples page, this is very abrupt. First it’s grey and then it’s not, with no interim states.

So, to add the interim states, you want to add the transition property to the .greydoutclass:

.greydout {
-webkit-opacity: 0.25;
-moz-opacity: 0.25;
opacity: 0.25;
-webkit-transition: all 3s ease;
-moz-transition: all 3s ease;
-ms-transition: all 3s ease;
-o-transition: all 3s ease;
transition: all 3s ease;

}

Here’s an example of the image fading in, rather than just switching abruptly.

Fading Out is Possible Too

You don’t have to start with a faded image, you can use transitions and opacity to fade out from a fully opaque image.

Using the same image, only with a class ofwithfadeout:

<img src="http://0.tqn.com/d/webdesign/1/0/C/m/1/puppy-in-shade.jpg" width="300" height="266" class="withfadeout">

Just like before, you change the opacity using the :hover selector:

.withfadeout {
-webkit-transition: all 2s ease-in-out;
-moz-transition: all 2s ease-in-out;
-ms-transition: all 2s ease-in-out;
-o-transition: all 2s ease-in-out;
transition: all 2s ease-in-out;
}
.withfadeout:hover {
-webkit-opacity: 0.25;
-moz-opacity: 0.25;
opacity: 0.25;
}

And here is how fading out looks.

You Aren’t Limited to Images with This Technique

You can make CSS buttons that fade when clicked and held. You just set the opacityusing the :active pseudo-class and put the transition on the class that defines the button. Click and hold this button to see what happens.

It’s possible to make essentially any visual element fade when hovered over or clicked on. In this example I change the opacity of the div and the color of the text when the mouse is over it. Here is the CSS:

#myDiv {
width: 280px;
background-color: #557A47;
color: #dfdfdf;
padding: 10px;
-webkit-transition: all 4s ease-out 0s;
-moz-transition: all 4s ease-out 0s;
-ms-transition: all 4s ease-out 0s;
-o-transition: all 4s ease-out 0s;
transition: all 4s ease-out 0s;
}
#myDiv:hover {
-webkit-opacity: 0.25;
-moz-opacity: 0.25;
opacity: 0.25;
color: #000;
}

Navigation Menus Can Benefit from Fading Background Colors

In this simple navigation menu the background color fades slowly in and out as I mouse over the menu items. Here is the HTML:

<ul id="sampleNav">
<li><a href="http://webdesign.about.com/">Home</a></li>
<li><a href="http://webdesign.about.com/od/css3tutorials/Css3-Tutorials.htm">CSS3 Tutorials</a></li>
<li><a href="http://webdesign.about.com/od/css/a/aastylelibrary_3.htm">CSS3 Properties</a></li>
</ul>

And here is the CSS:

ul#sampleNav { list-style: none; }
ul#sampleNav li {
display: inline;
float: left;
padding: 5px 15px;
margin: 0 5px;
-webkit-transition: all 2s linear;
-moz-transition: all 2s linear;
-ms-transition: all 2s linear;
-o-transition: all 2s linear;
transition: all 2s linear;
}
ul#sampleNav li a { text-decoration: none; }
ul#sampleNav li:hover {
background-color: #DAF197;
}

Browser Support

These techniques have very good browser support, and so will look reliably good no matter where you use them. The only exception to this is Internet Explorer. IE does not support the transition property and won’t until IE 10. You need to use browser prefixes for the other browsers, as indicated above.

The opacity property is supported by IE 9+, Firefox 3.6+, Chrome 10+, Safari 5+, and Opera 11+. If you need it to work in IE 6, 7, or 8, you can use the alpha filter (filter: alpha(opacity=xx); where xx is the percent opaque). Learn more about using opacity with IE.

Extra Fun—Swap Two Images

Here is an example of how to fade one image into another. Use the HTML:

<div class="swapMe">
<img src="image1.jpg" class="swap1" style="position: absolute;">
<img src="image2.jpg" class="swap2">
</div>

And the CSS which makes one fully transparent while the other is fully opaque and then the transition swaps the two:

.swapMe img { -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; transition: all 1s ease-in-out; } .swap1, .swapMe:hover .swap2 { -webkit-opacity: 1; -moz-opacity: 1; opacity: 1; } .swapMe:hover .swap1, .swap2 { -webkit-opacity: 0; -moz-opacity: 0; opacity: 0; }

How to Test Mobile Web Pages and Applications

When you are building web pages and applications for mobile devices, one of the most important steps you can take istesting. Testing gives you a good idea of what your readers are going to experience when they come to your site, and by fixing the major problems ahead of time, you can avoid issues with your customers later.

Testing a page or application for mobile uses the same checklist as testing for a full-sized browser.

You need to check that the page looks good before you post it, and then check it after it’s live. But one step that many designers ignore is testing on mobile devices. Even if you don’t have a separate page for mobile users, you should test your pages on mobile devices—especially tablets. Tablet devices are growing in popularity every year and it’s becoming more and more likely that some of your visitors will be on tablets. Touch screen tablets have some different design requirements, even if you expect them to use your standard full-sized site.

The more devices you can test your website on, the better, but your priorities should be:

  • iPad
  • iPhone and iPod touch
  • Android tablets
  • Android phones
  • other smartphones
  • standard cellphones

Most people browsing the web on older cellphones and less-capable smartphones will be fairly tolerant of design problems. But as the devices get more sophisticated, so will the expectations of your readers.

How to Test

There are a few steps you should follow for all your web pages to test effectively for both mobile and desktop browsers.

  1. First you should validate your HTML to make sure that there are no egregious errors. The HTML doesn’t have to be 100% valid, but knowing what errors there are can help you eliminate them as the cause of any problems you discover later.
  2. Then you should test your site on all thebrowsers you have on your computer. I recommend downloading and installing Firefox, Chrome, Safari, and Opera if you don’t already have them installed. These are available for Windows and Macintosh.
  3. If you have another computer with a different operating system (such as Mac OS or Linux) you should test your site on that computer’s browsers as well. A site might look fine on Windows Internet Explorer and then completely break on Macintosh Safari.
  4. Once you’re confident that the site looks okay on desktop computers, you should change the window size of one of the browsers to a smaller size. If you’re using CSS3 media queries, this may even make the design look different. You can use a plugin like Web Developer Tools to resize your browser window to different pre-set sizes to see how it might look on smaller mobile screens.
  5. If you don’t have access to a different machine, you should test in an online tool likeBrowserCam.
  6. Then test on as many mobile devices as you can. The more different devices you test on, the better your website or application will work for your customers.

Options for Testing on Mobile Devices

Test on the Real Devices

The best way to test a website on a mobile device is to load it on a mobile device. In general, this means posting the page or site to a live web server and then browsing to the page on the devices to test them.

Most people, of course, don’t have access to multiple mobile devices, but there are some options:

  • Buy the devices
  • Rent the devices
  • Borrow one from a friend or relative or ask them to test it and send you a screen shot and their thoughts
  • Go to a store that sells them and visit your site on the test machines
  • Use a testing company (such as uTest) to help test your site on mobile
  • Hire people with devices to test your site

Use an Emulator

If there is no way for you to get a real device to test on, you can use an emulator. Emulators don’t give you as good information because they can be slower than the real device, and they don’t show all the features of the devices. For instance, you access emulators with your mouse, not with a finger like on a touch screen.

There are computer desktop emulators for Android and iPhone/iPad that you can use to test your designs in.

  • Android—The android emulator is available in their developer’s kit.
  • iPad and iPhone/iPad—This emulator is included in the iOS developer kit, which you you have to buy from the Apple store for around five dollars (and is only for Macintosh).
  • Blackberry—There are emulators for several different Blackberry devices, they only work on Windows.
  • Windows 7 Phone—This is a part of the Visual Studio IDE.

There are also online emulators that include support for testing on mobile devices:

  • Opera Mini Simulator
  • dotMobi Emulator
  • DeviceAnywhere
  • BrowserCam

Online emulators can be even more limited than desktop emulators. Many of them only support taking screen shots on the devices and can’t show you how the interactive elements work (or don’t work) on the devices.

Emulators are not ideal for testing on mobile, but if they are the only option you have, they are better than not testing at all.

HTML5 Information

What is HTML5?

HTML5 is a new specification of HTML designed to follow HTML 4.01 and was created by designers who were not satisfied with the direction theW3C was taking HTML with the advent of XHTML 1.0. HTML5 adds features to helpweb application developers and to improve the interoperability among web browsers and user agents.

There are lots of new features to HTML5 including:

  • Tags to help with the structure of your pages like section, article, and aside.
    • New form tags to get more specific data in your forms
    • Multimedia tags to assist you in adding videoand audio to your web pages.
    • Plus, some tags have been removed from the specification.
    • What is HTML5
    • What’s New in HTML5

    How to Use HTML5

    HTML5 Doctype
    The first thing you should know about HTML5 is how to tell browsers you’re using it. You do this by using the correct doctype:

    <!doctype html>

    Building an HTML5 Page
    Put the doctype as the first line in your HTML document. Then add the <html> tag and start the <head> of your document. Inside the head, you should indicate the title of your document and the character set:

    <html>
    <head>
    <title>My First HTML5 Document</title>
    <meta charset="UTF-8">
    </head>

    Write your HTML5 document with the same tags as you would an HTML 4.01 document. Put your content in the <body> tag and close both the body tag and the html tag at the very bottom of the document.

    Here is a sample HTML5 document:

    <!doctype html>
    <html>
    <head>
    <title>My First HTML5 Document</title>
    <meta charset="UTF-8">
    </head>
    <body>
    <p>Put your HTML5 tags here</p>
    </body>
    </html>

    • New Tags in HTML5
    • HTML5 Tags Alphabetically
    • Use Dreamweaver CS5 to Write HTML5
    • Using HTML5 Layout Tags and Getting Browsers to Display Them

    HTML5 Browser Support

    HTML5 is currently a working draft at theW3C. Because it has not yet been approved as a formal specification, many web browsermanufacturers either don’t support HTML5 or only support some of the tags.

    According to Deep Blue Sky and their tests of browsers that visit their site, Safari 4 has the widest support, missing only geolocation API support. Chrome has good support of HTML5, except for geolocation API. This isn’t surprising as it’s based off of Webkit like Safari. Firefox 3.5 supports the audio tag, video tag, canvas, and even the geolocation API. Opera 10 only really supports the canvas tag reliably, but it doesn’t support audio or video. However it does have good support for web forms 2 and SVG support. And of course, Internet Explorer 8 doesn’t support HTML5 at all.

    HTML5 Tutorials

    HTML5 has a lot of new features. And one way to learn them is with tutorials. Here are a few:

    • HTML5 Canvas Tutorial
    • Introduction to HTML5 Video
    • How to Add Sound with the AUDIO Element
    • HTML5 localStorage() Tutorial
    • HTML5 Drag and Drop Tutorial
    • How to Make an HTML5 iPhone App
    • Coding A HTML5 Layout From Scratch
    • HTML5 Forms
    • How to Make All Browsers Render HTML5 Mark-up Correctly — Even IE6

    HTML5 and the W3C

    The W3C has a working draft document of HTML5. But it was originally started by theWHATWG group. They started the development of HTML5, and continued it until the W3C took over.

    HTML5 Validators

    Checking that your HTML5 web page is correct is a lot easier when you can validate it. But there aren’t a lot of HTML5 validators. Here are a couple:

    • The W3C Markup Validation Service
    • Validator.nu (X)HTML5 Validator

    But because there is a part of the specification that defines how a browser’s parser will treat the byte stream, this will allow us to know how any given browser will treat the HTML it is given. And this is regardless of how valid the HTML is.

    HTML5 Examples

    Examples are a great way to learn HTML5.

    • Basic HTML5 Canvas Tag Examples
    • HTML5 Video Example
    • HTML5 2-column Layout Example

    HTML5 Websites

    Here are a few sites that use HTML5 or you can submit your own:

How Do You Write CSS Media Queries ?

Responsive web design is an approach to building webpages where those pages can dynamically change their layout and appearance based on a visitor’s screen size. Large screens can receive a layout suited to those larger displays while smaller devices, like mobile phones, can receive the same website formatted in a manner that is suitable for that smaller screen. This approach provides a better user experience for all users and it can even help improve search engine rankings.

An important part of responsive web design is CSS Media Queries.

Media Queries are like little conditional statements inside your website’s CSS file, allowing you to set certain CSS rules that will only take affect once a certain condition is met – like when a screen size is above or below certain thresholds.

Media Queries in Action

So how do you use Media Queries on a website? Here is a very simple example:

  1. You would start with a well-structured HTML document free of any visual styles (that is what CSS is for)
  2. In your CSS file, you would start as you normally do by styling the page and setting a baseline for how the website will look. Say you wanted the font size of the page to be 16 pixels, you could write this CSS:
    body { font-size: 16px; }
  3. Now, you may want to increase that font size for larger screens that have ample real estate to do so. This is where Media Queries kick in. You would start a Media Query like this:
    @media screen and (min-width: 1000px) {  }
    1. This is the syntax of a Media Query. It starts with @media to establish the Media Query itself. Next you set the “media type”, which in this case is “screen”. This applies to desktop computer screens, tablets, phones, etc. Finally, you end the Media Query with the “media feature”. In our example above, that is “mid-width: 1000px”. This means that the Media Query will kick in for displays with a minimum width of 1000 pixels wide.
    2. After these elements of the Media Query, you add an opening and closing curly brace similar to what you would do in any normal CSS rule.
    3. The final step to a Media Query is to add the CSS rules that you want to apply once this condition is met. You add these CSS rules between the curly braces that make up the Media Query, like this:
      @media screen and (min-width: 1000px) { body { font-size: 20px; }
    4. When the conditions of the Media Query are met (the browser window is at least 1000 pixels wide), this CSS style will take effect, changing our site’s font size from the 16 pixels we established originally to our new value of 20 pixels.

    Adding More Styles

    You could place as many CSS rules within this Media Query as needed to adjust your website’s visual appearance. For instance, if you wanted to not only increase the font-size to 20 pixels, but also change the color of all paragraphs to black (#000000), you could add this:

    @media screen and (min-width: 1000px) { body { font-size: 20px; }  p { color: #000000; } }

    Adding More Media Queries

    Additionally, you can add more Media Queries for every larger sizes, adding them to your style sheet like this:

    @media screen and (min-width: 1000px) { body { font-size: 20px; }  p { color: #000000; { }  @media screen and (min-width: 1400px) { body { font-size: 24px; } }

    The first Media Queries would kick in at 1000 pixels wide, changing the font size to 20 pixels. Then, once the browser was above 1400 pixels, the font size would change again to 24 pixels. You could add as many Media Queries as needed for your particular website.

    Min-Width and Max-Width

    There are generally two ways to write Media Queries – by using “min-width” or with “max-width”. So far, we have seen “min-width” in action. This causes the Media Queries to take effect once a browser has reached at least that minimum width. So a query that uses “min-width: 1000px” will apply when the browser is at least 1000 pixels wide. This style of Media Query is used when you are building a site in a “mobile-first” manner.

    If you use “max-width”, it works in the opposite manner. A Media Query of “max-width: 1000px” would apply once the browser has fallen below this size.

    Regarding Older Browsers

    One challenge with Media Queries is their lack of support in older versions on Internet Explorer. Thankfully, there are polyfills available that can patch support for Media Queries in those older browsers, allowing you to use them on websites today while still ensuring that the display of that site does not look broken in older browser software.

SEO Basics That All Web Designers Should Understand and Use

The best designed, most useful website in the world is pointless if the people who need the information, products, or services that the website offers cannot find it online. While many website designers think that search engine optimization (SEO) is a shady practice that is not part of their job, this is simply not true. Done correctly, SEO is not about tricking search engines – it is about making sure that a website can be found by the people who are looking for it.

While there are many reputable specialists that could work on the more advanced, long term SEO strategies for a website, there are also some basics that should be a part of all websites from the very beginning. These basics and best practices are ones that all web designer should understand and be ready to put to use on the work that they do.

Content is King

The goal of all search engines is to ensure that the most relevant, highest quality content rises to the top for any search query on that site. While a number of factors are considered in the algorithms that the search engines use, an algorithm that changes frequently, one constant is that quality content is critically important to a site’s SEO success.

People do not come to websites to admire the visual design or scroll through the code of the page – they come for the content that the site contains. Great content that is useful, relevant, and timely encourages people to share that content with other via links on social media and other websites, through email, or even just by good old fashioned word of mouth.

These links act as a “vote of confidence” for the site’s content, letting search engines know that it is good quality. The more “votes” that content has from legitimate links, the more notice a search engine will place on that content and rank it accordingly.

All SEO strategies must include great content, so ensuring that a website’s content is up to snuff is Step 1 in any plan.

Structure Matters

The way that a site is constructed will have an impact on how effectively search engine robots can crawl the site’s pages and understand its content. Code that is well formatted with the proper separation of structure and style (HTML and CSS) helps a search engine quickly get through the pages. The use of proper HTML elements also ensures that search engines understand the content and can rank the site accordingly.

Mobile-Friendliness

Ensuring that websites work well on the wide range of devices and screen sizes being used to access web content today is important from a user experience standpoint, but “mobile-friendliness” will also have an impact on that site’s SEO rankings.

Performance

Websites need to load quickly in all browsers, both on desktop computers and on mobile devices. The way that a site is constructed and the resources it requires, including images, video, etc., will impact the overall performance of a website and can have a negative impact on that performance and on search engine rankings.

Regarding Meta Tags

An often misunderstood aspect of website design and SEO, HTML meta tags do play a role on your website, but that role is not about search engine optimization. Years ago, meta tags did affect overall rankings, but that day has passed.

Links

The best way to improve overall rankings is with inbound links to a website – but not all links are created equal. Links from scammy link farms will hurt, rather than help, a website’s rankings. The kind of links that are helpful are quality links from reputable websites. The best way to get these links is by adding quality content to the site that will encourage others to want to share it – which brings our SEO basics back to where we began, with content. All quality SEO initiative will, indeed, begin and end with a website’s content.

SEO Is Not a 4-Letter Word

Mention the term “search engine optimization” to a group of web designers and you are likely to get reactions ranging from general ambivalence to outright disgust. What you are unlikely to hear is much enthusiasm for the role that SEO shouldplay in a website project. This is because search engine optimization too often conjures up notions of shady practices more focused on tricking search engines than actually helping people find the content that is important to them.

Yes, SEO is an aspect of website design that is prone to abuse by dishonest shysters, but real SEO is not a bad thing. At its best, optimizing a website for search engines is really about optimizing for people.

Optimizing for People

Part of the problem with SEO is that the very name suggests that you are building a website for search engines, but Google is not buying the product or service that your company offers. The search engines are not your customers, real people are your customers and they are who you should be optimizing for.

Thankfully, when you optimize your website for people, you will find that those are the same things that will actually make your site more appealing to search engines.

Start With Content

The goal of all search engines is to rank websites so that the most relevant and highest quality results are returned for any given search query. They want the best content to rise to the top, so the very first area of consideration when it comes to SEO needs to be your site’s content.

Follow Best Practices

Many of the “SEO changes” that websites often require are really just best practices that should’ve been a part of the site from the get-go – which means that if you start with these best practices in place, you are already ahead of the curve!

Website best practices that are essential to SEO include cleanly coded pages that have a separation of structure (HTML) and style (CSS), the proper use of HTML elements like headings, and even a website that is responsive. Google now uses this “mobile-friendliness” as a factor in their ranking algorithms, which is a perfect example of how you can improve the visitor experience on your site (by ensuring it works well across different devices and screen sizes) and get SEO benefits in return!

If It Sounds Too Good To Be True…

As I mentioned early in this article, SEO is unfortunately prone to disingenuous “experts”, as well as outright scam artists, looking to capitalize on companies who do not fully understand SEO and are therefore willing to pay for a service to help them out.

There are many reputable SEO specialists out there who will provide a quality service, but you need to be careful. A good rule of thumb to follow is that if something sounds too good to be true, it very likely is. If a company tells you that they can get you to the top of Page 1 in Google in 2 weeks and for just $50, then they are doing something shady. This could be a big problem for you, because bad things can happen when you try to cheat the search engines.

Don’t Try To Trick Google

Websites are on Google (and other search engines) at their discretion and they can take you out of their database if they choose to do so. When you try to trick the search engines, you run the risk that you will break their rules and they will penalize you for it. Yes, the “Google blacklist” is a real thing and once you are on it, it is a serious challenge to get back in that search engine’s good graces.

Remember what I said at the start of this article – the goal of all search engines is to rank websites so the most relevant results are returned. If you try to trick that search engine into ranking your site higher than it should be, you will run into problems. Google has an entire team of people dedicated to making sure their algorithm is the best that it can be and that no tricks will work on it. While some of those tricks may work in the short term, rest assured that Google will catch on and there will be a price to pay.

Helping People Find What They Need

Ultimately, SEO is about helping people find the website content they need at a given time. It is not about tricking anyone, it is about being helpful and that should be something that all web designers can get behind.

How Meta Tags Really Affect Your Website

Meta Tags are an important, but often misunderstood, aspect of web design. Meta Tags contain information or “metadata” about your website. This information, which is in the <head> of an HTML document, is not meant to be read by the people that visit that site, but is intended for browsers, web servers, and search engines.

Now, you may have noticed that “search engines” were included in the aforementioned list.

Yes, search engines do read a site’s metadata, but they do not use that information in their search ranking algorithms any longer. Years ago, search engines did use Meta Tags as one of the signals that influenced rankings, but rampant abuse of these tags destroyed their use as a rankings signal in all major search engines today. This causes confusion for many people who may have once been told that they had to “change their Meta Tags” in order to improve search engine rankings, but who have not kept up with changes in SEO practices and do not realize that, while still valuable in many ways, Meta Tags no longer have impact on search engine rankings.

So what do Meta Tags do in 2015 and how do they, if at all, help a site be optimized for people? Here’s a rundown of the most common Meta Tags used on websites and exactly what their purpose is.

Description

The Meta Description tag is one of the ones that used to be used by search engines for ranking purposes. Because of this, many people still mistakenly believe that they can seed this tag with SEO-centric keywords and impact their search engine placement.

That is no longer the case, but that does not mean this tag is not still important. Many search engines will use the content of this tag, which should contain a short description of the content on that page, as the description used in the search engine results page (SERP) when that page is returned with a search query. There is no guarantee that the search engine will use the text from your Meta Description tag, but they do take it as a suggestion, so it is a good idea to write a clear, concise description of your page using this tag.

Keywords

Keywords was another tag that search engines used to use in their rankings calculations. This is the one that was prone to abuse and it is no longer a factor in rankings. Some SEO specialists use this tag simply to list out the keywords that a given page is optimized for. While the tag will not impact SEO rankings, it does give anyone working on the code of the site a clear list of which keywords are relevant to that page.

Author

The Meta Author tag is often used to list the person or company who created that page or website, almost like a signature in the code. Some web designers prefer this method over adding a “Website design by…” link in the footer of the site.

Robots

The Meta Robots tag lets the search engine’s crawlers know whether or not a page should be indexed and included in their database. If you have a page on your site that is not intended for the general public, like a page for employees only, using the Robots tags is one way you can block that page from search engines.

Language

Websites that contains pages with different languages can use the Meta Language tag to let the browser know which language a given page is written in. This is not for computer coding languages, but for human languages like English, Spanish, French, etc.

Revised

The Meta Revised tag lists when the page was last changed. This can be helpful since it will let a search engine know if recent changes have been made to the content of that page and if, therefore, that page should be crawled again and reindexed.

Title Tag

One final HTML element that is worth mentioning is the <title> tag that is found near the start of all webpages. Like Meta Tags, the title tag is not really meant for people, but rather for machines. Unlike Meta Tags, however, the title tag does show up in the web browser in a few places:

  • The top of the browser window, in the toolbar
  • When a page is added as a bookmark or favorite, this is the title that will be used
  • In the SERP page, this is the title that will be used for the page, displaying the first 50 to 60 characters

Each HTML document must only contain 1 title tag and this tag is actually used by search engines in their ranking algorithms. The content of the title tag should be a short, clear description of the content found on that page.

Web Design For a Multi-Device Audience

Take a moment and think about all the devices that you own that can be used to view websites. If you are like most people, this list has grown over the past few years. It likely includes traditional devices like a desktop and/or laptop computer along with devices that have come into prominence over those past few years, including smartphones, tablets, wearables (smartwatch, Google Glass), gaming systems, and more.

The device landscape is getting larger and more diverse all the time, which means that to thrive on the Web today (and in the future), websites must be built with a responsive approach and CSS media queries and must consider how people will combine these different devices into one web-browsing experience.

Enter the Multi-Device User

One truth that we have seen play out is that if people are given multiple ways to access the Web, they will use them. Not only are people using lots of different devices to access website content, but the same person is visiting the same site using those varied devices. This is where the concept of the “multi-device” user comes from.

A Typical Multi-Device Scenario

Consider a common web interaction that many people experience each day – browsing real estate websites in a search for a new home. This experience may begin on a desktop computer where someone enters the criteria of what they are looking for and reviews different property listings that match that query.

Through the day, this person may look at specific properties again on their mobile device, or they may receive alerts to their email (which they will check on their mobile device) for new listings that match their search parameters. They could even get those alerts to a wearable device, like a smartwatch, and review basic information on that tiny screen.

This process could continue through the day with more visits to the site on a different desktop computer, perhaps from their office at work. That evening, they may use a tablet device to show any listings that are particularly interesting to their family to get their feedback on those properties.

In this scenario, our website customer may have used four or five different devices, each with very different screen sizes, to visit the same site and look at the same content. This is a multi-device user, and if the website they are visiting does not accommodate them on all these different screens, they will simply leave and find one that does.

Other Scenarios

Searching for real estate is only one example where users will jump from device to device during their overall experience with a site. Other examples include:

  • Searching for an automobile to purchase
  • Planning a vacation
  • Reading news articles
  • Researching home improvement ideas
  • Looking for local contractors/services
  • Planning a wedding or other big event
  • Following a sports team or sporting event

In each of these cases, the web experience is likely to stretch to more than one session, which means there is a chance that a user will use different devices based on which one is convenient for them at any given time.

Best Practices to Follow

If the websites of today need to cater to an increasingly multi-device using audience, then there are some basic principles and best practices that should be followed to ensure those sites are ready to properly handle these visitors and that they rank well in search engines.

  • Responsive Website – a responsive layout that can adapt and change for different screen sizes is critical to support the variety of web-connected devices available today.
  • All Content Should Be Available – if someone can access certain content or features when they visit the site on one device, they expect those to also be available when they return on other devices. The content should be presented in a way that is suitable for each device, but no content should be “hidden” or “turned off” for certain devices.
  • Readability is Key – no matter what kind of devices or what size screen is being used to visit a website, the ease of reading that site is important. This means that the typographyis an important design element to focus on. If someone has a hard time reading a site’s content, they are likely to leave the site altogether.
  • Consistency Amidst Diversity – while the layout presented for each different screen size will be different, there should be consistency from one device to another. The overall experience should be connected so that users do not have to relearn the site every time they visit it on a new screen.
  • Make Performance a Priority – websites should load quickly and work well on all devices, including mobile devices with less than perfect download speeds. Overall website performance should be a priority in all aspects of a site’s design and development – after all, no one will ever say that a website loaded too fast or worked too well!

Defining Responsive Web Design

There was a time when we thought that people only visited websites using large-screen, desktop computers. That day is no more.

While most websites of the past were designed for large screens, on today’s Web, the wide range of devices and screen sizes being used to access those sites means that a “one size fits all” solution is no longer viable. Websitesneed to accommodate screens from the very large to the very small with a layout and experience suited to each.

The way this is done is through an approach called “responsive web design.”

The 3 Qualities of Responsive Web Design

Responsive Web Design as we know it was first presented by Ethan Marcotte in 2010 inan article published by A List Apart and later in his book “Responsive Web Design”. Ethan defined this approach as having three distinct qualities:

  1. A flexible, grid-based layout – instead of having fixed pixel sizes in a design, layout areas like columns of content are built with percentages so that while their size may change, their proportions to each other will remain.
  2. Flexible images and media – similarly, images and media like video content can be sized with percentages instead of fixed pixels widths. This means that images can scale with a website for different screen sizes.
  3. Media Queries – part of the CSS3 specification, media queries allow layout changes to be dynamically made to sites when certain conditions are met. For instance, once a screen’s resolution falls below a certain point, content presented in columns laid out side by side can be changed into one single column with the content presented on top of each other.

With this approach, a web designer could develop one website whose layout would automaticallyd the  change based on a visitor’s screen size.

An Improvement Over “Mobile-Only” Websites

Prior to the introduction of responsive web design, a separate, “mobile-only” website was the solution that many companies turned to in an effort to provide a better user experience to customers who were increasingly turning to mobile devices. While this approach was better than doing nothing (and delivering the large screen version of the site to those small screen devices), there were still many drawbacks to using mobile-only websites, including the fact that you now had two distinct websites to maintain. With a responsive website, however, there would only be one website to develop and manage and that site could accommodate large screens, small screens, and those that fell between those extremes.

Filling In the Gaps

Filling in the gaps between the large screens that the normal version of the site would be designed for and the small screens that the mobile-only website was meant to accommodate was another benefit of taking a responsive approach. The rise of iPads and other tablet devices showed that there was a need to consider these “medium sized” screens. Since responsive websites are fluid in their layout, they can fill in these gaps while still giving companies a single site to manage.

Today’s Best Practice

Initially, responsive web design was embraced by early adopters – mainly web designers who wanted to try this new approach on their own sites. Slowly but surely, however, it has become an industry-wide best practice. Today, Google lists responsive web design as their recommended approach to supporting different devices and screen sizes. They have even started to use responsive web design and “mobile friendliness” as one of the factors they weigh in their ranking algorithm.

Challenges

While responsive web design may be a current best practice and a powerful way to build websites for a multi-device audience, this approach does come with some challenges. Website performance becomes more important than ever and common website elements like images and navigation have to be reconsidered in order to work effectively in a responsive setting.

Tips for Evaluating and Improving Your Website’s Performance

Website performance is an important, but often overlooked, aspect of a website. Not every visitor to your site will have a fast and reliable connection. Many of those visitors will be on connections with variable connection speeds, a reality in today’s increasingly mobile-centric world of web design. Other visitors may be in areas or countries where connection speeds are simply slow to begin with.

Even if a person has lightning fast Internet speeds, a website that loads quickly will benefit them as well. After all, no one has ever said “this website loaded too fast for me!”

Taking a website’s performance seriously is an important step in ensuring the overall success of that website. Let’s look at some of the tools that can be used to evaluate a site’s performance, as well as some of the culprits which may be negatively impacting that performance.

Evaluation Tools

Knowing how your site is working currently is the first step to improving performance. Here are some helpful tools that you can use to assess your website:

  • Pingdom Tools Website Speed Test – this site will evaluate the download size and speed of a site and show you all the resources (images, CSS, Javascript, etc) that the site needs to render properly
  • What Does My Site Cost? –this site puts a dollar amount to the data download on your website and shows you what the cost would be in various countries throughout the world. If your site has an international audience, this can be especially helpful
    • Webpage Test – this helpful site provides you with a wealth of information and tips for how you can improve a site’s performance.

    Once you’ve evaluated a site, you can look at the areas of that site that could use improvement from a performance/download size perspective.

    Images

    The average weight of a website has climbed to nearly 2MB and the bulk of that size is due to images. Simply addressing the size of images on a website is one way that you can significantly reduce the download size of that site’s pages.

    To ensure that images are as small, file size wise, as possible, raster images (JPGs, GIFs, and PNGs) should be optimized for web delivery. The goal is to reduce the file size as much as possible while still delivering nice looking images. New image formats, likeSVG and WebP, can also be explored as ways to lower the overall weight of a page’s images.

    Fonts

    With web fonts, designers have access to wide range of typefaces that can be used reliably on the websites they design and develop. This is awesome from a design variety standpoint, but it can be step in the wrong direction for webpage loading time. Every time you use a new web font on a site, that font needs to be retrieved from the server and loaded on the page (unlike system fonts that are loaded directly from a person’s computer). Loading multiple fonts for a page can definitely impact download speed.

    Animation

    Animated effects, like a slideshow-like “carousel” display on a website’s homepage, can add some nice visual WOW factor to a site, but it will do so at the expense of download time (remember, every one of those large images needs to be loaded onto the page, along with the Javascript needed to run the animation effects).

    From a download performance perspective, just one image/message on your homepage’s billboard area is preferable to an animated carousel. Additionally, research conducted on the use of these animated carousels shows they are less than effective anyway, so by removing that effect, you can often improve download speed without any negative impact on the site as a whole.

    Web Hosting

    The elements of your webpages are not the only factor that impacts performance. Your website hosting provider also plays a role in this equation. By using the evaluation tools linked to earlier in this article, you can discover some suggestions that apply to your website hosting settings. Share those findings with that provider to see what they can do on their end to improve your site’s performance from the server level.

    In Summary

    A website that loads fast is a wonderful thing. This is increasingly important as more people use mobile devices to access websites. An important part of your job as a web professional is to ensure that your websites take performance seriously and are ready to do their part in making sure the pages load quiclly for all users, regardless of device or connection speeds.

Deciding Which Image Format is Right for Your Website

When it comes to adding images to a website, there are a number of possible file formats that you can use. Each of these image formats have instances in which they excel, and knowing when to use each format is an important part of effective website design.

Let’s take a look at the image formats that we have available to us as web designers.

JPGs

JPG files are a good choice when need substantial color depth on an image – like with a photograph.

If the image you are using on your website is a photo or a person or a place, then a JPG is likely going to be the right choice for you.

JPG files can be saved with a range of different quality settings. While you may lose some of the visual quality and crispness of an image as you get towards to the lower settings, you will also reduce the file size of the image and make it better from a download/performance perspective. The compression of JPG images make them a good choice for web images.

GIFs

GIF files can be used for graphics that have only a few simple colors. Many illustrations and even logo files are often a good choice for GIFs.

GIF files also support transparency, but it is an “all or nothing” approach to that transparency. Areas of a GIF can either be fully opaque or fully transparent. If an image has hard lines and angles and requires parts of the image to be fully transparent, a GIF file can be used.

Finally, GIF files can also include simple animation. Animated GIFs are often used online for humorous purposes and as memes.

PNGs

PNGs can be used in a number of ways online. Like JPGs files, they include substantial color depth and can be used for photos. The downside to using PNGs instead of JPGs is that the file size of PNGs is often much greater than the JPG counterparts. The image quality is also greater, but when you consider download speed for web images, JPGs are often a better choice than PNGs.

Where PNG files excel is with transparency. Like GIFs, PNGs do support transparency, but PNGs offer a range of opacity support. This means that image areas do not need to be either fully transparent or fully opaque. With PNGs, you can have semi-transparent areas. PNGs also support images with curved areas, like circles, that also need transparency. Because these images are raster-based, which means they are made of small pixels or squares of color, this support for different levels of transparency allows for smooth looking curves and edges. If you have an image that is a complex shape  and requires transparency, a PNG is typically the best choice.

SVG

SVG means Scalable Vector Graphics. Whole this file format has been around for quite some time, it has really started to grow in popularity recently and it has become an important part of many responsive websites. SVG files are vector-based. This means that they are created with mathematical lines as opposed to pixels of color. SVG files are often very small in file size, but they can be scaled to any dimensions needed without changing that file size, making them very attractive for web delivery and improved performance, especially with responsive websites.

SVG files are used for simple illustrations, like icons, and they can be styled and animated with CSS.

WebP

WebP is an emerging file format that has been developed by Google specifically for web use. Designed to be compressed, WebP supports color depth like JPGs and PNGs do, and it also supports alpha transparency and even animation, making it something of a workhorse image format! Currently, only Google Chrome and Opera support the WebP file format natively, but as this is an emerging format, expect other browsers and software packages to extend support for this file type in the future.

Which Web Design Career Path Is Right For You?

When someone asks me what I do for a living, I often respond by saying that “I am a web designer.” It is an easy answer that most people can understand, but the reality is that the title “web designer” is an umbrella term that can cover a number of much more specific careers within the web design industry.

In a broad sense, web design careers can be broken down into two categories – specialists and generalists.

Specialists focus on one particular branch or discipline within the industry while a generalist has a workable knowledge of multiple areas.

There is value in each of these career directions, and understanding the opportunities they each offer is an important step in determining which path may be right for your career.

The Generalist

There are many, many branches of knowledge that stem from the tree that is website design. Someone who identifies as a “web designer” is likely to have an understanding of design principals, front-end development (HTML, CSS, Javascript,responsive web design), search engine optimization, usability and accessibility best practices, website performance, and more. A generalist is someone who possesses a working knowledge in many of these areas, and while they may not know everything that there is to know about any one particular area, they are at least fluent enough to use that knowledge in their work. In many cases, they may be what is known as an “80 percenter.”

The 80 Percenter

Yvon Chouinard, the founder at the clothing company Patagonia, talks about the concept of the “80 percenter” in his book, “Let My People Go Surfing.” I first read Yvon’s quote in an article by web designer, Dan Cederholm, and I immediately identified with this concept. Yvon says:

“I’ve always thought of myself as an 80 percenter. I like to throw myself passionately into a sport or activity until I reach about an 80 percent proficiency level. To go beyond that requires an obsession that doesn’t appeal to me.”

This is an accurate description of the generalist career path in web design. Getting to 80 percent proficiency with the various disciplines in web design is absolutely enough to have a working knowledge of that skill. The remaining 20 percent is often so specialized that the focus needed to acquire that knowledge (often at the expense of learning other skills and becoming an 80 percenter in additional areas) is often unnecessary in the scope of a web professional’s normal day-to-day work. That does not mean that this specialized knowledge is never needed. There are certainly instances that require that level of specialization, and these are the instances when a specialist is needed.

The Specialist

Any of the various branches and disciplines in web design lend themselves to specialization, but as the quote from Yvon Chouinard states, the obsession required to achieve this knowledge and rise above that 80 percent proficiency level is substantial. To achieve this, other skills must typically be neglected in favor of the specialization. This means that instead of having a working knowledge in multiple areas, a specialist is keenly focused on being an expert in their specific area. This can be incredibly important in those instances where “working knowledge” is not enough to get the job done.

Choose Your Path

There are benefits and drawbacks to each of these career paths. The generalist’s well rounded knowledge base makes them more marketable in many ways. For agencies and teams that require employees to wear multiple hats, a generalist will be who they are looking for.

If an agency has a special focus in on particular area, however, then a generalist’s knowledge may not be sufficient. In these instances, a specialist will be required for the position that the agency is looking to fill, and since there are far more generalists in the web industry than specialists, when a specialist is called for, these skills can make that person highly desirable.

Ultimately, choosing between a generalist and a specialist is not only about what it does to your marketability; it is also about what appeals to you on a personal level. Many web professionals enjoy the ability to be involved in multiple areas of a project. Others like the specialization of one area in which they are passionate about. In the end, the web design industry needs both generalists and specialists, so which ever path you choose is one that will be step towards a successful web design career.

Choosing the Right Content Management System (CMS)

A CMS (Content Management System) may be the right choice for your web design and development needs, but with so many CMS software solutions available today, choosing the right one to suit those needs can seem to be a daunting task. In this article, we will look at some of the things you should consider when making this choice.

Consider Your Technical Knowledge of Web Design

A first step in determining which CMS is right for your projects is understanding how much technical know-how you will need to work with that software.

If you have years of experience with web design and are fluent with HTML and CSS, a solution that gives you total control over the code of a website may be an attractive solution for you. Platforms likeExpressionEngine or Drupal would fit these requirements.

If you have absolutely no understanding of website coding and want a system that handles that code for you, but still allows you to design fully custom websites, a solution like Webydo and their code-free development platform may be the best fit.

If you want some flexibility in how a solution will allow you to work, then WordPress may be the right choice to fill your needs. Very little technical knowledge is required to select an existing theme to get started with this platform, but if you do want to get deeper into the code and fully customize a site, WordPress gives you that ability as well.

These are just a few examples of different CMS platforms and the level of technical knowledge that is needed to utilize them effectively. Whether you choose one of these platforms or turn to another solution, understanding how much or how little technical experience is needed will be an important factor in which choice makes the most sense for you.

Review Available Features

Another useful aspect of CMS platforms arethe features that many of these solutions either come with natively or which can be added through the addition of a plugin or add-on. If you have specific features that are important on your site, you will want to ensure that any CMS you choose will include those features.

For instance, if your site needs to includeEcommerce capabilities, you will want to find a solution that allows for this. If that feature is critical to your site’s success, you may even want to begin your search by looking for platforms that support these critical features the best.

Look at Community and Support

Once you begin using a CMS, it is a chore to move the site to another one, so you unless something goes historically wrong with your site and the CMS you are using, you are likely going to be with that platform for a while. This means that the community of other professionals and companies that also utilize that platform will be important to you, as will the support that is offered by that community or by the software company that makes the CMS.

When considering these points, look for a healthy, robust community that stands beside a product. Also look for support options to have any questions you may have answered, especially as you first begin using the new platform.

Compare Pricing

There is a wide variety of pricing options for CMS solutions. Some platforms are free while others require a purchase. Other software solutions require a subscription to use, but which also come with other benefits, like website hosting or automatic upgrades of the software. Pricing should not be the most important consideration for you to look at, but it will absolutely factor into whatever decision you make (and the price you pay for the CMS will also impact how much that website costs for your clients).

Get Feedback

Just like you would ask for references on an employee you intend to hire, it makes sense to speak to other web professionals about their experiences with the CMS. Look for professionals whose skills are similar to your own to get an understanding of how they use the solution so you will know what to expect if you decide to make that choice as well.

In Summary

When evaluating CMS platforms, there are a number of factors to consider, but the points covered in this article should help you quickly narrow down the seemingly daunting number of choices to a select group of solutions that will fit your specific needs.

Interview Tips for New Web Designers

So you are fresh out of school and ready to enter the wonderful world of the web design industry! This is an exciting time, but it can also be one that is never wracking and stressful as you think about finding that first position in this industry. Job interviews are something that few people enjoy doing, and as a new web designer, the pressure of these interviews can feel even more intense.

Over the years, I have interviewed a number of fresh, new website designers for positions.

While different employers will be looking for different things, the tips covered here are ones that should benefit you regardless of the company you are interviewing with.

Have an Online Portfolio of Your Work

When I review resumes, the first thing I look for is a link to a designer’s portfolio. It’s great to see their school information and work background, but I really want to see concrete examples of the work that they can do! I want to look at their designs and peruse their HTML and CSS code. That will give me a much better indication of a person’s abilities than seeing where they received their degree from – and if they do not have a degree, but can show that they can do the work, I am definitely interested in speaking to them more.

Many young designers find it challenging to have a portfolio of work is they have yet to have a job where they can do that work. Yes, this can be a hurdle, but it is easily overcome. I would rather see examples of websites designed for fake companies than have nothing at all to look at.

Even the designer’s own site is one that I want to review as I consider whether their work warrants a further conversation.

Bottom line, I have spoke to many new designers who had a great portfolio but no impressive degree or experience, but I have rarely, if ever, contacted a designer who had credentials but could not show any example of their work online.

Show Me You Want To Keep Learning

The web industry is one that requires lifelong learning. To stay up-to-date and relevant, web professionals must be committed to education in an industry that is constantly changing. When evaluating a new web designer, I look for a desire to keep learning long after they have left school.

Almost any interview will include some time where the candidate can ask questions of the interviewer. I always love it when that candidate asks about our company’s training policies. This shows that they are thinking about their ongoing education and are interested in growing in their field.

Know Something About Our Company

This is a tip that applies to all candidates for any position, anywhere. When the interviewer opens up the conversation for questions from you, we are looking for questions that are not readily answered on our website.  Doing this shows that you did not take the time to research our company properly before your interview.

On the flip side of this scenario, if you reference something that you did see on our website and ask for clarification or more details, that shows that you’ve done your homework and were well prepared for our conversation.

Know What You Want Out Of Your Career

If this is you first position, tell me what you want to do next. I love to hear a new designer’s future goals and ambitions. Yes, those ambitions are often a bit lofty for a new professional, but that is awesome!  The enthusiasm of young designers is infectious and I want to see that enthusiasm shine through in your attitude and in your goals for the future of your career.

Tell Me What You Do Away From The Computer

During interviews, I always ask the question “what do you do away from the computer?” I absolutely hate it when candidates tell me that their whole life is about website design and that is all they really do in their free time in order to get better. When I hear this, I think one of two things are happening – either this person is lying to me and telling me what they think I want to hear (they are wrong) or they really do have no life away from the computer screen. Neither of these are good and I don’t want to hire this person either way.

When I look to hire a new person, I am looking for someone who can not only do the actual work, but who will also fit the company culture and will be enjoyable to be around. After all, we will be spending lots of time together, so I want to hire someone who is not only a good designer, but an interesting person. One of the ways we can assess that is bytalking about their hobbies, likes, and passions. If you refuse to talk about those because you think I only want to hear that you are a web designer 24/7, then I am unlikely to be interested in spending much time with you (which means you are not getting the job).

Try To Relax

For my final tip, I would simply suggest that you relax. Remember, the interviewer you are speaking with sat on your side of the table at one time too. Hopefully they remember that experience and all the emotions that you are undoubtedly feeling at that point. Be calm and just have a conversation, because at the end of the day, that is what this interview is about – two people having a discussion.

Where To Find Images to Use On Your Website

When it comes to choosing images for your website, there are the technical considerations of which file format is the correct one to use plus the aesthetic considerations of which image will be best in your design.  You must also, however, figure out where to find these images.

The right choice for your website will depend on the specific needs (and budget) of that project, so having multiple options available to consider can be important.

Let’s take a look at some of the places you can turn to to find images to use on your website.

Free Image Resources

There are a number of websites that offer no-cost images that can be downloaded and used in your projects. Sites like MorgueFileand Pixabay are just two of these sites which allow you to use images free of charge.  While the price of these resources may be attractive (you can’t get much cheaper than “free”), the downside to free image websites is typically the quality of the images offered. While you can certainly find some attractive images on these sites, you often have to comb through lots and lots of bad images to find the quality ones that would work in your project.

Free images may be easy on the budget, but you get what you pay for, and oftentimes these free image sites may not cut it for serious website projects.

Creative Commons Images

Some no-cost image sources require you to attribute the image to the owner through a Creative Commons license. When searching free image sites, be sure to check the attribution requirements for the images you select.

The popular photo site Flickr includes many images that are available under a Creative Commons license. You can use the websiteCompFight to search the Flickr database and filter the results to only show Creative Commons images.

Stock Photo Sites

If the free photo resources do not get you what you are looking for, you can turn to one of the many stock photo sites available today. These sites feature a staggering array of images and graphics available at costs that start at almost free and go up from there.

When it comes to lowest cost stock photo sites, you need look no further thanDollarPhotoClub.com. As the name implies, all the images on this site only cost $1 and the selection is pretty good, although not as exclusive as some of the other, more costly stock photo resources.

iStockPhoto.com and Veer.com are two mid-range (in terms of pricing) stock photo sites that offer lots of great photos, including many that are exclusive to those sites, at very reasonable prices (anywhere from a few dollars to a few hundred dollars, depending on the size that you need to download). Different images come in at different prices, but sites like these feature vast databases of Royalty Free images (which means you purchase it once and can use it for as long as you’d like) to meet almost any need and budget.

Higher cost stock photo sites like Getty Images will feature images unavailable anywhere else, but at a cost that may put them out of reach for smaller projects without sizable budgets. Again, you get what you pay for. Higher end photo sites will feature shots that will take your breath away and will look stunning in your work, but you will have to budget for their use.

No matter your needs or budget, there is likely a stock photo site that will suit you. Just remember that the lower the cost of the images, the more likely that those images have been used by others as well. When you get into the higher cost images, there is less likely to be a chance that the amazing shot you selected to center a design around will show up somewhere else too!

Custom Photography or Illustration

If exclusivity is important to you (meaning you do not want the images you use to show up anywhere else), then free or stock image sites are not for you. In these instances, you will need to turn to custom photography or illustration.

Hiring a photographer or illustrator to create exactly what you need for a project is incredibly powerful. You will get a high quality image that is unique to you and your project, but once again (are you seeing a pattern here?), you get what you pay for. Photographers and illustrators are professionals, and as such, their work comes with a cost that is going to be greater than just downloading some stock images.

If your project’s budget will support custom photography or illustration, seriously consider this route since it is the best way to get exactly what you need.

An Overview of Common Terms Web Design

Whether you are looking to break into the web design industry or simply speaking with a web designer about a potential project, one thing you will discover very quickly is that there is a lexicon unique to this profession. For those who are new to web design, this language barrier can seem intimating, but the reality is that you can quickly “talk the talk” by understanding some common terms and acronyms from this industry.

URL

URL stands for “Uniform Resource Locator”, although no one calls it that in normal conversation (which means you do not need to remember what the acronym stands for!). This is your website’s address, for instancehttp://webdesign.about.com is one example of a URL. This term is commonly used along with “domain name”, which is the name you pay to use for your website. In this case, the domain name would be “about.com”. The “www” part of the URL is known as a “sub-domain”. While many website URLs do include the “www”, that sub-domain is actually not required and other sub-domains could be used in place of “www” – for instance, you could have secure.websiteaddress.com where the sub-domain is “secure”.  All of these addresses would be considered URLs.

Web Browser

This is the software that people use to view a website. Web browsers can be found on a variety of devices, including desktop computers, laptops, tablets, mobile phone, gaming systems, and more. Some common web browsers are Google Chrome, Microsoft Internet Explorer, Mozilla Firefox, and Opera.

HTML

HyperText Markup Language is the language used to create the structure of web pages. HTML includes paragraphs, headings, lists, links, and many other “elements” that can be used to build a website. Many web professionals will use the term “markup” to refer to HTML. There have been a number of different varieties of HTML over the year, including the latest version, HTML5.

CSS

Cascading Style Sheets dictate the visual look of a website, including the colors, fonts, page layout and more. CSS is coupled with HTML to create both the structure (which is HTML) and the style of a website.

Javascript

Javascript is a programming language that can be used to add additional functionality to a website. Javascript is used alongside HTML and CSS. Some common uses of Javascript are to detect whether or not a web browser supports certain functionality or to add features like animation.

Responsive Design

A responsive website is one whose layout dynamically changes when viewed on different screen sizes. Instead of a “one size fits all” approach to a site’s visual layout, a responsive site can present one look for certain devices or screen sizes and other layouts for different sizes. For instance, a site’s homepage may be designed with multiple columns of content for wide screen displays, but that multi-column layout will not work for small screen, mobile devices. For those devices, the responsive site will automatically reflow the layout to present the content in one column.

SEO

Search Engine Optimization is the practice of making sure a website is appealing to search engines who will rank it effective for the terms and phrases that match the content of that website. SEO, and specifically what works and what does not work to make websites more findable, is an area that is very prone to misinformation and, therefore, a prime target for abuse.

CMS

A Content Management System is software that a website can be built upon, allowing someone who does not know website code to be able to easily update and manage website content. Many CMS platforms are accessible via a web browser, allowing a logged in user to make edits to that site. Some popular CMS platforms include WordPress, Drupal, ExpressionEngine, Joomla, Perch, and Webydo.

Web Hosting

This is basically rent for your website. You pay a company for space on a web server where your website’s pages and other resources (images, documents, etc.) will reside. When a person visits your website, they are being delivered files from this web server.

Where You Can Find Fonts to Use in Your Website

Effective and attractive typography is an important part of designing an effective an attractive website. While there are a number of choices that you will need to make as you work with the typography of a design, one of the first will be where can you find the actual fonts to use?

Web-Safe Fonts

For years, website designers were limited in the font choices that they could reliably use on websites. “Web-safe fonts” were the designation given to fonts that were all but guaranteed to be on a person’s computer.

Since websites use fonts directly from that person’s computer, choosing one of these safe fonts (Times New Roman, Georgia, Palatino Linotype, Arial, Verdana, Trebuchet MS, Courier New, and few others) essentially ensured that the type choices you made would be accurately reflected in the browser when a visitor came to the site.

The advantage of web-safe fonts is that, since they are being drawn from the site visitor’s own computer, there is no additional time or bandwidth required to download those font files. This makes for a faster loading webpage.

The downside to web-safe fonts is the limited choices that they provide to designers.

Free @font-face Downloads

The rise of @font-face (pronounced “at font face”) gave website designers a wealth of new choices to work with for their website typography. Instead of drawing from a person’s computer, @font-face allows font files to be linked to for a website. These fonts can be included with the rest of the site’s files, alongside the images, documents, or other assets needed for that website, which means that you just need to find a resource to download these fonts from in the first place.

There are a number of “free @font-face” services available which allow you to locate fonts and download them to include on your website. Font Squirrel is the most popular of these free @font-face resources.

Free Web Font Services

In addition to free services that allow you to download a font to include with your sites files, a number of other services are available that permit you to link to the fonts files that they host on their own servers. Some of these services come with a cost, while others are offered free of charge. Google Fonts is one free @font-face service.

With Google Fonts, you can select the font that you want for a website and by embedding a line of Javascript in your site’s code, you are then able to then use those fonts on your webpages.  The process is quick and easy – in fact, using Google Fonts is actually easier to use than the aforementioned method of hosting those files on your own site/web server. The downside to using any fonts service is that you are reliant on that service. Should they decide to change their pricing model or discontinue the service altogether, you will be forced to make immediate changes to any website that you have deployed that uses that service.

Paid Web Font Services

Sometimes, the free services available for @font-face may be missing the specific fonts that you require for your projects. In these instances, you may find what you are looking for by using one of the paid services available for web fonts.

Paid web font services are typically licensed under a subscription model. You pay a certain price for access to the service and you then are able to draw from the many fonts available from that service. This often gives you access to a range of the highest quality font choices, including many not available to use with @font-face from anywhere else, but the subscription costs are something you will need to account for in your project planning and budgeting.

Typekit is probably the most well-known web font subscription service, and since the company is owned by Adobe, there is a relationship there that many web designers will be comfortable with since they are likely already using other Adobe products (Photoshop, Illustrator, Dreamweaver, etc.). Other paid font services are available from Fonts.com,Font Deck, Web Type and others.

In addition to subscription services, there are also sites like Fontspring that allow you to make a one-time purchase of a font and download it to host on your own site.

Tips for Choosing the Right Web Design Book

Sustaining a successful career as a web designer means committing to ongoing education. One of the ways that web professionals can stay on top of an industry that is always changing is by reading some of the excellent books that are available on the subject – but with so many titles to choose from, how do you know which ones deserve your attention? Here are some tips to help you determine which titles you should add to your library and which ones should remain on the bookstore shelf.

 

Decide What You Want to Learn

The first step in choosing the right web design is deciding what it is that you want to learn. Web design is a very large subject and no single book will cover every aspect of the profession, so titles typically focus on specific aspects of website design. One book may focus on responsive web design, while another may be dedicated to web typography. Others may cover the varioussearch engine optimization techniques that should be included on a site. Each book wil have a different focus and subject matter, and the right one for you will depend on the specific areas of the industry that you are interested in learn more about.

Research the Author

For many web design books, the author of the title is as much of a draw as the subject matter. Many web professionals who decide to write a book also publish regularly online (I do this on my own website). They may also speak at industry events and conferences. An author’s other writing and speaking allow you to easily research them to see what their style is and how they present content.

If you enjoy reading their blog or the articles they contribute to other online magazines, or if you saw one of their presentations and greatly enjoyed it, then there is a pretty good chance that you will also find value in the books that they author.

Look at the Publication Date

The web design industry is constantly changing. As such, many books that were published even a short time ago may be outdated quickly as new techniques rise to the forefront of our profession. A book that was released 5 years ago may not be relevant to the current state of web design. Of course, there are many exceptions to this rule and there are a number of titles that, despite some content that may be in need of an update, have ultimately stood the test of time. Books like Steve Krug’s “Don’t Make Me Think” or Jeffrey Zeldman’s “Designing With Web Standards” were both originally released many years ago, but are still very relevant today. Both of those books have released updated editions, but even the originals are still highly relevant, which shows that the publication date of a book can be used as a guide, but it should not be taken as concrete evidence of whether or not a book is valuable for your current needs.

Check Online Reviews

One of the ways that you can assess whether a book, new or old, is a good one is to see what other people are saying about it. Online reviews can give you some insight into what to expect from a title, but not all reviews will be relevant to you. Someone who wanted something different than you did from a book may review the title negatively, but since your needs are different than theirs, their problems with the book may not matter to you. Ultimately, you want to use reviews as one way to assess the quality of a title, but like the publication date of the book, reviews should be a guide that help you make a decision, not the ultimate deciding factor.

Try a Sample

Once you have filtered book titles down based on subject matter, author, reviews, and any other factors that help you narrow down your search, you may want to give the book a try before you make a purchase. If you are buying a digital copy of the book, you may be able to download a few sample chapters. In some cases, like with the A Book Apart titles, sample chapters are often published online so you can read a little of the book and get a sense of the style and content before you purchase the title.

If you are buying a physical copy of a book, you can sample the title by visiting a local bookstore and reading a chapter or two. Obviously, for this to work, the store must have the title in stock, but may stores will order a title for you if you really want to try it before you buy it.

An Overview of the New Microsoft Edge Browser

Microsoft’s Windows 10 operating system is here, complete with a brand new web browser in Microsoft Edge which takes the place of Internet Explorer as the default web browser for Windows. This means that we have a new web browser to consider and test for with the websites we develop. Thankfully, Microsoft Edge is a worthwhile new release that actually looks to be pretty stable and solid.

What is new in Microsoft Edge and how do websites render in this new browser?

Here’s my first impressions:

 

Website Rendering

Overall, sites look great in Edge, especially newer websites built with current web standards and best practices. Some older sites do have display issues in Microsoft Edge, but that is an issue with those antiquated sites, not with this new web browser. If you are building responsive websites with modern practices, you should see no problems with how those sites display in Microsoft Edge.

Loading Speed

I found most websites to load faster in Edge than when I opened those same sites in Chrome, Firefox, or older versions of Internet Explorer. The differences in speed were small, but noticeable, and since no one has ever said that a page loaded “too fast”, this increased speed is good for web developersinterested in having the pages they build load as quickly as possible.

Search Tools

One of the features that Microsoft has seemingly taken very seriously with this browser is search. You can use the browser’s address bar to type in search terms. This is a feature that has been found in other browsers for years, but Edge takes this feature and improves upon it by giving users access to more than just their browsing history.

Recommendations from Bing (for sites you have likely never visited) help make this address bar search more useful than similar features found in other browsers.

Edge can also use Cortana, Microsoft 10’s new “personal assistant” feature. By right-clicking an item on a webpage, or by touching and holding that content, you signal Cortana that you would like more details. This will trigger a sidebar to appear with information on that subject.

Web Notes

The Web Note feature in Edge allows you to take a snapshot of a webpage and make notations on it using the provided drawing tools. I can see this being useful to web designers in a few ways.
When reviewing website designs with clients, Web Notes could be used to discuss the work and make notations about any changes that may need to be made.

One of the things I love about the Web Notes features is that it takes a shot of an entire webpage, not just the part that is currently viewable on screen, which is what happens with the PrtScn button. If you’ve ever had to take a full design’s screen shot to use in an online gallery or other marketing-related materials, you will undoubtedly see how this feature could be useful.

Reading View

Reading View strips a site down to just content, removing unnecessary design elements and instead focusing on just the reading experience. As web designers and developers, this should be another reminder that there are many variables that will change the way a website displays for people, and we must make an effort to ensure that even if the layout or look of a site changes, the intent of that site remains consistent and usable.

In Closing

For web professionals who are up-to-date with current techniques, Microsoft Edge is unlikely to make much of a change in your workflow. It is another browser that should be tested against, but its adherence to web standards put it on par with other modern browsers. In fact, in some ways it is even better than other browsers available today. Support for newer approaches, like CSS Grid Layout, show that Microsoft is done being ridiculed for their poor browser software and they have put forward an excellent new browser with Microsoft Edge.

An Introduction to CSS Grid Layout

Creating multi-column website layouts with CSS has always been a challenge. This is, in part, because the go-to CSS styles to create those layouts have typically been floats. As proficient as we have become in using floats to create complex layouts, the reality is that these styles were never intended to be used as pure layout tools. This is evident when you try to create side by side columns that match up in height, regardless of how much content those individual columns contain.

This is a very common layout need, but using CSS floats, this design requires all kinds of extra CSS trickery to accomplish. There has to better way to layout out equal height columns, and thanks to CSS Grid Layout, there hopefully soon will be.

What Is CSS Grid Layout?

CSS Grid Layout styles are one of the new modules that are being considered by the W3C (along with Flexbox, Multicolumns, and CSS regions). It was created by Microsoft to give web developers the flexibility to create true grids with CSS and to be able to easily adjust those grids as needed, like with CSS Media Queries for responsive layouts.

In many ways, CSS Grid Layout is similar toHTML tables, but unlike tables whose structure is defined in the HTML markup, Grid Layout is established in CSS. This is important because it gives us that aforementioned flexibility. If you mark up a table in HTML that has 3 columns, it doesn’t matter what the screen size being used to visit the site is, the HTML will still have a table with 3 columns.

With CSS Grid Layout, you can have the page display those 3 columns for larger screens where this layout is appropriate, but on smaller screens, you can use media queries to adjust the site’s design for, perhaps, a single column layout. You can also adjust where elements appear in the grid, regardless of where they appear in the HTML markup order.

A Basic CSS Grid

Let’s use this example of a 3 column grid, which is a very common layout requirement in web design. We could mark this up in HTML like this:

<div class="container"> <div class="events"> <h3>Events</h3> </div> <div class="news"> <h3>News</h3> </div> <div class="blog"> <h3>B log</h3> </div> </div>

You will see that I have enclosed 3 divisions (these will be our columns) in another division that encases them all. For the child divisions, I have used class attributes on each of them, opting for a name that refelcts the content that will be contained in these areas rather than something like “column 1, column 2, column 3” or “left column, center column, right column”. It is important not to use class names that explain how an element should look because when we change how that element displays, like when we go to a single column layout and there is no more “left, center, right”, we want to ensure our names still make sense.  In this example, I have also used some <h3> elements as the start of some basic content inside each division.

To create our 3 column grid, we could add this to the CSS:

.container { display: grid; grid-template-columns: 30% 5% 30% 5% 30%; grid-template-rows: auto; } .events  {  grid-column: 1 / 2;  grid-row: 1 / 2; } .news {  grid-column: 3 / 4;  grid-row: 1 / 2; } .blog {   grid-column: 5 / 6;  grid-row: 1 / 2; }

If you look at the CSS, you will see that we use the CSS display property with value of “grid” on the division that contains the grid we want to establish. We actually create a 5 column grid here – the 3 columns we will use for our content plus the gutters between each of them.  We create these 5 columns by using the “grid-template-columns” property to establish and size those columns. In this case, we are making each column 30% wide with a 5% gutter between each one. The “grid-template-row” property establishes the height, which we set to “auto”.

For the individual columns, we use the “grid-column” and “grid-row” properties to determine how our grid will display. This dictates where each grid cell will begin and end. The first number is the grid line where the cell begins while the second is the grid line where it ends (see the photo that is part of this article to see how these numbers correspond to the grid lines for this grid). With this method, you cannot only establish your 3 column grid, but you can place these divisions wherever you want them to appear on that grid, regardless of their order in the HTML document. If you told the “events” division to start at column 5 and end at 6, it would be the final column in the grid, even though it appears first in the markup order. You could also adjust these styles with Media Queries as needed to create a fully responsive layout and grid for different screen sizes and devices.

This is just a very basic look at CSS Grid Layout. For many more examples, see Rachel Andrew’s Grid By Example website.

Can I Use CSS Grid Today?

As awesome as CSS Grid Layout looks to be, it is unfortunately not ready for full deployment in our web design work just yet. Currently, the only browser that supports these styles is Microsoft IE 10, 11 and their new Edge browser (the -ms prefix is required). As crazy as it may seem to some that Microsoft is ahead of the curve as the only browser manufacturer supporting these new styles, it makes sense when you remember that they were the ones who brought this module to the W3C. Hopefully more browser manufacturers will follow Microsoft’s lead on this and we will be able to begin using these powerful new layout styles as an alternative to simple floats soon.

8 Steps to Publishing a Better Blog

Adding a blog to a website is easy and often accomplished through the use of a CMS (Content Management System). This software makes it simple for people to manage their blog’s content and publish new articles as needed, but this is just the first step. Being able to use the blog and using it effectively are two very different things. Sadly, many blog initiatives fail because people underestimate the time and dedication that is needed to make them a success.

They also often fail to follow some basics steps to publishing a better blog. Let’s take a look at 8 of those steps:

1. Focus on Your Area of Expertise

The best blogs have a clearly defined focus on what they are about.  The broader your topic area is, the harder it may be to find a dedicated audience. This may seem backwards, after all, if you go with a broad subject matter and cast a wide net, it likely seems like you will catch a wider audience. In practice, however, this rarely works out.

A blog that is overly broad comes across as unfocused and readers are unsure of what to expect. In contrast, a blog that is focused on one topic shows readers exactly what to expect and it encourages people who are interested in that topic to return to the blog again and again or to subscribe for regular updates.

2. Find Your Unique Angle

Multiple bloggers may cover the same subject matter, but each of those authors should have a unique voice and angle to the content they create. This unique angle is what many readers will use to determine which authors they favor and follow.

When I first began blogging about web design on my own site, I decided to use my personal life as the basis from which I would work. Stories about travel, raising my two kids, and my love of the holidays became fodder from which I would spin lessons relevant to website design. This unique approach to the subject matter is what set my articles apart from others on the topic and it helped me establish myself with a readership.

As you begin planning out your blog strategy, consider not only the subject you want to write about, but also think about what you can bring to the table that will set you apart and give your readers something that they will not find anywhere else.

3. Set A Realistic Schedule

For a blog to be successful, it needs to have content that is published on a regular basis. This means that you will need to set a regular schedule for when you will add new articles to the site – one that is realistic and which you can meet. Many people try to overdo it with their new blog and they attempt to publish at an unrealistic pace. This is a doomed to fail. Whether you decide to publish daily, weekly, or even monthly, you need to set a schedule that you can maintain so your readers will know when to expect new articles.

4. Give Yourself a Base to Work From

An established schedule is great, but the reality is that life is unpredictable and you will not always be able to keep to that schedule. This is why it is important to have a base of articles to work from before you begin publishing. If you start with a bank of 6 to 12 (the number that makes sense for you will depend on your publishing calendar) articles in reserve, and you continue to write new articles all the time, you will find that if something does creep up preventing you from publishing according to your normal schedule, you still have articles that you can use to keep yourself on track. This is very important, because once you fall off schedule, it can be brutally hard to get back to it.

5. Enlist Multiple Authors

You can make your life much easier by having a team of authors contributing to a blog. This spreads the workload out amongst multiple people so that no one person becomes overwhelmed. Multiple authors also bring a variety of ideas and voices to a blog, which can really add so much to the overall presentation of the content.

6. Be Aware of Current Events

It’s great to publish general articles that are relevant to your topic, but you should also be mindful of current events and publish content related to those events as appropriate.  This can be a great way to keep your content relevant, and if a current event is really prominent in the public forum, having an article that discusses that event from your perspective can get you some new readership who may have not found you otherwise.

7. Add Visuals

Text content is important, but text alone can make for a somewhat bland online presentation. By adding images to your articles, you can liven them up and make the overall presentation of the blog more attractive.

Sometimes, these images may simply be a general graphic meant to advertise the article (similar to what is done here on the main page of the About.com web design section). Other times, the images may be critical to the content and the article may reference these graphics that help carry the content of the piece (like what you see in this article on CSS Grid Layout). Either way, visuals can be an important part of successful and attractive blog articles.

8. Keep At It

Blog success does not happen overnight. Many people give up on blogs because they do not see immediate results. This is a mistake. If you want a blog to be successful, you need to be consistent over a period of time. If the content is good, the readers will come, so you need to be in this for the long haul and be committed to keeping that blog going even if the initial traffic to the blog is lower than you had hoped for.

Tips for More Effective (and Readable) Website Typography

The bulk of almost any webpage is text content. Whether your site contains informative articles, products with descriptions and reviews, or frequently refreshed information and updates, a good portion of that content is delivered via the written word. Beyond just the fonts you use on your website, the overall typographic styles of that site are critical to the success of your webpages. Let’s take a look at some tips you can use to review and improve the typographic styles on your website.

Readability Is Key

If people find it difficult to read your site’s content, they will not read your site’s content. If people do not read your site’s content, they will be unable to take the necessary actions on your site to make it a success (make a purchase, review your services, contact your for an appointment, etc.). Effective website content includes typographic styles that make that content easy to read.

While there are a number of factors that contribute to the readability of website text, a few of the most important points (and ones which are easiest to address and improve) are the text’s font-family, contrast, sizing, and the whitespace surrounding that text.

Font-Family

The variety of font families available to use on websites today is more diverse than it has ever been before. This variety is a great thing, but it does provide challenges. Not every typeface is suitable for every purpose and you need to be careful how you use different typefaces.

Very thin typefaces may be readable when set at large sizes and used in small bursts, like for headlines, but those same letterforms can be very difficult to read if you try to use them for paragraphs of content displayed at smaller sizes.

The same hold true for overly ornate fonts, like many cursive styles. They may work for a large headline, but not for body copy. Using font families that are appropriate for the purpose at hand is an important factor in website readability.

Contrast

The contrast of the text is another key factor to consider when reviewing your site’s typography. As boring as it may seem to some people, black text set against a white background is incredibly readable because the contrast between the text and the background color is so great. Many designers prefer to use text has far less contrast than black against white, and while they may be able to create designs that look wonderful, they sometimes do so at the expense of readability. A design may look great in Photoshop, but real people have to actually use that design and read the text contained within it. If the contrast of that text is to low, it can make reading a challenge, and we have already discussed what happens when reading a website’s content becomes too challenging for people.

Sizing

The size of the text on a website is an important consideration. Text that is too big may become unwieldy and awkward, while text that is too small becomes a strain to read, especially for anyone with less than perfect vision.  Text must be displayed in a size that is easy to read, and that appropriate size may change depending on the screen size and device that someone is using to visit the site. A responsive site with text sizes that adjust to different screens can help ensure that text is always sized accordingly from the smallest to the largest screens.

Whitespace

The “stuff” that surrounds text on your site plays a role in how easy that text is to read. By adding adequate spacing between lines of text and around the text itself, you help prevent people from becoming confused by a jumbled mess of words and letters than adversely affect the readability of a site.

In Closing

These are just a few of the factors that contribute to effective typographic design, but they are ones that are often easy to identify issues with and where simply changes can yield immediate results in terms of more readable, effective, and attractive online type. Take a look at your own website’s typography and consider whether the points covered in this article could help improve your own text presentation.

Signs That It Is Time For a Website Redesign

For many companies, especially smaller organizations with tight budgets, a website is likely the most significant marketing investment that they will make. Still, regardless of the size of your initial investment, all websites need attention during their lifespan and many sites will grow outdated during that time, which means youwill eventually need to redesign.

So how do you know whether your site needs a redesign or not?

Here are some key items you can look for as you assess your website to determine whether it is, indeed, time for a redesign.

Outdated Visual Design

If your site’s design is poor, it could be because you used a cheap, template-based product to create that site. Perhaps it was your company’s first website and your budget did not allow you to invest in custom, professional web design services. Sites like these do not last very long, and if your company is in a better financial position now, investing in a better website design will certainly make sense.

If you did not go the cheap, template route for your website, it may still be outdated visually, even if the design was customized to your needs once upon a time. Site designs that heavily use certain web design trends can quickly become outdated once those trends lose favor in the industry. When designing websites, the challenge is decided what is a passing trend, like an animated Flash intro screen, and what is a best practice that is here to stay, like responsive design.

An outdated design could also mean that your site no longer reflects your company’s brand. The site itself may still look good,but if your organization has gone through a visual change in your identity and branding, than the website must follow suite with a redesign that utilizes those same design standards.

Lack of Multi-Device Support

Years ago, websites were designed to be viewed on desktop and laptop screens. Web designers created sites that were a specific, fixed size for all these screens. On today’s Web, however, we have to contend with a staggering range of different devices and screen sizes, from very large desktop monitors to tablets and even down to smartphones and tiny wearable devices. To accommodate this range of different screens, websites must be designed with multi-device support in mind.

The industry best practice for multi-device support is through an approach calledresponsive web design. With this approach, a website’s layout will change based on a person’s screen size. People on wide screen monitors will get a layout appropriate for their screens, while visitors on small-screen devices will get the same site, but with a different layout that is easily usable and readable for their smaller screen.

Because responsive design is not something that is “tacked on” to an existing site, but is instead of ground up rethinking of how that site is designed and developed, it does typically require a full redesign of a website to ensure that the layout and performance of that site works well for all devices.

Need For New Content

Sad but true – many websites are left neglected from a content standpoint, at least until that content is so woefully outdated that something simply must be done. If you have a site that is in dire need of a content overhaul, including whole new sections of the site that need to be added to reflect services or offerings that were not available when the site was first developed, than a redesign may end up giving you more bang for your buck.

Some content additions can be done easily within the constraints of an existing site, especially if that site was built upon a quality Content Management System (more on that shortly). If this is the case, and the other points covered in this article do not apply to your site, then simply auditing and editing the content may be the best plan, but if your site needs more than just some minor content edits, than you may be best served by investing in that full redesign.

Need For New Site Features

If your site is in need of new features that were not a part of the original deployment, than this could also be the catalyst that fuels a redesign.  In many cases, website features may be easier to add to a new site that is built upon a specific platform rather than trying to shoehorn those features into existing code.

Many companies that have older websites do not have the benefit of a CMS (Content Management System) that powers that site. If you want to have more control over your site and what is published to it, a CMS is the way to go – and if your current site is not deployed on a CMS, than a redevelopment of that site upon a quality platform is the path you should be traveling.

Better Business Results

Ultimately, the goal of your website is to help generate results for you. Whether you are selling items online, offering services offline, or even running a non-profit organization that is looking to raise awareness or funds for a cause, your website is responsible for attracting visitors and turning them into customers or contributors. If your site is failing in these efforts, you need to assess why that is and you may ultimately realize that the website simply is not up to the task. Yes, this means you may need a redesign.

Improved search engine optimization or better lead generation and conversion needs are absolutely a reason to redesign a website. After all, regardless of the investment you have made in that site, if it is not producing the results that you need it to produce, than the investment is not paying off and you need to make a business decision to either give up or fix the problem by redesigning that site in a way that your goals will be met.

In Closing

There are countless reasons why you may need to redesign a website. The items presented here are simply a few of the more common red flags that I see on outdated websites in need of a redesign. Take a look at your own site and use these points to assess what you have now and whether or not you may, indeed, be due for a site refresh.

How to Take Web Design Courses Online

You can take web design courses online that range from beginner level to advanced level. There are hundreds of online courses available, and some of the best ones don’t cost a dime. This article outlines 5 online web design courses that you can take free of charge. The lessons are designed by experts and all are user friendly and allow you to work at your own pace.

Start from the beginning. If you know absolutely nothing about web design, HTML (hypertext markup language) or CSS (cascading style sheets), W3Schools.com[1]is a good place to start. This site offers free interactive tutorials. You will be able to practice online immediately after taking a lesson and see your mistakes instantly.

Learn and contribute. Opera browser[2] offers free web design lessons; they describe themselves as an open community of developers building resources for a better web, regardless of brand, browser or platform. You can take lessons and if you reach a point of mastery in any area, you are welcome to contribute your knowledge to the site.

Google it. The developers at Google[3] have a web design training course that outlines the basics of website building via video tutorials. This is also a great site for beginners.

Let your light shine. Don’t Fear the Internet[4]is a website most suitable for creative people who want nothing to do with web design. If you have a website or blog that you want to polish, the free courses on Don’t Fear the Internet will help you do just that. You’ll easily learn what you have to know in order to make your site look professional, but then you can leave it all behind and get on with your creative genius.

Be a web wizard. Mozilla has paired up with Peer to Peer University (P2PU) to create an open education web design course. [5] The Mozilla School of Webcraft includes courses on CSS, PHP (Hypertext Preprocessor—a scripting language) and HTML. You can also test your knowledge and take challenges, such as building your own website from scratch.

Design a blog in a hurry. If you want to get your site up and running before you take a full course on web design, try one of the top 10 free blog site programs (you can always tweak your site later):

  • WordPress
  • Blogger
  • Livejournal
  • Blog.com
  • Tumblr
  • Blogsome
  • Open Diary
  • Weebly.com
  • Blogster
  • Blogetery

 

How to Find a Good Web Designer

Everybody wants a professional looking website that will help generate more business. But how do you find someone who can create that perfect site for you?

Try a search on your favorite search engine (like Yahoo, Google, Dogpile, etc). Be as specific as possible. The best designers are found through word of mouth. If you know someone who has a great website, contact them and ask them who their designer is.

Read the description of the websites and click if you are interested. Look at the sample pages they have. If there is nothing you can see from the designer, that should tell you something.

Read what the package includes. This is important.

Watch out for designers who only charge by the ‘page’. They should be willing to quote on whole jobs. A fee per page can be relatively expensive.

Ask about intellectual property ownership of the site. You should be given ownership of the site so that you can update/modify down the track without having to pay the original designer.

Make sure any website domain name/address (mycompany.com) is registered in your name with your contact information, not the web designer’s. This will ensure you can still use your website domain name in the future, even if you take your business elsewhere in the future.

If you are planning regular updates and cannot afford to employ someone to do them for you, ask to have the site designed to an easily-editable template.This may cost more initially, but should allow a novice to update the content easily.

Never pay for extra services such as ‘search engine placement’ that you can get for free by registering at Google, Yahoo and MSN directly.

Always read the fine print before you sign up. Some companies that seem professional and trustworthy may have terms of service agreements that would surprise you. Take the time to know what the restrictions are, what they guarantee, and what they don’t.

How to Design a Website Template

This is an in-depth guide for those who know HTML and CSS but are clueless in how to make your layout.

Decide what your website topic is. There are millions of different kinds of websites that you can choose to your liking.

Find the right color scheme. Try using colors that will pop out, like blue, purple or orange. You can also adjust the color to the topic of your website.

Decide what kind of navigation bar to use. Make sure it has useful resources, such as home, comments, and more.

Mock up how your website will be laid out in a graphic editing program. Just like the topics, there are wide choices on how you would like the layout of each page to be.

Create the page in HTML. You can also create it by going onto Google websites. Be sure to pick a creative name too!

Create a style sheet in CSS.

Duplicate the HTML page for the other pages and add content. This article is just an in-depth for layouts.

How to Create a Web Host in Your Home

To have a web site people usually buy such a service called web hosting. Businesses use services of paid professionals if they like to have their web hosting in their own premises. If you have an old laptop or PC and are connected to a broadband line you can create your own website free, as a rewarding do-it-yourself hobby.

Get the Apache server software. Your old computer will be called your “Web Server” from now on. Download public license Apache HTTP Server to your old computer. This free software is also the most widely used server on the Internet.

Double click on the downloaded file to install it. Fill the dialogue required fields. It is quite arbitrary information and later you can change them.

Select the custom install from options in the next dialogue. Change the install directory of Apache to your desired folder.

Go to that directory and find “conf” folder. In that folder open the “httpd.conf” file. Now in your “Web Server” create a root directory for your web site; for example, “C:\Web\MyWeb”

Inside the “httpd.conf”, change the Apache default serving document root to your web root.

Also in the same file change the default Apache web directory to your own web directory.

Use a basic knowledge of writing HTML code and create a test page; write in it “I am a winner!” Save it as “C:\Web\MyWeb\index.html”

Open your port 80 for forwarding as described in Open Your Port 80 Behind a Firewall

Locate your site. Now in your “Web Server” open your favorite browser and type in the address bar, http://localhost/ Your winner page will be served by the Internet on your browser.

Get the IP of your home, (look in the Open Your Port 80 Behind a Firewalltips). That is the address of your broadband given by your Internet Service Provider, on the Internet. Ask a friend of yours to type it in his browser. Your site is open to public now.

  • If your IP number is, say, 98.227.112.49 then your friend types http://98.227.112.49/
  • This IP is subject to change and difficult to remember. It needs to be maintained dynamically, and pointed by a name like other sites, say [www.i_am_homesite_proud.com] .

 

How to Create a Quality Website

Web design is the planning and creation of websites. This includes the information architecture, user interface, site structure, navigation, layout, colors, fonts, and imagery.All of these are combined with the principles of design to create a website that meets the goals of the owner and designer.

When designing a website for your business the quality of the site must be considered so that it will work well you.

You will want the best quality web design so that it will attract the attention of your potential customers. Your website must be user friendly & easy to navigate.

Focusing on logical reasoning is needed to achieve good quality web design & the best sites will stir up an emotional response as well.

Consider getting the services of Web Design Company or independent web designer.

Describe your website design in detail as well as the strategy & tactics you planned to achieve its completion.

You will need to make necessary upgrades and adjustments of your website from time to time. You will want your designer to be up to date on Search Engine Optimization so that your site can get good rankings and be found in the search engines.Keep in mind these tips for quality web design in order to achieve your goals of your online business.

Site owners want a website that they can edit easily without paying more every time. We can help!“The next generation in custom website design” means advanced code for a great looking website now that will still display well for years to come into the future. Fully custom websites for static sites, content management, and e-commerce. Matching custom blog designs and templates created in various blog formats. Low overhead means small business website designs for low cost solutions. Custom web graphics for websites, blogs, audio players, and video production.

In good web design, less is almost always more. Common mistakes are to wow the user better to focus on central message. Find quality images 1 large quality image on the main page is worth 200 bad images inside. When you design the website it’s not you who you want to please but your users that u want to please and it’s not your website that is you want necessary to impress them but what you do the product that you offer or the service that you offer.

The website should be clean, crisp, focus, honest and sometimes a little unpredictable. Start with that information which you want to convey to the public write it down organizes it then design the website around the information that you want to convey and not the other way round.

Variably so many people start with the website and think of it as a perfect picture within the frame. When they build the picture and think it is great and two weeks later they want to add something and the realize that they can’t without completely destroying the picture.

The life span of the average new website is incredible short. In two weeks, millions of people are opening new websites, every day. The majority of them don’t touch it again, and the website dies and goes down nest. If you want to keep your website in top 10 or 20 rankings, update it with valuable information which users will be impressed by and will want to come back.

The first page of your website is far more important visually than all the other pages of your website as that’s the first impression. Putting together a website is a very frustrating experience, but it also can be very-very rewarding.

How to Advertise Your Web Design Business

The Web design industry is an increasingly popular career choice, and competition could be fierce in your area due to a high volume of freelancers in the industry. Whether you are the owner of a firm with multiple employees or a lone freelancer, learning how to advertise your web design business is critical to your success. Since many freelance web designers and firms market locally and nationally, if not globally, advertising web design must be approached seriously and creatively to reach your segment of the market.

Advertise your Website Online

You can use paid advertising, free advertising, social media, and a variety of other techniques to spread the word about your business.

Work on your own website. Websites are important for any business to have as the Internet continues to pull in consumers in nearly every industry, but since websites are your business, your company definitely needs one. How you structure your website is up to you, but you should have a clear focus on what your skill is while providing the information potential customers need. Your website doesn’t have to include your rates, but it should include your services, examples of previous work, contact information, and supporting educational information such as if you attended a web design degree program of any kind.

Pay for online advertising. You could ad listings on high-traffic websites, or do a pay-per-click campaign with the large search engines. Pay for listings in business directories for web designers.

Become active in social media and in other online communities. These are places you may find your customers. Facebook, Twitter, FourSquare, and other social networking websites give you another avenue to connect to both current and prospective clients while also giving them a way to connect with and learn about you before, during, and after the sale. Become active in places where you know your target market is and in industry-related communities to establish yourself as an expert.

Focus on search engine optimization (SEO). Let the search engines do some of the work for you naturally at all hours of the day. If you are not familiar with SEO, you can either research and try your hand at it or hire someone to help you. Clients want to know their website is going to be seen, so if you can offer SEO services to your customers, then you have more value.

 

How to Become a Professional Web Designer and Programmer

Web designers and web developers are two of the most sought-after professions these days, and it’s not as hard is it may seem to become one. With some free time, a keen interest, and a lot of practice and patience, you could find yourself making world-class websites and earning a nice income by doing so.

Learn from other great web designers and programmers. Take a look at other well-designed websites, and note how a menu or content area is laid out and then use that knowledge in your designs.

Get the right tools. Start by getting a good vector graphics editor such as AdobeIllustrator. Making images using vector graphics is the easiest way to grasp graphics design, so spending some money on something like Illustrator or Fireworks will be a great help. Inkscape is a nice free and open-source alternative for beginners.

Learn the skills you’ll need. These skills include:

  • HTML
  • CSS
  • JavaScript
  • jQuery
  • PHP
  • SQL
Of course there are many tutorials on the Web where you can learn these languages. But we want to know about the best place for learning. The most famous place (if you search on Google) is W3Schools. The six languages listed above are enough for a start. However there is no end of learning, especially in a Web Developer’s life. The main
  • HTML: For the main content of the webpage,
  • CSS: For the page style,
  • JavaScript: For dynamic content,
  • jQuery: For easy JavaScript scripting,
  • PHP: For server side scripting,
  • SQL: For database management.

Create dynamic websites using PHP and MySQL. These technologies will enable you to create a website that does not require you to make individual HTML pages but allow you to use templates to display multiple pages within the same design.

Consider using a dynamic web service to improve the user experience (UX).Create a web site that uses AJAX so you can utilise the server-side power of PHPwithout having to refresh the page thus saving bandwidth and enabling you to create ‘interactive’ web applications.

Set up your computer as a productive website development environment.Install a web server on your Computer so that you can work on scripts locally without an Internet connection. If you choose the PHP route tryhttp://www.wampserver.com/en/. If you use ASP.NET use IIS available on most versions of windows.

Practice using coding examples. Get yourself some script examples to “tinker” with: Finding a script to dissect is the best way to learn. Try CMS’s like Drupal and Joomla

Be bold by starting a project when you have idea and some time. The best time to start making websites is as soon as possible, for two reasons; they can take a lot of time to complete, and you learn a lot just by making them. Don’t worry too much about making it perfect the first time; one of the best things about websites is that they can always be improved at any time!

Designing for Devices

Account for mobile browsing. More and more internet browsing is being done on mobile devices these days. If you want your website to attract and keep the highest number of people, you’ll need to design your website to be highly usable on mobile devices. The best thing you can do to ensure this is to have a separate website for mobile users but there are other options as well.

  • Look for examples of mobile sites. Often, sticking an “m.” in the “www” place in a web address for major websites will bring up the mobile version of the site. You’ll need to do something similar.

Keep your website simple. In general, your design should be simple and to-the-point. Long gone are the days of complex tables and flashing graphics. All users will want something easy to use. This means simple design, minimal columns, and minimal text entry necessary to navigate the site.

Use responsive design. Responsive design is a way of coding your website so that instead of fitting to a few particular sizes of screen, it will adjust to fit any size screen. This is most easily accomplished by setting the column widths to percentages rather than pixels, but more elegant methods also exist.

Avoid design features not supported by mobile devices. Many mobile devices can’t display things like pop-ups, Flash, Java, or frames. This goes back, again, to wanting to keep your design as simple as possible.

Consider making an app. Under certain circumstances it may be easier for you to simply make an app instead of having a mobile version of your site. You don’t have to have amazing programming skills to do this, however! Much like there are providers of website templates, there are also companies which will design a basic app for you. Conduit Mobile is a good service to use.

Making Basic Design Considerations

Streamline your webpage. You want everything to be as fast and easy to use as possible. Minimize the number of choices that someone has to make, make navigation extremely self-explanatory, and help them get to what they’re looking for as quickly as possible.

Practice good user interface design. Positioning the various elements of the website, such as the title, sidebars, logos, graphics, and text, in the same places on every page will make your site navigable and intuitive.

  • Keep the same header at the top of every page. Whether or not your site content lends itself to many repeating elements, making sure that the top of every page is identical is a must.
  • Use logic in your design. The elements on a single page should be ordered logically by importance or by topic; the various pages in the site should do the same.

Create a consistent style. While the layout should give your site structural consistency, the style should give it thematic harmony. Stick with two or three main colors and make sure they harmonize well. Avoid using too many font styles or sizes; if you do plan to alternate between a few, make sure you use them the same way on every page.

  • Use Cascading Style Sheets (CSS) to manage uniform style, and to make it easier to change elements across an entire website without having to go to every individual page.

Maximize readability. To make your text easier to read, break it into smaller sections. Use subheadings and appropriate spacing to separate each of the sections. Use bold or different-sized fonts to show the hierarchy and importance of the topics.

  • Pay attention to text handling. Don’t make the font too small, and widen the line spacing to make large blocks of text more readable. Large blocks of text will be harder to read; break these up into smaller paragraphs instead.

Make your website universally readable. Use standard HTML and avoid tags, features, and plug-ins that are only available to one brand or version of a browser.

  • Although most modern browsers and computers can handle complex images, everything will be a little snappier if your keep your images smaller in size and optimized for the web. Balance the desire for quality against the need for speed.

Test your website. Make sure that every link works as you expect, and that images appear correctly.

  • You may want to conduct some usability tests by having members of your target audience test the clarity and ease of use of your design, and give you feedback on your website.

Finding Your Design

Design your own website. if you’re new to web coding and design but you really want to build a website yourself, there are many options open to you. You can build a simple site by teaching yourself basic html and CSS coding. Just be sure that you can also make it look nice and professional!

Use a pre-made website template. You can purchase or find free pre-made websites very easily on the internet. These are pre-made codes which you simply use and alter to your own needs. There are many reputable providers of templates, but a good one is Wix.

Hire a website designer. If you want something tailored to your needs that looks professional and runs great, it’s probably a good idea to hire a website designer. While this will definitely cost you money, it won’t be as expensive as it sounds. You can get a designer on the cheap by advertising at a local technical college or university. Their experience will help guide you to a more successful, more professional website.

 

 

Create custom Google Maps using Drupal

Create custom Google Maps using Drupal

Dave Myburgh shows you how to create a custom global event map from location data stored in Drupal.

When we decided to update Acquia’s training website to Drupal 7, we wanted to have a map on the event page showing the locations of all our upcoming courses, as well as a map for each course, so users can quickly get a feel of where events will be taking place. Visitors can also open up the maps in Google Maps to obtain directions.

In the past, it’s been difficult to create maps from location data stored in Drupal. There are numerous modules and methods available to deal with this, but finding the right combination can be tricky. For the training site, we figured out how to make it all happen using the following three modules (along with any other modules they require):

In this walkthrough, I’ll show you how we used these modules to generate custom event maps. I’ll begin by configuring each module, using IP Geolocation Views & Maps to collect location data from the site’s visitors, then creating a global map that shows the location of upcoming events along with a pin indicating the location of the viewer.

You can take a look at the results here.

Step 01

First, you need to enable the following modules: Location, Location CCK, GMap, GMap Location and IP Geolocation Views & Maps (IPGV&M). There will be some dependencies that are required – for example, Views – so go ahead and enable those too.

Step 02

Configuring the location module
Configuring the location module

Go to Admin > Config > Content > Location and configure the Location module. Under Main Settings, we enabled theOpen map link in new window option and left the Map Links tab alone. On the Geocoding Options tab, we selectedAddress level accuracy from the Google Maps geocoding minimum accuracy dropdown. We also ticked the Google Maps button for each country we run courses in. If you add an event in a new country, you must come back here and enable geocoding for that country.

Step 03

To configure the GMap module, go to Admin > Config > Services > Gmap, where you’ll enter your Google Maps API key. Enter the map defaults you want to use. We used a default width of 350px, a default height of 160px and no default centre, to fit in with our design for the event pages. The Marker action option can be set to Open info window, so that users get a pop-up when they click the marker.

Step 04

The IPGV&M module enables you to collect location information from your users. When they visit a page with a map on it, their location can be shown on that map and used to give directions to an event. Go to Admin > Config > System > ip_geoloc to configure it. We checked Employ the Google Maps API…, along with Employ Smart IP… as a backup. We also entered the URLs where we wanted to collect user location data: all the event nodes and the main events landing page. We left the other options on their defaults.

Step 05

Creating a location field
Creating a location field

We wanted to show a Google map of the event location on each event node. The Location module can be used to create a location field that takes an address and geocodes it to a latitude and longitude for display on the map. We didn’t set any defaults in the Default value settings, to prevent empty maps appearing if no location data is entered – for example, for an online event.

Step 06

In the Collection settings, we chose to Allow collection of the following elements for a location: Location name, Street location, Additional, Country, City, State/Province(choosing Dropdown from the second menu), Postal code, andCoordinate Chooser (this allows the editor to enter a latitude and longitude if geocoding fails for some reason). In Display Settings, we ticked: Coordinate Chooser, Province name,Country name and Coordinates. The GMap Macro is simply set to [gmap] and our GMap marker is Blue.

Step 07

On the Manage Display tab for the event content type, selectAddress with map as the Format for the Location field. Now when viewing an event with an address, you will see the actual address as well as a map of the location. A link to Google Maps is provided below the map so users can interact with it – for example, to get directions from their location.

Step 08

If a map does not appear after saving an event, go back and edit the node to ensure that a latitude and longitude are now visible below the location data. If not, you might need to enable geocoding for that country, or manually enter the latitude and longitude. If that doesn’t work, double-check all the settings above. As a last resort, check the issues list for that particular module on the Drupal site to see if you can get some help there.

Step 09

The Views module creates a display
The Views module creates a display

The last thing we need to do is create a display that shows all our events across a world map. We can do this using the Views module, in conjunction with the IPGV&M module. Views is one of those ubiquitous modules that tends to be used on all but the very simplest websites. It is required by IPGV&M, so you should already have it enabled at this point.

Step 10

Create a new View (Admin > Structure > Views > Add) and check Create a block with the Display format set to Map (Google API, via IPGV&M). In the settings for this option, you’ll see dropdown selects for the latitude and longitude fields. If you’ve already added those fields to your field list in the View, select them; otherwise leave them blank for now – you can add them after you’ve added the fields. Leave the Default location marker set to default.

Step 11

Map options is where the tricky stuff comes in. You really have to play around with the options in order to get your desired outcome. We used the following:

  1. {“mapTypeId”:“roadmap”,
  2. “disableDefaultUI”:true, “zoom”:2,
  3. “zoomControl”:true, “scaleC
  4. ontrol”:true,“centerLat”:20,
  5. “centerLng”:-30}

In Map style (CSS attributes) add CSS styles for the map itself: here, we’re using height: 400px;width: 100%. SelectCenter the map on the visitor’s current locationfrom Map centering options and enter a hex colour code (without the #) for the user’s icon colour.

Step 12

Add Location: Latitude and Location: Longitude fields to the View. Be sure to set these fields to Exclude from display. Then add whatever other fields you want to show in the pop-up when someone clicks on the marker on the map: for example,Content: Title, Content: Date, Location: City and so on. We added a filter to the View to show only event nodes that had a start date in the future (Content: Date (start date) > now).

Step 13

Save the View and add the block where you want it to show on your site. You can see our map here.

5 tools to make your website go faster

WebPageTest grab

In the runup to his talk at our Generate event, Andi Smith outlines five handy tools for making your site as quick as it can be.

Ensuring your website performs optimally requires measuring several different factors. Here are five tools that can help you analyse your site’s performance during the different stages of the life of your site.

01. Google PageSpeed

Google PageSpeed analyses your website and gives it a rating out of 100 for both mobile and desktop. For the areas on your website that it identifies as suboptimal it will provide suggestions on how you can improve them.

There’s also a tool available for Grunt that allows you to test PageSpeed during build, and an example project showing how to test in Gulp.

Please be careful about where this is included in your workflow as it can increase build completion time considerably.

02. WebPageTest

WebPageTest is a free online tool that evaluates the speed of your website using actual browsers from different locations around the globe at real connection speeds. The results provided show lots of useful performance diagnosis information, such as a video capture of the initial page load of your site; resource waterfall charts and suggestions for improvement.

With WebPageTest, the lower the SpeedIndex your site receives, the better. Chrome Developer Advocate Paul Irish recommends a speed index of under 1000.

03. Chrome Dev Tools Audits

Chrome Developer Tools has a built-in auditing system for assessing web page performance. The audit will give you a breakdown of improvements to consider, such as unused CSS, coupled with the line numbers where you can find the offending items.

To use it, first open the DevTools within Chrome and click the ‘Audit’ tab. In the audit panel, ensure both ’Network Utilization’ and ‘Web Page Performance’ are checked and hit ‘run’ to receive a breakdown. Expanding the items will reveal the files and, if applicable, the line numbers where performance can be optimised.

04. Chrome Dev Tools Timeline

For performance issues that happen within your application such as a poorly performing animation or stuttering scroll you can use the ‘Timeline’ tab within Chrome Dev Tools.

The timeline panel can give you a break down of which events are taking the longest to complete; which frames are taking the longest to render, paint or run scripts; and you can see how memory usage within your application changes over time.

You can find out more information about the timeline panel in the Chrome Developer docs.

05. Google Analytics Performance Anomaly Detection

Once your website is out in the wild, it’s still important to keep a track of its performance. There could be a server issue, or a content author may include a particular large image on the homepage.

We can monitor our website’s page load times using Google Analytics’ Intelligence Events feature. By configuring these events we can detect poor performance and generate an alert when problems start to occur. You can find out more information about this technique on Ilya Grigorik’s blog.

New blogging platform is completely customisable

ContentBear

ContentBear is a new blogging platform that users can customise to their heart’s content.

Setting up a blog can be a daunting experience. Whether you’re creating one for the first time, or setting up the latest part of your range, settling on a theme and design is a task in itself.

ContentBear is a beautiful new blogging platform that puts creativity front and centre. With a focus on easy design and cusomisation, beginners and experts can create artful blogs without having to learn comprehensive code.

ContentBear styles
Different style blocks can be picked easily on ContentBear

Built around a M.E.A.N software stack (that’s Mongo, Express, Angular and Node), ContentBear is a lightning fast platform that can be tweaked and played with on both desktop and mobile.

ContentBear
ContentBear comes with a range of web safe fonts

Packed with loads of refreshing features, including a pin-style filter that allows restricted access to a select audience, ContentBear’s strapline sums it up perfectly: ‘Post Anything, Control Everything.’

Explore everything ContentBear offers and pledge your support by heading over to its Kickstarter page.