Responsive Web Design 101

Responsive Web Design (RWD) is a design approach to render your web sites to easily to different devices size like mobile phones and tablets. My preferred RWD is jQuery mobile framework. It is simple to setup and allows you to create RWD quickly. Have you test drive RWD before?

Choosing RWD

There are a few RWD format. The most popular frameworks are jQuery and Bootstrap. My personal preference is jQuery mobile because I can set it up easily and it is easy to configure for different UI (User Interface). Do take some time to review and test with different type of framework. I recommend that you use the popular framework because there will be more sample codes and active community. It is best to set some use cases and selection criteria for your testing.

Skillset Required

The skillset required for RWD are JavaScript and CSS. You will also need to be familiar with different devices and its characteristics. A lot of patience is required to tweak for different screen sizes. If you are getting a designer, this is where you must translate design to CSS style sheet. Do separate your design from application layer as design is prone to changes.

RWD is a basic norm for web sites design framework across different devices. This reduce your efforts to code differently for laptop and mobile. In addition, RWD framework is easier to setup and deploy. There is no reason not to utilise RWD for your website.

Less is More

In the UI/UX world, there is a design philosophy of “Less is More”. The best example is the battle of search engines where Google triumph over its rivals like Yahoo and Alta Vista with its bold landing page. I am still advocate of such design and clean uncluttered UI/UX still wow me over like Google.

Photo by Ethan Kwok
The Rationale of Less

I enjoy using the rule of 5 and 8 for UI/UX. This rule is related to the amount of short term memory users can remember. This, users enjoy simple approach to achieve their tasks. This can be 5 to 8 steps for achieving your system goals. You can relate this rule for 5 to 8 common menu or views. One such UI/UX features is the “Favorite” where you can bookmark your commonly used features.

UI/UX vs RPA

There is a misconception of using RPA to overcome complex and misguided UI. Rather than using RPA, you should always seeks to improve the user experiences. UI/UX provides better approach to reduce users fatigues and steps without the need of additional overhead costs like RPA.

So, if you have a choice of investing in either UI/UX or RPA. Do go for the tried and tested UI/UX philosophy instead of looking at the novelty of RPA.

Chatbot is the New UI

User Interface (UI) has always been a hot topic to simplify usage for system. Recent cloud technologies have evolve UI to a next level which is not seen in the past. We are now able to use machine learning to recognise natural language for Chatbot. How will Chatbot change our paradigm towards software development? Let us break Chatbot into basic components for easier understanding.

Machine Learning

Machine Learning (ML) have materialised AI (Artificial Intelligence) in action response logic in systems. This makes perfect sense to introduce machine learning framework into systems to handle predictable events with users.

Natural Language Processing

System response have been constrained by standard system logic processing. Natural Language Processing (NLP) gain a lot of breakthroughs with the addition of machine language framework with speech and voice recognition and natural language understanding.

Chatbot

The RE introduction of Chatbot is due to the advances made on the two fundamental concepts of Machine Learning and Natural Language Processing in its ability to replace the UI. Users can really interact with minimum switch cost, decrease training time and high stickiness for superior Chatbot.

In 2021, we should expect to see a fierce battle of Chatbot in the future Cloud space due to COVID-19 pandemic and the need to distance and remote work from home. Do watch for more updates and review about Chatbot technologies.

A Kid Lesson in Simple or Complex User Interface

Recently, I had an interesting conversation with my son regarding his exploration into computer. He happily shared that his friend told him how they could fix the computers when their PowerPoint freeze the screen.

This was what he narrated.
  1. PowerPoint slides freeze.
  2. Right click.
  3. Task Manager
  4. Click any applications.
  5. Desktop is shown and they could access Windows.

So, I shared the adult way
  1. Windows logo key + D

🤔🤔🤔

Son response

And the Mac Way
  1. Mission Control 4 Fingers Swipe Up.

🙄🙄🙄

Son response

Obviously, my kid was not impressed compared to what he had shared to me. From this incident, we can perceived how we are expert with complex steps while the present single combi button or single mouse gesture is nothing short of a noob!

Should we continue to simplify technology in reaching out to “noobs” or be guided by limited expert with complicated steps?