People see a web design in different ways. A good web design is very important in making your website attractive and appealing to the target visitors. But great web designs have common features. Here are important tips a person can follow in order to make a good design for your website.

· Place Good Content

A great site needs useful and compelling content. People visit a website to read content and get information. Great content will provide the visitors a unique experience and will think that the site is a good source of everyday information. A good looking website will give the site a great traffic. Keep in mind that no reader will be interested in the site when they do not find the content interesting.

· Use User-Friendly Pictures and Images

You do not have to make the site full of artistic masterpieces. Ensure that the visitors will not get headache when they navigate the pages. Avoid using frustrating backgrounds or unappealing features. Post readable texts and avoid using colors that are clashing. You would want to make sure that the visitors will stay on the website even by just looking at the posted images.

· Make the Navigation Simple and Easy to Use

Visitors normally like exploring a website when things can be found easily. Bear in mind that many internet users are computer savvy people who don’t wish to waste their time trying to finding information that they need.

· Make Sure that You Have a Consistent Website Design

The choice of color scheme or theme does not matter as long as you make sure that it is consistence throughout the entire site. This means that you need to use a design in one page that does not differ from the rest of the pages. This will avoid confusion for the website users. Additionally features such as contact information or links to other sites can be placed from page to page.

· Make the Visitors Feel Welcomed

This will ensure that the visitors of the website will keep coming back. You can put feedback forms and a contact page in the website design. This will allow the readers to easily get in touch with you. This is a way to reach out to the website visitors and know about their feedback and ideas.

The demand for website design companies has really increased owing to the number of businesses and companies going online. You need to be clear with what you are looking for before seeking the service of a professional company. There are numerous companies in the market offering web designing services and choosing one after proper research will give you good results. If you are planning to develop a site to make your online presence to be felt, it is important to take the services of a professional website design firm.

Giving your website a great design does not have to be performed in an extremely extravagant way. As a site owner, always remember that simplicity is beauty. Certainly, a simple and clean design usually works best.

For the most of us, the most difficult aspect of building a responsive layout is the planning and coding of its navigation. As there is no truly tried and tested universal solution, the style of the menu you use will depend on the type of site you are building.

If it is a small site, a <select> drop-down menu or a basic “three line” toggle menu will probably be suffice. But if it is a larger site (an ecommerce store for example) that relies upon a mega-menu for navigation on its desktop version, then a drawer-style navigation or an animated side panel menu will most likely help you.

So, no matter what type of site you are building, in this post we will hopefully have the solution for you in the form of these jQuery plugins.

Sidr is an easy to use plugin that will create a responsive Facebook-a-like side menu. It allows you to create multiple sidrs menus on either side of your layout.
(We use Sidr on Speckyboy).

Sidr

Due to the rise of web fonts and the big improvements in display technology we should all take a short break. Yes, it’s you I am talking to. Designers, developers, actually anybody building stuff for screens. Mobile as well as desktop. We nearly missed the moment that it happened. We now (yes, now!) have the control and quality at our hands that was previously only available to these serious looking print designers and their books, posters and magazines (well, almost).

With our newly acquired possibilities (hell, we’re real designers now, aren’t we?) come a few distinct duties which we had previously thought wouldn’t apply to us. In the past, we always just needed to point at technical limitations and uncertain environments to have an excuse for not going the extra mile for good readability. But, fortunately, those days are over. No more excuses. We now are fully comparable to our seasoned brothers and sisters in the printing industry. And we should stop violating hundreds of years of basic design knowledge.

Rest assured, there’s no need to be afraid of anything. There is no magic happening over there, either. All we need is a little knowledge refresh on our typography and layouting muscle. Most of this stuff is simple. It’s been tried and tested for hundreds of years. And for your convience, I will give you a quick and dirty roundup on the very foundations of good readability and layout. For a more detailed and in-depth take on this topic take a look at my upcoming book “Readability“.

Information Density

You may have heard of my old companion Edward Tufte (if you haven’t, learn more about him here.). He strongly felt that we made the wrong use of Information Density. And he is right. Still this is the most frequent design error I see. And it’s the most basic one, too.

