10 Reasons Why You Should Switch to Opera Browser Right Now

Opera is one of the most underrated browsers out there. Even though it usually pops up in the most-popular browser lists, only a fraction of total users use it (W3schools puts the figure at around 1% for 2016). Still the numbers add up to about 60 mil users on desktop and twice that on Opera Mini for Android.

Despite its lower usage numbers, many of the awesome features you use in your favorite non-Opera browser are either introduced by Opera or turned mainstream by it. The speed dial, private/incognito window, pop-up blocker, tabbed browsing, ability to turn off images and browser sessions are some of the features that originated from Opera.

I have extensively used both Firefox and Chrome and switched to Opera almost a year ago and never looked back. I found many good reasons to ditch other browsers in favor of Opera, and in this post I’ll share all of them with you.

14 Opera Flags Tweaks for Better Browsing Experience

14 Opera Flags Tweaks for Better Browsing Experience

Similar to other browsers, Opera also comes with experimental features that can enhance your browsing experience. Whether you… Read more

1. It’s not a resource hog

This is definitely a deal breaker/maker if you tire of browsers like Chrome and Firefox slowing down your PC. Opera is a resource-friendly browser that focuses on using less of your PC and Internet resources.

Many of its features are made to strip down resource usage (more on them later). As a result, you experience fewer hiccups and hang ups when on Opera.

2. It has a built-in ad blocker

Opera has a built-in ad blocker which eliminates the need to use a third-party ad blocker. Opera claims that their ad blocker can block all types of ads and speed up the load time of websites up to 90%.

Opera’s ad blocker is built-in and blocks ads at web engine level. So it is lighter on the resources and offers a faster page load time.

opera adblocker

Opera tested its ad blocker against Chrome running the popular Adblock Plus extension. With tests on 66 different websites, Opera’s ad blocker was 45% faster as compared to Chrome with Adblock Plus installed.

To enable ad blocker in Opera, go to Settings from the main Opera menu and enable it in the “Basic” section.

3. Opera’s “Battery Saver” mode

Opera recently added a battery saver feature that can extend the battery life of your laptop up to 50%. When your laptop is unplugged or when you enable the feature manually, Opera will tweak different settings to become light on the battery without sacrificing performance.

Some of the tweaks include, pausing unused plugins, pausing theme animations, reducing background tabs activity and less interactions with CPU by changing JavaScript schedule.

opera battery saver

Opera compared battery saver with Chrome and found it to extend battery life by 50%.

4. It has built-in VPN

Opera has a built-in free VPN without any limitations that you can start using with a click of a button.

10 Best VPN Services to Secure Your Online Activities

10 Best VPN Services to Secure Your Online Activities

Everything is being tracked nowadays, from your activities on the internet to your phone and computer. Each click,… Read more

To enable Opera VPN, go to Settings and move to the “Privacy & security” section. Here, check “Enable VPN” to enable it.

opera build-in vpn

This will add a “VPN” button at the start of your address bar that you can click to turn on/off the VPN. You can choose from five virtual locations: USA, Germany, Canada, Singapore and Netherlands. The VPN works great and doesn’t show any ads or throttle browsing speed.

5. You can use Chrome extensions in Opera

Opera has limited choices when it comes to extensions. Fortunately, Chrome and Opera are based on the same platform (chromium) and as such, Opera can easily run most Chrome extensions. All you need is the Download Chrome Extension for Opera.

30+ Useful Chrome Extensions for Web Designers

30+ Useful Chrome Extensions for Web Designers

I love Google Chrome. Its simplicity, speed and performance are undoubtedly top-notch. But sometimes, being too simple can… Read more

Once you have installed this extension in Opera, you will see that the “Add to Chrome” button in the Chrome store as been replaced with “Add to Opera

Just click on it to install your favorite Chrome extensions in Opera. I am using many of my favorite Chrome extensions like Avast Safe Price, The Great Suspender, Lazarus and Note Board in Opera without any problems.

6. Opera Turbo

Opera has a built-in data compression system called Opera Turbo that uses Opera’s servers to compress data. When Opera Turbo is enabled, less data will be downloaded leading to less internet data usage (good if you have limited data). Additionally, the loading speed of pages will also increase.

However, do keep in mind that compression only works on unencrypted websites (http). Opera cannot intercept data from encrypted (https) websites. You can enable Opera Turbo from the main Opera menu at the top left corner.

7. Speed Dial

Opera’s renowned Speed Dial replaces your homepage with speed dial to your frequently accessed websites. You can simply bookmark websites and pages you need to access frequently to speed dial, and you will be able to quickly access them from the home page.

speed dial opera

