BlogmyQuery – BMQ

There are many techniques in CSS to achieve certain results in different ways, CSS sprites being one of them. CSS sprites is a technique used where you can have a large single image containing a set of images that can be broken down using CSS to separate the image into multiple.

To better understand this concept, let us look at the following example image:

As you see in the example image, there are three top bars of different colors all separated by some whitespace between them. Instead of having each of these bars as individual images, you can join them into one as shown above, and with CSS, you can separate them so they seem as separate images.

Moreover, let us say you just wanted the left and right corners of the blue bar instead of the entire thing for an aspect of your website, using the CSS sprites method, you can do exactly that without the need of creating separate images.

Who Uses CSS Sprites?

Many people have the understanding that most major companies do not like to use certain techniques and would rather use generic methods. However, this is not necessarily true, and in fact, major companies such as Ask.com and Facebook use the sprite technique as it is the smarter to move.

Now that you understand the concept of CSS sprites and how they work, we dive right into four advantages of using CSS sprites along with a few tips on usage.

Cut Back On HTTP Requests

One of the main advantages of using CSS sprites is that it cuts back on HTTP Requests. When a user visits your website, the browser requests the data from the server, by having fewer images you cut back on those requests, which in essence, cuts back on load time as well. Remember, the fewer HTTP Requests, the better, and using this technique is one-step forward.

Saves Time

By merging relative images all into one larger image, you are saving yourself time from creating individual images. Additionally, it also makes it easier for you to locate the images you may want to edit as it may be grouped with others, instead of the need to flip through a basket of files to find what you may have been looking for.

Flexibility

By utilizing CSS sprites, you are giving yourself more flexibility over your website’s design and or layout. For example, if you are not using CSS sprites and you have some gradient bars that you use across your website, grabbing a corner of that bar would mean creating a separate image for the corner and to deal with its hassles.

Instead, by using CSS sprites, you can easily slice the corner you want from the image without modifying the image or creating a new image, giving the flexibility you need while saving time.

Tips

Now that you know the benefits of using CSS sprites, we discuss three tips on improving your CSS “spriting” experience.

Plenty of Space

While it may sound jolly to cram in many images into one to benefit from CSS sprites, it is generally not a good idea to leave small gaps between each image. The reason for this is that sometimes content expands quite a bit which sometimes causes other images to appear within the image you selected from the main image or sprite image, this is caused by having your images close to each other initially in the sprite image. Instead, leave some good spacing between each image to eliminate this issue, even if the images may be icons.

Left to Right, Right to Left

No, we are not talking about languages, but rather image placement in your sprite. If images in your sprite are to be used to the right of an element, place the image to the left of the sprite and vice versa. This helps prevent other images appearing in the background of the image you selected from your sprite, which is usually caused by moving the background image by CSS.

To better understand this concept, let us have a look at the sprite below:

Let us say we wanted to use the green book from the sprite, because we intentionally placed it on the right, we will be using it to the left of an element like so:

Using this concept, if we wanted to use the warning symbol on the left, we would have placed it on the right as well instead of on the left within the sprite.

Repeating Images Should Consume Less Pixels

Many people stick some images intended for repeating across the screen in a sprite. When doing so, there is no reason this repeating image should take much space unless designed in a certain way. With that said, your repeating images should be only a few pixels wide as they will be, well, repeating. This not only saves space within the sprite itself, it also saves bandwidth and indeed, time.

To conclude, using CSS sprites may or may not be the way to go for you as it really depends on the type of application it will be used for. If you are considering using the technique for one of your mainstream websites or services and or for your portfolio site, it will definitely be a great advantage for you to use it accordingly.

One of the key things you need to look at before choosing this technique is what browsers the majority of your users use to visit your website. The reason this question sometimes arises is that it sometimes may be very difficult to make your CSS sprites compatible with many of these browsers depending on the techniques you use.

However, if major companies as mentioned earlier use the CSS sprite technique, it sometimes is a good idea to review how they implemented the idea as they may have found a workaround to have it work across many browsers and platforms. I am not saying you should take their code and implement it on your site, but rather get ideas for your implementation by overlooking what they have done or achieved.

