Imagination is our power

Archive for August, 2012

CSS Benefits in Search Engine Optimization (SEO)

Ranking your website and blog is very trending these days. Everyone is  searching for good SEO techniques and blog improvement methods to get higher rankings in search engine. This become more in consideration due to strictness of quality maintaining by Google search engine. Continuous coming giant Panda and Penguin updates increase the thirst fire of blogger to think critically about SEO ways to let them survive and maintain their sites.

The table lipstick using old styled websites based on HTML tables are outdated now. Very fewer sites are left with tabled structures. Due to lack of browser support, tables cause problems while CSS is well supported by most of browsers and is upper hand in the race, and is very beneficial in SEO. In this article we have outlined some very useful and interesting about the fact that how CSS aids you in your SEO practices and help you improve your impact. For those who are already familiar with HTML and CSS will get more understandings in comparison with white minds.

The Fact

Be clear about the fact that writing quality content is the key factor for the success of any website not just the SEO practices. What CSS will do in SEO is to make your page structure more convenient for search engines to read and crawl your content and hence will results in better page visibility. The one who’s waiting for miracle should stop now and start building good quality content.

Major CSS benefits of SEO

We see a lot of misleading articles on Internet with a label “CSS to boost SEO” and similar one. In actual below are the major possible benefits of using CSS for SEO.

Making the page lighter and fast loading

The main purpose for using the CSS is to make the pages load faster by minimizing the server requests and images. This increases the website opening speed and make it more efficient for search engines to be crawled. This ultimately results in quick and better indexing of your site’s content.

Using search engines recognized standard tags

There are defined HTML tags for headings <H1>, <H2>,.. Make them more prominent and visible using CSS. Search engines perceive them as the indicator of important content. Avoid using the old fashioned <font> tag for decorating the headings.

Working on Menus to make easily crawl-able

Search engines recognized the <ul> and <li> items as links to other important content of our site, so use these HTML standard elements in making up of menus to help search engines crawl them easily.

Important content first using CSS

This is the old and effective method in times. Using this method one can show important content first on the website using CSS to returns the important paragraph first but not to users. This is not that effective now but in terms of easily crawl-ability.

Best CSS Practices that aids SEO

For WordPress users, many things are done automatically in SEO like if you’re using some good reputed WordPress theme then solves half of the hurdles. Below are some good practices that can help you add more value to your SEO practices.

1- CSS Sprite

CSS sprites are very recommended when we talk about quick page load and faster web-page loading speed. Google page speed emphasis every website developer to use the CSS sprites to minimize the server load and help the web-pages load quicker. Let’s have quicker view on what CSS sprites does mean? CSS sprites the name is little weird and misleading, they are not small images but one large image that contains different smaller images in it. With the help of CSS background position, we can show users specific part of the image. This way we can make hover buttons, images and icons.

Why they are important?

Previously there was a conception that the smaller images will load faster for the users but that approach was wrong. By CSS sprites method, there will be only one HTTP request rather than multiple HTTP-request for each image which increases the response time. Once the main image is loaded completely, then that will be used in all over the website easily.

If you need a complete tutorial on what are CSS sprites, how they work and why they’re cool. Check this tutorial.

2- External CSS Files

Adding external files help web-pages load faster. When creating the web-pages, the developer have a choice to add in-line styles of to wrap them all in some separate file. The right choice is to go with external CSS files. The same rule applies for JavaScript files.

Importance?

Yeah right ask, they’re really important. First and most important importance is that you don’t have need to write the same CSS code again and again in all over the pages. It saves the developer from scratching the separate web-pages for a single color change. An amazing experiment reveals that the external style sheets load way faster. This can also help you rank well in SEs on content to code ratio.

Another important benefit is that when you reload the pages the external files does not reload. This way the web-page even if reloaded will connect to already opened external CSS file which will boost the opening.

3- Easily Crawl-able Content

Use the standard HTML tags to indicate SEs about the important content of your web-page like <H1> rather than using fancy <font> tag. Further for creating menus and navigation, consider the standard menu tags <ul> and <ol>. and further the <li> and <a> elements to link to the other important pages of your website. The CSS thing is revolving around better crawling option. The content to code ratio (In comparison how much is your code with content in a web-page) should be well managed. SEs consider this a key factor while ranking websites.

The website with outdated HTML code can never be ranked well in the search engines because of less crawl-ability and complex invalid code. The bad and good examples are below.

Bad Example or Old HTML

1
2
3
4
5
6
7
8
9

<bold>
<font size="30px" color="#eee">
All about SEO and CSS
</font>
</bold>

Optimal and Recommended HTML/CSS

HTML:

1
2
3
4
5

<h1 id="myheading">
All about SEO and CSS
</h1>

