10May2016

Web Development: Flexbox as new UI standard in Web

Layout as a problem

At design point of view, any web site needs some sort of layout. It’s a mandatory Web Development aspect for even very basic HTML content like landing pages. Modern web picture have to be splitted into logical parts in terms of some structure. The problem is the nature of the web. 30 years ago, when the web was actually invented, a page was treated as pure top-to-bottom flow of a text content and images. That was original layout only. A lot of technologies have been applied since that time. E.g., pure HTML tables, floating div elements. Most of them look like hacks. Keep in mind, there were outstanding features and behaviour of specific browsers and their versions. Yes, I’m talking about dark times of IE6. The situation became even worse because we had to support wide range of mobile devices in responsive way. To solve all these problems there are a lot of grid system implementations available as standalone libraries or complete Web Development frameworks. E.g., Bootstrap [http://getbootstrap.com], Foundation [http://foundation.zurb.com].

 Flexbox as a standard solution

Flexbox [https://css-tricks.com/snippets/css/a-guide-to-flexbox/] is not just one more solution, but rather a standard that solve layout problem on basic level. It would be better to have it initially at the beginning of Web Development epoch. W3C is going to add Flexbox to its official standards soon. Technically, it’s not a library but just a set of CSS3 properties to layout DOM elements. There are 3 versions of Flexbox properties set: old, tweener and new.

Read more
14May2015

Usability and UI design: Bootstrap

Any new idea needs rapid prototyping. In case of startup, it is both important to reduce costs and have done current development iteration as soon as possible. Generally, there are tools to help you move this way. Bootstrap [http://getbootstrap.com] is a must-have solution, when we are talking about fast web design and prototyping, but want to avoid wasting our time on standard Usability and UI design.

Framework

First of all, Twitter Bootstrap is a pure front-end HTML/CSS framework freely provided by Twitter team. It’s not a JavaScript library for coding on client side like jQuery or AngularJS. Main purpose of Bootstrap is providing nice professional look-and-feel out of the box for the most general use cases of modern web. You have to keep in mind all features to hold the project in cross-browser state, but it’s not a problem anymore for Usability and UI design. Bootstrap supports all modern browsers. The framework holds under control typography and basic HTML elements like headings, lists, tables, etc. Grid system is available out of the box. It allows to compose almost any web layout splitted into columns with sidebars, header and footer. There are ready to use standard components like drop-down menus, form elements, all kinds of buttons, image thumbnails and various text formatting cases.

Read more
08Jun2013

Several secrets of mobile application usability

No one can now be surprised with the wireless connection. It’s even more popular today than the standard wired connection, since people tend to stay mobile and in touch with each other all day long. We can now share not only the data, but also are one step away from the full range voice telephony due to 4G technologies.

What are the current problems of mobile web programming?

First of all, they shall become rather quick, since no one wants to wait till the page loads. The current bandwidth has significantly improved compared to what it had been like. Still there are differences between wired and mobile application usability. Also the demands of current users had become rather high and hard to satisfy. It happened mostly due to the multimedia content shared through the mobile connection.

Each user is now free to choose which network to use: an old one or any kind of the new one. The time of usage is very well important too. Still the bandwidth in wired or wireless network doesn’t differ that much nowadays.

Due to various devices people use in order to get to the network, experts advise to make all portals in 4 different variations suitable for the following devices:

High bandwidth for large screen

  • High bandwidth for small screen
  • Low bandwidth for large screen
  • Low bandwidth for small screen

8 ways to test usability

1. Testing paper prototypes

The paper prototypes let you know just how information will look on the screen of the chosen mobile device without actually using the page… and the real screen. All you have is paper and the removable flexible sheet with data.

Read more