A major problem with many new websites today is that their content is geared toward a different topic from what their site initially started up as. For example, let us say a website starts up geared toward gadgets and technology reviews. For the first few months, you are getting exactly what you came for, technology and gadget reviews.

However, as time progresses the reviews begin to widen to internet technologies such as web development, emailing, and the likes immediately.

As a reader, you will not necessarily be interested in reading about web development or emailing as you visit the site for gadget and technology reviews, thus, you will probably begin searching for a new website to call home for your gadget and technology review source. Going back to being a webmaster, we will touch base on six tips that help you produce content geared towards your audience as well as tips to introducing new content away from the initial category or categories.

Content That Meets Your Audience’s Standards

When creating content for your website, you need to make sure it meets your audience’s standards, such as comprehension level, topics in their interest, and the likes. Let us continue with the gadgetry and technology example mentioned earlier. Let us say you own a gadgetry and technology review website and your audience range from teenagers to young adults interested in the technology world.

So for example, the content on your website should be written in a rather casual style without much sophistication based on the information provided about your audience. The content should as well be fully geared towards useful gadgetry and new technologies that your audience can make use of or fit right in their alley.

Due to your targeted audience being a young group in addition to the category you cover, your content should not generally be composed in a business-like manner but rather casual as mentioned earlier. With that said, by approaching your audience in a different monotone than expected, your audience will lose interest in the content and or website altogether.

Complimenting Your Website

Your content should compliment your website, which means that your content should be relevant to and or supplement the topics you cover. Think of your website as the introduction to, or the summary of, a book. The introduction gives the reader a general idea of what to expect throughout the book.

However, if the introduction does not compliment the contents of the book, it leaves the readers unhappy and rather confused about the entire book. Thus, your content should supplement or compliment your website to assure it is user friendly.

Skimmable Content

Most users never read your content thoroughly or completely but rather skim through it to get to where they may find it interesting and applicable to what they were searching for. Furthermore, by breaking down your content into short and understandable paragraphs or bullets, you make it easier for them to find what they were possibly looking for.

Additional enhancements to making your content skimmable are to highlight keywords that may possibly be in their interest or to create separate titles for several topics throughout. For example, let us say you have an article on the top ten friendly dog breeds.

To make the article easier to skim through, you would highlight the ten dog breeds you mention so users can easily find the breed they want to read more about or you can provide a title to each paragraph you mention each individual breed in.

Bloated Content

Your content should flow off the tongue naturally as if you are addressing the viewer personally. What this means is, your content should not be stuffed with “filler text” or bloat in order to address your message, but rather be direct and to the point to keep the readers interested in the topic rather than leave or skim through it due to useless and unneeded text.

Strengthen Your Argument

Whether you are reviewing a product, talking about methods to saving time, or how to properly mow your lawn, they are considered arguments, whether you have intended them to be or not. Arguments need to be backed up by other sources or facts.

A lot of times arguments are backed up by imagery or referencing facts your viewers may have never heard of which causes your reader to sometimes doubt about the contents authenticity or correctness.

Therefore, you should occasionally link to outside sources to back your argument to have your readers assure that your facts were not whipped up in a few minutes, but are rather backed up by other reputable sources. Not only does this strengthen your contents correctness, it also assures users that they have chosen the right place to read about certain topics.

Consistent Voice

From page to page, article to article, quote to quote, you want to assure your voice is consistent throughout your website and not contradictory. If users are finding out that you and your content are falling into contradictions throughout your website, it builds a mental image in your viewers mind that your website is covering topics its editors do not quite fully understand which leads to making your website an untrustworthy source to many.

In order to avoid contradictory content, go back and check the content you currently have that relates to what you want to publish, this assures that your voice is consistent and strong throughout.

While making your content user friendly may sometimes be a tricky challenge, it should be something that comes natural if the topic your website covers is something you enjoy and or experience. Additionally, users always tend to love to throw feedback whenever they can, whether be it on the topics you offer, topics you do not offer, your website layout, or even the frequency of how many times a week you post content or the length of the content.

Moreover, taking your users’ feedback and applying it is the best solution to making your content user friendly and targeted while showing your users that you care about their feedback and that your website is built around them rather than for them.

