A lot of devs are now using CodePen for a variety of front end web development tasks and tricks. CodePen can be used to create Pens which are made up of JavaScript, CSS and HTML. A great thing about CodePen is that you can see your results immediately, effectively making this tool indispensable for any front end dev. But what can we do if we combine JavaScript and CodePen?
1. Add any library you need in one place
You can add custom settings to any Pen you create: you can set the External JavaScript you need or want to use. Just go to the Quick Add dropdown to do it or simply start typing the required library and a variety of choices will appear. This way you’ll be able to find thousands of CDN hosted libraries.
2. Write in ES2015
Practice your ES2015 skills with CodePen by simply enabling the Babel JavaScript pre-processor. Now you’re able to use ES2015’s features and Babel will process them into an older version of JavaScript, enabling it to work everywhere. You can also do it without using Babel whatsoever but it may lead to browser support issues.
3. You can use the console for debugging and output
With CodePen, you can also use your browser’s DevTools if you set its context to demo. CodePen also features a built-in console which you can use. Keep in mind that your URL might change when you close or open different code panels. There are four numbers which stand for HTML, CSS, JS and Console respectively so the URL parameter ?editors=0001 stands for Console open while the others are closed. Replacing the last number with a 2 maximizes the console. This way you can share a Pen when the output is intentionally set only for the console.
4. Use JSX and React
Babel also supports JXSX so if you add ReactDOM and React you’ll be able to build in react as well. Apart from Babel, CodePen also offers LiveScript, TypeScript and CoffeeScript. TypeScript is able to process the JSX as well.
5. You can also include other pens as resources
Using JavaScript for another Pen is also possible by simply dropping the URL of your other Pen in the External JavaScript function and that’s all there is to it. You’ll be able to create multiple Pens that use the same JavaScript – this way it will be easier to update it when necessary.
This little trick also works for CSS in the same way. When it comes to HTML you can include the Pen URL in triple brackets within the HTML itself.
6. Get Ajax from other Pens
With CodePen you can use other Pens as resources and you can access the code from Pens located at certain URLs. If you want to access just JavaScript from another pen, you can add .js to the end of the URL you’re targeting.
This technique can be especially useful when storing data in another Pen so you won’t have to meddle with the JavaScript code in the Pen you’re currently working on.
7. Learn new stuff with CodePen
Devs can use CodePen as a learning tool as well – it’s real code which you can write, edit but also see the results of. You can create Pens for learning purposes specifically but our favourite is the Professor Mode which allows other devs to watch you code in real time and give pointers through the built in chat system.
Collab Mode is another useful tool which can be used for teaching purposes – this mode allows multiple people to work on a Pen concurrently for hands-on teaching.
8. You can see coding errors in real time
Another feature we love about CodePen is that you can see any errors in your code right in the editor itself. This feature also works for JavaScript – the lines with errors will be highlighted and a special icon will be revealed. Clicking the icon will reveal the error message which is a huge help in understanding the problem and fixing it.
CodePen also tries to prevent executing infinite loops which can lock your browser and prevent you from saving your Pen.
9. Lint your JavaScript
CodePen can check your JavaScript code with JS Hint as well. This is a tool which detects potential problems or errors in your code. Use this tool to uncover non execution stopping errors most devs tend to miss. If the error message doesn’t provide enough help for you to fix it, there are built-in “Google it” links to find more information.
CodePen also lints your JavaScript which is great because if you’re using a pre-processor, it will lint the code for linting warnings. If JS Hint finds any issues it will show you the problems directly in the code.
10. Clean code – easier work
CodePen also has a feature which can help to clean up your code. This feature works with JSX as well.
Adrian Ababei / Jun 20'2016
According to Content Marketing Institute’s latest report, only 28 percent consider their efforts effective. That’s less than B2B or B2C content marketers reported, suggesting that enterprise businesses face some unique challenges when it comes to building an effective content marketing campaign. To help combat these challenges, here are five primary objectives content marketers should target when working with an enterprise-level business.
1. Staying organized.
Content marketing is a complicated task for businesses of any size, but enterprise marketers seem to have the most difficulty staying organized. Only 31 percent of enterprise marketers actually have a documented strategy. And fewer than half have a dedicated content marketing group. This likely poses major challenges for managing all the component parts of a successful content marketing campaign, such as: • Setting goals • Creating content • Managing social media • Promoting content • Analyzing your efforts Content marketing is a continuous process that only works well if all these tasks are consistently managed. Building a team that’s accountable for each task is an invaluable objective in making content marketing more effective in an enterprise environment. The team can develop and manage a documented strategy, which makes it possible to measure, adjust, and improve your efforts later on.
2. Marketing to diverse audiences.
Enterprise companies have more audiences to target than any other kind of business. The average number is six, but some target more than 10. It’s good that enterprise businesses are already making the effort to develop targeted content that suits many different tastes, but diverse marketing is still a major challenge in and of itself. Enterprise content marketers need to go beyond developing several buyer personas and creating a customer journey for each with their content. They also have to make sure their efforts are properly segmented, which is not an easy task with six or more audiences to reach. That’s why it’s important for enterprise content marketers to take advantage of various marketing and segmentation tools to create the most personalized experience possible -- for their whole audience.
3. Finding the right talent.
Gaps in knowledge and skills of the internal team, finding trained content marketing professionals, and producing a variety of content are all bigger challenges for enterprise marketers than other businesses. Even major companies with a large pool of employees can’t get optimum marketing results without taking advantage of the right outside talent. Inbound marketers as a whole have been increasing their use of outside talent for their marketing content: This is an important strategy that enterprise content marketers need to pay attention to if they want to overcome the gaps in knowledge of their internal team. The right freelance or agency talent can provide a quick solution to the need to create a variety of content as well. Writers, designers, programmers, social media specialists and more can be found affordably online and the potential return on investment (ROI) can be high compared to retraining current employees or hiring new ones.
4. Communicating across departments.
Enterprise companies, much more than other B2B companies, say the lack of integration across marketing is a major challenge. This issue makes sense considering the traditional structure of enterprise companies – departments are often siloed, making it difficult to effectively collaborate on marketing tasks. Content marketing requires close collaboration between diverse teams, such as: • IT workers • Writers • Sales teams • Designers • Public relations Communicating across departments is an objective that enterprise-level content marketers need to focus heavily on. The task becomes easier if: • You put content marketing leaders in each department in charge of encouraging communication • You make efforts to meet regularly and discuss your campaigns with employees involved • You take advantage of marketing platforms and communication tools that simplify remote collaboration
5. Getting buy-in.
Enterprise B2B content marketers also struggle with getting buy-in/vision from people in charge in their organization. This disconnect between the apparent value of content marketing and its adoption is also reflected in marketing spend based on company size: The bigger the business, the less spent on inbound strategies. The fact that enterprise companies struggle more than other businesses to get budget and buy-in for content marketing makes sense if you consider what’s involved. For a small business, it only takes one person understanding the value of content marketing to revamp the business strategy. When you’re working with business executives who’ve spent their lives marketing outbound, on the other hand, getting buy-in and budget can be a challenge. Meeting this challenge should be a major focus for enterprise content marketers who want to have an impactful strategy. The best way to do this is to demonstrate the benefits of content marketing for your business. Proving ROI is the most powerful way to get buy-in and unlock budget -- marketers who show ROI are more likely to secure bigger budgets year-to-year.
Source: https://www.entrepreneur.com
Adrian Ababei / Jun 13'2016
The internet is constantly changing and speed is quickly becoming the major metric of progress and a key indicator for website developers. Here are a few new features which can help you speed up your website and reap the rewards of faster internet.
HTTP/2
HTTP/2 was first published in May 2015 and has been supported since the second half of 2015 – HTTP/2 is a new and improved version of the WWW protocol. HTTP/2’s main improvement is the ability to cover multiple requests with a single connection – this improved ability, called multiplexing has the capacity to revolutionize the world of web designers forever. Current techniques used such as Data URIs and sprites won’t be used anymore. HTTP/1 used to be efficient when loading one large image but when it was necessary to load several smaller images the situation changed drastically – it simply wasn’t able to cover multiple concomitant requests. The new version improves this situation and HTTP/2 can handle multiple simultaneous requests with ease.
HTTP/2 compresses headers before requested data is sent, which ultimately simplifies the transport by a great deal. This newer version is also non-textual and binary, unlike the previous version – this improves performance by a whopping 50%!
The difficult thing about upgrading to HTTP/2 is not the HTTP itself but the fact that browsers only support it over SSL. So if you want to implement HTTP/2, the first thing you should do is get a SLL certificate. Once you have the SSL certificate, you can implement HTTP/2 on your own if you have administrator rights for your server. Otherwise, it depends on your server hosting or web hosting company.
The SSL Certificate
SSL certificates encrypt the connection between a client and a server. Getting your own SSL certificate is not as hard as you think – you can actually get one for free with Let’s Encrypt.
Let’s Encrypt is a relatively new authority when it comes to SSL certificates – their ultimate goal is to eliminate all manual processes required to obtain a certificate. With Let’s Encrypt the whole process is automated and finished in just a couple of minutes. You can also get a certificate through your server hosting company or web hosting provider.
Brotli
Brotli was recently introduced by Google – this new compression algorithm will reduce the size of transported data, effectively increasing the speed of your website. Compared to other compression solutions, Brotli offers a 20 to 25% better compression ratio. As such, webmasters can save up to 40% on HTML files traffic and around 25% on JavaScript and CSS related traffic.
Unfortunately, Brotli is only supported by Firefox and Chrome at the moment but other major browsers will follow soon. Major servers such as Node.js, Apache and Nginx all require a packet installation – there’s no server offering Brotli by default at the moment.
Content Delivery Network
A Content Delivery Network or CDN for short is a set of servers located in different parts all around the world. These servers all contain a replica of your website and all its assets – software, videos, images, etc.
When someone accesses your website, the data is loaded from a server that’s closer to the visitor, thus increasing your website’s loading speed.
Another advantage to CDN systems is the improved reliability of your website – the content is spread around many other servers which means that your hosting server doesn’t have to bear such a large load of traffic. Usually, websites that use a CDN system will load 50% faster compared to regular websites which use only one hosting server.
Adrian Ababei / Jun 07'2016
Since the early 2000s mobile app development began to gain a lot of attention from app development companies as well as programmers. Here are a few tips for mobile app development companies and app developers.
Mobile app development and web development
Almost all mobile apps intract with an API. Mobile app development companies are very familiar with these concepts. Developers will handle all data and tech requirements necessary for mobile app development but the bottom line is that generally speaking there’s no difference between building a mobile app and building a web application. In certain cases both will use the same code base.
That being said, there are a few differences worth noting – these can make the transition from web development to mobile app development much smoother. One of the most important things to take into consideration when dealing with mobile app development is the fact that web apps can be updated very quickly, whenever needed while mobile apps can take many weeks to update. Also, some mobile app users can simply opt not to update their apps.
What this means is that the API will automatically have to support multiple versions of your app. This is not a big problem as there are plenty of solutions you can implement but it’s better to keep it in mind when designing the API itself.
Another problem you can encounter with mobile app development is authentication – more and more websites are switching to token based authentication instead of cookies. Most mobile app development projects will benefit greatly from using the token-based approach.
Here is a list of pointers you should follow when building an app API:
Keep in mind that users may own multiple devices and try to build your app accordingly
Mobile devices tend to have slower internet so response objects should be designed accordingly
Test every API updates with all supported app versions
When dealing with mobile app development there are many small details you need to consider but the basics are the same with web development.
Technology for mobile app development
Several frameworks can be used in order to enable certain technologies such as Javascript, CSS, HTML for mobile app development. These are called hybrid apps – most of them are written using Ionic, Phone Gap, Cordova and others.
By using frameworks you’ll be able to write the app in familiar programming languages and they are also cross-platform. This is a great advantage for web developers as well as web development companies – instead of having to build an Android app and an iOS app separately, you can share the code between the two platforms, thus saving time and money in the process. That being said, hybrid apps do have some disadvantages – this is why React Native is essential.
React Native was built and is currently maintained by a team from Facebook – this technology is very similar to the React framework so if you are familiar with React then you should definitely check out React Native. This technology has all the cross platform benefits of hybrid apps and runs natively, making it a top choice for mobile app developers.
Also, the UX/UI can be platform specific or shared, according to the needs of the developer. This is a very powerful tool which can handle both small as well as larger projects.
Specialized web development
Mobile app development is getting more popular nowadays and there’s a lot of money and interest in it but it doesn’t mean that every company needs a mobile app – having a mobile responsive website is much more important than having an app.
For certain companies, having an app might be a fad but having a fully-responsive website is a necessity. As a developer, if you’re not building mobile apps you’ll most likely still have to build mobile websites.
Considering the growth and popularity of services such as Squarespace and Wix, companies need to focus more on building web applications rather than simple websites.
Here is a list of tips you can implement in order to stand out in the crowd:
Focus on building complex web applications rather than simple websites
Try to build websites within a certain niche that has not yet been commoditized. This can include websites that provide highly customized user experience or sites focused on performance
Offer other services as well – search engine optimization is best done when building the actual website
Help your clients migrate content from the old website to the new one
Conclusions
When dealing with mobile app development it’s always a good idea to start off small, maybe with a tiny hybrid app for testing purposes. Implementing your web development skills onto the mobile app development stage is a huge benefit for all parties involved, including the clients.
Adrian Ababei / May 27'2016
They say that the difference between a beginner and a pro is the tools they use. We tend to agree with this saying so we decided to come up with 14 of our favourite web development tools we use here at OPTASY.
SHRINKTHEWEB.COM
If you’re interested in promoting and administrating a website, ShrinkTheWeb.com is the way to go. This little tool will help you take automated screenshots of your website for free! (Restrictions and limitations may apply to size for example)
Shrinktheweb.com provides the fastest capture time possible even with their free plans. For less than $10 a month you can get other interesting features as well: inside page analysis, full length previews and custom sizes. You can also schedule automated captures with any plugin you use and test responsive websites whenever you need it. Shrinktheweb.com is a great tool for beginners and pros alike!
MUFFINGROUP.COM
Muffin Group’s BeTheme is an elegant, easy to use and extremely versatile wordpress theme library which you can use to customize your website in any way you want. With BeTheme you get unlimited backgrounds for each section, 7 different header versions, a layout generator, 4 grid layouts and 12 predefined skins.
BeTheme works with all available browsers including Opera, Firefox, Chrome, Safari, Internet Explorer – it’s 100% fully responsive and it looks awesome on any mobile device.
BeTheme also features video backgrounds and parallax effects – you can upload images, text and videos in your backgrounds for awesome looking sections.
BeTheme’s powerful admin panel will guide you through the designing stages, making it extremely easy to use. All themes featured on BeTheme are fully optimised, making your site very fast and easy to load.
FLYZOO.CO
Flyzoo features a Responsive Chat system on Mobile, meaning that the layouts used will adapt for mobile devices as well. You have 4 different mobile modes to choose from when adapting your website for smartphones.
You can also create a custom page on the site and build a dedicated page for the mobile version – after that you can add custom stuff like images, text, video and menus. The best part about Flyzoo is that you don’t have to start from scratch – this tool provides you plenty of customizable templates which should help you build your page in minutes!
SIMBLA.COM
Simbla.com is a free website maker platform which requires no downloads or installs. You can get your website up and running in just a couple of minutes – all you have to do is sign in, choose a template you like, purchase a domain and then start writing your content. Simbla’s intuitive interface and the drag and drop system allows you to create new pages easily.
ICONFINDER.COM
IconFinder.com is the largest icon marketplace – here you can find material icons, flat icons, glyphs and a lot of other goodies. You can also opt for customized or personalized icons if you decide to work with a designer from Iconfinder.com. In order to get a personalized icon set, all you need to do is fill out a design brief which includes a presentation for your company, a presentation for your product and your target audience – this will help the designer build an accurate image of your needs.
After finishing this step, all you need to do is set a deadline and price quotes from different designers will start pouring in. All designers on IconFinder.com are handpicked by the team so it’s a good idea to give them ample time to do their work. Payment for the designers on iconfinder is also mediated by the platform, ensuring safe and easy transactions.
ACTITIME.COM
ActiTime is a time tracking system designed for companies. This software counts the minutes spent on work and compiles reports, which can be very helpful to properly manage your time and budget. Actitime also provides reports on employee performance and the progress of your current project.
THEMIFY.ME
Themify is another great wordpress page designer with an intuitive interface. With Themify you can create multiple editable layouts while in the same time benefit from its ample features which can enhance your website’s appearance and functionality.
The Live Preview mode allows you to see any changes done to your website in real time – other add ons and features include infinite background, slider pro, image pro and many others.
OPTINMONSTER.COM
OptinMonster’s form builder is one of the best in the industry – it’s very intuitive and easy to use, plus heavily customizable. You can change the images, colours, messages background and other things as well.
OptinMonster also allows page level targeting, which can help you by segmenting your email lists into different categories which are able to see different forms on your website. OptinMonster users report a whopping 200-600% increase in email signups!
PIDOCO.COM
Pidoco is one of the world’s best prototyping tools. It features a library with over 400 UI shapes, project archiving, web and mobile projects, enterprise grade security, unlimited reviewers, unlimited users and unlimited screens. A subscription will set you back $12 a month for two active projects. If you need more than that you can upgrade your monthly plan for more perks.
XFIVE.CO
Xfive is a service made up of a team of experts from different fields such as graphic design, copywriters, content writers and programmers. They will take your ideas turn them into reality.
48HOURSLOGO.COM
As the name states, this website provides users with custom logo designs in 48 hours or less. Users can even launch logo design contests to see which designer best fits their needs.
BOWTIE.IO
Bowtie.io is a service designed to be used by developers and programmers. Here you’ll find a wide set of integrations which can help you reduce loading time and security risks. You can also use Bowtie to build custom interfaces for your clients or for your projects.
H-CODE RESPONSIVE & MULTIPURPOSE WORDPRESS THEME
Themezaa offers plenty of WordPress templates to build your site. It’s pretty easy to use and fully customizable, with plenty of other useful features. With Themezaa you can change layouts, colours, fonts or build your website from scratch with the visual composer. You can also use shortcodes to make your website really stand out in the crowd.
THESQUID.INK
Squid Ink offers users pixel perfect icons that stand out through their clean and flat design. There are three main types of icons: solid, line and flat. The site is pretty well categorized so you shouldn’t have any problem in finding the icons you need.
Feel free to write your own reviews of different tools in the comments section. Which ones are really worth the money?
Adrian Ababei / May 26'2016
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.
Adrian Ababei / May 24'2016
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!
Adrian Ababei / May 23'2016
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.
Adrian Ababei / May 20'2016
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.
Adrian Ababei / May 12'2016