A Brand New Responsive User Interface

We kept you waiting long! We apologies for that! We all were busy with our new web design company SME Developers. It is going great and already has developed quite a few projects for some great clients.

I am Website Developer was kept aside for few months. We had seen visitors are browsing the website from different locations around the world. Very interestingly most of them are coming from Search Engines! Close to 1000 page views and 700 unique visits each month. Bounce rate was really poor, close to 89%. After hovering these analytical data I thought if people are coming into the site and bouncing back to exit; it means this current website is not enough to keep visitors engaging with the contents. I researched even more on website performance, loading time, usability and overall UI design aspects for the existing site. It turned out to be this website is running below average quality in the blogging industry! Sorry to say that but it’s true.

What was the problem with this blog?

Lack of continuity, poor coding structure on backend, heavy images, poor loading time and articles were not readable at all. Among all these problem lack of continuity was the worst killer! In-fact this can be defined as the main cause which is making this blog unsuccessful.

It had all the elements a blog should have. Social Icons, Share Bars, A Good Commenting system using Disqus, Related Post plugins, Caching plugin, All in One SEO plugins and many others to make the blog perfect. But I was wrong.

While I was working on my other projects like In Quest of Music, SME Developers website using WordPress; I have seen optimized website is one of the key to better usability and user experiences. If your website can ensure a better readability in terms of design and if you can ensure optimal loading time with proper accessibility, your website will be more engaging.

Steps Taken for better User Experiences

Better Typography

You are using the beta version of new IAMWD User Interface. How is it? Can you read it things well? Typography has been given the most priority in this new UI. You will see the content area is the most focused segment here. Every anchor link is identical here. You know those light blue texts are links.

Responsive User-Interface

This website is responsive to browser size. Using 1140 CSS mobile grid system IAMWD can be seen on any smart-phones. We don’t have to use any mobile plugin for wordpress like wpmobile. Type http://iamwebsitedeveloper.com/ on your mobile browser and see what happens. It should fit itself according to your browser size. The current web layout is also well accessible in all browsers with almost same view

Responsive User Interface

Blazing Fast

Yes it is! We tried to keep the coding structure at its finest form and still improving it’s inner structure. The old site was taking 7.80 sec on it’s first load. This new user interface loads within 2 seconds and we are quite sure it will taken less time in future. 

YSlow test

We know we can get even better loading speed after we optimize those JavaScripts too.

Semantic Coding structure

This new layout and it’s prototype is following semantic coding rules for rich browsing experiences. Elements like rel=”author” rel=”me” for social share authorship, OpenGraph markup is on header for social share both on Facebook and Google +

Better Articles for web developers

We are thinking to introduce some new faces in IAMWD. We will like to launch a campaign within article writers to submit there articles on different web related topics, both paid and niche blogging. Credits will be given to each writers and best article contributor will get $15 as a price money. Ya I know very less! but hey just for fun and contributing within a social writing. It will be fun. If any one of you are interested for group blogging please write on our Facebook Page.

Steps to follow on pre web design process

web design process

What sort of design process do you follow? Modern design process involves so many different structures, work-flows to make things more usable both for clients and designers. Which one is your best fit?

Prototyping, wireframing is not a new concept, we are used to work on UML (Unified Markup Language) before. Hence the conception was vastly used for mid level projects by most of the stablished software development companies that follows international standards. For web developers on small projects most of them really dont bother to adopt the rules of design flow, as it is time consuming. Here we miss the main part.

You should be following few steps before jumping on design implementation. It reduces your overlapping,  tweaking time and alternation; moreover you can easily adopt any future changes if required. That means you are saving your time and saving your clients money.

Lets go through some of the steps:

Get detailed Requirement

While getting requirements from your clients try to get as much details as you can for you next web design project. Sperate them in to different appropriate sections. Point out the key functionalities. Get inner view of information structure, review additional steps necessary for the design. Flag them according to the dependencies and complexity.

Work on Wireframes

Wireframing is the key process that we usually follow to show our clients the basic structure of the website. It dosent include any color or styling just the basic structure to show clients how their website will look like. In this process you will also dig ou the usability issues as well as the user visibility ratio.

There are so many different tools out there. You can do the wireframe on paper or use online tools like Cacoo or Printable wireframing tools.

After you done with the wireframing and information architecture show it to your clients. The followup with your requirements, discuss with the elements usability factors with them. If they are satisfied go with it or if they re not then work on the wireframing again.

Jump on core design Implementation

After you get green signal from your client on wireframed structure, you know how information will be placed within a browser. Now it is time to start on design implementation. Which means styling, giving color effects. Most of the designers use Photoshop or  Fireworks. There are so many different tools on internet to implement a nice, elegant website frame.

Benifits

You will find out benefits if you follow this process. Some of the key points given below:

  • Less time
  • Gather more confidence from clients
  • Alter when necessary without giving much effort
  • Quick updates
  • Easy to followup
  • Reducing cost on both end.
  • Re-Usable
  • Ensuring usability and UX

I personally follow this process. Still there are so many different terms and technical steps to be followed but to insure the very basic you can start with these steps. It works for me, let me know what you think what steps do you follow?

Usability, user experience and review survey for vistors of IAMWD

Dear visitors, I had requested you to go through a review on one of my previous post “How I AM Website Developer can improve even more? Visitors review” before. “I AM WEBSITE DEVELOPER” started on 2009 November and it is very close to a year with only 37 posts, all written by EVAN SHAJED (me). I am a freelance website developer and as a writer I am very new. Last one year there were lots of different techniques has been taken to insure best usability and experience towards visitors with better posts. It is quite unfortunate not having much visitors as expected.

i am website developer survey

picture is taken from Survey Monkey

I have taken some analytical steps to improve my blogging services targeting more visitors and also trying to get direct comments from them. It will help to understand what my visitors think about this small blog. Very soon depending on different research taken so far, within next few weeks I will convert current UI to a fast, user friendly and accessible website. I will need your help to insure that.

Please take a short survey!

To get reviews, feedback and comments about this website, I created a survey on Survey Monkey which includes only 8 questionnaires. I believe it may take only 5-6 minutes. It is a request to browse this blog first then take the survey.

You may take this survey in two ways. You click into this link: Help us understanding usability matrix for IAMWD or you can take the survey right into this post below.

Create your free online surveys with SurveyMonkey, the world’s leading questionnaire tool.

It will be great if you can share this post within your network. It will really help me to understand my current blog rating. Very soon I will improve overall user experience, design and other matrix related to better usability for visitors; after getting these feedback data. Thank you for being with us this far. Don’t forget to comment. you can also give your valuable comments in our comments section.