Sometimes, we all begin to deviate from a project we are working on due to finding something that we may find interesting or the cause of distractions from devices or services. However, such deviation or procrastination may cause delays and possibly lead to lies and angry clientele.

Furthermore, deviation or procrastination is a general symptom among designers and freelancers alike that hits us on occasion. Moreover, we discuss six methods or tips that can help you stay focused as a designer to avoid deviation and or procrastination.

Working on an Aspect You Don’t Care For

This happens to everyone, we are “pumped up” when we first begin working on a design and as we complete the parts we enjoy and transition to the aspects we sometimes hate to do, our productivity level begins to decrease and procrastination takes place. In most designs we work on, we can usually begin on any aspect we desire.

With that said, in order to prevent possible deviation and or procrastination, I myself tend to do a bit of the parts I love and hate, which means I will be working on a mixture of both throughout, decreasing my chances of deviation or procrastination. Do note however, this method may sometimes not apply to some situations and you may have to finish one to get to the other.

In such a case, try to do the aspect you dislike more first before getting to the enjoyable part of the job or project. As humans, we usually tend to look forward to the light at the end of the tunnel rather than the opposite; the same feeling can apply here by leaving what you enjoy for the end.

Nap Time

No, we are not trying to bring you back to your childhood or preschool days, but we are getting to our point. Taking breaks away from your computer is a great way to increase productivity. We all tend to slow down every now and then and do a stare down at our screen for several minutes trying to analyze a situation or attempt to release frustration.

A better method is to schedule several breaks in between your working hours even if they are quick breaks. This not only clears your mind, it also refreshes your thinking process allowing you to get back to work in a more productive manner and being able to tackle what you were inevitably stuck on.

Say No to Interruptions

A major problem we have during our work hours is we accept a plethora of interruptions such as phone calls or from instant messages. If you are not expecting important phone calls, do not answer them and rather get back to them during a break or after work hours when the time is appropriate, this also applies to text messaging, try silencing your phone while working to avoid such distractions.

A cluttered environment also hinders your performance; thus, assure your workspace is clear from many distractions that can eat up on your time such as paperwork or electronic devices. Additionally, make sure your computer is clear of distractions, keep your Twitter, Facebook , and Skype clients off as well as your instant messenger clients unless need-be.

By turning off these distractions, you can remain focused on the work that needs to be accomplished rather on things that are supposed to be used during leisure time. If during working hours you must leave an IM client open, make sure whomever is on your contact list are people that you may need to talk to during working hours and vice versa. In other words, do not have your friends or family on this contact list, and save chatting with them after hours.

Break Your Project into Sections

As humans, we generally love to see continuous progress, but with a large project, progress seems to go by quite slowly. In order to keep yourself motivated with larger projects, try breaking down the project into small sections or parts. That way when you complete a part, you feel that you have accomplished more than you would without breaking the project down, thus, you keep your productivity rate high, while remaining motivated.

Don’t Over Do it

Accepting too many clients than what you can actually handle is common mistake made not only among designers but also among other self-employed freelancers. When you accept too many clients, you begin to dislike what you do and therefore become unmotivated toward any project you get your hands on with the additional stress for overworking yourself.

While accepting many clients may not be a choice but rather a must to keep bills paid, try to accept larger projects and fewer clients to balance out the change. This increases the enjoyment of what you do as a profession, while keeping you motivated and focused.

Client Search

Sometimes we spend far too much time searching for future clientele rather than actually working on what we currently have going on. Not only is this a distraction, but it additionally causes delays for your ongoing projects which may cause stress when you begin to run out of time. Furthermore, instead of searching for clientele on workdays that should be spent on priority projects, try setting a day out of your week specifically for finding clientele.

This not only helps you stay focused on your projects but it also helps you stay focused on searching for clientele, making it a win-win situation. Remember, time organization is a key aspect to staying focused and being on time. Without time management or organization, procrastination comes to play which causes your schedule to fall apart.

Overall, remaining focused, as a designer is quite a challenge especially if you do not work with others such as a team to keep each other motivated. While these six methods may or may not work for you, they do help by providing you ideas to create your own methods that work for you and your environment to remain focused, which is key to remaining productive.

Web forms are used for all different types of data submission, video submitting, contacting, blogging, registering, or for ordering items online. All the forms come in different flavors, large or small, black or white, short or long. Therefore, forms are very important to you and your users, thus, making them just right is the key to increase usage.