CSS:

1
2
3
4
5
6
7
8
9

#myheading {
font-weight: bold;
background-color: #eee;
font-size: 30px
}

Some bad practice to avoid

CSS can ruins your SEO at the same time if you’re using some spam techniques to cheat the SEs. Search engines have became way more intelligent than minute minds of spammers. Below are some bad practices observed that should be avoided.

1- Using CSS to Hide Text

This is one the technique that SEs treat very angrily. Can also be used for keyword stuffing. Any website that intentionally contain any hidden text to deceive the search engines may be removed from Google index and may not appear in search engines. Using display:none; or margin:-999px like commands can hide the text from end users but seen by search engines. Using them will ruin your SEO practice if you’re using them to spam.

2- Using CSS to replace images

Replacing images using CSS is a good way to show good designed image to users while a complete text to search engines. Mostly used in logo and tag-line part of website and blog. Below are a sample way to do so.

1
2
3
4
5

<div id="mylogo">
<h1>My Company Name</h1>
</div>

And writing some CSS like below

1
2
3
4
5
6
7
8
9
10
11
12

#mylogo {

background: url(/images/logo.png) no-repeat;
}
#mylogo h1 {
display: none;
}

Using this technique is fine but this can be abused by stuffing a lot of keywords in the title and tag-line/description. Adding too many keyword will get your site spam and may be blocked by search engines. You must use this feature with good intentions or you will be the only person who will get affected.

Another option is to use the alt tag on all images to let search engines know about the image content.

Summary

CSS is a lovely option which is adopted for creating up-to-date websites which are optimal in size so that load faster and to base on standards. Clean written code not improves your code to content ratio but helps the search engines to crawl your pages with more ease which ultimately results in better rankings. One can separate the HTML content from a lot in in-line code stuffing which makes the code way lighter, cleaner and faster which is purely search engine friendly with losing the design requirements. A very recommended combination!



Beyond Wireframing: The Real-Life UX Design Process

We all know basic tenets of user-centered design. We recognize different research methods, the prototyping stage, as well as the process of documenting techniques in our rich methodological environment. The question you probably often ask yourself, though, is how it all works in practice?

What do real-life UX design processes actually look alike? Do we have time for every step in the process that we claim to be ideal? In this article, I’ll share a couple of insights about the real-life UX design process and speak from my own experience and research.

User-Centred Design: Truth Vs. Fiction

A few years ago, I joined one of the biggest e-commerce companies in Eastern Europe. When I entered my new office, I immediately spotted a huge user-centered design (UCD) poster on the wall. The whole process was described in detail that left hardly any doubts about the step-by-step approach to design. Exciting interior design for an aspiring UX designer, right? I stared at the poster with great hope and imagined how exciting following the ideal UCD process would actually be. Guess what? They didn’t apply a single step from the poster to the actual process. They never did any research, nor any serious analysis of user behavior. Yikes, they didn’t even prototype! This fancy poster simply hung shamefully on the wall.

For the next three years, we worked hard to put user experience design at the heart of a developer-driven culture. We forgot about the poster and structured our own process, which fitted well with the company’s capabilities and allowed us to constantly optimize our main service. Why didn’t we use the crystal-clear theoretical approach? Because we couldn’t afford to go step by step through a classic UCD process with a lot of different activities. It would have taken too much time, and therefore it was economically invalid — the budgets for our projects were way too tight.

To deliver a user interface on time, we were forced to get really lean. We used a classic UCD process as inspiration and created a process that was simple but actionable for the company. We defined the problem, defined the scope of the project, iterated through paper prototyping and wireframing, pushed code to production as fast as we could, and always used multivariate split-testing and detailed Google Analytics event tracking.

Post-launch was the time to measure and plan optimization, which we executed immediately. Unfortunately, only huge projects had budgets for qualitative testing. Huge projects were also full of preliminary diagrams (site maps, flow charts, conceptual diagraming) — a enormously recommended activity to find order in a complex mess of information.

All in all, our process was simple but efficient. Of course, in general terms, it was a UCD process, but compared to any popular approach and a famous UPA poster, we used about 20% of the recommended tools and studies. We assumed that users don’t benefit from poster unicorn processes. Users benefit from the hard work of a product team; therefore, a simplified process is better than a robust unactionable theory.

Suddenly, I started to wonder how others managed to apply UCD. There’s a lot of talk about wireframes, but what does our work look like beyond wireframes? Was I the only one with a simplified approach? What can we do to create successful designs? What does the process beyond “the poster” look like? Is there a pattern that works well for the majority of designers?

The Reason For Research