IMAGE: Opera.com

20 Browser Extensions to Spice Up “New Tab” Page

20 Browser Extensions to Spice Up “New Tab” Page

For the people who are always looking for ways to make their workflow more productive, browser add-ons and… Read more

The speed dial makes the home page look really cool and your default search engine is at the top to let you quickly search the web.

8. Opera News Digest

Opera offers a curated news digest based on your interest from your selected list of news websites. Click on Opera main menu and select “News” from it

Here you can tell Opera which language and country to offer curated news about (multiple options can be selected).

opera news digest

After that, specify categories in which you are interested, including arts, business, entertainment, food, sports, science, travel, technology and many more.

Opera will then create a news digest with latest articles from categories you selected. This news digest will update frequently as the sources are update.

20 Top Content Curation Tools for Marketers

20 Top Content Curation Tools for Marketers

Every day, you can find unique content on the Web. Due to the multitudes of websites cropping up… Read more

9. Pop-Out Videos

On YouTube and other video sharing websites, the video is only visible as long as you stay in its section. If you will move to comments or recommended videos, the video playing will be left behind. However, this won’t happen with Opera.

Opera adds a tiny Pop-out video button at the top of videos. Click on it to pop-out another instance of the video.

opera pop-out video

Now you can scroll down the page and that instance of the video will be visible to you all the times. Best of all, even if you leave the website, the pop-out video will still be visible.

This is perfect if you need to follow troubleshooting instructions or tutorials on another tab and would like to keep the video in view all the time.

10. Customize Keyboard Shortcuts

If you are a keyboard shortcuts fanatic but don’t like the default keyboard shortcuts offered by your browser, then you will be pleased to know that Opera lets you bind your own keyboard shortcuts

In Opera Settings, move to “Browser” section and scroll down to “Shortcuts” option. Now click on the “Configure shortcuts” button and you will see a full list of supported keyboard shortcuts.

opera pop-out video

Here you can click on each shortcut to either replace it with another or add multiple shortcuts for the same function. You can also specify shortcuts for extensions and their functions.

opera shortcut keys

Conclusion

Additionally, Opera supports all the other important features that are essential for browsing, including data syncing over different devices, password manager, bookmark manager, control over plug-in content, block pop-ups, control over location and cookies, ability to customize interface and pretty much everything that most other browsers can offer.

10 Missing Features All Browsers Should Have

10 Missing Features All Browsers Should Have

Browsers, the windows to the Web, have become an essential tool for many Internet users. In spite of… Read more

I should also mention that Opera page loading and browsing speeds are head-to-head with Chrome, Firefox and Microsoft Edge. Do let us know in the comments if you are planning on switching to Opera or not.

The post 10 Reasons Why You Should Switch to Opera Browser Right Now appeared first on Hongkiat.

Hongkiat

Check here for more website design posts

CSS Could Be The Hardest Language of All (5 Reasons Why)

A website may be built upon several web languages such as HTML, CSS, JavaScript, and PHP. Among these languages, we may all agree that CSS is the easiest language. CSS defines the website layouts, colors, sizes, and typography in a simple way. It is straight forward, and does not require logical or conditional function to use.

But, you might be surprised to know that, in fact, CSS could be the hardest language and very troublesome in certain cases. How could that be? Well, here are some of the reasons.

20 Useful CSS Tips For Beginners

20 Useful CSS Tips For Beginners

In the old days, we depend a lot on developers and programmers to help update the website, even… Read more

1. No Error Report