Below we cover six tips to improve your forms for better exposure and usability.

Not Too Large, Not Too Small

A major issue with many forms out there is their sizes, many developers or designers try to fit long forms into small spaces, reducing the size of the input boxes greatly making it difficult for users to proofread what they enter. A good ideal size for each input box, which includes large text boxes and the likes, really depends on the amount of data you expect a user to input.

For example, let us say you run a blogging service, you know that blogs can be short or long, thus, giving the textbox a good width and height is really the key. Users want to be able to easily proofread their blog post before it makes it live via the textbox, so fairly large text is also a plus, so they can easily catch typing mistakes or missing punctuation.

JavaScript Effects

A great addition to form textbox fields would be some simple JavaScript effects such as auto expanding features or character counting features, depending on the type of data being imported. Despite these effects sometimes being of no relation to your service or form, users do find them handy, especially if a lot of text is being submitted or edited.

To give a good example of a situation where an effect like this can help, let us look at a forum script. Suppose you are creating a forum script where users will be able to discuss certain topics, as you know, posts can be short or long. If a user’s post happens to be long, scrolling through the textbox is an undesired thing to do, as the user cannot quite view the entire posting. Therefore, providing an auto-expanding effect is quite helpful. As the user’s text gets near the bottom of the textbox, it will automatically expand a few lines, keeping your users satisfied.

Easy to Understand

Many users are turned away from forms that are difficult to work with. Hence, it is a definite must to be clear and precise about the information being collected as if they cannot understand what you need, chances are you will not receive what you needed. Another aspect to look at is just because it may be understandable to you, does not mean it will be understandable to your audience. Therefore, it is in your best interest to ask for feedback on understandability of your forms.

Not Too Much, Not Too Little

Another key aspect that causes users to turn away from completing your forms is that your forms ask for too much information. Users want to be completing the form to continue rather than spend the time filling them out. Thus, it is key for you to keep your forms as short as possible. For example, if your form is a registration form to an online service, leaving account settings whether optional or not out of the registration forms makes the form look shorter and easier to fill out increasing the chances of user registrations.

Moreover, leave the information you do not need immediately out of the form, and have them choose to enter the information later at their own leisure or when it becomes necessary. If the information that you may taken out is absolutely necessary within a few days of signing up, have them fill the information out a day later, such as when they sign back in, you can easily prompt them to fill the information out before continuing. This splits the lengthy form into two easy to fill and understand forms, keeping them happy.

A Simple Uncluttered Design

The design of a form additionally impacts the users experience. Your users do not want to bounce back and forth to get to each form field in order; they want to be able to easily fill the fields sequentially without trouble. Therefore, the design for the form should be as simple as possible leaving the fields easily accessible in the order intended.

Understandable Security Measures

While users understand security measures applied to forms help prevent spam, they also do not want to struggle to complete a form. With that said, complex spam prevention tools such as CAPTCHA images cause less completed form submissions from frustrated users. I myself have left many forms that I had intended to fill out due to their hard to work with security measures. Thus, as a developer or creator, creativity is what is needed to avoid the spammers but not the users.

Many new ideas and techniques have become apparent such as mathematical questions, slider prevention systems, as well as others. My personal favorite that I found very intuitive and easy to use is a drag and drop security measure. The user simply drags a shape requested from a palette of shapes right into the shape box, if you selected the requested shape, the form will submit. As it is simple and easy to use, your users will enjoy playing with the tool, as well as keep spammers out of the way.

To Conclude

Overall, getting your users to complete your form is a process that requires thought and ingenuity. With that said, creating a form is easy, but getting it properly designed, formed, and well laid out is tricky however an attainable aspect, but if it is done correctly, it can rewarding. To conclude, keep your forms as simple as possible and as down to the point as it can possibly get.

Ask around for feedback about the design and layout for whether the form can be easily filled out, whether it is easy to understand, and if it is easy to follow. Improve your form accordingly, and it would be ready to hit mainstream.

As the web standards continue to increase, new technologies and techniques arise, which increases clientele expectations for what a designer can bring forth. Whether be it fancy gradient effects, attention to detail, or mesmerizing illustrations, there is always that expectation a client wants for what they envision for their design. Furthermore, we discuss eight things a client expects from today’s designers to have learned.