Luckily enough, I was about to find some answers to my questions about the design process. I was forced to perform a worldwide reality check on my opinion about the classic UCD approach and design processes. Sharing this reality check is the raison d’être of this article.

  • If you’re fresh in the UX design world, learning how more experienced designers work might be useful.
  • If you’re a seasoned designer, treat this article as an incentive to reconsider your approach to design. We’re all rushing our designs every day. This is the time to take a breath, see what others are doing and think about what works and what doesn’t work in our real-life approach — beyond a UCD poster.

You may wonder what force persuaded me to revise my approach to the design process. The answer is simple: my own startup. Together with my friends, we created paper prototyping notepads to make our process more efficient, and then we created our own collaborative wireframing application. We suddenly became quite popular, took VC investment and decided to face the challenge: to create a user experience design toolset to support teamwork in the design process.

We felt that we were trying to fight Godzilla (or Tywin Lannister, if you prefer Game of Thrones to old Japanese movies). If my UX teams couldn’t apply a classic UCD approach, how could I be sure that using any theoretical framework would enable me to design a toolset that fits anyone’s real-life process? I couldn’t. Is there any pattern in design processes that we actually apply in our companies? I had no idea.

We felt that we needed to find out the truth about real-life design processes and we needed it now. It appeared to us that our research might be of vast importance to the community and even beyond. A simple equation: a great tool for the design process equals less work for designers on the tools side, equals more time for creative work, equals better designs for all of us.

The stakes were great, and there was just one right thing to do: get out of the building, get our hands dirty with research, find out and learn about the real-life design process (if it exists), and literally hunt out pain points in it to make the work of our team much easier and more pleasurable. We packed our stuff and crossed the great pond, so to speak, to do some serious research in San Francisco and Silicon Valley. Read on if you want to know what we found out about the design process!

The Customer Development Process And Tons of Individual In-Depth Interviews

The life of a modern startup is full of UX design work, even if the founders don’t realize it. Drake Martinet (Wall Street Journal, Stanford University) considers the whole lean startup movement to be a mere application of design principles to the business environment. I couldn’t agree more.

When starting a new project, you actually need to talk to people from your target group. Here comes what are well known as IDIs (individual in-depth interviews): moderated, individual interviews in which you try to learn as much as you can about the problems of your interlocutor in a particular area of their life.

Our target group was user experience designers, so we scheduled above 50 interviews (personally and via Skype). Each focused on the same theme: the real-life UX design process. We asked designers to tell us stories of their usual process based on one of their projects. During the interviews, we asked a ton of in-depth questions to learn as much as we could about the process.

We hardly asked about problems in the design process, though — we tried to spot them in the stories on our own and then confirm our judgment by asking questions (for example, “I understand that X was troublesome in this particular project?”). We tried as hard as possible not to push any views onto our interlocutors. Letting them speak was important.

We interviewed UX heroes Mike Kuniavsky, Indi Young, Luke Wroblewski, Peter Merholz, Brandon Schauer, Jeffrey Kalmikoff and John Zeratsky and some lesser-known but excellent UX designers. Among our interlocutors were in-house UX designers, designers from consultancies and freelancers. Surprisingly enough, the problems that usually trouble UX designers were similar in all three groups.

It was an intense learning experience, and I highly recommend considering such preliminary research in every project. It will give you a ton of ready-to-use knowledge — a kind of canvas to work from.

The Process That Emerged From Designers’ Stories

First of all, we didn’t find any unicorns, but we did find racehorses in excellent condition. While all of the processes that emerged from the stories were somehow simplified UCD processes, they were tailored to the specialities of the designers. Flexibility is what helps us survive in the diverse jungle of projects. Processes morph to fit projects.

The approach to an e-commerce website differs from the way we design mobile apps in the healthcare industry (guess where context analysis matters most?), and government clients differ from corporate stakeholders and startup entrepreneurs, and so on. With few exceptions, though, the process looks surprisingly similar. There is a visible pattern that we all use to design interfaces in different environments:

1. Collecting Information About the Problem

Every UX designer needs to be a kind of detective in the early stage of a project. We need to find out as much as we can about the three Ps (people, problem, project). Activities in this stage, in contrast with the classic UCD approach, are vastly simplified:

  • Meeting with the client (no matter whether externally or internally) and identifying the product’s requirements (often in the form of a standardized product requirement document);
  • Benchmarking and trend analysis (oh yes, most of the designers we interviewed do that).

We seldom perform user interviews, but writing user stories is one of the commonly accepted attachments to the product requirement document. Our user stories are sometimes created based on personas, which are hardly ever backed up with data. Field studies and task analysis are hardly used by any of the designers we interviewed.

2. Getting Ready to Design

This is clearly the ideation part of the process. It’s completely conquered by analog tools. I haven’t met a single designer who doesn’t use quick messy sketching or some other paper prototyping form at the early stage of a design process!

