Tag Archives: web design

Flat design + Less framework + WordPress = Our new responsive Blog design

After few years we had decided to give a new look and feel. As you aware 2013 was year of Responsive Web Design and we are no exception to this. So, RWD was in priority for the blog design. Why not applying new trends in our own blog ?  So, we added Flat design too.

Tablet browser view

Tablet browser view

Flat design:

Design trends change over the years. Now, people like to get rid of curved edges, gradients, reflections or shadow effects. Sharp edges become a favorite, along with minimalism.

If you like to start, you must first get inspired by some designs, take them as inspirations and practice yourself. You can see a lot of Flat UI designs at Flat Design. Also, I recommend Flat UI Colors to choose your colors and for more inspirations take a look at Dribbble’s Flat collections.

Less framework:

We have written couple of blogs on Responsive Web Design months ago when it was catching, one was about the CSS frameworks that we liked and used. But, recently with few projects we got an opportunity to explore Less framework. It’s quite impressive

The layout will be made to 992pixels and add CSS media queries within the child layouts. Child layouts will be 768pixels, 480 pixels and 320 pixels to make the ready for different browsers.

If the browser isn’t supporting CSS media queries such as Internet Ex­plorer 6–8 and most old mobile devices, the default layout will be served and for other browsers which support media queries, child layouts will be served based on the screen resolutions.

Less Framework is MIT licensed, so we can even modify it. However, the learning curve is little steep, a designer who is strong in HTML5 and CSS3 will require at least a weeks’ time to learn and master it.


Mobile browser view

Mobile browser view


Finally we decided to retain our blog with WordPress, through the new blogging platform Ghost looks promising. May be we should try that in next years.

We used WP Touch WordPress plugin for years. Thanks to this wonderful plugin by Bravenewcode.

In order to see our new RWD, we had to disable WP Touch.

Now the final design is ready for different browsers and Feel free to give our feedback on our new design.

Web Development life cycle – Process flow diagram

Years ago, we wrote an article, web development life cycle , which explains how a web development business flow might work between the client and a web developer. The process is simple and straight forward.  I decided to create a simple flow diagram for better understanding, and here is that process flow diagram.  The diagram widely covers the process in terms of business perspective, Starts form a call/email inquiry from a potential customer till the final project delivery.

Leave your feedback if your process deviates or if you have better flow or even a piece of improvement which might help the users.

Web project development life cycle

Web project development life cycle

Some of you might have different approach, and I look forward to hearing from you.

4 site design validations you should do before you deliver

1. Validate HTML

W3C provides HTML validations, which checks the validity of HTML, XHTML etc.


2. Validate your CSS

You should use W3C’s CSS validator tool to validte your style sheets.


3. Validate site links

Check broken links across the site with W3C’s Link checker tool


4. Cross browser compatibility

Check the site on multiple browsers with this tool (You may not have a MAC, but you can you can test the site Mac Safari


Even if its a simple static site, do them to make the site perfect.

4 Things you should let your web development client know

Not all the web clients are tech or web savvies. Many times you should pave them their success path online. Here are few a list of 4 important things which you should let your client know, if they trust your web development skills.

1. Flash: When they ask for a fully flashed website, let them know the adversity it might make. By doing this you are helping them to establish the right online presence. Unless your client is Coca cola or Burger King ( I mean,  :-), an establish brand), they will really want to establish better Visibility to the Search Engines.

2. SEO – If a client just wants a website, let them know what SEO is and how it is going to help them. Make the site SEO friendly within the design scope (Eg. Image tags, XHTML validations, designing without tables, etc). Most of the clients will not say NO to make their site ready for SEO.

3. CMS – Ask how frequently they want to change the content, and if they do, let them do know how to do it themselves with a CMS. You may also need to let them know the advantages of fresh content. I believe instead of providing them a static site of 20 pages, you can introduce them Joomla and how to use it, for some additional but onetime investments.