PHP

A lot of clients search for designers who can design and develop in PHP to eliminate the process of contracting two or more people. Let us dive right into why and how it is important. Clientele range from many different niches, from portfolios to corporate sites but they all have a few things in common in terms of needs. Most websites we look at today have contact forms, lightweight galleries, or a simple display of products.

While you can find many free contact forms or galleries, basic knowledge of PHP is needed to modify or customize them to suit the client’s needs. A lot of times they want to be able to manage their contact form, display of products, or gallery all from a centralized panel, without PHP knowledge this cannot be easily attainable. Therefore, it is important to begin to adapt to a PHP or development environment.

Illustration

Many new designers can whip up designs with fancy gradients and patterns; however, they cannot create basic illustrations or graphics such as a lightweight illustration of a park or even simple graphics such as chalkboards and what not. Today’s clients expect designers to have such basic skills in order to whip them up a few things they might need to make their website stand out. With a plethora of free quality tutorials on how to create basic and advanced illustrations, there is no reason not to learn how to do it.

Creativity

While there is nothing wrong with browsing the net for inspiring designs, clients want their designs to stand out with new original ideas to enhance their image on originality. In fact, with so many pre-made designs out there, proving to your client that they made the right decision choosing you is ever increasing in difficulty; however, this proves your originality and ingenuity. Therefore, adapting to a creative environment or creative thinking gives you the upper hand on design allowing you to impress clients every time.

Logo Design

Logo design also categorizes under illustrations and creativity as a logo is the unique icon your client’s customers will remember. While it is wrong for clientele to think that a redesign includes a logo design, clientele expect it as a part of the package. Having the creativity in design to create a unique logo for your client’s niche expands on your portfolio and customer base. Therefore, emphasizing on illustration design is an increasing demand for designers, becoming a must for some clientele.

Clean PSD, Clean Code

A lot of clients want security for their future, they want to make sure if they hire someone a few years down the line that the person they hire can easily pick up from where you left off. With that said, it is in your best interest to offer a well organized, grouped, labeled, and layered PSD of the design or certain graphic elements that might be changed in the future. Clean code is also another thing clients look for but cannot distinguish the difference.

However, by properly commenting and organizing your code, your client will definitely be impressed with the work and will recommend you or re-contract you in the future. Furthermore, this also makes it easier for them to modify and maintain their site if they need to change a few small things, which saves you time from clientele who expect you to help them out for free when they need it.

CSS 3

The demand for CSS 3 is surprisingly increasing as clientele become more tech savvy. While Internet Explorer and other similar browsers do not support CSS 3, specializing your design to the browser your client uses is what you need to do to an extent. If your client uses Google Chrome or Firefox, you can save time by creating rounded corners and shadowing using CSS 3 as it does not mess up Internet Explorer users, but rather limits the design a bit. It also gives your client flexibility to be able to change things without the need to recreate the rounded corners as it is all done dynamically.

Javascript and Javascript Frameworks

Javascript effects are becoming noticeable all over the web, it gives a website more personality and the pizzazz clientele are looking for. Therefore, learning how to code in Javascript is becoming a must even as a designer as it effects how your design behaves. There are a lot of Javascript frameworks out in the world today that help ease up the hard coding, making it a few minute step even for developers new to the language.

Furthermore, it is a good idea to browse through many different frameworks and picking the best that suits you and your clients need, and expanding your knowledge about it. Clients are not meticulous about what framework you use, but are rather for the effects you implement.

Mobile Design Skills

Many of your clients will most likely have some sort of mobile device whether be it a phone or some sort of device like the iPod Touch. What this means is, they will most definitely try out their new website on their mobile device only throw feedback at you for correction. Therefore, learning some tips and tricks about mobile design and how to approach it is definitely an increasing demand, and something you should invest time in to learn and understand.

It is always a great move to stay up to date with new technologies and demands as a designer while continuing to expand on your skill set. Not only does this increase your knowledge, it also affects your portfolio in a positive way and widens your range of the type of jobs or clientele you can accept, and most importantly, it gives you the upper hand in the industry.