Designers try to act on the material gathered in the first step of the process and find a design worth refining. This stage is not about documenting; it’s about artistic fury and creative explosion. Many of us use Adaptive Path’s multipage templates to quickly create very generic sketches.

Unfortunately, testing lo-fi prototypes is not popular. We prefer to take the risk of choosing one option with a stakeholder and begin the refinement process. Not very UCD-like, but that is the reality.

3. Design

In contrast to the anti-documentation agile approach, most of the interviewed designers create wireframes and prototypes to document the experience and then hand them to the developers.

Refined sketches from the previous stage are still rather lo-fi and are usually not tested. Hi-fi design is left for visual designers. In Aristotelian terms, we create the form, while developers and visual designers fight to create the matter. Heuristic evaluation is definitely out of fashion, while expert review backed up with a cognitive walkthrough is quite popular.

4. Approval

This is surprisingly an important part of the design process. Research documents and deliverables usually also serve as persuading factors in the “buy-in” process. This does not differ between in-house UX designers, freelancers and folks from consultancies.

Buy-in is the unfortunate peak of our process. None of us want to see our work go directly to the trash, and I’ve seen some great projects rejected just because the story behind the design process wasn’t particularly persuasive.

And guess what? A lot of the interviewed designers actually create a special presentation to tell stakeholders the design story. The presentations show stages of the process, deliverables and interactions, and they aim to give stakeholders lazy access to all of the information.

The four points mentioned above form a pattern visible in the majority of design processes that we went through with our interlocutors. You might have noticed that not a lot of iterative research is done in these processes. Sadly, the classic usability study is not a permanent part of the process. Why? The answer is simple: budgets are tight. Problems that appeared in the company that I used to work for appeared to be common. Tight budgets are forcing UX designers to tailor their processes and skip costly research.

I believe the best answer to this problem is guerrilla research methods. Startups do adapt guerrilla research as a part of the customer development process, but more “mature” companies, in my opinion, are strangely afraid of spontaneous and methodologically questionable yet efficient and cheap research methods. One of the challenges of the UX design community in the coming years will be the popularization of guerrilla research methods and bringing them into our real-life design processes.

Houston, We Have Several Recurring Problems

During our research, we tried to spot recurring problems in the design processes of our interlocutors — a so-called pattern of pain. Surprisingly enough, similar problems appeared in almost all individual interviews. Apparently, a lot of us live arm in arm with three tough unresolved problems that tend to slow us down:

  1. Spreading an understanding of the design process
    How to engage the whole team in the process and show them that UX designers are not people who lack talent in visual design yet still insist on drawing something? How to teach that there’s user experience beyond wireframes?
  2. Communication within the team
    How to communicate with a team throughout the process and actually use different perspectives of teammates to evaluate design deliverables?
  3. Demonstrating the process to get buy-in
    How to present the design process to stakeholders and developers to actually get buy-in, both formally and psychologically?
    One of the UX designers we interviewed said the following:

    Do you know what the most painful thing is in my job? Bureaucracy. Having to go to meetings. I would rather design than fight over the picky details. We should make at least part of the workflow online instead of in person. Have the approval process online, instead of in a meeting.

    Another said this:

    It’s really hard to show the process to clients and spread some understanding of the importance of design.

    We have probably all tried to solve these problems countless times, but we still lack efficient and fast methods. This results in less time for creative work and research.

    My hypothesis is this. We as UX designers need to resolve the three painful problems identified above to have more time for creative work and research. We need to demonstrate our work beyond wireframes, spread understanding of UX design and, in fact, sell ourselves both internally (within the product team) and externally (outside the product team, in front of clients and stakeholders). This is the recipe to increase our effectiveness.

    Our real-life UX processes need adjustment, and since we share the pattern of the process and the pain points, we can solve them together. This is most likely the most positive outcome of this research.

    Outcome Of The Research

    The research shows that UX designers are constantly modifying the classic and complex UCD approach. Less emphasis on iterative usability studies and a narrower range of design activities (compared to classic UCD) are the main traits of the current real-life design process that have emerged from our research.

    A process tailored to the capabilities of our companies and our clients proved to be generally effective, but it still causes some recurring troubles that should be eliminated.

    This is, generally speaking, the state of our field. Don’t get me wrong: I don’t mean to criticize classic UCD — it still serves as an inspiration for our work. After all, I’m happy that I worked in that office with “shame” hanging above my head (yes, I mean the UCD poster), which constantly reminds me of the need for adjustment in the process. I’ve learned that what matters, though, is an actionable process — possible to use, adapted to the company’s culture and financially effective.

    After talking with dozens of UX designers, I’ve started to wonder, however, whether we should actually create a poster that shows this version of the process. It could help a lot of aspiring UX designers take their first steps in the field and could be effective as an educational tool for our internal and external clients.