4. Advantages of Opensource – Do they need a CMS or Ecommerce, You can justify why you charge less. Let them know that you can cut cost by using WordPress or Magento and still make their site professional. By doing this you are introducing standards – if your client goes to some other developers, it would not be difficult for them to take up the work.

I recommend you to keep a short write up (with some references) or articles on the above mentioned (you may keep that under your client section of your website) and ask the client to refer them. It also helps them to understand that you know what you tell them. :-)

10 Top Google tools to get results in Google

Looking for tools around?  :roll: Do you know that Google offers various handy tools that would help you to maximize your site visibility and drive more leads to your site?

Here some top Google tools to increase your sales conversion and ROI

1. Google Search suggest

When you type your business services or products words, Google suggest estimate what you type forth and the words listed are most searched terms. By this you can find the users search terms and compare with your site theme and go on with on page optimization. As well it do help for off page optimization by getting down the suggestion of most searched directory keywords.

2. Google alerts

Make use of Alerts to keep track on you competitor activities or industry or getting latest stories on specified key phrases through an email

3. Google Trends

Compare two or more terms to find out the search volume on a daily bases that are typed into Google’s search-box. The search popularity will be shown in charts and it is easy to find the difference on term search volume

4. Google Adwords keywords

The tool helps to get new keyword ideas and as well you can type your website URL so that Google lists out the search keywords related to your business services or products

5. Google Analytics

This is a web analytics solution offered by Google for free. It give you an insight on you site traffic and goal conversions. There are several options to track down your daily site visits / page views, keywords search visits, Geo, top contents visited, Goal tracking and many more

6. Google Web master tools

This tool helps you to find how Google see your WebPages. You can configure your sitemap about the page to be indexed and all about robots.txt. As well you can track total number of internal and external links, query traffic and diagnose problems if any

7. Search-based Keyword Tool

Using this tool you can get keyword ideas based on specific pages of your site and the keywords listed are from Google search queries

8. Google Insights for Search

This tool helps to compare search volume across categories, geographic distribution and Properties

9. Google Traffic Estimator Tools

Get quick traffic estimates for search keywords related to target location and bid amount without logging into adwords account

10. Google Website Optimizer Tool

This tool helps you to improve your existing web pages and traffic by testing your site content and design in relation with users performance.

These free tools are more of a pack from Google and hope you should have got an idea of these tools and how the tools can be used for your business growth exercise 😉

Questions for Web designers.

Today I revived few questions from Carl Williams of Odin Jobs for a blog entry. I believe every designer should ask themselves to keep the answers with them always.
1. When and how did you get started in web design?
2. What is the single most important attribute/skill a good web designer must have?
3. What hard and soft skills should a web designer have? Should he/she have a degree or can you be self taught?
4. Your opinions on:
a. Fixed width or Fluid Design?
b. EMS, percentage, pixels or points?
5. What tools are a must have in a good web designer’s arsenal?
6. Any advice to budding and beginning web designers?
I am sure you will find yourself interesting in your job, if you have the right answers.
I welcome your answers as comments.

Web 1.0 Vs. Web 2.0

This post is written based on the requests seen in forums. I still found most of the surfers don’t have clear picture about the “difference between Normal design websites and Web2.0“. So thought of writing a brief note on Web2.0

Hopefully people who try to know Web 2.0 design standards should be knowing about normal design, so not much explaining here to bore 😉

Starting, Web 2.0 websites allow visitors to do more than just retrieve information what we see in normal design. They can build on the interactive facilities, allowing users to run software applications altogether through a browser

Below are the attributes that can be followed for Web2.0 

  • Clean & simple style
  • Pastell colors
  • Center aligned with 2 or 3 columns
  • Bigger Logo
  • Bigger Buttons
  • Bigger font size
  • Descriptive HTML (XML style)
  • Bold text introductions
  • Vibrant colors with gradients
  • Visible header
  • Content as Feeds
  • Rich and interactive user interfaces
  • Users active participation
  • Video sharing
  • Social Networking

Get ready to start furnishing a Web2.0 site :)

We have developed some Web 2.0 sites, for more clarification you can mail us for website names to get a clear picture