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
Adrian Ababei / May 25'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
What Are the Cross Browser Testing Tools Worth Taking for a “Test Drive”? Hint: Start with Browsershots
Adrian Ababei / May 20'2016
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.
Adrian Ababei / May 19'2016
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.
Adrian Ababei / May 17'2016
Adrian Ababei / May 16'2016
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.
Adrian Ababei / May 13'2016