Effective design principles for web designers: Proximity

This is the final segment in our four-part series on effective web design principles, concluding with the topic of proximity. The previous topics and segments in the effective web design principles series covered Contrast, Repetition, and Alignment. Guiding the user through your website with proper flow, effective use of white space, positioning similar content closer together, and providing clear structure are all facets of the proximity design standard.

Proximity, prox-im-ity, [prok-sim-i-tee] noun, nearness in space or time, order, occurrence, or relation, closeness in a series, vicinity, order.

Spacing and relationships

Proximity for web design purposes means that similar or related elements should be grouped together, while those that are unrelated or dissimilar should be separated. The physical relationships and spaces between web design elements create a level of emphasis, and include other factors such as isolation, similarity, eye movement and direction, continuance, and persistence of vision.

As elements overlap or touch, the top layer typically gets the primary attention. Did you notice the “Proximity” piece of the puzzle above? Did your eye gravitate to the purple puzzle piece first, and then move up and to the left to scan the remaining pieces? However the overlapping object suddenly becomes overshadowed if the other objects close by are in stark contrast; as objects become closer together the contrasting elements will stand out. Striking a balance between closeness and contrast, and even manipulating the two principles can achieve varied results. Take a look at Figure B below and see where your eye gravitates. Did you first notice the “Repetition” puzzle piece?

Every object or element has a gravitational pole in relation to the other objects that are nearer to its center, and the closer an object is to another also affects its weight. Just as a planet’s gravity affects its moon orbit, the positions of elements to each other on a web page can change the weight given to it and other elements on the page.

White space

An additional proximity factor is the effective use of white space on the web page, spacing elements utilizing effective margins, gutters between columns, and padding creates a balance between the content and the space between elements. In general, too much white space and the web page looks irregular and void of content, with no direction. Of course, if your web design requires a level of artistic license to accentuate open space with an undeniable void of content for dramatic effect, then go for it.

Proximity and typography

Above, I talked about the negative effects of too much white space, but too little white space can make the web page appear cluttered and cramped. As a rule of thumb, a balanced white space is generally more attractive and pleasing to the eye. Below are two examples which demonstrate both ends of the white space gamut. Figure C, for example, is too much white space, and Figure D has too little.

Figure C

Figure D

An intuitive flow of content reveals a balance of white space and the typographic elements that comprise the textual content. Take the first example of the IT Course List shown below in Figure E, and try to step through the list of courses available.

Figure E

Now, take a look at the same list below, which now has each logical grouping defined with appropriate white space, appropriate headings, and unordered lists as displayed in Figure F below.

Figure F

The second list is easily delivered and provides the reader various sections and sub-sections of the course list; each of the courses is in close proximity to the associated and related sub-section header.

Employing the proximity principle of effective web design helps to organize content elements on the web page utilizing space, order, size, relationships, color, and effective use of white space and sectioning throughout typographic elements.

The Ultimate Guide to Speed Up Your Website

A website can be well designed but if it is not fast enough, it is of no use. Today, in this article, we have decided to jot down some tips and techniques to reduce the website loading time as much as possible. Google is one good example of a fast website and all search engines are striving to reach to its level. If you have a website and it is fast, you will have tons of satisfied users’ in comparison to well designed but heavy websites. The tips that we are going to discuss in this article are implemented by SmashingHub and they can really help a web master in giving its visitors a fast web experience.

As per a few recent experiments and researches, it has been observed that if web search latency has increased it will definitely affect the daily number of searches. If a user has experiences latency frequently, he will avoid the website even when the issue has been fixed. So, it is very important to resolve the speed issue before your user notices it.

Choose A Decent Web Host

Server is an integral part of any website so while choosing a web host it is important to make a wise decision. A professional web host works as a base for your website and starting off with professional configuration can really help you take off. Now let’s get onto tips and tricks for speeding up your website.

Recommended Reading:  How to choose a Web Host by wikiHow.

1.   Control Browser Caching:

Setting expires header will make your website load a lot quicker. Expires headers helps the browser in recognizing if the website can be fetched from browser’s cache. The benefit of expires header is that it stores all heavy files such as images in browser’s cache and when the user returns to the website, website is bound to load faster.

Recommended readings:

2.   Enabling Keep Alive Signals:

A keep-alive signal plays a very important role in the internet world. Keep-alive basically sends a signal after some time in order to find out if visited link is working or not. If the signal does not receive any reply keep-alive assumes that the link is down for now. Once the link is assumed to be down, another path is used to route the data. It helps in reducing the latency of the website so you need to discuss this feature’s availability with your hosting company.

