Mobile technology has really come to the foreground in the recent years. It is not new to access a website on a mobile device. However, the interest in developing mobile web content has recently ignited because of the plenty of skilled XHTML and WAP 2.0 devices that have become increasingly available. That is why this is the perfect time to learn about the advantages of publishing web content beyond the desktop and the characteristics of mobile web design.

Advantages of Mobile Web Development

By developing a mobile website, you can increase the range of visitors to your website, who will be happy that they are able to use your site and all of its functions on a mobile device. With good mobile web development, you will most likely be able to pick up a lot more business if you are targeting people on the move through your business, such as hotel or restaurant. Even if you think your business will not naturally fit with mobile technology, you can still present your company as a cutting edge, professional outfit that embraces a good mobile web design. Through mobile web design, a brand and product can be expanded beyond a website into apps and software programs. There is a consistent growth in the possibilities with mobile technology.

How To Develop a Mobile Site?

1. Check your stats: Before you develop a mobile site make sure you identify the sources of traffic to your site by using Google Analytics. This way you will be able to find how many of your visitors are accessing your site via mobiles. This will help you decide whether or not it is worth building a mobile website for your business.

2. Create a mobile stylesheet: Using a CSS stylesheet that is different from the one you are using for your
browser pages is an ideal way of managing a mobile site. This way content within your site will not be duplicated and you will be able to update the site quite easily.

3. Avoid duplicating content: Your website can be penalized by Google for having lots of pages with duplicate content. So when a different set of webpages are developed for mobile phones, it should be made sure that the content is particularly different from that of the browser website.

4. Keep images to a minimum: When it comes to mobile web design, the lesser the images the better, and even with lesser images, your customers will still get an enjoyable experience when they visit your site via a mobile phone.

6. Test it out: So you finally manage to build a mobile website for your business, but there is one last but very important thing you will have to do, i.e. test it out. This will help you ensure that your mobile site is working properly and that your visitors will not face any problems when accessing the site through their mobile phones.

Mobile web design continues to become more and more popular as the number of mobile phone users increases, and this has resulted in an increase in the demand for mobile websites.

If you are an uber-experienced web designer, you probably won’t have this problem. Your CSS files will be structured coherently and concisely, every selector will have been attentively placed, every property will be perfectly formatted… basically, your CSS will look like carefully crafted art. If this describes you, then move along please, this post is not for you.

But if you are one of the 99.9% of web designers out there that work with CSS on a regular basis, it is for you.

You know how it goes, you start a new web project with a barebones CSS file, and as you build the site your CSS grows rapidly with it. And it will keep on growing. It will become disorganized and at times it will be confusing and even unreadable. Structure will ultimately be lost. Mistakes will have been made. Rest assured though, it happens to everybody.
At this point you can either do one of two things, stop at different stages and re-structure the CSS, or you can wait until the site is finished and then fix everything. Either way and depending on the size of the site, it will take up a lot of your time.

If only there was a bunch of tools that would help format, organize and sort my CSS for me. Thankfully, there is. Now, these tools are not fool-proof. They won’t know about the unique and quirky style you use for writing your CSS, but they will help and will save you a lot of time. Time back that will let you go and mess up another CSS file!

Usually to re-order CSS code you move lines over each other taking comments into consideration, multilines records of property values, hacks and everything that could be found in the real file. CSScomb reproduces those actions for you. It is an intelligent tool that will sort the CSS properties from your stylesheet and, from the settings, allows you to sort them in a specific order.

CSS CombCSS Comb Online

csscss is a Ruby gem that will parse any CSS file and tell you which rulesets have duplicated declarations. To learn how to use cssscss, click here.

csscssGitHub

Helium is a tool for finding unused CSS across many pages on a web site. Helium takes a list of URLs for different sections of a site then loads and parses each page to build up a list of all stylesheets. It then visits each page in the URL list and checks if the selectors found in the stylesheets are used on the pages. It will then generate a report with details of each stylesheet and the selectors that were not found to be used on any of the given pages.

Helium CSS

As well as being a CSS minimizer, CSSO also can perform structural optimization of CSS files, resulting in a much smaller file size compared to other minifiers. It will merge blocks with identical selectors and properties, remove overridden properties, remove duplicate selectors, partially merge blocks, remove empty rulesets and will also minimize margin and padding properties

CSSOGitHub

CSS Beautifier is a handy tool that will take any messy CSS file and make it easy to read. Here is what it will do for you:

CSS Beautifier will take the following CSS…