“Tufte feels that the main measure of a web site (or any computer interface) should be the percentage of the screen that is actually devoted to the task at hand. He wants web pages to use words instead of icons, because words can display information more compactly. He does not like navigation bars, but instead wants as many choices as possible on the main page.”
Jeff Atwood on Edward Tufte’s book Beautiful Evidence.

He may (or may not) be a bit over the top on this. But his main message is as right now as it was over ten years ago when he started preaching it. This is the way any application or web site providing information should be designed:

• Above all else, show the data
• Maximize the data-ink ratio
• Minimize non-data ink

It’s good to remind ourselves occasionally about our utmost priority. And this is what every user expects from us at the most basic level. To let him consume our information efficiently. So, don’t decorate or litter your site. Where possible, do away with contextually useless data (like ads or other unrelated visuals that distract or consume your user’s attention unnecessarily). Show him what he expects to see. Stop gaming your own users. Instead, be helpful. This is the foundation of everything.

Now that that is said, let’s get down to taking a look at your content. If it is text (actually, most content is), you will find some of this useful.

Finding the optimal line height and characters per line

Amazingly, I see lots of people struggle to get these most fundamental settings right. So let’s start out with “setting” this straight. The measure. That’s what typographers call the numbers of characters per line. This is the number of characters in one line of text, before wrapping to the next line. It’s a crucial setting that can hugely impact readability by your users. So let’s choose it with care.

“Anything from 45 to 75 characters is widely regarded as a satisfactory length of line for a single-column page set in a serifed text face in a text size. The 66-character line (counting both letters and spaces) is widely regarded as ideal. For multiple column work, a better average is 40 to 50 characters.”
Robert Bringhurst,The Elements of Typographic Style.

This is a the classic typographic approach from the old print days and it seems to still hold true. Research says that lines that are too short stress people while reading and break their reading rhythm, while lines that are too long confuse them because they lose their sense of where the line starts and where it ends. To avoid both these negative consequences, you should settle for a measure between 50 and 75.

To keep the line length scale with your font size, you should choose em (or rem) as your unit in CSS. Remember not to set your type too small. Go for a comfortable reading font size starting around 16px.

Now use this to determine your vertical rhythm or leading. These are the old print terms for what we now call line-height (it’s the distance from one baseline to the next).

The rule of thumb here is that the wider your measure (characters per line), the more generous your line height should be. Furthermore, you should take a look at your font and its x-height (the height of the character “x”). Fonts with a high x-height need more line-height than ones with smaller x-height. Additionally, Sans Serif fonts tend to need more line height than Serif fonts. This is because Sans Serifs often tend to have thicker line strokes compared to Serifs. Setting them too densely can make your page look dark and crowded, impacting readability quite badly.

• Longer lines = higher line height / shorter lines = lower line height
• Higher x-height = higher line height / lower x-height = lower line height
• Sans Serif = higher line height / Serif = lower line height

You should settle for something between 125 and 175 % of the font’s size, chosen using the rules above. This will require you to trust your own feelings a bit (hey, you are about to develop a designer’s eye!). If you don’t feel comfortable with this decision, ask someone you trust. But it isn’t that difficult. Follow the above rules and things should work out fine.

We should already have quite a reasonable result by now, and now that we have decided on these important basics: Let’s get into a few details that will let your text shine.

“Don’t compose without a scale”

“In the sixteenth century, a series of common sizes developed among European typographers, and the series survived with little change and few additions for 400 years. Use the old familiar scale, or use new scales of your own devising, but limit yourself, at first, to a modest set of distinct and related intervals.”
Robert Bringhurst, The Elements of Typographic Style.

In short: Your text needs some sort of scale between its main parts (H1, H2, H3, p) to be easy to read. This may sound difficult to achieve, but actually it isn’t. At least at a basic level. And that is already a good starting point. There are lots of great tools around to help you develop a scale that fits your content. I would recommend using the Typography from Ian Lamb. It does a great job in helping you develop a good typographic scale. Choose one of the predefined scale systems. Now, implement the CSS. You should end up with something similar to this code:

 body { font-size:100%; }
 h1 { font-size:2.25em;  /* 16x2.25=36 */ }
 h2 { font-size:1.5em;   /* 16x1.5=24 */ }
 h3 { font-size:1.125em; /* 16x1.125=18 */ }
 h4 { font-size:0.875em; /* 16x0.875=14 */ }
 p  { font-size:0.75em;  /* 16x0.75=12 */ }
 