3.   Enabling gzip compression:

Compressed HTTP Response

Gzip needs no introduction because this is the most famous and till now most effective way to reduce the website’s load and increase its speed. All the famous browsers support gzip. It is a great way to reduce HTTP’s response size. If you want to make the page light weight you can simple add the following code in your htacess.file.

<em># compress text, html, javascript, css, xml:</em><em>
<em>AddOutputFilterByType DEFLATE text/plain</em>
<em>AddOutputFilterByType DEFLATE text/html</em>
<em>AddOutputFilterByType DEFLATE text/xml</em>
<em>AddOutputFilterByType DEFLATE text/css</em>
<em>AddOutputFilterByType DEFLATE application/xml</em>
<em>AddOutputFilterByType DEFLATE application/xhtml+xml</em>
<em>AddOutputFilterByType DEFLATE application/rss+xml</em>
<em>AddOutputFilterByType DEFLATE application/javascript</em>
<em>AddOutputFilterByType DEFLATE application/x-javascript</em>
<em># Or, compress certain file types by extension:</em>
<em><files *.html></em>
<em>SetOutputFilter DEFLATE</em>
<em></files></em></em>

Also, PHP code given below can also be used at the top of your HTML/PHP file:

 

1

<?php if (substr_count($_SERVER['HTTP_ACCEPT_ENCODING'], 'gzip')) ob_start("ob_gzhandler"); else ob_start(); ?>

 

Or, simply use plugins for your CMS (like the WP HTTP Compression plugin for WordPress).

4.   Cacheable Redirects:

Cacheable redirects are again a great way to reduce the load on your website. Once the user has visited your website, on next visit, the website will load faster thanks to cacheable redirects. You should go with 302 redirect having validity of 24 hours. Also, make sure that includes a user agent and cache control.

Since, smashinghub does support web responsive theme for smart phone users. It can’t have any problem for mobile users.

5.   Using a Content Delivery Network:

CDN is basically a huge compilation of web servers distributed wisely across various locations in order to deliver website’s content with efficiency. You can try Amazon CloudFront or MAXCDN. You can manage your Cache using W3 Total Cache Plugin.

Content Elements

Even as a web master you won’t be having a total control over your server. Content elements are easy to manipulate.

1.   Minimize Redirects

Minimizing redirects in your website will help in reducing the latency of your website. You should only implement those redirects which are highly important and there is no alternative for it. These are Google’s recommendations:

  • Do not give references of URLs that will redirect to other URLs.
  • There should be only one redirect to reach to a destination point.
  • Avoid any useless domains which won’t serve the user with content.

2. Query Strings

If you want to increase the speed of your website, remove any extra query strings from stagnant resources. You should be using query strings only when necessary and that too with dynamic strings only.

3. Specifying a character set

When it comes to HTTP headers it is important to specify a character set. Following code should be added into your header in order to serve the purpose:

 

1

<meta http-equiv="Content-Type" content="</em><strong><em>text/html;</em></strong><em> </em><em>charset=</em><strong><em>utf-8"</em></strong><em>>

 

4. Use minimum codes

Minify your codes

You need to minify your codes in order to speed up your website. Remove any HTML comments, CDATA sections, useless empty elements and white spaces will increase your website’s speed.

Recommended reading

Avoid Redirects by Google Code gives you a good overview on the matter.

5.  Avoiding bad requests

Make sure there are no broken links on your website because they make 404 and 410 errors. Such useless and wasteful requests will slow down your website’s speed further. Broken links and images will require your special attention so make sure everything is fixed up. Use online broken link checker or use WordPress link checker for free.

6.  Serve resources from a consistent URL

If a single resource is being shared on multiple pages, make sure that all are linked to the same and identical resource. If a source is share on various pages via different domains it will increase the cache’s load. You can check out Google’s recommendation:

7.  Reduce DNS Lookups

DNS lookups take a lot of time and browser will not perform any action unless it is done with lookups. Reducing DNS lookups will definitely increase your website’s speed. You can measure yours, by using Pingdom Tools.

CSS, JS and Images Optimization

Here are few points, if you can consider it, you can get good results for your website.

CSS and JavaScript Optimization

1.   Specifying Image Dimensions

If you are a technical person you must be aware of the fact that a browser begins to submit a page way before the images are loaded. Specifying dimensions will make your browser reflow. In order to avoid this make sure you add height and width tags.

2.   Optimization of images

Images can contain a lot of content which could make the image heavy. If you keep the images of minimum size, you are making things a lot easier for the user. Always try to save and upload images in JPEG. You can use a CTRL+SHIFT+ALT+S shortcut to save an optimized image in Adobe Photoshop, use Yahoo! Smush.it, or if you are using WordPress, you can install the WP Smush.it plugin.