menu{color:red} navigation{background-color:#333}

…and will produce:

menu {
     color: red
 }
 
 navigation {
     background-color: #333
 }

CSS BeautifierGitHub

CSS Lint is a tool that helps point out problems within your CSS code. It does basic syntax checking as well as applying a set of rules to the code that looks for problematic patterns or signs of inefficiency. The rules are all pluggable, so you can easily write your own or omit ones you don’t want.

CSS LintGitHub

Minify and GZip Compress JavaScript & CSS

Based on CSSTidy, Devilo.us is an advanced CSS compression and optimization engine that has been modified to also handle CSS3.

Devilo.us

Alternative Optimizers, Formatters & Validators: You might also like…

15 Responsive CSS Frameworks Worth Considering

This is our weekly column were we share our favorite design related articles, resources and cool tidbits from the past week. Enjoy 🙂 If you would like to receive our daily updates and keep up…

There will never be a point when a designer says ‘yep, that is it for me, I have all of the brushes I will never need’! It just won’t happen. The designers toolbox is always evolving, with new resources being added as and when they are needed. And just to help you add even more tools to your metaphorical toolbox, we have a fantastic bunch of Photoshop brush sets for you.

There are a total of 30 brush packs below, with a combined total of just over 500 brushes. There is no theme or specific category, other than that they are all large and are of the highest quality. I hope they help you out.

0

1

2

3

4

5

6

7

8

9

0

1

2

3

4

5

6

7

8

9

50 New and Free Photoshop Brush Packs

Many companies are heads-down in their product development process. It makes sense — building a great product takes not only hard work, but collaboration across teams, especially in larger organizations.

Sometimes, companies make mistakes when building their products, especially when it comes to user experience. Here are a few UX mistakes we commonly see:

Cram That Feedback

Most people know that they should be seeking user feedback as early and as often as possible. But knowing is different than doing. Most companies end up cramming user feedback in at the very end of a project, like waiting until the night before to open your text for a final exam.

Companies that do gather user feedback are often doing it the wrong way. Teams rely on surveys and focus groups to make design and messaging decisions. They rely on a lazy approach called market research versus the “listening to the heart” approach of the user called behavior research. The main difference between market research and behavioral research is that the first collect opinions, while the second observes actual behavior. If you want to learn why users run into difficulties, and how they use your product, then don’t ask, but watch! Observe and listen as users interact with the site. Both in-person and online user testing are ideal methods for this approach.

Furthermore, most teams think you have to wait for a working product to begin a feedback session, but this is wrong. With methods like paper and codeless prototyping, a designer or marketer can collect insights from users as early as the idea stage. Getting into the habit of testing every single assumption and idea as early as possible is something teams should fully commit to. If you are not running an experiment everyday, then you are doing something wrong.

To help you do it, right here are some tips:

• Identify issues with a product and brainstorm changes
• Ask users if they have the same issues
• After validating an issue create a sketch, wireframe, or rapid prototype
• Engage users again, observe how they use the prototype
• Iterate and show the improved version to more users
• Deploy, measure, and validate with users that their pain is relieved

Marketeers Know Best… Not!

Many organizations let marketing have the final approval about what goes on the website. Marketing professionals develop the brand, and they make sure the language is consistent with the brand; they position products, they focus on aesthetic consistency and attitude and messaging.

We see organizations conducting excellent behavioral research, and handing the results to marketeers, who say: “That’s interesting—lets see how this fits into the marketing strategy.” it’s not marketing’s job to produce a solid, functional experience. The problem is that UX designers and researchers usually have little say in the final design of the site.

Marketing-driven design is problematic and it also misrepresents what it means to build a brand. The landscape is changing and the industry knows that building amazing experiences is a much better branding strategy than endless marketeer gibberish. Research to build something people love, then build that!

Size Matters

Mobile is exploding: Brace yourself. The world is browsing on smartphones and tablets. People switch between tablet, to smartphone, then desktop, and back again. Nearly everyone is walking down the street and buying shoes online.

Yet, we still tend to design for users sitting at a large desktop, alone in a quiet space. Unless you are drop-dead positive your audience is experiencing your website from a desktop, you need to think design for a multi-screen, active experience.

Sure, it’s possible to code for a multi-screen experience, and everyone talks about responsive design, but can you easily prototype a multi-screen or responsive experience? And what about user testing for a multi-screen experience? Hopefully our jobs will get easier; In the meantime we’ll have to devise workarounds to be sure that we aren’t stuck in the “desktop” paradigm.

Wordy, Wordy, Wordy…

There’s nothing wrong with having text on your website, except of course that people likely aren’t reading it.

Think about providing content in another format. Research on the human brain shows that when people are listening to someone speak, their brain activity syncs up with the speaker. The more the listener’s brain is in sync with the speaker’s, the more thoroughly the listener will comprehend the content.

Where it makes sense, use audio and/or video instead of just relying on text. Ohh, and the right picture can communicate a 1,000 words, but you must test your images to insure you picked the right 1,000 words.

Copycat

Many designers — and this is far too common an occurrence — copy the look and approach of someone elses design. If a design is appealing and appears to be working surely a rigorous process was used to arrive at the aesthetic, right? This may have been the case, but likely not. By being a copycat you copy the same issues, problems, and of another’s design.

It is recommended to leverage design patterns and the best approached from other designs, you must to think long and hard about how that design might perform, and of course, test it!

Image Source(s): All images by maraga via Shutterstock.

As freelancers navigate their way into the world of contracted work, there are a variety of good times and bad times. The good times in particular involve a steady list of clients as well as consistent income throughout the year. Whether you’re freelancing full-time or part-time there are a lot of things to keep in mind when approaching any new project.

Below I have outlined common lessons most freelancers have experienced which in turn could help you with new opportunities in your future.

How to Effectively Quote Your Clients

The age old question for a freelancer is “So, How much do you charge” There are a number of ways to determine costs but in all honesty there’s no set rate you can pitch to each and every client. Some designers will quote high and some will quote too low. Unfortunately, those who quote too low and who are in dire need of work, ruin it for other freelancers across the globe by setting the going rate far too low to live on.

Charging a set fee or hourly can both present an issue. Factors to consider when developing a quote include the client’s budget, your availability, what bills or costs you need to pay in order to keep your business operating, and even assets such as photography or stock art. My suggestion is to assess the project and really gather an overall understanding. If the project is relatively small, then a flat rate would probably work best, as it’s easier to dictate the outcome and what is required from you. For larger projects however, where more work could be added, an hourly rate is the way to go. This will ensure that you are compensated appropriately your hard work, skills and creativity. With that said, how much to charge for hourly vs. flat fees goes back to your client’s budget and what the client and you agree to.

Having Contracts in Order before a Project Begins

Always have a contract. No exceptions. There are plenty of good sources for basic contract templates online, but I would recommend researching those and use that information to create your own. Get rid of all the legal jargon and summarize it down to terms anyone could understand. Contracts usually scare clients but they don’t have to. I’ve written my own contract to be humorous so it’s actually a bit of a fun read. You can cover all your requirements in 1-3 pages.

Quoting a Job

When a client asks if I can help them with a design/development project I first develop a project proposal. This is a document which outlines the project scope, budget, and timeline of the entire project. Depending on if the project is a flat fee or an hourly rate, I draft the proposal in such a way that makes the services I’m providing very clear to each client. First, I’ll have the client agree to the proposal and then send them my basic design contract. Once this is completed and the initial deposit is received the work can begin. Taking these steps locks an agreement between you and your client and will save you from headaches later on down the road.

Save your Sanity by Allowing a Set Number of Revisions to Design Work

Inside your design contract, it is absolutely necessary to have a set number of revisions per project. Many freelancers forget this detail and it ends up hurting them. I myself have been in this position which drove me to always set a maximum number of revisions. If you don’t, you can waste more time creating something the client will never like and it ends up hurting both parties. Setting a revision limit saves time, money and sanity.

When to Turn Down a Project

Any designer or developer new to freelancing is always on the lookout for more work. Countless times I’ve gotten emails from possible clients interested in work but with a very low budget. This is an easy warning sign to possibly skip the project. Accepting low ball offers not only effects your own sanity but it affects other designers. Accepting lower budget projects makes the client think from then on a typical design for say a website will be a set figure for any future work they need.

Another warning sign is if the clients says they need a responsive website and a logo, for example. You send them a proposal and in return they ask how much for just the website. You quote them for the website and then they ask for a basic unresponsive simpler website. This trend continues until they look for someone cheaper. In this situation it’s best to be blunt and tell the client that you absolutely can’t go any lower for your services You’re wasting time crafting proposals to fit their needs when they aren’t even interested in dishing out the money for it. If they are looking for quality design and development, in your mind they’ve come to the right place, but if they can’t afford your services they can try to find someone else do it for cheaper and have it not turn out to be as successful.

For experienced freelancers, warning signs like these are spotted immediately. Use your best judgement when dealing with these situations. More times than not you’ll have to enforce or sell yourself to get the client to agree to your terms. In my experience, if prospective clients keep trying to offer less or even ask you to do it “pro bono” then you should turn down the project.

Dealing with Clients That Can’t Make Up Their Mind

Clients rarely know what they want, even when they think they do. It’s up to you as a professional freelancer to provide them with consulting and insight on the best paths to take. Create outlines and bullet points for each project to go over with your client. I personally implement phases into my designing process so the client understands what is actually involved each step of the way.

Develop a Long Term Partnership with Clients

Landing multiple clients is what keeps a freelancer in business but maintaining those clients for future work is what makes a freelancer successful. Having a long term partnership with each client offers steady income and job security. The key to doing this is offering your services and attention to each client you take on. Make your client feel you are ready to help them succeed and develop more business together.

When I was starting out, steady clients were few and far between. With time, dedication and hard work an experienced freelancer can develop great professional relationships across the globe. Maintaining these relationships offers both success to you and your clients.

Dealing with Dry Spells of Inconsistent Work

Every freelancer has dry spells throughout a given year. It’s always wise to develop a plan for these times in particular. An emergency fund or savings fund is a great way to live comfortably during these times if possible. Other ways to keep income steady could be to develop some sort of passive income. Writing an e-book, developing stock for online market place and discounting your services for a limited time would help any freelancer during a slow month or two.

I’m a Freelancer not an Accountant!

Freelancers, designers, developers and writers ARE NOT accountants nor do we want to be. We strive to create or produce something, but business is business and financial strategies and records have to be processed. In the past I’ve found automated ways to help with these mind boggling concepts:

Perhaps the hardest project you could ever take on is designing the website of an online news magazine. One of those sites that gets updated umpteen times a day and publishes various formats of content, like news articles, image galleries, videos, blog columns, polls, etc. Yes, I am talking about content heavy websites. Those behemoths of sites that seem to be impossible to plan, nevermind design for.

As you will already know, there are thousands of content-rich websites out there, but very few seem to focus on good design. Sure, they have put a lot of thought into organization and structure, but for the most part they do rely on the old tried and tested magazine-style layouts, and never really tend wander far from those confines.

Fortunately, not all are like that. Some do dare to venture out and breakout off those shackles and design something truly unique and, and dare I say it, beautiful.

House (Responsive)

0

1

2

3

UGSMAG (Responsive)

4

5

6

Wired (Responsive)

7

8

9

0

1

2

B-Reel (Responsive)

3

4

You might also like…

Our 50 Favorite Web Designs from 2012

Need a clean, modern font for your latest project? You should definitely check out the Hiruko Font Family then! Inspired by Japanese culture, this font may be minimalistic in approach, but it screams classy fun in execution! And for a limited time only, Hiruko is incredibly marked down in price!

Hiruko Font Family Highlights:

• Full Family of 15 Styles
  Based on the Sans-Serif font, the Hiruko Family includes 15 different styles. There’s Extra Light, Extra Light Alternate, Extra Light Italic, Light, Light Alternate, Light Italic, Regular, Regular Alternate, Regular Italic, Black, Black Alternate, Black Italic, Outline, Outline Alternate, and Outline Italic.
• Fully Compatible
  The Desktop files are delivered in .OTF format and are compatible with both Windows and Mac.
• Multiple Languages
  This cutting-edge modern font family supports over 40 languages, so whatever country you’re working with, you’re sure to find the appropriate way to express yourself.
• Full Character Set
  Each type weight includes a full 255 character set, as well as manual kerning, pairs, and tracking.
• Attention Getting
  Hiruko is a fabulous font that’s just perfect for any trendsetting-type projects. It works beautifully on its own, whether decked out on a T-shirt, poster, menu, sign and more!
• Royalty Free License
  Your license with the Hiruko Font Family allows you to use these modern fonts on any personal or commercial project, without the need for any attribution.

Pricing:

The Hiruko Font Family normally sells for $300, but for a limited time only, you can get this hip, modern collection for just $9 for either the Desktop or Web Font (@font-face) version – Yes, you read that right… $9! OR get both the Desktop and Web fonts together for just $18! – That’s a massive 97% off the regular price!

0

1

2

3

4

5

6

7

8

9

0

1

2

3

4

You might also like…

Posted in Web Design

« Previous Page