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.
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.
Nowadays, search engines impose much more strong requirements for web sites to be ranked on top positions or even be parsed at all. Fast rise of mobile market pushed sites to be responsive to all kinds of screen widths and input schemas. But it’s not just about support mobile devices. For any Content Management system there is very important to load the pages as fast as possible. It’s not a recommendation anymore, but rather a rule. Google and other search engines may ignore your cool web site with a bunch of modern features just because it’s too slow.
Check loading speed online
First of all, check how fast is your page loading by Google’s PageSpeed test [https://developers.google.com/speed/pagespeed/insights/]. After several seconds you’ve got pretty complete report about issues at line of loading speed and suggestions how to improve it. If you receive green checks, congratulations, you are doing Content Management in right way. As it’s a Google’s service, so we can look at this list of points as optimization plan for Google Search Engine. On the other hand, the issues and methods to solve them are common for any search engine and for user experience as a whole. There are two separated modes (workflows) of analysis: for regular usage via PC’s browser and exploring on mobile devices like smartphones.
Apple’s look-and-feel style was dominating in mobile and even web design for a long time. Inspired by Steve Jobs the iOS UI/UX was treated as almost absolute standard. Even some of Android developers and designers were trying to copy iOS practices in their projects. Keep in mind, you should have very important reason to fight a framework. Recently, Google, as main supporter of Android platform, announced Material Design [http://www.google.com/design/spec/material-design/introduction.html] their point of view on both questions Usability and UI design. Besides, Material Design is not just pure theoretical specification. There is new Android 5.0 “Lollipop” version available. It’s based on Material Design. So, you are able to try it live, as well.
Flat, non flat and material
About 10 years ago the web design was pretty huge visually. It had a lot of almost realistic graphics with 3D effects, shadows, gradients, etc. Even small buttons and icons were 3D-like. Later, the web became more productive and useful. For now, it’s not just pure visual set of pages to represent some information. It’s rather applications with thick UI.
A new Android 5.0 version “Lollipop” [http://developer.android.com/about/versions/lollipop.html] was release in November 2014. Android powers your watch, your TV, and even your car. There is a lot cool features a new Android provides for developers. Let’s go through most amazing of them.
Android 5.0 introduces the Material Design [http://www.google.com/design/spec/material-design/introduction.html] concept as UI/UX standard in Android Development. You can add real-time shadows and 3D-like look-and-feel by new android:elevation property. It’s also possible to animate elevation changes by ViewPropertyAnimator.z() and ViewPropertyAnimator.translationZ() methods.
Remember time when you had to download the whole website in order to search through the needed information? You had to dig through the whole mass of data in order to get what you really need. That was bearable when you work on PC, but became totally inappropriate the time you appeared to be working on any mobile device.
The reason is that the connection is unfortunately not as fast as on local PC. Moreover you have the limited screen and cannot accept there all the information at once.That is when the single page web applications appeared to be far more popular than full size websites.
Specialties of single-page web apps
Web app developers composed the front end to any content database. While website programming offers you to deal with all data at once, single-page applications let you pull the needed piece of data right into your hands without losing any time.
In order to get yourself the modern and effective site you have to admit the definite changes take place in the IT world since 2013. This means some ways you tend to use might work no more, so you lose money and time.
To ease your site updates Iflexion team has gathered and carefully studied the latest trends in website development field before offering you the most important ones.
Let’s take a close look at the website development trends 2014.
Landing pages and single page sites
If you look at the usual site you most likely see the complicated structure with the main page containing the general information about the company, several pages with various services, also separate pages for blog, contacts, reviews etc.
This is what you won’t ever see in the landing page. Here all the information is given as shortly as possible. The site contains one single page only with all the data needed to invite the customer and draw his attention to offered services and/or goods.
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.
At the last months we can admire the release of multiple creations of mobile application developers, some of them brilliant, some of them useless. It’s time to find out which ones are worth being installed on your mobile device and which are ready to go to the trash bin.
The ultimate urge to create the fresh mobile application appeared to be the cause of the handful of drastic failures. A lot of mobile application developers created literally useless software no one actually needs, so the stores were chocking with applications quite soon. Most of companies were going to just get the rights on the new application without being interested in what it actually does or if it is or it is not helpful for the customers. The logical end was the libraries stuffed with applications, most of which had less than 100 downloads in total.
The invasion of the internet revolution appeared to be affecting every person in the current generation. Most people can’t imagine their living without the regular usage of the Internet. That is why modern online shopping, games, topics etc. are so popular.
The main role of the website is to allow the user to deal with the daily online business without any special training. Thus the intuitively recognizable interface is really important here. The usual interface is the link between the user and the person running the. The UI designer is intended to help the user in his daily needs. If the site has a good and clear interface it will definitely draw people’s attention and get a lot of traffic. The progressive design will significantly improve the interaction of the users online.
The features of a good UI design:
Nice bold look.
The site shall catch the eye from the very first moment. It shall be really appealing.
Most people crave to get everything in a click time. If it takes much time for the site to load, the user will switch the attention to the other resource. Ensure your site is not a heavy one.
Be sure the user can get the needed information with minimal efforts. Let the impression of your site to be positive.