Every web language follows specific rules for writing code. When it comes to write style rules in CSS, it starts off with the selector’s name (usually class, id, attribute selectors), followed by a curly bracket, then the style declaration inside the curly bracket, and ending each line with a semicolon.

 .class { 	color: #fff; 	background-color: #000; }	 

Some web languages strictly regulate the rules; otherwise, it returns errors, but not CSS. CSS does not output errors. You may have unintentionally removed a semicolon or curly bracket, or named the selectors wrong – and your layout breaks

In PHP, you will be informed of what the errors are, where it happened, and fixing it is a lot faster. In CSS, you are on your own, even if it is across multiple CSS files with thousands of code lines.

2. Too Flexible

Even though CSS seems to be easy to pick up, there are some problems in CSS that does not always have a direct answer, such as “How do you center an object?”.

There are a number of ways to center an object with CSS. We can center it using a margin, padding, flexbox, or grid. But the application will depend on what kind of center we would like to achieve, the overall page layout, the type of the object, whether it’s an image, inline or block element, a background, how the element is nested as well as the surrounding element position.

Scaling and refactoring CSS is also one problem that’s not so straightforward. Unlike a programming language, CSS syntax is declarative and flexible. We can apply CSS directly in the element, in the template, in a CSS file, or load it from an external site. You can easily add styles everywhere and would still expect your page to load “OK”. But this exactly what makes refactoring CSS tricky, especially on a large-scale website.

Refactoring CSS requires extra discipline, and you need to be careful when changing the color with find/replace as you might accidentally wipe out one that shouldn’t be replaced. As it does not throw any error, you often don’t realize it until one of your users send you a notice.

This is one reason we have dozen of CSS frameworks, patterns, and architectures to follow such as Bootstrap, Bulma, Sass, LESS, BEM, CSS-in-JS, and Utility-first to give developers set of strict guidance and rules to follow when composing CSS.

3. Browser Compatibility Nightmare

Browser compatibility is the biggest problem in CSS and is a nightmare for web designers in certain cases. Despite the published standard by W3C, browser vendors implement CSS specifications differently.

That is why websites like CanIUse.com exists – to see whether certain CSS features are supported in one browser version or the next.

When support for older browsers (like IE6 and IE7) is required – usually on a client’s demand – we could end up having to create multiple files and serve it through a conditional statement, then doing a bunch of CSS hacks to make the site look consistent and similar viewed on more modern browsers. At the end of the day, problem #1 will keep us trapped in this nightmare.

4. CSS Specificity

CSS selectors have different levels of weight/specificity. Let’s take a look at this example:

 p { 	color: #000; } p { 	color: #333; } 

When two selectors with equal specificity hold the same styles, as shown above, the one that comes later overwrites its predecessor. But when we add class selector, say .paragraph, like so.

 p.paragraph { 	color: #000; } p { 	color: #333; } 

…regardless of its position, the paragraph that is assigned with paragraph class will have #000 color, as it is more specific.

Frankly, CSS specificity is really confusing. You need to be attentive when defining style-rules. There might be one selector with a higher specificity which overwrites less-specific selectors, leaving you searching for the culprit for hours before locating it.

5. CSS vs. Your Client

CSS defines the website layout, colors and sizes and is closely related to the look of a website. Here lies the problem – design is subjective. Your client may have different perspective on the “look”, and may ask you to go with 1px today, and 5px the next day. If you are dealing with a client from hell, you are doomed.

“Can you make the red more blue? Revamp my logo but make it still the same? Make it a little bolder and darker, lighter and thinner?

GAH! Smashing your head on the wall seems like a walk in the park when dealing with clients like these.

Wrap Up

CSS maybe simple and relatively easy to learn. But, we need to be disciplined and consistent so that it can become more manageable. Do you have your problems with CSS? Share them with us below.

The post CSS Could Be The Hardest Language of All (5 Reasons Why) appeared first on Hongkiat.

Hongkiat

7 Reasons to Use Illustrations on Your Website – And Examples of How to Do It

If you are encountering problems finding photos for your website, there’s a simple solution you might consider. Use illustrations. The examples in this post will show you various ways to go about doing so

Sound reasonable? If you believe that to be true, when you start building your next website you’re going to have to ask yourself this:  

What kind of visual style do you want to use? 

You don’t have to reject photographs out of hand. That’s not the point. Other options are readily available should you want or need to take advantage of them.

You might choose to take a more abstract, creative, and illustrative approach. That’s one of the approaches we’ve taken when creating our huge selection of pre-built websites for BeTheme; a selection you’ll find to be both informative and inspirational.

Today, we’re going to present a selection of them along with a number of great websites that have creatively used illustrations as we explore seven good reasons to use illustrations to spice up your websites.

  1. When a photograph is unable to fully capture a complicated subject

You may have already discovered that for some brandsit can be terribly difficult if not impossible to find a photo that fully conveys a message as to what that brand is all about or what it does.Taking a photo of you at your keyboard doesn’t necessarily convey the fact that you are a great copywriter (or even a decent typist).

The BeCopywriter 2 pre-built site shows why an illustrative style can be a much better way to tell your story: 

The design is definitely worth a second look while the text conveys a simple, yet powerful, message.

How about looking for a photo that accurately describes what a recycling services company does? Not an easy task.

Check out WeRecycle

Clean air, clean water, clean neighborhoods thanks to everyone’s use of blue recycle bags or bins. This image gives a website visitor important insight as to what the company does. 

  1. When a brand has a unique look that requires a similarly unique website design approach

When discussing brands, you’re essentially talking about styles and personalities. One of the challenges owners of a given brand often have lies in finding out how to differentiate it from a competing brand that features a similar style.

A brand with a far-out style can be easier to work with, especially for a web designer who enjoys taking on far out design approach. One such a design approach is one that cleverly blends photographs with images, which is how BeTheme’s BeFoodTruck pre-built site handles it: 

As you might expect, the illustrations used are a unique choice for this type of industry, yet a food industry websitewould have a difficult time engaging customers without real photos of food.

Handwrytten uses a similar balance between real photos and attention-getting illustrations:

Here, the use of animated illustrations gives the homepage an added twist. It is a good example of a unique concept with a website to match.

  1. When a company wants to stand out by breaking with tradition; in this case, photo-strewn sites

Businesses in a given industry can be expected to have websites that are similar in style to other businesses in that industry. A business selling in-person experiences such as travel and hospitality businesses, rely heavily on photos to get their messages across.

This is to be expected. If you want your website to stand out among the lookalikes in a given industry, the use of illustrations is a good way to do it.

BeJourney 2 is a case in point: 

This site isn’tcompletely devoid of photos. There are just enough to tell a story that helps to get the message across.

The Bateau Mon Paris boat rental company’s site takes a comparable approach:

You can plainly see why this website’s main use of illustrations with its peekaboo photo caneasily engage its visitors.

  1. When a new company wants to leverage the style of a brand that consumers already trust

This approach can be somewhat challenging but can also be very effective. If you have a brand-new company your objective would be to create a website style that reminds visitors of a popular established brand.

This approach can help to erase any doubts a visitor may have as to whether your product or service is really up to the task. Stripe’s website style became a standard that many other software companies entering the same space have sought to emulate:

It’s not hard to see why this illustrative style, with its ingenious use of gradients has been copied for years.

Our BePay 2 site also emulates the trust-building Stripe style; with a unique spin.

The blue color is symbolic of trust and stability, and the site design makes a good use of illustrations and mobile application images.

  1. When a creator has an interesting story and work worth sharing

Showing photos of themselves or their teams is a practice some web developers and design agencies use to give their sites a personal touch.  While it can be nice to see who you might be working with, it’s even nicer to see what they are capable of doing for you.

Illustrations tend to be much better at showing what a business can do for its clientsand do so in a more exciting way that a photo can do.

The BeBand 5 pre-built siteuses illustrations and animations to give its site a 1980slook: 

Photos can’t always convey the style of music the band plays. Illustrations on the other hand, can make it relatively easy to do.

Artist Polly Kole took this unique approach to building their illustrative website:

Besides exhibiting a dramatic look, the site is also interactive. It gives the viewer a sense of actually being there and able to examine works of art up close and personal.

  1. When a company is selling a smart app or tool

What a smart app does can’t always be captured in a photo. The experience inside the smart app, tool, or resource is what counts.

This experience typically involves a solution to a problem which can in turn require managing a good amount of data. This is where illustrations tend to shine.

BeApp 6 cleverly uses data visualizations to get its point across:

Swiggy Labs builds products that solve big problems for consumers. Its site uses illustrations rather than a series of screenshots to show how these problems are solved: 

Drag the “Swiggy It” toggle to the right and you’re sure to agree that this is much more than photos or screenshots.

  1. When a brand’s target audience is children or, in many cases, their parents

Employing an illustrative style is a no-brainer since that children love cartoons and games (parents do too for that matter).

Add the fact that illustrations can be used to simplify an otherwise complex subject, like learning a language, and it’s not hard to see why their use can be so effective.

BeLanguage 3 is a language learning website:

You don’t need to understand Italian or Japanese to understand what this site is all about.

See Make Play is another site that effectively uses illustrations to strengthen its sales pitch is

The illustrations on this section of the home page are static images, but animated graphics elsewhere on the page combine to give the site a youthful quality and a lighthearted touch.

Will you use illustrations to style your website?

If you’re finding it’s a real challenge to use photos to tell your brand’s story and are open to considering a little less conventional design style, illustrations might be the right fit.

As you can see in the websites from BeTheme and the other examples given, illustrated websites are relatively common. Still, when you come across one, it tends to have a unique look that can draw you in. 

If you want to make your website really cause a stir and even bring smiles to people’s faces, try experimenting with an illustrated website style.

Admit it. You love cartoons as much as the next person.

Read More at 7 Reasons to Use Illustrations on Your Website – And Examples of How to Do It

Web Design Ledger

Top reasons to go for a responsive web design

As there is an exponential growth in the number of mobile and tablet, it is important for the brands to ensure that their website design is user responsive and makes it easy for them to navigate easily. Listed below are the top reasons for choosing responsive web design: Mobile Usage Is on The Rise As […]

The post Top reasons to go for a responsive web design appeared first on designrfix.com.


Designrfix