Remember: These settings are just the foundation. You should spend some time fine-tuning the details till you feel comfortable with them. The whole topic of Typographic Scale and Proportion/Harmony is worth another ten blog posts, so I will limit myself to this short introduction. I will be covering this topic (and many more) in “Readability” in great detail.

Ligatures and Hyphenation

These two get forgotten so often, it makes me weep. But they can do wonders for your text flow and increase the reading user experience greatly.

First, Ligatures. These are specially designed character combinations that need special treatment to fit perfectly (for more detailed explanation check out this FontShop blog post or subscribe to get notified as soon as “Readability” is available). If you use a decent font with Open Type features they should contain ligatures, as well as alternative characters, smallcaps, different kinds of numbers and more. You can activate them by simple using this piece of CSS:

 h1 {
   -moz-font-feature-settings: "liga=1, dlig=1";
   -ms-font-feature-settings: "liga", "dlig";
   -webkit-font-feature-settings: "liga", "dlig";
   -o-font-feature-settings: "liga", "dlig";
   font-feature-settings: "liga", "dlig";
 }
 

Same applies to Hyphenation. This is a relatively new CSS feature, but it degrades gracefully. CSS Hyphenation is the better Word-Break. It’s locale-aware (depending on the dictionaries available for your browser) and inserts the hyphen character in the correct place when breaking the words. This is especially important in responsive design. It will save you from a lot of ragged lines. Just kick in these lines of code:

 -ms-word-break: break-all;
 word-break: break-all;
 
 // Non standard for webkit
 word-break: break-word; 
 -webkit-hyphens: auto;
 -moz-hyphens: auto;
 hyphens: auto;
 
 -webkit-hyphenate-before: 2;
 -webkit-hyphenate-after: 3;
 hyphenate-lines: 3;
 

This will bring you the broadest possible browser support and will degrade gracefully in all unsupported browsers. For a detailed list of browser support, check out CanIUse.

These recommendations should give you a good starting point on your path to a satisfiying user experience. I know for some of us this stuff seems a bit daunting. But I can assure you, everybody can learn to engineer a good reading experience. And if you want to know more about designing for readability on screens, check out my upcoming book “Readability“.

You might also like…

With literally millions of apps now available on the App Store and Google Play, people are finding it increasingly difficult to cut through the noise and get their app noticed and downloaded.

Recent surveys have pointed out that successful app publishers, those that manage to make a business out of their apps, invest time and money in marketing to launch with a splash, securing a good ranking on the top download charts and ultimately gain more exposure and downloads for their apps organically.

Mobiloud, a UK-based mobile app building service dedicated to WordPress users (they built the Speckyboy app), has put together a free ebook titled “Mobile App Marketing Cheat Sheet” with some juicy tips on how to launch and promote a mobile app. You can download the free PDF ebook from their website.

The 20-page PDF starts by offering number of ideas on how to drive traffic from your existing website or blog to the app and how to create anticipation prior to the launch by building a launch list and creating a video or screencast. It goes on to suggest how to make the most of the promotional opportunities offered by app marketplaces, such as screenshots and descriptions. Finally, you’ll find tips on how to write a press release and reach out to bloggers and journalists.

Here’s a full list of topics covered:

• Creating a beta/launch list
• Using video teaser or screencast to build anticipation
• Create a landing page for your app
• Leverage your blog to promote it
• What to write in a launch blog post
• Leverage the App Store, icons and descriptions
• Choose your keywords wisely
• Use screenshots to sell
• Leverage social media and build a community
• How to use public relations and create a press release
• How to reach out to bloggers and journalists
• Getting your app reviewed
• Climbing the charts with launch campaigns

Smartphones and tablets are here to stay, and so are apps, with download numbers showing no signs of slowing down. There’s great opportunity in this market, but competition from other app developers is also now significant. Today more then before, it’s critical you’re covering the basics of app marketing to get the best chances of making your app a success.

Download the Free Ebook

If you would like to receive our daily updates and keep up to date with the latest and greatest articles and resources from the design community, you can follow us on Twitter, on Facebook or by subscribing to our RSS feed.

Tipue Drop – A search suggestion box jQuery plugin

