LATEST FROM OUR BLOG

Take your daily dose of (only) relevant news, useful tips and tricks and valuable how to's on using the latest web technologies shaping the digital landscape. We're here to do all the necessary information sifting for you, so you don't have to, to provide you with content that will help you anticipate the emerging trends about to influence the web.

Our Favorite Thing About Brave Browser? It Blocks Ads and Trackers... by Default
Brendan Eich is one of Firefox’s key figures and a web pioneer, but that’s not all he’s known for – he is the man behind a new start-up called Brave Software. Brave Software recently released a beta version of the Brave browser – this new software can work on OS X, Windows, Android or iOS. The idea behind this browser is to shield users from intrusive ads, effectively allowing it to run much faster than its rivals. Brendan Eich is known for bold and exciting ideas – He invented the JavaScript programming language and co-founded Mozilla which built the Firefox browser – one of the most popular browsers in the world. He left Mozilla in 2014 and started working from his new start-up, Brave Software with a team of 10, hand-picked specialists. The San Francisco-based company wants to rid the world of intrusive ads or harmful advertising all together.   The idea behind it Brendan Eich states: "We have to disconnect the bad system, I talk about putting chlorine in the pool”. Apart from the huge speed boost Eich promises privacy protection as well. The new browser should load pages two to four times faster than rival smartphone browsers and 1.4 times faster than PC browsers. But it’s not all smooth sailing - the Brave browser faces huge challenges such as gaining publishers support and convincing users to change their browsers. If Eich succeeds in his bold move, it could mean the end of ad blockers and improved privacy for consumers. Currently, online ads support a huge number of free services such as Yahoo mail, Facebook and Google searches but this situation creates a problem since publishers have reasons to intrude in your personal life – their ads sell much better when publishers know details about you – or as Apple’s CEO Tim Cook states “When an online service is free, you’re not the customer. You’re the product”. The Brave browser strips out ads and in the future it plans to allow a certain ads with a limited amount of personal data shared with advertisers. The browser also removes online tracking elements which slow down browsing speed. In the end, the Brave browser wants to achieve a balance between fast browsing speed and keeping a handful of actually useful ads.   How is that possible? It sounds like a good idea but how can it be done? The browser uses your history to see what you’re interested in and shares industry standard categories with publishers which in turn can place appropriate ads without knowing any personal information about you. Brave Software states it doesn’t want to know any information from its users. Currently the Brave browser is ads free, with a few empty patches where ads will be placed in the future. Once it has a large number of people using it, publishers will start supplying ads based on the information Brave shares. This will be Brave’s revenue source for the time being – "We're going to have to prove ourselves to get that payment," Eich says.   Get some profit as well Once the Brave browser has over 10 million clients, Brave Software plans to offer its consumers some revenue in return for using the product. The revenue can be used for subscriptions to pay publishers in order to remove certain or all ads. Eich and his team built their browser in Chromium – the base of Google Chrome, meaning all the security support and development will be done by Google. But why not use Firefox as a base for the Brave browser? Eich explains "Chromium is the safe bet for us," – Chrome is much more popular among developers who want to test websites, it’s a better tested and safer choice. It remains to be seen if the Brave browser becomes a big player like Firefox and Chrome. Currently it seems that it has all the assets necessary to do so and the revenue sharing scheme is brilliant. ... Read more
Adrian Ababei / May 25'2016
What Are the Best Types of Navigation Menus? And Which One Best Suits Your Project? Top 10
Let’s talk navigation menus! Navigation menus are a key element of the user interface – without them, there can be no website! Any web page you have ever visited had a group of links somewhere on the page, either in the footer or in the header. Design-wise, navigation menus are very dynamic and change often in order to improve user experience. Interestingly enough, even boring navigation menus will come in handy once in a while. Since 2016 had its own set of preferable types of navigation menus, 2016 is no different – here’s a rundown of 2016’s best navigation menus. Hamburger Menu Buttons This is one of the most popular choices available when you want to gather all the navigation links in the same place. Hamburger menus are dynamic, subtle, mobile-friendly, and stylish. Its form is composed of three lines placed one after the other – this part always remains the same but the inner part which features the actual links can vary from image-based items to lists. Navigation in the fixed centered layout Navigation buttons can be scattered around the welcome section of your website – this will give it a fresh and original look. As a rule of thumb, this type of navigation menu can be found on personal websites or personal portfolios – it can provide the webmaster with plenty of room for innovation. Its only drawback is that it can only be applied for menus consisting of just four items. Full-screen multimedia based navigation menu Videos and images can also be used as supporting devices for your menu items. Modern technologies allow incorporating lots of media elements without damaging productivity, accessibility, or functionality. This type of menu is very dynamic, lavish, and sophisticated. Interactive navigation menu Interactive menus are meant to draw attention – these can include dynamic features, static scenes, virtual walks, or interactive videos. That being said, these types of menus are not always fully compatible with browsers and devices which can create a huge gap in your website’s conversion rate. Slide-out menus Slide-out menus are similar to hamburger buttons – the concept was borrowed from mobile UIs. Slide-out menus became popular due to their compact size and versatility. You can also add certain visual clues in the form of icons or text in order to make it a bit flashier. The menu can slide out from the bottom, right, left, or top side, with the left side being the preferred choice. Static sidebar navigation menu Static sidebars were very popular a few years ago but recently they gave way to more compact solutions. There are still plenty of blogs or online magazines that use these navigation bars and for good reason – these simple bars make users feel more comfortable and improve user experience. Streamlined navigation bars This was one of the most popular types of navigation bars last year, along with the hamburger menu button. It’s a stylish and elegant choice when it comes to presenting the main links of your project. It can include 7 or fewer items and it’s often located in the right corner of the screen. Massive drop-down navigation bars These are huge dropdowns rich in multimedia – these menus are the perfect choice for huge companies such as online newspapers, international e-stores, famous sports brands, and industry leaders. Dropdown menus are multifunctional and highly complex components that extend over the entire width of a web page. Most drop-down menus feature a balance between videos, images, text and some even have extra components such as weather widgets and shopping carts. Footer navigation menus Footer navigation menus are similar to the streamlined navigation bars. You can find these at the bottom of the page. Users tend to usually search for the menu bar in the upper part of the page but the footer navigation menu does have its uses. Navigation menus in websites powered by parallax Projects powered by parallax usually opt for plain graphic-based navigation menus. These menus often feature dashes or circles accompanied by titles that help visitors find the information they need quicker. Conclusions If making hard decisions is not really your thing, there’s one other option you can go for: No navigation menus at all. Yes, it’s possible and it’s definitely doable – one-page websites are gaining popularity around the world, and abandoning the navigation menu is definitely possible. This solution is suitable for smaller projects with minimal layouts.   ... Read more
Adrian Ababei / May 24'2016
Eight Design Tips You Need To Know
Working as a developer you might sometimes find yourself in a situation where you’re dissatisfied with your work but you simply can’t figure out why. Even if you research and read design theory books, it’s very though to create seamless design work at the snap of a finger. Luckily enough, there are ways to improve your work with very little effort. Here are 8 tips on creating great design. Font weight Thin fonts are all the rage in 2016 but they are risky to use simply because they can cause eye strain. Eye strain occurs when users have a hard time reading text or they must focus more in order to be able to read it. This can quickly exhaust anyone and force them to exit your website. Thin fonts are usually quite hard to read, especially on certain backgrounds, so it’s a good idea to make changes whenever necessary. The optimal font weight is around 400 as this will create the least amount of eye strain – try to be more receptive when you get feedback regarding the readability of your text and fonts, it will pay off in the long run. Colour contrast When entering a website, the first thing a user does is to quickly scan all the content and search for information regarding their problem. If they can’t find a solution to their problem, they’ll most likely bounce. When designing a page, any page…you need to keep the user’s needs in mind. Let’s say you are designing a services page – your visitors need to be able to find the “next” button or a contact button fairly quickly or else they will just leave. Contrast is an excellent way to help your visitors discover all nooks and crannies of your website. Using rich and vibrant colours for links and buttons is highly recommended. Icons will give you some personality Let’s start off by saying Font Awesome really is awesome. Make use of icons whenever and wherever appropriate – your visitors will thank you for it. We live in a world ruled by signs – red is danger, green is safe and blue is comforting. Use it to your advantage! Spare your visitors the effort of reading every little bit of text on your website by simply adding an icon next to it – it will help clarify your text and make it a bit more user friendly. Clarity is the key to good content When writing content for your website or pages, it can get pretty confusing. Your average user will spend less than 10 seconds on a website to try and find the information they need before they search for another one. It’s a good idea to always have simple ~5 word headers over any block of text. This will help your user know if the information is of any value to him or her – time’s expensive! Clickable elements need to be obvious If you want someone to click on a link or button, you’d better make it obvious that it’s clickable! Menu items, buttons and links are common clickable items on a website. That being said, make sure that your buttons have a high colour contrast compared to the rest of the page and that your menu items have an icon next to them. You can also play around in CSS to change their colour when the user hovers over them. Links should always be in blue – having some call to action text next to the link can also help. Colour your website properly Colours should bring order and clarity to your website. You should never use too many similar colours as this can cause eye strain for your user. Colours can also clash with each other, making the user’s brain work harder to figure out what is what. Colour balance needs to be attained through careful and patient testing! Keep information consistent Every piece of content on your website should have the same layout and approximately the same size. Your information’s colour, format and proximity to other links or related pieces of information should be consistent throughout the whole website. Different portions of content that are different but fill the same role should also be consistent. For example, if you offer a basic, medium and premium offer all information regarding these offers should have the same size and the same font. You can get creative, but keep it consistent! Text alignment If you want your user to feast on all the information provided on your website, you should make each and every piece of information as digestible as possible. Alignment can help you do that easily. Alignment should be where the user’s eye begins – either left or centre-aligned.  Conclusions When coding, you can make mistakes and you’ll get error messages. But with design, mistakes or errors can be difficult to spot. Think about these tips when building up your project or go through them when you’re in a pickle and soon enough these principles will be imbedded in your workflow! ... Read more
Adrian Ababei / May 23'2016
What Are the Cross Browser Testing Tools Worth Taking for a “Test Drive”? Hint: Start with Browsershots
Most developers nowadays are plagued by cross-browser issues and considering the fact that there are tons of popular browsers and operating systems available, it’s impossible to manually test your website on all of them. That’s why we came up with a list of our favourite ten cross-browser testing tools, including Browsershots. These tools are both free and paid so take your time to check trough each of them. Browsershots Browsershots is a very simple yet useful free tool with plenty of functionality to go along. Browsershots’ list of supported browsers is huge. You can select your screen’s depth, colour, size and whether to check for issues or not by using Flash, Java and JavaScript. The free service offered by Browsershots doesn’t include features that handle navigation testing or scripting and in our experience, it also takes a long time to see the results. All in all, it’s still a pretty good tool for showcasing pages to clients – the paid version of Browsershots with priority testing and tons of features will set you back just under $30 a month. Browser Sandbox Browser Sandbox is next on our list, featuring a good list of browsers which you can use for testing. Unfortunately, Browser Sandbox is only available for Windows Users but the developers are planning to release a Mac version soon. The list of browsers supported by Browser Sandbox includes Firefox Nightly, Opera, Safari, Firefox Mobile, Chromium Canary, Chrome, Firefox and the ever popular Internet Explorer. If you go for their free service, the only limitation you’ll have is that Browser Sandbox will only test your page with the latest version of each browser. If you need access to older versions of these browsers you can get started with just a little under $5 a month. That’s quite a bargain! BrowserStack Browser Stack is number 3 on our list of cross-browser testing tools – it’s also one of the most popular products by the way. Browser stack is a great tool for mobile testing and it also supports over 700 desktop browsers. Other features include quick screenshots, local testing and resolutions from 800x600 up to 2048x1536. Browser Stack will set you back between $12.50 to $29 a month, depending on your needs and the type of your organization. Open source projects can get this tool for free. This tool offers a nice mix of both free and paid services but not all of the paid services are that necessary so you might get the job done with only the free ones. IE Testers If you want to test your page on IE, here’s a list of free Internet explorer testers you might want to check out: Netrenderer Net Renderer allows you to test websites in IE 5.5 up to IE 11. It’s a pretty simple tool without too many features – it’s free so get testing! Microsoft Edge Microsoft Edge offers testing in other browsers as well, not just IE. Microsoft Edge will show screenshots of your website in the browsers you select and on mobile devices as well. The Azure Remote App also allows you to test in IE remotely. My Debugbar My Debugbar which is also known as IETester is another tool web developers can use if they want to test in IE. This tool requires a 60MB download and can only work on Windows. Unfortunately, My Debugbar has plenty of limitations and bugs so it’s better to do some research before installing it. Browsera Browsera will set you back between $39 and $99 a month, depending on the features you need. Although it might seem a bit expensive at first, you are getting quite a lot for your money. Browsera can test password protected pages, dynamic pages, layout and JavaScript so it’s definitely worth taking a look through it. Mobile Ready’s Webshot Webshot is a free tool which you can use to test mobile cross-browser compatibility. All you need to do is register and then you can get started. CrossBrowserTesting Interestingly enough, CrossBrowserTesting uses real devices to run the browsers and tests. Emulators do a good job indeed but nothing beats the real thing. CrossBrowserTesting’s features list is extensive and definitely worth its money. CrossBrowserTesting’s list of supported browsers and operating systems is possibly the largest in the industry – it’s over 900! CBT also supports over 40 operating systems including Mac, Windows, Android and iOS. Developers can also use its “live testing feature” – it allows you to test pages in a real environment. You can test Flash, JavaScript, HTML forms and AJAX. Other features include screenshot comparisons, Selenium tests and local testing. CrossBrowserTesting will set you back $29 a month, with a 7 days free trial. Conclusion Generally speaking, paid services are well worth the effort and there’s really no way of saying which tool is best – it strictly depends on your needs and the type of project you’re working on.   ... Read more
Adrian Ababei / May 20'2016
Breaking News: Microsoft’s Planning on Storing Data on DNA
Just one single gram of DNA can store 1.000.000.000 Terabytes of data for over a thousand years. Microsoft has purchased 10 million strands of synthetic DNA – these DNA molecules are called Oligonucleotides. The biology-focused company Twist supplied the strands of synthetic DNA and researchers from the University of Washington started exploring the idea of using DNA for data storage. If Microsoft’s plan works, it will revolutionize data storage technology as we know it today. The current rate and volume of data being stored and produced every day is so fast that hard drives and servers are having a hard time coping with it – they need periodical replacement or upgrades and this in turn increases the risk of data loss or corruption. Statistics show that by 2015, 5.4 zettabytes or 4.4 trillion gigabytes of digital data has been created and this number’s set to increase tenfold by 2020. How are we going to store 10 times the amount of data in the next 4 years? This is the question that Microsoft is planning to answer. Microsoft wants to store data on DNA DNA offers an enormously higher data storage density than conventional hard drives or systems – one gram of DNA can store up to 1 billion terabytes of data. DNA is also very robust meaning that any data stored on it can be readable or intact for up to 10.000 years. - That’s a bit more than your average hard drive’s life expectancy. Twist states that all the data that exists today can be stored on as little as 20 grams of DNA. Although this may sound great, the technology is far from being ready to support our daily data and storage needs. Initial tests have gotten great results – one test demonstrated that all of the data encoded on DNA can be recovered with ease. The American Chemical Society also recently released a statement that supports Microsoft’s finds – Data stored on DNA molecules could last up to 2000 years without being deteriorated in any way. ... Read more
Adrian Ababei / May 19'2016
Google Intends to Push HTML5 by Default in Chrome
Do we witness the dawn of a flash-free internet? Find out about the efforts Google is putting for turning HTML5 into a default browsing experience!Google wants to use HTML5 by default for all its products, including Chrome instead of Flash by the end of the year.   Flash’s Demise Google recently outlined a plan to promote HTML5 as the default for Chrome instead of Flash. In 2016 Flash will only be used by default for a handful of domains that still depend on it. Chrome will run on HTML5 by default if it’s possible, but if Flash is required for a certain website the user will be asked if it’s allowed to run or not. Flash has been losing ground to HTML5 for many years now. Considering the fact that Flash is a security nightmare riddled with vulnerabilities, it was only a matter of time until companies went in favour of HTML5. Chrome and Flash have always had a complicated relationship in the past. Flash is currently being included in Google’s Chrome browser by default but that will surely change in the future. Back in September 2015 Chrome started automatically pausing non-essential Flash content such as animations and ads. Nowadays Google wants to pause all Flash content on websites you visit.   Google’s Proposal The new Google proposal for HTML5 is finally here: Flash Player comes in a bundle with Google Chrome but it’s presence is not advertised as before in Navigator.Plugins() and Navigator.MimeTypes(). If a site is able to run HTML5 smoothly, it will become the default experience When users visit a site that requires Flash Player a pop-up will appear at the top of the page, asking permission to run it If the user accepts, Chrome will advertise the presence of Flash Player before refreshing the page. Chrome will remember the user’s setting for other visits as well, so just one approval is needed.   Exceptions Exist A list of top 10 used sites are whitelisted – for these sites users don’t need to approve Flash to run. The whitelist is meant to avoid over-prompting and make the transition to HTML5 smoother. The whitelisted websites will most likely include Mail.ru, Amazon.com, Twitch.tv, OK.ru, Yandex.ru, Live.com, VK.com, Yahoo.com, Facebook.com and Youtube.com. The white list itself will be updated periodically in order to ad or remove websites. If users allow Flash to run on any website, Google will simply store the preference and refresh the page. On the other hand, if a website directs users to download Flash, Google Chrome will present an infobar with “Allow Flash Player…” before directing users to the prompt. Google will also add policy controls such as a setting to “Allow Sites to ask to run Flash”, “Allow Sites…” and “Never run Flash content”. With this system users are able to manage their preferences for each website.   Pulling the plug Google has been at the forefront of killing Flash. Back in 2015, YouTube opted for HTML5 videos by default and in February of the same year Google began to automatically convert Flash-based ads to HTML5. Google wants all Flash display ads gone by 1 January 2017. For some, Flash’s demise couldn’t come to soon – both for security and performance reasons. Despite Google’s strong opposition towards Flash, it was Adobe that actually pulled the plug back in November 2011 when the company withdrew support for Flash Player on mobile devices. Even with tech giants pushing for the total elimination of Flash Players, it will likely take many years before we can finally have a Flash-free internet. ... Read more
Adrian Ababei / May 17'2016
How to Create Your Own Responsive HTML Email: A Step-by-Step Guide
Like it or not, Responsive HTML Email is popular and it’s here to stay – over 50% of e-mails are read from mobile devices. But HTML email design is very out-dated – for some web developers, HTML email design can be a living hell. While most email design experts start off by building tables and layouts styled in HTML attributes, some designers are implementing newer, modern techniques to create responsive HTML email. Here are a few tips: HTML email is valuable HTML email is vital for every company and or business. In the marketing department e-mail outperforms social media channels such as Twitter and Facebook. The best thing about e-mail is that it allows marketers to interact with massive audiences in a very personal way. While most users tend to use plain text e-mails, responsive HTML email has plenty of advantages including: Tracking – it allows you to track engagements in order to optimize marketing efforts Hierarchy – You can build hierarchy in HTML and make your text or links easily noticeable Design – the email allows you to reinforce your brand Hyperlinks – You can link to your website or landing pages from the email HTML email can be a hassle HTML email development can be a hassle simply because there are no standards between different email clients. For example, Gmail and Outlook render CSS and HTML differently which leads to lots of problems. With HTML email there is no JavaScript either – all you can use is inline styles. How HTML email works HTML email is like designing a web page – HTML attributes, inline CSS, tables, the works. The only thing you need to keep in mind is that email clients rendering engines differ so you need to limit yourself to a tiny subset of CSS and HTML. HTML email tables Designers often use tags such as nav, footerfor, article, section, header or div when building web pages – HTML email devs have to use HTML tables in order to create email campaigns. Styling of these tables will use attributes such as border, cellspacing, cellpadding, align, bgcolor, height and width. Inline styles can include max-width, width and padding. This is the only way to create robust email layouts. Images Using images in your HTML emails is quite similar to using them on web page, apart from one little problem – most email clients disable images by default and your subscribers will often get confused. There’s really no way of automatically enabling images but with the clever use of alt-text we can provide subscribers with some context. Call to action With HTML emails we can include clickable hyperlinks – instead of placing links within the text, you can use big and noticeable buttons to create call to actions. While many marketers use linked images instead of buttons, these are not effective for the reason stated above – buttons can be built and used in e-mails even when images are disabled. Responsive HTML email Responsive sites and responsive email have three things in common: media queries, flexible layouts and flexible images. The only difference between the two is how these components are implemented. Flexible pictures This part is not too hard but keep in mind that if you set your width to 100% some email clients may have problems rendering the images at their optimal size, unless you define height and width using HTML attributes. The first thing you have to do is make sure that your images are properly coded. If you want to make your images fluid simply add a media query in the head of the email: img { width:100% !important; height: auto !important; } Keep in mind that social icons and logos usually stay the same size on almost all device – this is why it’s a good idea to target flexible images using a class. Flexible Layouts for responsive HTML email Although web designers rely on semantic elements to build responsive design some limitations do still exist when building HTML email. For example, all tables should use percentage as their widths. You can create a container table with specific dimensions in order to constrain the width of your e-mail design – some clients such as Microsoft Outlook can’t handle percentages very well and it may lead to a weird looking email. Media queries in responsive HTML email Media queries in emails work the same way like in web design. When you include a media query in the head of the email, you’ll be able to target specific device attributes and adjust styles when needed. For example, if you want to target viewports of 525 pixels or under it, you can use the following example: @media screen and (max-width:525px) { table[class=“my_table”] { width:100% !important; } } This overrides all inline styles and HTML attributes, effectively forcing the table to take the full width of the mobile screen. If you want to improve mobile user experience, you can also make your test and buttons bigger. Nested tables can be targeted with the code above as well. Although media queries are great for creating enticing user experience on mobile devices, they are not supported everywhere – the Gmail app, Windows Phone 8 and older generation Blackberries tend to ignore media queries. ... Read more
Adrian Ababei / May 16'2016
Opera Brings Its Free and Unlimited VPN app for iOS
Opera, the popular web browser is launching a VPN or virtual private network client for iPads and iPhones. The launch came just three weeks after the same feature was announced for the desktop browser.   Opera designed the app to be “especially relevant on campuses and workplaces” where Wi-Fi provided by certain institutions or companies has limited access to “social-media and video streaming websites”. You can also set your app to route your internet connection through another country in order to have access to geo-blocked content. The app also blocks trackers and ads. When the VPN/proxy version first appeared a few weeks ago it only supported three virtual locations – Germany, Canada and the US. With the new launch for iOS, you can now pretend to live in the Netherlands or Singapore as well. The new launch also boasts quite a few supported languages including Russian, Portuguese, Japanese, Indonesian, German, French, Arabic and of course English. The Opera VPN app is set to “off” by default, so you need to turn it on manually. The two other options to block ads and block trackers can also be turned on from the “Settings” menu. Although many VPNs were already available to users, most of these services required payment to unlock certain features. Opera offers free and unlimited access in a bid to gain traction with the online community. Why would Opera go through the trouble of creating a new VPN app if it’s given for free? SurfEasy seems to think that Opera “collects anonymous data about how people use their mobile devices” and sells it to third parties who are “interested in better understanding the mobile ecosystem and how it’s evolving.” Opera is also likely to place ads in the app itself in the near future.   If you’re paranoid about being tracked online, you’ll feel much safer by using an app that charges a monthly fee. Individuals who are simply seeking to access websites or content that’s banned in their country, campus or workplace will clearly benefit from Opera VPN. - “With the new Opera VPN app, we help people to break down the barriers of the Web and enjoy the Internet like it should be,” said Chris Houston, president of Opera division SurfEasy. Opera’s upgrade efforts are not limited to VPNs though, as the company plans to create a VPN for Android as well.   ... Read more
Adrian Ababei / May 13'2016
What Are the Essential UX and UI Tools that Shouldn’t Miss From Your Toolbox?
To help you make the right choice or choices, below you can find the most valuable UX and UI tools on the market today. InVision InVision is the world’s leading product design and collaboration tool. It’s equally useful for individuals and small teams, and if you work on multiple projects, or projects involving large numbers of team members, the cloud-based Enterprise version is perfect. InVision Enterprise can accommodate an unlimited number of team members working on an unlimited number of projects. InVision’s unlimited testing capability, which allows you to test your prototypes directly on users’ mobile devices, record their interactions with your prototypes, hear their voices, and even see their faces, is hugely helpful. Feedback doesn’t get much more contextual than that. With such relevant feedback, you’ll have the power to make the right UX and UI decisions quickly, rather than having to rely on days or weeks of serial usability testing activities. Proto.io If you’ve been searching for a high-fidelity prototyping tool with powerful collaborating features, you need to look no further than Proto.io. Some prototyping tools, including many of the more advanced ones, can link screens together, but don’t go beyond that. With this tool, you can create prototypes that are feature-rich, animated, and interactive, and do so in minutes – without having to rely on coding. That’s half the story. The other half is your ability to overcome those pesky communication gaps that can exist between the project manager and the team, between team members, and among other project stakeholders. Proto.io gives you the capability of producing prototypes that are so realistic that your team, or your company, will be able to make the right decisions before investing resources in the final design and development efforts. Appsee Mobile App UX Analytics Appsee’s app analytics platform goes beyond reporting basic, quantitative data by providing mobile teams with visual data. The user recordings and touch heatmaps allow you to see for yourself how users actually behave within your app. These tools can help you pinpoint where you can optimize your user experience and troubleshoot issues from performance to usability. In conjunction with these visualization tools, Appsee supplies mobile teams with insights regarding retention, user journeys, usage, and conversion funnels. These insights can answer questions like: “Which navigation path do my users take the most? “ Or “How many users return to my app after a month?” Overall they can help paint a clearer picture of how your users behave. PowerMockup If you are a PowerPoint user, PowerMockup is a wise choice. This prototyping toolkit enables you to create mockups and wireframes for virtually any website, or for any mobile or desktop application. Select your shapes and icons from the PowerMockup library, drag and drop them onto a PowerPoint slide, and let PowerPoint functionality do the rest. The PowerMockup library is constantly being added to, and you can add your own custom shapes, and share them with other users as well. Pidoco Pidoco offers a better way to create and share beautiful, interactive wireframes. This web app has it all, from making easy sketches to making custom templates, adding interactive elements, and using features that allow quick and easy previews of your work as you progress. Your prototypes feature all of the necessary clicks and touch gestures you’ll need to trigger the system reactions you are looking for. Pidoco offers four different plans, ranging from the Starter Plan (2 projects/ month), to the Platinum Plan (100 projects/month), and you can try any of their plans for free. Lucidchart Lucidchart is an online, cloud-based, multipurpose wireframing and diagramming application that will be an excellent choice if you are looking for an easy way to sketch and share professional-looking wireframes and mockups. Lucidchart employs drag and drop functionality, a variety of useful keyboard shortcuts, and features a large library of icons for the full range of device types. This application can be used on PCs, Macs, and all browsers, and it is fully integrated with Google Apps, Google Drive, Visio, and Jive. Notism Collaboration Notism Collaboration is the ideal choice for creative teams who would benefit from having a real-time design and video platform through which team members can discuss and share their design efforts with others. You can share mockups, videos, interactive web, and mobile prototypes, or any other design-related activity. Notism provides everything needed to ensure that team members and project stakeholders are always able to participate in the feedback loop. You can also use this handy toolkit to support your task management needs, including enhanced data backup and security features. Loop11 Loop11 is the type of usability tool that individuals or teams look for when they need a quick way to perform website, wireframe, and prototype UX testing. Instead of tossing your design over the fence and waiting for a response, Loop11 enables you to carry on a continuous conversation with your customers and users. This usability tool provides heatmaps, clickstreams, task analysis, and other feedback types that enable you to make data-driven design decisions with confidence. It offers the perfect solution for all types of usability testing, including A/B testing. Patternry If you are fortunate enough to have all the UI and UX work you can handle, Patternry might just be one of the most useful tools you can have for storing your design and code assets and sharing them with your team. Patternry gives you the ability to store more than just shapes and icons. Design patterns run the gamut from shapes and icons, to code and screenshots, to guidelines and recorded or documented discussions. You can store all of your valuable design assets in a logical, carefully arranged way that not only supports your deliverables, but gives you and your team a library of reusable design patterns as well. As you can see, there are a number of truly excellent prototyping and UX and UI tools to choose from; and you can feel free to do so without fear of making a poor decision. UI design is one thing, but having an ability to verify the UX performance of that design can be something else entirely. Because of this, we’ve included several usability tools that are easy to use while providing rapid feedback of qualitative results. Whether you are happy with our selections, or you believe we have left something out, we would like to hear from you. Form Analytics by UseItBetter Form Analytics by UseItBetter is an invaluable tool for analyzing user data; particularly with respect to form abandonment, fixing forms, and improving conversion rates. This usability tool may be more specialized than most you could choose from, but it gives you the information you need to fix problems or potential problems on the spot. Form Analytics can also be a tremendous form event tracking time saver. A couple of clicks gives you all of the metrics you might need to determine which form field or fields are causing customers to drop out, and why that is the case. ... Read more
Adrian Ababei / May 12'2016