3.   Put CSS at the top and JS at the bottom

In order to avoid progressive rendering you should put stylesheets in a document head. This will help different browsers in blocking useless rendering which means browsers will not have to redraw the elements on the page being loaded. Till the original page gets load, users will only see a white, blank page.

Optimization For WordPress

From time to time, we monitor, benchmark and analyze the performance of our WordPress blog. If the site is running slow, we need to know why. Here are some basic changes we’ve done and we figured will significantly increase the speed of your WordPress blog.

1. Cache Your Worpress Blog

WP-Cache is an extremely efficient WordPress page caching system to make you site much faster and responsive. We also recommend WP Super Cache which enhances from the previous mentioned plugin and too does a great job.

2. Deactivate And Delete Unused Plugins

When you notice your blog is loading real slow, see if you have a lot of plugins installed. They might be the culprit.

3. Remove Unnecessary PHP Tags

If you take a look into your theme’s source codes, you will find a lot tags like these:

1

 <?php bloginfo('stylesheet_directory'); ?>
1

<?php bloginfo('description'); ?>

Conclusion

There are a lot of ways to speed up your website but the above mentioned ones are the most affective ones. Speed might not be the most important thing but as mentioned earlier, it plays an important role in any website’s success. If you plan to make any changes to reduce the load, make sure to have a back up.

Creating Effective Web Design for Your Visitors

Websites can have many requirements. The purpose of your web page—that is, what you want to accomplish with your web page—is important to identify before any work is started.

A web page is a kind of device that can offer many features. Your web page can be an informative web page, such as by starting an online site where individuals discuss thoughts in groups, forums, or boards. You can also consider a web page for your company to improve cost performance and attract more customers.

Your web page may have an efficient element such as enabling individuals to buy items safely online, which also helps develop client comfort. In this way your company can obtain the benefit of reduced operational costs while pursuing more aggressive product pricing.

Based on these aspects, having an effective web page is really necessary.

A web page is a kind of device that can offer many features. Your web page can be an informative web page, such as by starting an online site where individuals discuss thoughts in groups, forums, or boards. You can also consider a web page for your company to improve cost performance and attract more customers.

 

Your web page may have an efficient element such as enabling individuals to buy items safely online, which also helps develop client comfort. In this way your company can obtain the benefit of reduced operational costs while pursuing more aggressive product pricing.

Based on these aspects, having an effective web page is really necessary.

Five reasons business process improvement projects fail

Many CIOs have found or are looking for opportunities to elevate their departments to “business enabler” or “business multiplier” status, with all the rights and privileges therein.  These rights and privileges often include increased respect from business partners and, even if the IT budget doesn’t fully escape the axe, a better understanding for the potential impact of such cuts.

Many of these efforts take the form of business process improvement initiatives designed to improve the efficiency of existing work, which could mean having that work take either less time, less money or both.  In many organizations, CIOs and the IT department are well positioned to take the lead on such efforts.

Unfortunately, even with the best of intentions, even the most sought after business process improvement project can fail.  Here, I will outline five reasons that these efforts often fail and provide some advice for CIOs that want to avoid such failure and see their projects succeed.

Lack of support from the top

Regardless of organizational size, attempting to initiate a significant process improvement effort without clear, direct and publicized support from the top will more than likely result in either total failure of the initiative or the eventual outcomes not being everything that they could be.

Lack of support from the top can be perceived by staff as the initiative not being important and not being deserving of the full time and effort that is required to ensure success.  Business process improvement projects can be difficult, so reinforcement from the top that the efforts are necessary and appreciated is critical to the team’s success.

Mitigation: Get clear, public support for the overall initiative before starting any work.  Get real support, too, not just words.  Ensure that the leadership team is truly ready and that they won’t simply back down when the going gets tough.

Organizational culture

I’ve been in organizations in which the culture itself made process improvement efforts extremely difficult.  In short, for pretty much any task, individual employees were empowered to simply opt out or refuse to take part.  Given the process improvement efforts have the potential to sometimes uncover individual weakness or group challenges, it’s not a surprise that there may be some angst when improvement efforts are undertaken.

In one organization, I was stunned to discover the kinds of items that people could simply refuse to do, seemingly without repercussion.  In that environment, the process improvement efforts were extraordinarily challenging and required much more dedication and time from the project leadership team than I’ve seen in other efforts.

In another example, for a substantial process improvement effort, a VP had promised access to certain members of her team for a period of months with a verbal promise that no other significant objectives would be put before those people until our efforts were complete.  As you may have guessed, that promise did not hold and the team was pulled in too many different directions, resulting in failure since no one would budge on the due dates for any initiative.

