Latest Features

                        How to Optimize Website in Mobile

                        Todays, using smart phones becomes more and more popular, so designer have to focus on UX more than before. The fact that user interface plays is so important when you create a mobile-friendly designs, however, user experience’s role is  becoming equally with user interface in many devices. Rahul Varshney, the co-creator of foster.fm, said that “A UI without UX is like a painter slapping paint onto canvas without thought.”

                        So, we have to separate the key elements to enhance the UX on mobile. These are 8 useful ways to help you do that

                        1) Mobile-first strategy

                        The traditional strategies seems to be not necessary if you want to focus on mobile UX. You must consider that most of your users will access your site  my their smartphone. The number of people using mobile is about 1.2 billion, and this number will not drop in the near future. So mobile-first strategy is worth, rite? 😉

                        Don’t think that mobile UX has to be complex. You can have a look this great example Karimrashid.com. This site is the oarticular one to show you the great UX with simple, clean and classy design

                        Screen Shot 2016-01-13 at 2.43.16 PM

                        2) Fluid layout

                        There are so much kinds of screen to choose when you design a website. So designer have to choose the best suitable layout to fit with every devices. Fortunately, you have Fluid layout.

                        Based on percentages rather than definite measurements like pixels, fluid layouts have become the standard among web professionals. They can be tricky, but making sure that as many people as possible can actually use your site is well worth the effort.

                        3) Focus on Functions

                        Firstly, you should know what is functions? It’s what you offer your visitors to get things done, and done fast. Based on the purpose of your website, all tools such as nearest store locations, product search, product reviews, or currency converters, should help users perform intended “functions” and achieve goals much faster.

                        Bebo, a Bookstore WordPress theme, is a perfect example of how to make “functions” easier on a web page. It’s totally fit with bookstores or authors who want to sell their products directly instead of an online store like Amazone. The whole website is easy to navigate with column, buttons, tools, and design elements that make deciding on the best kind of book — and then buying — a breeze.

                        Screen Shot 2016-01-14 at 5.11.51 PM

                        4) Determine your visitors.

                        Don’t try to attract all types of users, because it may cost you a typical one, and no one wants that. First find out who your users are. Then figure out their internet behavior. Once that’s set aside, find out what makes them act. Modern users are of two major types: those who are browsing without a goal in mind, and those who are looking to perform a task. Each of these groups would require different “functions” based on their needs.

                        It’s not difficult to guess the demographics of Seed theme’s users since it organic atmosphere all over the page. Seed is highly focused on “natural ingredients”, and suitable for farmer, cosmetic shop, organic product shop…

                        10+ Best Organic WordPress Themes 2015

                        5) Look up the coder’s guideline and library.

                        Based on the platform you will be using, it is essential to give the UI guidelines a close look. Some platforms allow more flexibility than others. Whichever the case, some key components of brand or “signatures” should remain.

                        An Apple app developer should have a look at iOS Human Interface Guidelines and follow Apple standards when it comes to designing basics, design strategies, UI elements, Icon/image design, etc. The Android developer, on the other hand, should learn all about the components, style, usability, and layout of typical Android applications with the help of the Android developers guide.

                        Screen Shot 2016-01-14 at 4.44.14 PM

                        6) Give all information users need

                        Some designers, instead of making all their content work in fluid layouts, will simply opt to hide some of it from mobile users. Sometimes it’s because the layout is tricky, or they feel like there’s just too much content for a mobile layout. This is the wrong approach.

                        Giving users a “stripped-down” version of your site or app is not only unfair to mobile users, but can seriously backfire, and lose you customers. You might have to simplify the layout to the extreme, move some content to other screens to reduce clutter, or just try to organize it all better; but it needs to be there.

                        Compare the desktop version of the BBC site to the mobile version. While simpler than it used to be, it still puts all sorts of information all over the screen. The mobile version, by contrast, drops some of the images (which are still available in the articles themselves), but keeps all of the headlines, dramatically simplifying the experience on a phone-sized screen.

                        003

                        7) Touchy design

                        It is also useful to have in mind the fact that a mobile-device user will be using fingers instead of precision-friendly mouse pointers. Your design should be easy to navigate with fingers of all sizes and shapes, considering all mobile devices are now touch-screen. A user shouldn’t have to pinch too much or zoom in to tap on something or fill out a form or tap on a button. Inaccurate taps are also very common on small devices which should be accounted for in the design with large enough touch inputs or gestures to get the job done.

                        Here’s a touch table of Eventbox WordPress theme by Beautheme that might help. Notice how touch events (and other actions) may vary depending on browser compatibility and device.

                        Screen Shot 2016-01-14 at 4.49.19 PM

                        8) Compression

                        Todays, there is amount of available tools for designers. You can find script compressors such as HTML compressor or Gzip compression which will eliminate unnecessary comments, white space, or code automatically. CSS minifier andCSS compressor and the other tools will allow you to concatenate CSS code and improve performance. Image compression is also so important; They will reduce the size of your .jpeg and .png files and still keep the quality intact include EWWW ImageOptimizer, smush.it, optiPNG, and jpegtran.

                        You may interested in:

                        Colour Contrast – the Important Element in Website Design

                        Banknotes and The Lessons From Their Designs