0

1

2

3

4

5

6

7

8

9

Your Guide to Becoming a Freelance Web Designer has been written to help both those who are thinking of a freelance career and those who already have one. It’s a collection of easy-to-understand concepts and honest advice. Everything you read in the book comes directly from my 14+ years of experience as a freelance designer/developer. Frankly, when I started my business in 1999, there was so much I didn’t know. I want to pass along what I’ve learned and hopefully help you in your journey.

Below is the book’s introduction and first chapter. And, there’s a special offer just for Speckyboy readers below. Enjoy!

Introduction (aka What’s a Freelancer?)

Web design is a very unique profession. Unlike many popular career choices, a web designer doesn’t necessarily need any formal schooling. The very nature of the internet itself makes it easier to become a self-taught guru of design and/or development.

There’s a sense of freedom that comes from being self-taught. And, I think that we creative types enjoy freedom. The freedom to create what we want, work the hours we want, listen to the music we want and earn money the way we want is important to us. Personally, the freedom to dress the way I want is something I hold dear (no suits, please).

That’s why so many web professionals have turned to freelancing. What’s freelancing, you ask?

Freelancing is:

• Working on your own, with no boss peering over your shoulder.
• Starting your day in your pajamas, if you so desire.
• Taking an early lunch to catch an episode of “The Price is Right” (at least, that’s what I do).
• Heading out for a nice walk when things get a bit hectic.
• Playing games when things are slow.
• Listening to your favorite song at full blast while having fun in Photoshop.

Sounds pretty good, doesn’t it? But you also have to factor in the negatives:

• Fielding emergency client requests at all hours of the night (and on holidays).
• Keeping track of billing, payments, earnings & expenses (or paying someone else to do it).
• Instead of having one boss peering over your shoulder, now there are dozens of clients (aka bosses) calling and emailing to check the progress of their projects.
• Buying health insurance, if necessary.
• Being a bit lonely when working in an empty house.

So, no, freelancing isn’t all rainbows and unicorns. It is work. Sometimes, hard work. Like when you don’t have a fellow team member to pass along the difficult stuff to. Or when you receive an irate phone call from a client whose project has gotten lost in the pile of tasks you need to attend to.

Becoming a freelancer means that you’ll sign up for all of the above, and more.

Chapter 1: Why Become a Freelancer?

The question of why you should become a freelancer is different for everyone. Some people may want to simply work from home. Others may see earnings potential. Whatever your reason, you need to make sure that it is the right reason for you.  After all, it can be quite a risk. Especially if you’re quitting your “day job” to strike out on your own.
Being a freelance web designer will change your life. From the moment you declare yourself open for business, you are the key to the entire operation. You’ll make all the important decisions, such as how much to charge for a project and what the theme of your office decor will be.

“I can do it better.”

If you have ever worked for someone else, be it a large or small company, chances are you’ve said the above phrase to anyone who would listen (except maybe the boss). Well, freelancing is your stage to prove it.

When viewing things through an employee’s eyes, it’s easy to see where a project (or even an entire company) have gone wrong. Whether it’s incompetent sales people who over-promise what you can do, a lack of communication between departments, a lack of resources to do the job right or general mismanagement, you have seen the mistakes and have confidence that you can and will do better.

Being a freelancer will give you that chance, in good time. But it’s up to you to not only dissect the mistakes you have witnessed (or have been a part of), you must also figure out how they could have been avoided in the first place.

A major part of being in business is learning how to avoid costly mistakes. Mistakes will happen, no matter how much you prepare. But learning from the past will help you avert large-scale disasters and also provide you with a sense of how to deal with the smaller ones that will eventually rear their heads.

What Went Right?

If you are already an experienced designer, then you’ll also want to look back at the things that went right during your employment.
For example, think back to a project that went well. One where you were able to use your creative talents to develop a website that the client loved. Ask yourself:

• Why did this project go so well?
• What made this project different from others you worked on?

Taking the time to analyze both the good and the bad elements of your previous experiences can help you put your best foot forward in your new venture.

Create Your Ideal Working Environment

One of the tougher aspects of working in an office full of people is creating a work environment that lends itself to creativity. For some of us, it may be nearly impossible to do that in a cubicle. Limited space and the threat of co-workers popping in at any moment can really mess with your creative mojo.