Mitigation: In these environments, take a slow, measured approach to the initiative and make certain that leadership is squarely on board before proceeding.  Ensure that the importance of the project trickles throughout the organization.  Consider tying awards or some kind of compensation to outcomes to ensure reasonable participation.  Further, get all commitments in writing along with fallback dates that are automatic in certain conditions, such as when a team member falls ill or when a promise is not kept.

Non-cooperative team members

In some cases, organizational culture is to blame for the failure of some efforts and for the shortcomings of some members of the team.  However, when the organization itself is sound, you may have a team member that is either hostile or less than engaged in the overall effort.  Because the team is theoretically comprised of those with a stake in the process being discussed, everyone needs to be fully involved in order to get the best results.

Mitigation: Find out what’s behind the hostility.  If your organization starts the process improvement efforts with the hope that some people can be downsized as a result, don’t expect a lot of cooperation from the individuals whose jobs may be at stake.  Further, if you’ve decided to undertake a BPI project to correct a personnel situation rather than dealing with the personnel situation directly, expect failure.

Project team is not representative

If you want to see what failure truly looks like, attempt to reengineer a process without ensuring that all of those with a stake in the process are represented during the effort.  Perhaps the most important task is selecting the team that will work on the project.  All stakeholders, from start to finish, need to be represented.  Even if a person has just a small part in a large process, the insights and experience from each individual part of the process must be understood in order to improve it.

Mitigation: Easy!  Be inclusive, even if you’re inclusive to a fault.

Initiative is too IT-focused

Although CIOs may be well suited to lead process improvement efforts, the outcomes may not be about technology at all.  Bear in mind that IT plays a supporting role in a company’s process efforts; it’s not all about IT.  What is important is leveraging technology assets in ways that optimize a company’s efforts.  If the process discussion is slanted to a point where it looks like IT is taking over the process, you will end up with one of two scenarios: 1) Failure or 2) IT being saddled with “responsibility” for everything that happens in the organization.  Neither is desirable.

Mitigation: CIOs need to wear their business hats when leading process improvement efforts.

Effective design principles for web designers: Repetition

Repetition typically shows up on websites as repeated visual elements that appear throughout the pages on the site. Elements that can be repeated with effectiveness are colors, shapes, textures, fonts, typography, graphics, images, videos, spatial relationships, line thicknesses, headers, footers, navigation, sidebars, widgets, and on. Repeated elements in a consistent manner help to promote the organization of the website and reinforce continuity. The use of regular or irregular, even, or uneven elements can be utilized, as long as they are deployed in a uniform manner. Components can also be repeated in a gradation or progression state, where elements either get larger or small as they are repeated, as in the example of “Repetition” above. Variation in repetition helps solve the challenge of websites becoming humdrum and boring.

Repetition is important to the flow of web design

Repetition is a common part of nature; for instance, next time you are outside take time to study a forest of trees, and notice how many of the same species are counted. Ever notice a flock of birds as they fly south in the winter — the patterns they make are repeated with variation in the familiar “V” shape, and the repeated variations found in a herd of zebras at the local zoo is an example of repetition with variation. Notice the repeated pattern of stripes on the two zebras in below, yet also note that each strip has variation, and no two stripes are exactly alike. Repetition without variation on a website makes it a monotone, dull, tiresome, and all too familiar haunt. Give your visitors a reason to return to your websites and avoid the chronic broken record routine.

Repetition also gives your visitors a sense of site recognition and consistency. Using a repeated logo and keeping the headings, fonts, colors, sizes and styles the same across all pages adds a repetitive continuity that enhances the flow of the website. Flow is created by the movement or rhythm of elements as they occur throughout a website. Repeated use of elements, which have a common attribute, create a pleasing visual pattern, and slight variations to a simple repetition will enhance the visitor’s curiosity and attention.

Repetition creates continuity and looks professional

Consistency is gained from the repetition of similar elements such as navigation sections that remain in the same location as you go from one page another. This helps the visitor feel comfortable that each page will respond with similar functionality and maintains equilibrium throughout the online experience.

What if every time you approached a roadway intersection the rules changed with every traffic light? On one intersection you might find that the lighted purple square means go, at another intersection in the next town, the rectangular blue light means go, and in yet another, a round flashing pink light means go!

While the above analogy is extreme, try to remember any websites you have visited recently that lack that same level of continuity and balance. When very few elements get repeated, the flow and rhythm becomes more like a faltering heart beat on life support. Repeating consistent elements including navigation, footers, typography, graphics, and overall styles within a website gives the visitor a road map, and a way to navigate confidently around your websites. Visitors who are comfortable with the repeated design elements will most likely stay the course and revisit your site time and again.

How do you use repetition in your web design and elements such as font, color, images, graphics, navigation and such?