Websites sure have changed dramatically since the rise of the internet, wouldn't you agree? When competition for winning User's attention with gorgeous design and high quality, interactive content intermingling with online marketing strategies/tools has become so fierce, what do you do?
How do you resist the temptation of overloading your website so much that it will end in annoying your visitors since it will load all its "awesomeness" way too slow for their high speed lifestyles?
Here is where we come in, lending you (or just reminding you of, since we're sure that many of the following "tips and tricks" on optimizing your website for gaining some more speed are no news for you) some helpful advice on how to regain control over the speed of you site (and to gain the amounts of traffic you've been fantasizing about and the conversion rates that you've dared hoping for and not just a beautifully looking website for your (and your friends' maybe) own pride and joy only.
1. Is it Really Worth the Effort?
First things first! Before you even put together your action plan you should realize and accept that optimizing your site is not just about speeding it up: it's also about the UX and SEO benefits that it comes with.
It's about improving your users' experience while on your website and thus turning them from first-time visitors into loyal visitors (and from visitors into to customers).
Just think about it: the quicker content on your site loads, the less bandwidth your visitors use (it will reduce your bandwidth costs).
2. Aim for High Speed, Not Size
Aim for the (apparently) impossible: while your site gains (inevitably) more weight, strive to keep it optimized and efficient!
Constantly monitor its speed, while keeping up with the trends (which are building websites with rich-content pages and outstanding imagery, which risk to weight them down).
3. Go for Modular Code
You might think now: "But, wait a minute: modular code will just add even more bloat to my website!"
It's true, it will "load" it with more options for you to choose from, BUT think about modular code this way: you get to put together multiple common pieces of your code using less. Take combining two CSS classes, for instance: module coding gives you the same results with less "resources" that could bloat you website.
And that, my friend, it how efficiency looks like!
4. Draw A Line Between Development and Production Level Code Bases
Handle the two environments differently! In short: realize the difference between compressing the code and compressing the images on your website.
the code's compression depends a great deal on the language you're using (go for Google’s htmlcompressor, for YUI Compressor for CSS, or any other method that suits you)
the images' compression could just as well mean using Photoshop's "Save for the Web" tool. Keep diving into the "sea of tools and best practices for image formats, compression algorithms, quality monitoring and so on” available online.
5. Keep It Super Neat
It's a common sense practice not to "abuse" your server, don't you think?
Just imagine it "exhausted", trying to efficiently handle all the messages you send it: web fonts, JavaScript, CSS style sheets. If you "empathize" (and you should) with it, then start applying these tips for easing all its hard work:
load stylesheets at the top and scripts at the bottom
bundle up your images, nice and neat, so that it should be easier for your site to load them
6. Go From Poorly Written To Readable Code
Besides "heavy", large images, un-optimized code is another major factor that slows down your website. So, as regards best practices for writing you code (for reaching top speed), we have 2 tips for you:
if possible, call JavaScript last (by the time JavaScript starts slowing everythinf down, your site will have already displayed the markup, processed the HTTP requests, the CSS. etc.)
write identifiable, short CSS selectors: they will be far more speedy in doing "accomplishing their mission"
7. Optimize Your Fonts
Remember that we've talked about beautiful typography being forecast as one of the UI trends in 2017? Well, looks are not enough when you're approaching your site from its efficiently/speed perspective.
You need both beautiful and optimized fonts if you want to keep your site's performance high, all while enticing your visitors with gorgeous design. Here are a few tips for optimizing your fonts:
compress, compress, then compress your fonts some more (use FontLoading Api for instance)
juggle with maximum 2 fonts
go for font-face (whenever you need to access external font resources)
select only the variants you need (no need to overload you website with all the available weights and styles)
ease your site's job: go for WOFF2, WOFF, TTF, and EOF formats
use CSS inlining
8. Do It For Google
Pleasing Google and pleasing the User are (or at least it should be) the goals that drove you when you actually built your site (or your client's) in the first place, right? Well, then if you've already started to draft a “How to speed up my site” plan in your head while reading this post, you're on the right path: Google rewards developers/site owners like you!
The almighty search engine will always appreciate (and thus rank better) optimization-oriented developments practices. It's pretty logic: a happy user (“happy” for the web pages he/she accesses load content really quickly and doesn't make him/her lose valuable time) means... “happy Google”, so to say.
And how does this impact you? You do the math!
9. "Tame" Your Third Party Scripts
In a few words: don't let the “little ones” run the show on your website!
Mind you monitor all those third party scrips (Facebook “like” buttons, analytics trackers etc.) lest they should considerably slow down your website!
10. Limit Your Dependency Requests
How do you limit all those dependency requests adding bloat to your website and slowing down the downloading process? There are a couple of good practices that you should consider starting today:
use a CDN (especially if you're website's a large, heavy-content one)
use SVG or sprites methods for handling images from your style sheets
This is it, our “decalogue” of good practices for optimizing your website for higher speed. One more thing we'd like to add: there's no such thing as “a too fast website”, there's always room for even more optimization!
Adrian Ababei / Nov 30'2016
What's the ideal dosage for putting together the perfect blending of functionality and design in an app? Does functionality come first and steals design a bit of its fame or, on the contrary, it's the fine looks that catch the eye and this first good impression gets, later on, strengthened by great functionality, easiness to use and all that?
Does clean and clear, simple and elegant, refined and minimalist mean... basic?
How can you be unique in a huge mass of uniqueness and creativity bursting apps developers? What if uniqueness hinders functionality? What if functionality constraints uniqueness.
Well, these are just some of the questions you might ask yourself now, when you've got your “moment of pure genius”, you've had a greater than life idea of an app and now you face the challenge of making it steal the spotlight, of making it set itself apart from a huge crowd of great apps, all trying to woo and entice the User.
We don't have the answers to all of your questions. Still, we have 10 tips and tricks that we hope will boost light on your path (to success) and boost your confidence as an app developer:
1. Make it Unique
“Duh!”, you might say, but still, we need to stress out (over and over) the high importance of being ten times more unique than your competition.
You need to “exhale” creativity, so wrap up your app in distinctive features and appealing (nothing like your users have seen before) visuals that will help it stand out from the crowd. Pour uniqueness in all the stages of your app's development: from its name, to its graphics and to the engaging content you insert in.
You can't afford to go for “safe and easy” and “nice and cozy” when competition is as high as in apps' world!
Extract uniqueness from every feature! So what if the idea of your app has been already exploited over and over again? Think outside the box:
drop in some good sarcastic humor it that defines you
go for a totally new type of design
focus on one single detail, that has been neglected by everyone else, and cast a light upon it
put in some of you as a unique human being able to tell his/her very own unique story
and success will come, we guarantee you. Just that the road to success is paved with uniqueness, that's all!
2. Put Your Lights (Keywords) On
Put your keywords to work! They'll be the shedding light upon your app!
Still, don't rush in to pick basic info related to your company that anyone can easily find online or keywords overused by your completion already.
Stick to your uniqueness-paved road to success. Remember? Carefully choose the keywords that best speak out of your app's amazing features. Select your “own” keywords!
3. Detail It
It would be such a shame to leave out some of the awesomeness of your app, not to shed light on some of its great features now wouldn't it?
Therefore, make sure you accurately describe your app to your users! Start with a concise, yet “powerful” sentence that will present/market your app's distinctive feature (what it does that others don't, what makes it stand out, how does it... ease or brighten up your user's life)?
After he/she will have read your description, your user has to get instantly familiarized with your app's main functionality and luring features. Make sure to put in all the info that makes your app unique, to include all its beneficial features in its description and to make your text as easy to read as possible as well.
Convey the very essence (what makes it different from is previous versions an what makes it set itself apart from other similar apps), but don't spare details that could help your users get familiarized with it.
4. Think Global
Going for a cross-border distribution strategy is not an option, it's a must!
It's either a “Dare and think big!” or a “Stay connected to the globalized society!” mentality. Pick the one that suits you best and make sure you keep this in mind: create multiple versions of your app for different key markets around the world.
Adapting it to new and new environments, cultural differences.... now that's going to be a “sweet” challenge that you'll have to respond to!
5. Dazzle Them With Graphics
Again, you might think (as in the case of “uniqueness”): “Duh! Of course my app has to feature outstanding graphics!”
Well, we just wanted to double check that you're aware of how great looks sustain and enhance functionality! So, go ahead and mesmerize them with great graphics!
Let your jaw-dropping images convey the message you want convey and to stir the type of emotion you want to trigger in your users. Strategically use the colors affiliated to the mood you want to create through your app. Should your app fill up your uers with energy or rather to help them relax after a hard day at work? Make great graphics serve your goals!
6. Go For Eye-Catching Icons
“Don't judge a book by its cover!” So not true in case of great apps!
Face it: it's that tiny little icon that will determine your app's trajectory: up for fame and success or... down to “eternal” oblivion. Which one should it be?
Here are a few tips for you, for creating “attention-grabbing” icons:
lose the words: no need to get your icon stuffed with text no one can read and which, moreover, tends to outshine the icon's awesome graphics. Don't sabotage all your work from the very beginning!
keep it clear, simple and different: take that small window put at your disposal as a tiny canvas that you have to project your app's specificity on. Here, conceptualization is key if you really want it to make it stick it to your users' memory (you surely can think of some great brands which are easily recognizable though their so very conceptual logos, right?). Consider your icon as your app's logo in apps' world and, therefore, put a great deal of effort into its design!
make it simple, yet not rudimentary: you don't want your icon to have an unfinished, unpolished look. So, although you have to stick to simplicity, do feel free to play with colors, highlights, reflections, shadows
7. Keep It Simple
Remember the UI trend forecasted to make waves in 2017, the one related to “extreme minimalism”, that we pointed out to you in one of our previous posts on this blog?
Well, here we are stressing out the importance of keeping your design simple and elegant once again. Keep in mind that your users will be on the road and not comfortably seated in their desk chairs at home, facing their PCS.
So, whenever you think you've put together a minimalist design for your app, ask yourself this: “Should this be the very last variant or I can still simplify it (and thus refine) it even more?”
When it comes to UI deign, a simpler interface will definitely keep your users engaged some more. So, place your bid on simplicity! Effectively use your colors and ease your user's job, making it simple for him/her to do more with less touchscreen gestures. Keep it simple and your first-time user will turn into a regular one!
8. Make It The Easiest to Use
Considering the frenetic lives we're living and the tremendously fierce competition in apps' world (with so many other apps out there “fighting” for your users' attention and loyalty), making your app easy to use shouldn't be your goal anymore. You need to make it the easiest one to use instead!
It's not an easy job for you, we're well aware of that, but if you manage to achieve his ultimate goal, if you manage to skillfully mix and match chunky font with intuitive swiping and bright colors and to come up with a super easy to use app, then expect to see it there, on apps' “walk of fame”!
9. Build Some Buzz Around It
Spread the news about your awesome app, show it off to some of you target users, in a few words: create some buzz around it. Don't rely exclusively on its official launch for releasing it into the wild!
Strategically put together the proper “launch” environment for it:
rely on keywords-related methods (App Search Optimizatio and Search Engine Optimization are but 2 solutions you could choose from)
design the screenshots that make the perfect curiosity-stirring teasers
10. Design It For Them, Your Target Audience
That's right, no need to be a daydreamer and think that EVERYONE, regardless of age, profession, sex, level of education, location etc. will love your app!
Instead, make sure to dazzle and make a difference in your own' segment of the whole audience targeted by the apps' ecosystem. Once you've defined your target audience's portrait, keep it in your head throughout the entire app development process!
These are our 10 tips for you, aimed at helping you make your next app stand out from the crowd! How does your own “toolbox” look like? What other trends, surveys and advice from those who've already “made it big” in apps' world do you rely on in your work as a remarkable apps developer?
Adrian Ababei / Nov 28'2016
A pretty suggestive analogy, isn't it?
With all those voices, getting more and more strident, claiming that “SEO is dead” and with the major “seismic waves” shaking the digital world (that the rise of the social media optimization trends have caused), you might ask yourself: what's the importance of SEO nowadays?
Well, allow us to:
assure you that SEO is far from being dead
inform you that SEO is in fact evolving into its better version, adapting itself to all the new challenges of the digital world
Here are just some of the arguments that we've put together to help you "stengthen your faith" in SEO:
IT'S YOUR ONLINE STORE/WEBSITE THAT YOUR CUSTUMOERS WILL STEP IN FIRST
Before welcoming your potential customer into your physical store, you need to welcome him/her into your online store.
It's here that he'll be looking for reviews that would eventually influence his final decision, it's here that he/she will make first contact with your products (with their more or less eye-pleasing photos and with their more or less relevant and creatively-written, engaging descriptions, too).
OK, so you can't actually welcome your online customer with a smile on your face (you can't be online 24/7 and you might just overwork a face muscle if you stuck a warm, welcoming smile on your face for too long), but you can make him/her at least sense it. How?
A user-friendly, easy to navigate-through website is key (eye-pleasing colors, easy to read content.)
A quickly loading website
A lack of annoying pop-ups and ads
An amazing user experience, overall, is the key to success
Needless to add that all these common sense SEO-specific techniques will rank your website higher in search engines results.
For your customer it will be pretty much like in this analogy that we've come up with: shopping in a store placed close to the main entrance of a shopping mall, compared to “enjoying” a shopping experience in a store as hard to find as a clue in a hidden object game.
BOOST YOUR BUSINESS CREDIBILITY
Although almighty Facebook might have, in your opinion, eroded some of almighty Google's authority, the later still remains The One who bestows authority upon websites (and therefore businesses).
So, if, due to your SEO endeavors, your website shows up in top 3 websites that your future visitor sees the moment he/she types his specific words into the search box and, moreover, if it keeps getting listed in that top each time each he types in other words related to his searches, as well, than he'll (even if many times unconsciously) draw the conclusion that: if Google picked your website and granted it the honor of being listed among the first ones in his search list... well... then it must be worth it.
Take the search engines as the ultimate warrant with an authoritarian voice that can empower your business with credibility before your future visitors/potential customers.
ENHANCE YOUR BUSINESS BRAND VISIBILITY
Here's a short definition of the “new” type of SEO: “it’s changed so drastically that people really need to learn to think of it as less of a marketing tactic, and more of a branding play.” (Sam McRoberts, CEO of VUDU Marketing)
So, if nowadays SEO it's less about striving to stuff your website with keywords and irrelevant backlinks, so that Google should push you ahead of your competition's website, but about brand visibility, about a far more refined and nonetheless challenging version of SEO, it's more than obvious that: if your target users keep reading your brand's name, over and over again, as they search for their needed services or products online, automatically brand awareness is being build thanks to SEO.
It's the whole SEO strategy, integrated into the bigger picture of your online marketing plan, that actually makes this “miracle” possible: that your customer keeps bumping into your website each time they look for their desired products/services.
ATTRACT TRAFFIC
So, the “new SEO” is all about user-experience, about branding, about engaging content, but even so it still revolves around the same mighty goal: attracting traffic to your website.
The more visitors come in, the more chances you get to actually turn their visits into sales/subscriptions.
And yet, the real beauty of SEO is not even mere traffic at all, but the qualified leads that this traffic is made of.
Just think about it:
you're not annoying your customers off by interrupting their favorite TV shows with your TV commercial
you're not distracting (and annoying them again) your target clients with a flashy newspaper ad as they're trying to read a piece of news
Your visitors already have a certain need/interest (“sort of interest” is gold, compared to none) in the services/product that your provide so convincing them that you're the best provider is already a half-won battle.
GAIN PRICELESS INSIGHT INTO YOUR CUSTOMER'S PROFILE
This is gold!
Just think about it: you don't (again”) have to annoy your customer with phone or face to face surveys for collecting valuable data regarding him/her.
Upgrade your website with Google Analytics and then you can just “dive” into a “sea” of highly valuable data helping you put together your users' profile: where are they located, at what time of the day do they access your website, what devices do they use, what products to they prefer, how much time do they spend on specific pages on your site etc.
Then, it's totally up to you how you turn all that data into fuel for your website.
IN CONCLUSION
The importance of SEO hasn't been undermined by the rise of the social media optimization, it has simply adapted to the new challenges that social media faced it with:
it's quality content-focused
it's user experience-determined
it's brand awareness-driven
Good old SEO practices (such as non-overloading your websites with keywords and backlinks, having authoritative voices in your field linking to your website, owing a website that doesn't take ages to load and which is both easy to navigate through etc.) are more relevant than ever.
People will keep going online to book/buy/subscribe to certain services/products whether they'll be using their PCs or their mobile devices.
Wouldn't you want to be there, in the first row, greeting and welcoming them to your website rather than throwing all your hard work to trash (by focusing exclusively on social media marketing) and so giving the chance to your competitors to welcome them to their own websites?
Adrian Ababei / Nov 15'2016
There’s an age-old battle going on between the best platforms to build your website: Wordpress vs Drupal vs Joomla. Today we’ll tackle just the first two and compare some of their features in order to help you with your decision. Remember, picking the right platform for your website is essential since you’re likely to invest a lot of time and effort into it. If you already picked a platform, you can also read more about our top 8 Drupal web development tools.
In the late 2000s Wordpress was the preferred choice for most online projects, e-commerce websites, personal blogs and the preferred platform for web development companies. Back then websites featured minimal content types and most pages featured just a content block with a few buttons. Nowadays, times have changed and web development is becoming more and more focused on user experience than simplicity – this means more content types, more features and plenty of attention to the user interface.
These needs made Drupal so popular in recent years – here are a few things that need to be mentioned in the Wordpress vs Drupal battle.
Wordpress vs Drupal – Security concerns
The biggest difference in the Wordpress vs Drupal analysis is security. Plenty of government websites are built in Drupal simply because it offers site scale and enterprise-level security. Even Whitehouse.gov is built with Drupal.
On the other hand, Wordpress offers limited security as hackers can use vulnerabilities from plugins to crack their way through and wipe your website – most vulnerabilities take place at the server level. Drupal features a few notable hosting applications that help manage any security risks, Pantheon and Acquia.
Wordpress vs Drupal – Responsive development & design
The first thing you need to figure out when it comes to responsive development and responsive design is how your images are managed – your images won’t necessarily scale perfectly when viewed on different screen sizes. Both Drupal and Wordpress offer solutions to making images responsive but the solutions are different.
When working with Drupal, you can set your images sizes from the admin panel with the use of the Image Style module. The advantage here is that you don’t have to modify your PHP files to set your sizes. Both Wordpress and Drupal are designed agnostic which means you’ll pretty much build your themes however you want. You can try a starter responsive theme which can help speed up your workflow.
Wordpress vs Drupal – Mobile development and mobile themes
If you plan on having a dedicated mobile theme for your website, both platform offer starter themes to help you along. There are plenty of Drupal mobile themes available on drupal.org and as for WordPress, WPTouch is the norm.
Now, the biggest difference between Wordpress vs Drupal is how the content is handled on mobile devices – When using Drupal you can create other content fields for a page that will simply display when viewed from a mobile device.
It’s also worth stating that you should place your Drupal mobile theme in a sub-domain such as m.drupaldomain.com - Wordpress mobile themes can run on the same subdomain.
Content editing on mobile is rather easier with Wordpress, making it an excellent choice for blogs and other personal websites.
Wordpress vs Drupal – SEO concerns
Neither platform has a definite advantage when the website is built following the SEO best practices. Here are a few aspects you should keep in mind with regards to SEO:
Content Delivery Networks can be used for both platforms
Schemas can be added to Wordpress and Drupal as well
Page loading time – Drupal’s default caching feature is very powerful and it doesn’t require any additional alterations – Wordpress needs to use caching plugins.
Wordpress vs Drupal – Upgrading
With WordPress, your database will require an upgrade which can be done in the background. Your code is upgradable as well. A new version of Wordpress is released every couple of months but that’s not the problem – your plugins may not be upgraded that often which in turn can lead to security risks or lack of functionality in your website.
With Drupal the code is not upgradable but the database is – upgrading from Drupal 7 to Drupal 8, for example, may require a re-design. Your database content can be migrated to a newer version but the code will most likely need to be rewritten.
Conclusions
In the end, the Wordpress vs Drupal argument ends with the customer’s demands – your demands. Do you need different content types and different page templates? Do you need enterprise-level security? Do you need a small website or a larger, robust site with plenty of security and different user permissions?
Given these aspects, Wordpress is more suited to small websites and blogging websites while Drupal is recommended for larger projects with multiple authors and a need for tight security.
Adrian Ababei / Oct 04'2016
Mobile apps for business purposes are not just for huge companies such as Wal-Mart. Actually, more and more small and mid sized businesses are turning to mobile apps in order to grow their business and gain new clients. Here are a few reasons why you should get in touch with a mobile app development company:
Increase your visibility through a mobile app
Mobile app development can be a real advantage when considering the fact that your average US citizen spends more than two hours a day on their mobile phone. By turning to a mobile app development company, you’ll be able to tap into those long hours spent on mobile devices – this can only lead to more conversions and more sales.
A mobile app is a direct marketing channel
Mobile app development can offer many benefits such as providing your customers or potential customers with prices, general information, news, messages, user accounts and search features but one of the biggest benefits of having a company mobile app is being able to create a direct marketing channel which you can use to provide your customers with special information such as promotions or special sales. Since mobile devices now play such a big role in our lives your conversion rates are sure to skyrocket each time you offer a special promotion.
Your mobile app provides value to customers
Mobile app development allows your company to provide customers with valuable information and in the same time loyalty programs can be implemented with ease – think about allowing your customers to collect certain discounts or rewards through the mobile app. This is a great way to get more return customers and more downloads for your mobile app.
Mobile apps equal brand recognition
Mobile apps for companies can contribute a great deal to brand awareness. You’ll have a direct way to target your customers in any way you please – you can make your app informative, functional, stylish or fun. It all depends on what your ultimate goals are but all in all you should create an app that your customers will love. Mobile app development companies usually create mock-ups and do plenty of research before delivering the finished product – this is an essential part of mobile app development.
Another benefit of mobile apps you should keep in mind is the fact that if you can get your customers to interact with your app or your company, they’ll likely buy your service or product as well – this is referred to as „effective frequency”.
Mobile apps increase customer engagement
No matter what product or service you’re selling, your customers need a quick and sure way to reach you in their time of need. By having a messaging system built within your app you’ll gain a new and different way to communicate with your customers. Restaurants are the best examples – instead of calling the restaurant in order to book a table, your customers can do it with just a few clicks.
A mobile app will help you stand out from competitors
Although hugely popular, not all small businesses have mobile apps – this is your chance to shine. By being one of the first or even the first to get a mobile app going you’re sure to gain some attention from customers and partners alike.
Customer loyalty
One of the biggest reasons why you should get a mobile app for your company is improving your customer loyalty. Mobile app development allows your company to be at your customer’s fingertips all the time which in turn can turn your brand into something your customers will respect, rely on and even love.
These are just a few ways in which a company can benefit from having their own application – improving customer loyalty, customer engagement, brand awareness and visibility.
Adrian Ababei / Oct 03'2016
There’s an age-old question that once in a while pops in a manager’s mind:
Should we hire a freelancer or go with a specialized agency?
Here are six reasons why it’s better to go with an agency instead of a freelancer.
Number one: you save money in the long run
Freelancers are quite popular nowadays simply because they tend to charge less than a full agency but as the old saying goes, “you get what you paid for”. Unfortunately, the price factor is often decisive in the freelancer vs. agency battle, leaving some customers unsatisfied with the work they receive. This is not necessarily the fault of the freelancer or the manager; it’s a combination of factors that can lead to dissatisfaction, such as quality of work, time necessary to complete the tasks, dependability and general return of investment. One of the most important aspects to consider is the project itself: Is it a big project? Does it require multiple skills? How fast do you want it to be implemented? Pound for pound, you get a bigger ROI by working with an agency than working with a freelancer when tackling bigger projects. For example, small changes to a website can be done by a freelancer but if you want to build a website, it’s always better to go with an agency.
To sum it up: Go with a freelancer if you have smaller tasks like a simple logo change, go with an agency if you need multiple specialized services
Number two: you save time
Working with an agency instead of a freelancer can save you valuable time, simply because agencies tend to have 5 or more employees working together to achieve a common goal. Most freelancers have regular 9 to 5 jobs and freelance on the side during the weekends. Agencies can ensure that different portions of your project are tackled simultaneously by different employees with appropriate skill sets.
To sum it up: If you have a time-sensitive project, it’s a good idea to work with an agency. If time’s not an issue, you can hire a freelancer.
Number three: You can expect better results
All agencies, big or small have a reputation to live up to. A freelancer doesn’t need that because he can jump from one project to another without any loss of image. That being said, you can expect better results from an agency than from a freelancer. Another aspect you need to keep in mind when getting a price quote from an agency is that you’re being offered talent from multiple experts in one place. Sure, you can hire multiple freelancers as well but in 90% of the cases it’s better to work with an agency with integrated IT services and their own project management.
To sum it up: If you don’t want to become a project manager for three or more freelancers, it’s better to let the agency handle the extra work in managing teams so you can simply sit back and enjoy the results.
Number four: Delays are rare when working with an agency
Most agencies have five or more employees and use clever management to ensure they respect deadlines. On the other hand, freelancers work only when they are able to – this can often lead to hiccups along the way and as we all know the speed of delivery can either make or break a project.
To sum it up: Agencies always respect deadlines; freelancers are not always able to.
Number five: You get more talent for your buck
At a glance your average website will require multiple talent or multiple experts from different fields of work: you’ll need a programmer, a graphics artist, a copywriter, a content writer, a SEO expert and a marketing expert. You want to get the most out of your investment and as such you want to hire people that are talented and dedicated to their work. Of course, you can find freelancers which are talented in one or two fields but in the end this will leave wide gaps in your project – a graphics artist may not be a great SEO expert and a marketing expert may not be a very good programmer. If you’re thinking of hiring all these separate experts for a project then you’re in for a surprise: digital project management is difficult and time consuming.
To sum it up: As a rule of thumb, it’s better to work with specialized individuals. If you don’t have ample time to spare on project management, it’s better to let the agency handle it for you.
Number six: You are a client, not a side job
As mentioned before, most freelancers have regular nine to five jobs and do other projects on the side or in the weekends. Sometimes they will be unavailable to answer your calls or e-mails, sometimes delays can happen due to their regular job. A freelancer will never abandon his or her regular job for your project; you won’t be a priority to them. On the other hand, for an agency you will always be a priority, from quote to completion.
To sum it up: If you want priority and quick delivery, talk to an agency.
Both agencies and freelancers have their advantages and disadvantages when it comes to online projects but in the end it all depends on what your ultimate goals are and the size of the project.
Adrian Ababei / Aug 16'2016
Dynatrace, a leading company in the application performance management field states that the average loading site for a website has increased over the years instead of decreasing, as previously expected.
Websites are getting slower, not faster
On average, websites are 7% slower than last year and this figure is growing fast. This phenomenon is especially prevalent in developed countries and it’s currently driving conversion rates down by up to 22%.
The reasons behind this phenomenon seems to be complex design trends implemented by both agencies and freelancers in the developed world. Dynatrace tested over 300 leading websites based in the USA, Australia, Spain, France, Germany and in the UK for the past 12 months. These response tests were done every 10 minutes for the past year and the figures are staggering.
Slower websites, lower sales
Other research related to website loading time states that 90% of users expect their website to load in three seconds or less. A whopping 46% of these users will abandon their page if it takes longer than 3 seconds to load. As such, it’s extremely important to have a fast-loading web page as this can also have an impact on your revenues.
Dave Anderson from Dynatrace states: “While lags in performance are concerning, they also present a big opportunity to measure response times more closely and link it back to revenue. Take a leaf out of Nordstrom’s book – it has measured that a mere 0.5 second slow-down in site load time equates to an 11% reduction in site conversion. This is precisely where retailers need to focus internal conversations: looking at site performance and how it impacts revenue.”
And the opposite is true as well – increase your website speed by just one second and your conversion rate will get a 22% boost!
Websites from the Scandinavian countries and from China made improvements over the past year but they are still far from countries such as the US or UK. France had a 20% speed increase over the last year, moving to the second place in the world, close behind Spain.
Last year, the UK boasted the world’s fastest websites but in 2016 moved into third place. Australia currently has the slowest websites in the western world with an average of 8.2 seconds loading time. It remains to be seen if this shift will have repercussions on their economy overall.
Country
2015 response times
2016 response times
% change in homepage response times (2015 – 2016)
% change in average no. of third party hosts (2015 – 2016)
% change in average no. objects (2015 – 2016)
% change in average page size (2015 – 2016)
Global
4.2 secs
4.5 secs
+7.14%
+18%
+7%
+8%
Spain
3.1secs
3.3 secs
+6.45%
-5%
+5%
-13%
France
4.4 secs
3.5 secs
-20.45%
+20%
+15%
+25%
United Kingdom
2.9 secs
3.7 secs
+27.59%
+22%
+15%
+18%
United States
3.4 secs
3.9 secs
+14.70%
+12%
+7%
+5%
Germany
3.7 secs
4.3 secs
+16.21%
+5%
+8%
+18%
Norden
5.2 secs
4.4 secs
-15.38%
+16%
-17%
+5%
China
5.8 secs
4.9 secs
-15.52%
+15%
+7%
+18%
Australia
5.4 secs
8.2 secs
+51.85%
+27%
+13%
+6%
In 2016 most designers integrated complex design schemes into their projects. Most of these included a large number of interactive objects, bigger images and video. Dynatrace uses Apple’s website as a best-practice example. Apple’s websites are some of the fastest in the world without limiting user experience in any way or form.
Keeping it simple works
When it comes to websites, the old saying „less is more” applies perfectly and bigger isn’t always better. A smaller number of objects, smaller pages and optimized images can not only improve your overall user experience, but your revenue as well. Considering these factors, optimizing your website’s speed is well worth the investment.
Adrian Ababei / Jul 01'2016
HTML5 is a technology for the next generation web applications and has come with a lot of new features to the web. In the mobile app world HTML5 applications are widely used. Besides a lot of features, HTML5 has brought to the table various attack vectors. Before talking about security concepts of cross domaing messaging, we need to understand the basics of the HTML implementation of cross domaing messaging.
Cross domain messaging
Because of the same origin policy restrictions before HTML5, sending messages between Windows was only possible if both Windows used the same protocol, port, and host. With the introduction of HTML5, all those restrictions are gone and we can now pass messages across domains without having to worry about Same Origin Policy restrictions. HTML5 has a new method called postMessage(). Using this, we can pass messages between windows regardless of their origin. Below is the syntax of postMessage().
Sending window
otherWindow.postMessage(message, targetOrigin, [transfer]); ‘otherWindow’ is a reference to another window. ‘Message’ is the message to be passed to the receiving window. ‘targetOrigin’ refers tothe URL of the receiving window. If we don’t have any specific preference, we can specify it as “*”. Specifying “*” as ‘targetOrigin’ has some security implications we will discuss in later sections of this article. ‘Transfer’ is optional.
Receiving window
When otherWindow.postMessage() is executed, a messageEvent will be dispatched at the receiver window. We can receive the message dispatched by the sender using the following code snippet. window.addEventListener("message",receiveMessage, false); function receiveMessage(event){ if (event.origin !== "https://goo.gl/Brmfny") return; // ... } From the above code snippet, we can access the data and origin of this message as shown below. ‘event.origin’ gives the origin of the message (the URI from which we are receiving this message). ‘event.data’ gives the actual message being sent. Now, we have got some basic knowledge of what cross domain messaging in HTML5 is and how it is implemented in the applications. Let us now see the security implications of cross domain messaging. For demonstration purposes, we have set up the following lab. A: https://goo.gl/SN1Ow B: https://goo.gl/MTtd As we can see, we have two different ports on the above two URLs. The first URL is running on port 8387 and the second URL is on the default port 80. So, it is obvious that they have two different origins, since the port numbers are different. In our lab setup, A is the message sender and B is the receiving window. We are going to load the second URL https://goo.gl/MTtd as an iframe in the first URL. I can send messages from the domain https://goo.gl/SN1Ow to the domain https://goo.gl/MTtd using the postMessage method. We can check it by clicking the “Send Message” button as shown below. The iframe which is loaded into the first URL is from a different origin, but we are able to send a message to it using HTML5’s postMessage() method. Now, let us look at some scenarios where this postMessage() implementation can introduce vulnerabilities into our applications.
Case one
Code at sender:
receiver.postMessage('Hi There..!', '*');< When the sender has the above code where he specifies the target origin with a wildcard “*”, an unintended recipient (window) can receive this message from the sender. Since the receiving window is listening for incoming messages, anyone can load it into an iframe and can listen for the messages coming to it. So, it is a bad idea to give a wildcard when passing sensitive data to the receiving windows.
How to fix this:
It is possible to fix this just by adding the specific target in the target field. So, in this case https://goo.gl/MTtd is the only origin that can receive this message. This is as shown below. receiver.postMessage('Hi There..!', ' two
Code at receiving window:
function receiveMessage(e) { do something..! } In the above code, we are receiving the message from the sender and directly processing it without checking who sent this message. It is always important to check the origin of the message to prevent receiving messages from unauthorised senders.
How to fix this:
function receiveMessage(e) { if (e.origin !== "") return; do something..! } Always validate the origin from which you want to receive the messages. In our case, we want to receive messages only from . So, we are making a simple check to see if the message is coming from using the property event.origin. If this is not matching, we won’t receive the message.
Case three
The next attack vector is the infamous cross site scripting. Both the sender as well as receiver should always validate the messages being passed. If the data is inserted into HTML DOM without proper validation, then the application becomes vulnerable to DOM based cross site scripting. The following code snippet shows how an application may become vulnerable when a malicious message is received from the attacker and it is inserted into the receiver’s HTML DOM using innerHTML property.
Sender
receiver.postMessage("< img src='x' onerror=alert(1); >", ' receiveMessage(e) { if (e.origin !== "") return; messageEle.innerHTML = "Message from localhost:8387: " + e.data; } When the above code is executed, it causes an XSS in the receiving window as shown in the figure below.
How to fix this:
The easiest way to fix this issue is to assign the data value to an element using textContent rather than using innerHTML. This is done as shown below.
Sender:
receiver.postMessage("< img src='x' onerror=alert(1); >", ' receiveMessage(e) { if ( e.origin !== "") return; element.textContent = " Message from localhost:8387: " + e.data; } When the above code is executed, we should see the text displayed in the receiving frame as “data” rather than code.
Source: http://www.developer-tech.com
Adrian Ababei / Jun 29'2016
Angular 2 is becoming more popular worldwide and because of that, people are starting to learn how to use it. It doesn’t matter if you’re a beginner or an advanced coder, there are some practices you should follow when using Angular 2.
CLI/Boilerplate
If you’re just starting with Angular 2, use angular-cli (npm i angular-cli -g). It’s based on ember-cli. You can generate a good example with ng init project-name. This command will initialize a new Angular 2 application. This application should already be following all the best practices from the official Angular 2 style guide. Besides that, it installs the required npm dependencies. It also creates unit testing and e2e testing scripts. Long story short, it does everything that is required to start a new Angular 2 application. If you don’t like the directory structure or system.js you can use the best starter kit angular2-webpack-starter or other boilerplates.
Build the app
Angular2 uses Rollup to build bundle there is next-generation ES6 module bundler. A good example is browserify or webpack, because there are more loaders and plugins available for support Rollup feature set eg: rollup-loader and rollupify. Rollup can make smaller code however webpack and browserify have rollup-loader or browserify rollupify transformer which you can use to shrink your bundle. In the near future, it is going to be recommended to use @angular/compiler(-cli) and @angular/platform-browser which was made with template compiler, precompiled templates, and styles. Follow this example to speed up your bundle by more than nine times!
Server side (universal) rendering
Universal means rendering pages on both the server and client side. It usually implies the use of frontend JavaScript and Node.js because they allow for the re-usage of libraries, allowing browser JavaScript code to be run in the Node.js environment with very little modification. As a result of this interchangeability. If you want to use Typescript in Nodejs, we don’t suggest using ts-node or any node module which hacks the require.extension. Use “browserify – node” or webpack with the right configuration to generate server side build.
IDE/Editor
We use Sublime and official Microsoft plugin but we think atom and vscode (unofficial editor of Angular 2) is also ideal for development, but much slower than Sublime. If you prefer complex IDE then use webstorm which has Angular 2 Support.
Linting
We suggest using tslint, it’s the best when using typescript with codelyzer and ng2lint. Valor-software has a very useful lint project, tslint-config-valor contains all rules explicitly.
Documentation
We use typedoc for generating the documentation, there’s a great little tool that allows us to generate HTML documentation based in our TypeScript files similar to what JavaDoc does. This will compile all the documentation (classes, namespaces, functions, etc.), it will be put under the doc folder in the current directory where that command is ran.
Testing
Karma has an over complicated architecture. We suggest using only jasmine (mocha isn’t working yet). Never run tests on ts files, first you need to compile. Unfortunately ts-node is really slow, even with the newest versions. Our tests run with ts-node 10s long and with compiles js only 1s.
TypeScript vs ES6
We use typescript in an Angular 2 based application, and we usually use rxjs too (it is also written by typescript). When you write code, which most often depends on node modules: express, node libs and middlewares use ES6, a lot of packages don’t have typing definition (d.ts). Typescript compiler (tsc) compile the fastest code, but sometimes not the standard way.
Naming Conventions
Naming standards help developers to understand each other’s code better and keep everything tidy. There are naming conventions for file and folder names as well as for class names and selectors. Some examples: – File and folder names should use dash-case and have a suffix which refers to their functionality, like: *.component.ts, *.service.ts *.interface.ts – Selectors should also use dash-case and have a prefix, which functions as a namespace. – Classes (components, services, directives, etc.) and interfaces should use camelCase and have a suffix which refers to the type of the class, like: *Component, *Service, etc.
Directory and File Structure
Directory and file structures are really difficult to keep standardized. The demands always change project by project. In the official style guide you use shared folder (for common components, styles etc.).
Redux
Someday your application will grow up so you have to make a good architecture not only for a big set of components and services. You must handle the states and actions. I think redux is the best container for your app, because all frontend developers know it.
Performance
It is important to know that if you have a component that only expects immutable data to be passed in via a property, you can further optimize rendering speed by adding changeDetection: ChangeDetectionStrategy.OnPush to the component.
Reactivity
Rxjs is a great library and it is much better to depend on library, than a framework. Frameworks change very often, but libraries have a more stable API. Use @ngrx extension like @ngrx/store and@ngrx/router to make a better use of reactivity.
Router
Don’t use the deprecated router (@angular/router-deprecated), Angular 2 is in release candidate status but also has a deprecated router too. We suggest the use of the new router (@angular/router) or @ngrx/router reactive solution, which is the greatest yet. Angular 2 is in release candidate status, but this practice will be useful in the future.
Adrian Ababei / Jun 27'2016