If you’re a freelancer working from home, however, you have the power to set up your workspace to match your personality. You can hang inspiring art on your wall, invest in a comfy office chair, listen to your favorite music and even install a lock on your office door to ensure privacy (Tip: this does not work for kids and pets).

Probably the best part of setting up your office space is stocking up on the hardware and software you’ll need. No longer are you limited to that clunky old Pentium 4 machine running Windows XP. Now, you can rock whatever processor and OS that your budget allows. As a bonus, you get to setup your gear the way YOU want it.

Find Financial Freedom

One of the greatest risks of starting your own freelance web design business is also one of its greatest rewards. In the beginning, you may have no clue how much money you’re really going to make. Another, more positive, way to look at things is that there really is no limit to what you can make.

Because you’re not necessarily locked in to a specific set of hours or terms with an employer, you can charge what you want (more on that later) and take on as many projects as you want. So, you do have some sense of control over your salary. Whether you book one $50,000 project or ten $5,000 projects is up to you.

It’s a good idea to set (realistic) goals for your business and then get working to achieve them.

Family Time

One of my greatest joys since starting my freelance career has been the extra time I’ve been able to spend with my family. Because I work at home, I get to spend extra time with my daughter. It’s truly a priceless benefit that I wouldn’t want to miss out on.

While it can be tough to strike a balance with kids, (“Daddy is home, but is working right now and can’t play”), the opportunity you have to watch them grow up is worth the effort.
Working at home gives you the flexibility to take the kids to school and be there when they get home. It’s much easier to get to school plays and sports practices. This is definitely a perk for parents.

The Lowdown

Becoming a freelancer can be very rewarding, if you’re doing it for the right reasons.

Just remember that freelancing means:

• A change in lifestyle (for better and/or worse).
• Potentially more time with the ones you love.
• A responsibility to balance all aspects of your business.
• Freedom!

Download Your Copy and Get 50% Off

Speckyboy is an outstanding resource for our industry. I’m so honored to have several posts on the site. As a thank you to Speckyboy readers, I want to pass along a 50% off coupon! Normally, Your Guide to Becoming a Freelance Web Designer costs $5.00 US. But, if you visit the book’s website at www.yourfreelanceguide.com and use coupon code speckyboy, you’ll get a PDF download for half price.

Grab Your Copy Now

Twitter Bootstrap, the powerful framework that is loved by developers all around the world, has just a couple of days ago taken the first step towards a major upgrade. The first release candidate for version 3 is out!

While you still have access to the previous version, the new version 3 will soon be replacing its predecessor. In terms of changes, Bootstrap 3 brings many new tasty dishes to the table: there have been roughly 16,00 commits, 72,000 additions and deletions as well as nearly 300 file changes. If you are looking for the complete list of changes and a migration guide, check this out.

You can get your hands on the release candidate over here. RC1 will, most likely, be followed by an RC2, which shall then pave way for the final version. So keep your eyes and ears open, and watch out for the new ideas that Bootstrap 3 will bring to web development.

Although a website packed with a lot of information can be beneficial, it must be presented in an appropriate way. Spending too much time cramming each website’s page may only decrease the amount of time people stay on the website for.

Whitespace is a reference to a part of a page that is unmarked, and when it’s used correctly, it can help give the website an elegant appeal and make people search for your content comfortable, without having it thrown in their face.

Unlike the terms suggests, whitespace doesn’t always have to be white, but a lot of the time it is, and Google’s homepage is a great example of using whitespace for impact, partly because it work well with their bold colours for each letter. It must be said that whitespace needs to be used correctly, and if it was utilised too much within a website, it could appear boring, so finding the balance is key.

But for amateur web designers, it’s important that you practice using whitespace, because overcrowding a website will soon become problematic, and it can actually make your design look less professional.

You know what’s the best part about a cult movie or genre? The dedicated fan base! Yes, that very fan base which never gets tired of viewing and re-viewing the same movie over and over…

It is that time of the week again, a chance for you to sit back and enjoy some of our favorite web and mobile designs from this past week.

Mixd (Responsive)

Mixd

Applove

Great Fridays

Flandria

Cyclemon

Vickers Bicycles

Fostr (Responsive)

Fostr

Pili Pop