Thus, I was greatly surprised by a recent question from a client. They wondered why, when hovering over an image on their website, a small icon appeared. Was this a new feature?

Usually, these types of issues are caused by an overzealous browser add-on. Or (gulp) maybe a malware infection. But neither of those scenarios applied here. My client noticed that it was only happening with Microsoft Edge.

Sure enough, I fired up the little-used app on my PC, and…huh? Hovering over certain images revealed a button UI. Clicking on it allowed me to conduct a Bing image search, which opened in a sidebar panel.

This seems like an audacious move. And the more I looked into this feature (dubbed Visual Search, enabled in version 95.0.1020.30), the more concerned I became. It begs the question: should web browsers be doing this?

Microsoft Visual Search is the Default Option

Perhaps the browser wars were decided long ago. After all, Google Chrome is by far the dominant app. As of this writing, it holds 65% of the market, while Edge boasts just over 4%.

With that in mind, it’s hard to blame Microsoft for trying to stand out. Plus, they have every reason to point users toward their Bing product (and away from Google). It also stands to reason that Visual Search could come in handy. But the way it has been implemented is frustrating.

Users must opt out of the feature. By default, Visual Search is enabled and will display when a user hovers over an image. It doesn’t appear to activate on every image, however.

For example, background images don’t seem to trigger the UI. And smaller images also appear to be left out (you can right-click and initiate Visual Search via a context menu – Google Chrome does something similar).

The feature is fairly simple to disable within the UI. And it can be turned off for a single site or entirely. But it’s still an extra step for users – not to mention a potential source of confusion.

Microsoft Visual Search is enabled by default. Its UI displays when hovering over an image.

Website Owners Can’t Opt Out

There are several potential reasons for a website owner to feel uncomfortable with Visual Search. For one, the UI added by the feature looks like it is simply part of the page. Users may, for example, click it expecting to open a photo gallery. Not to mention that the UI literally shows up on photo galleries as well.

When a Visual Search is initiated by the user, the ensuing results are also of concern. What if the search turns up a competitor’s product or a negative review? What if the images it displays are offensive or otherwise inappropriate?

Perhaps the most concerning issue is that websites can’t opt out. This means that website owners are stuck with the Visual Search UI being implemented – whether they want it or not.

This sort of “enhancement” is unlikely to be welcomed by everyone. And not all users are savvy enough to understand its purpose or origin.

In the end, this could lead to more questions for site owners and web designers to answer. The worst part? The situation is completely out of our control.

We visited Honda’s website and performed a Visual Search on a product photo. It returned similar images from competing products.

Where’s the Line? Did Microsoft Cross It?

Hopefully, features like Visual Search will spark a productive debate. Is placing a browser-specific UI on a website acceptable?

Users need to draw a line between convenience and intrusive behavior. Visual Search may only be the beginning. Web browsers could take this concept and go even further.

What would happen if browsers start highlighting specific words within the content? Or do they add UI elements that end up breaking a website’s layout? It could be that features once reserved for browser extensions become the default. Are we OK with this?

Perhaps Microsoft is experimenting to see what we’re willing to tolerate. Here’s hoping that users make their opinions heard.

In the meantime, I’ll happily stick with Firefox – and keep recommending it to others.

The post Why Is Microsoft Edge Adding Its Own UI to Websites? appeared first on Speckyboy Design Magazine.

In all of this, security is a huge priority. This is an area where some browsers have struggled over the years. For instance, how many security flaws did good old Internet Explorer face? It seemed like there was always some hole to be patched.

But that was then. Things have changed in recent years. Browser vendors have taken security to heart. They’re becoming increasingly assertive in their aim to keep us safe from malicious actors.

However, some developments in this area seem to have blurred the lines between user safety and a “nanny” state. More than ever, web browsers are trying to reshape the web and how we use it. But, have they gone too far?

Pushing (Or Dragging) Websites Forward

The first really big move in this direction was Google’s 2016 announcement that, through their market-dominating Chrome browser, non-https websites would be marked as “Not secure” in the address bar.

Now, it’s hard for me to argue that Google was in the wrong here. With the proliferation of free and cheap SSL certificates, it’s not a huge burden in terms of cost. And the added security, along with the user confidence that goes with it, is something most websites should be taking advantage of.

The competition certainly felt it necessary to follow along, as Firefox added similar warnings in 2019. Now, the web is a more secure place – yay!

In reality, it’s only a harmless warning. And it’s probably bound to only affect people who pay no attention to their websites. Everybody (but a few inattentive website owners) wins.

But, wait a second. This seemingly-altruistic act helps browser vendors put a giant foot through the door when it comes to assertive behavior.

Oh, well. Maybe I’m being a bit worked up over nothing. It’s probably just the paranoia talking…

Going to the Next Level

As it turns out, the “Not secure” message was only the beginning. In 2019, Firefox began blocking known trackers. Of course, they were piggybacking onto a strategy Apple implemented on Safari two years earlier. Again, not much to complain about (unless you’re a tracker).

But the pièce de résistance of assertive behavior belongs to Google. The mega-corporation is planning to block “insecure” downloads. That is, non-https files that load onto an https website.

Google plans to start somewhat slowly, by warning users who are trying to download executable files (such as .exe or .apk). Eventually, these files will be blocked by default. But, surprise, they’re going to ratchet this up even further.

Down the line, other popular file types are going to get the same treatment. Look for .docx, .pdf, .png, .mp3 and a host of others to face blockage.

This is where the slope begins to get just a tiny bit slippery.

Where’s the Limit?

In a relatively short period of time, we’ve gone from being warned about certain content to having it blocked by default. With this shift, the web begins to look less and less like the wild west and more like a corporate, you aren’t downloading that on our time, locked-down network.

Now, there’s certainly an argument to be made on behalf of the browsers. Security is a minefield and there are a lot of sloppy websites that aren’t as secure as they could be. Not to mention the dangerous reality of malware, ransomware and the like.

In order for the web to become safer, something has to give. And perhaps these companies are doing what they feel is the only realistic thing they can to reduce risk.

But this hasn’t always been under their purview. Up until now, we’ve had to install separate security software on our devices to block out potentially undesirable content. That is no longer a requirement – at least on the web.

But by automatically blocking items that aren’t known to be malicious, the browser becomes a gatekeeper of sorts. Chrome, without asking, now asserts itself as an arbiter of what we can and can’t see. Not on the level of an authoritarian government, mind you, but there is a tinge of that same behavior. It’s as if they must save us from ourselves.

The question becomes where these companies draw the line. Google and Microsoft, for example, are ripe for conflicts of interest in this area. Google’s decision to block non-https Word documents is, while justifiable in terms of security, might also be seen as anti-competitive. What’s to stop the next version of Microsoft Edge from blocking certain aspects of Google Docs?

Users Must Act

While we certainly hope for responsible practices, we can’t assume that everyone will act in the best interests of users. In the end, it’s up to us to hold these companies to account.

When they go too far, we must push back and switch to a browser that knows when to stay out of our way. This can, we hope, help keep browser vendors focused on toeing the line.

The post Are Web Browsers Overstepping Boundaries? appeared first on Speckyboy Design Magazine.

However, a quick look at the web browser market these days will show one clear winner – with everyone else just hoping to make a dent.

As of this writing, Google’s Chrome browser holds over 64% of market share. From there, it’s Apple’s Safari a distant second (16%), along with Firefox (5%) and (gasp) Internet Explorer (4%). And with Microsoft’s Edge (under 2%) soon switching to the Chromium engine, Google is picking up even more steam.

Should these numbers continue to hold over the long term, it would seem that many of these competitors will become a footnote to history. Thus, Google’s supremacy will go pretty much unchallenged. So, what effect would that have on web designers?

Where Things Stand

Years ago, many were concerned that Microsoft would become the company who ruled all the web. Then, Firefox and Chrome came along and changed that narrative. Suddenly, we went from a browser (Internet Explorer) that had lacked support for some standards (not to mention championing its own proprietary code), to software that really did push the web towards standards compliance.

Both of those new browsers became the default for designers, enabling us to use the latest features. Power users were happy to have real choices that prioritized ease-of-use and speed over the slow, buggy IE.

But, the tables have turned dramatically. Microsoft is but a bit player in the browser market. Firefox has been innovative, but struggles as it does not have the monolithic reach of Google. Safari hangs on, mainly due to it being the default option for iPhone users. In fact, Safari has about 26% of the market on mobile, while running on just under 4% of desktops.

Those numbers are in line with the mobile OS market, as iOS retains about 28% of users, while Android (on which Chrome is usually the default browser) takes a whopping 70%.

This tells us that mobile users tend to stick with their default option. And, if you don’t have a widely-used mobile OS of your own (which Microsoft and Firefox’s Mozilla don’t), you’re going to be seriously behind the top dogs.

One Company Sets the Agenda

It’s no secret that, increasingly, Google sets the direction of the web. We’ve seen this for years with search, but the dominance of Chrome allows it to further its interests even more.

This isn’t to suggest that Chrome is any way a bad product, or that Google hasn’t done some very positive things. But, just as the aforementioned concerns with Microsoft, having one company essentially in charge of where web browsers are headed isn’t ideal. Not for a truly “open” web.

And, much like Microsoft tried to do with IE (and was later in trouble with the US government for), Google (and to a lesser extent, Apple) have tied in the browser with an OS. Sure, you do have the option to install something else. However, this *could* allow for some anti-competitive practices to come out.

Beyond that, for web designers this one-way street means that we have to build sites in a way that pleases a single entity (not that we don’t already) and must change directions as we’re told (again, we’re kind of already there). When one company is the far-and-away leader, they dictate and we listen.

Sure, It’s Easier – But…

On the bright side, we could view this as having only one piece of software to seriously worry about. To many designers, this might be less stressful than having to deal with a half-dozen browsers, each with their own bugs and quirks.

Just think of the time we could save on browser testing. We could say, “Hey, it works on Chrome – good enough for me!” And this would also enable us to implement cutting-edge features like CSS Grid, without having to deal with fallbacks for older browsers. Good deal, right?

Well, it could be a good deal, so long as the market leader decides to play along. What if, for instance, they really don’t want to support a new HTML or CSS standard? What if they have a falling out with a CMS such as WordPress and, all of the sudden, sites built with it don’t run so well?

Maybe these are far-fetched scenarios. Still, they’re not impossible. All of it really depends on the good behavior of that entity. While it would certainly benefit a company like Google to show restraint, there is always that chance of a company taking things a little too far.

The question is: If they do go too far, will users run the other way towards another browser? And, will there even be a viable alternative for them to run to?

Are We Already There?

Statistically speaking, Chrome is undoubtedly dominating the market. And with Google already so much a part of our daily lives (and livelihoods), it would be difficult not to feel the sway of their every decision. For all intents and purposes, it sure does feel like a single-browser universe.

Yet, there is also some reason to think that another “browser war” could be on the horizon. The latest versions of Firefox, while still low on market share, are a highly-competitive product. If it retains quality, there is a chance for growth. And, as long as Apple retains a major slice of mobile users, Safari isn’t going away.

Then there is the possibility of regulation. Google is under the wary eye of many a legislative body, and policy changes could have a profound impact the future of its products.

Last but not least, there is the fickle nature of consumers. Virtually nothing stays on top forever, and people are quick to move to something they like better. If Chrome (or Android) stagnates, a significant number of users could look elsewhere.

And perhaps that’s the bottom line. Use the product you like, whether or not it came with your device. The web may just depend on it.

The post Imagining a Single-Browser Web appeared first on Speckyboy Design Magazine.

It’s not that Microsoft can’t still look to outdo Chrome in some areas, but they’ll both be building with the same basic parts. In that regard, it seems inevitable that the two products will be more alike than anything else.

Of course, given that Microsoft Edge is making up less than 2% of the market share, perhaps it’s all for the best. This lackluster showing notwithstanding, it would be a mistake to dismiss the impact of MS browsers over the past 20+ years.

With that, here are a few thoughts on what Edge, and to a much greater degree, Internet Explorer, have meant for web designers and users.

A Quick Climb to the Top

For a brief period before Internet Explorer’s 1995 debut, Netscape Navigator was the biggest browser on the web. That didn’t last long. By 1997, Microsoft had integrated IE into Windows and thus began its ascent to market dominance.

My experience in the web design community at the time was that there was a hard split among designers. Some favored IE and built sites around much of its proprietary code. For those that still favored Netscape and other competitors, the aim was more about building sites that would work on every browser.

This situation made things difficult for both designers and users. It was not unusual to see fairly large corporate websites look fine in IE, yet appear completely broken in other browsers. I can recall being hired to fix a few of these MS-enhanced messes back in those days.

One significant thing to note about this time in history was that Microsoft was often seen as a sort of villain in the industry. Its business practices were widely scrutinized and became the subject of a major court case in the United States. It even led to an infamous pie-in-the-face to Bill Gates.

But by the time antitrust proceedings came about, the damage had already been done. In 1999, IE had claimed a jaw-dropping 99% of the market.

An Improving Product with a Stubborn Past

Over the years, web designers have done their fair share of complaining about IE. But the software really did improve with each new version. By the time IE 11 was released in 2013, the browser was miles ahead of its predecessors.

The problem was that too many users weren’t upgrading to the more modern versions. While widely available in Chrome and Firefox, automated updates never really took hold in Internet Explorer. Not to mention that new versions of IE didn’t always support older versions of Windows. This resulted in widespread use of outdated entities, such as the much-reviled IE 6.

And, as anyone who had to design with fallback support for these archaic browsers can tell you, the process could be a nightmare. It took thorough and repeated testing. In turn, it cost untold amounts of time and money.

Meanwhile, IE’s competitors were releasing major versions at a breakneck pace. In particular, Chrome and Firefox were very much standards-compliant browsers. And since users didn’t have to think about performing their own upgrades, they were always on the cutting edge of technology.

As such, IE’s market dominance was no more. Looking back at October 2013 (when IE 11 was released), Chrome had jumped ahead in the market with a 3% advantage. Things would only get worse from there.

In 2015, Microsoft announced IE’s end-of-life and that the newfangled Edge browser would take the reins in Windows 10.

Edge: The Browser We Forgot

Whatever hopes Microsoft had of putting a stop to their decline in market share, it just didn’t happen with Edge. The steady decline continued after its July 2015 release, leading to the eventual demise of the product in its current form.

Was Edge an inferior product? That’s probably more of a subjective call. However, I never found it to be anything but solid and usable – that is, when I bothered to use it.

It would seem that Edge never caught on in part because of Microsoft’s inability to crack the mobile market. Remember, buying an Android phone means that you have Chrome. MS was hoping for the same to happen with the now-defunct Windows Phone.

Edge is speedy and handles the latest CSS techniques like Grid or Flexbox well enough. Compatibility wasn’t a problem nor a reason to not give Edge a try.

However, that fully-integrated experience on both desktop and mobile devices never came to fruition. One could make the case that this put Edge on a deathwatch the very day it was released to the public.

A Checkered Past with No Future

On one hand, it is disappointing to see one less innovator in the web browser market. I think that we all benefit from healthy competition and real choice. However, I don’t think I’m going to shed any tears for Microsoft.

That’s not because they’re incapable of making a good product – quite the contrary. More than anything in the present, the past history of IE and the negative effects it had on the web are what I remember most. It’s just time to move on from that legacy.

And, consumers do have choices beyond Chrome. Recent versions of Firefox have been outstanding. Plus, there’s no telling who will come up with the next big thing. The only certainty would seem to be that, for now, it won’t be Microsoft.

The post Microsoft’s Browser Legacy appeared first on Speckyboy Design Magazine.

This was not only a stroke of genius for security’s sake, but also a boon for designers looking to use the latest CSS3 features. It has undoubtedly led to more of us who feel safe in using features like Flexbox, knowing that the majority of users have updated browsers to support it. And it’s already helping to push CSS grid into production environments, as well.

But we also know that there are still users out there who are running older software. Amazingly, according to NetMarketShare, Internet Explorer 11 was still third on the list of most-used browsers for the year 2017. IE 8 placed sixth, while IE 9 came in tenth. IE still accounts for about 13% of desktop device usage.

Sure, the numbers are nowhere near what they used to be when it comes to IE. But they’re still high enough that they need to be a consideration when building a new website. The question is how do we continue to support old browsers while still using new features? And, how far back should we go?

Stuck in the Past

In a perfect world, designers would love to see the likes of Internet Explorer simply fade into history. But it looks like its demise is still a few years off. Cheaper PCs and the sheer amount of mobile web usage would seem to indicate that IE will eventually fall off the map. At least that’s the case in the consumer category.

Corporations are still hanging on to older versions of Windows, and that often means sticking with IE. Edge is only available for Windows 10. So if large companies stick with Windows 7 or 8, IE will remain the default choice. Granted, Chrome and Firefox can be used on these systems. But that doesn’t necessarily mean that users in these environments are allowed to install them.

But it goes beyond IE. The latest version of Apple’s Safari won’t run on some older Macs or iOS devices. It would seem that the effect here would really be on mobile design, as there are still a number of old iPhone models out there. Safari is the second most widely used mobile browser.

Taking this into account, it means that we do need to take older browsers seriously. However, it doesn’t mean that we should hesitate to use the latest features.

Using the Latest and Greatest – With Fallback Support

So, how can we implement new features while still making designs usable in older browsers? When it comes to CSS, using fallback methods can be a big help. In general, a fallback is code that will allow an outdated browser to use an acceptable alternative to what we’re trying to achieve.

For example, if you’re using Flexbox, there are some available browser prefixes that will enable limited support in older versions of Chrome, Safari, Firefox and IE. Not every CSS feature will have this type of fallback, but usually there is always a way around whatever problems you run into.

The further back you go in terms of providing an alternative, the trickier it can get. But as you test on various browser versions and devices, you can make tweaks as needed.

Your job can also be made easier with the help of tools like Modernizr. It’s a script that will detect browser support for specific features and adds a CSS class to a page’s body accordingly. You can then leverage that class to provide alternative styles if a feature isn’t supported in the user’s browser.

The great thing is that, before you download the script, you can pick and choose which features you want to detect. For example, you can choose to look for features such as canvas, HTML5 Audio/Video or even emoji. This keeps things as light as possible while providing a big help in ensuring backwards compatibility.

How Far Back?

We know that we can support legacy browsers. But how far back should we go? If you ask 100 different designers, you may get 100 different answers. That’s because there really isn’t a hard-and-fast rule about backwards compatibility.

Personally, I think part of the equation should be about the features you’re using. Features like Flexbox or CSS Grid that affect layout are vital to the usability of a website. So, it’s important to provide some sort of fallback for older systems. Things like layout and navigation should be thought of as “too big to fail”.

When it comes to items that are more for aesthetics than functionality, they can often be left as-is. If you’re using CSS3 goodies like shadows and rounded corners, it’s probably not worth the time to provide alternatives. Your site should be just as usable with or without them.

If you’re hoping to find out which browser version should serve as a cutoff point, it makes sense to reference those usage numbers mentioned above.  And, if you have this type of data for the site you’re working on, even better. So, if you know that there are still visitors to your site that use IE8, then it’s worth ensuring that they can access your content.

As for my own routine, IE8 is actually as far back as I test for desktop browsers. I’ll also check out Safari 6, along with a random version of Chrome and Firefox. On mobile, I generally go back to Android 4.x and iOS 7 devices. Of course, your needs and preferences may vary.

The Evolution Continues…

It probably isn’t too surprising that legacy browsers are still in use. Web designers have been hacking their way through this problem for years. But the situation is much better than it was in the past. Anyone who had to deal with IE6 can attest to that.

Over time, we’ll see the older desktop and laptop systems move to the recycle bin. And even corporate users will have to upgrade eventually. Since modern browsers are always being updated, newer systems should keep pace with the evolution of web design.

It seems like the more interesting challenge will be support of older mobile devices. While we see users on a continuous upgrade cycle in many areas of the world, some will still utilize vintage hardware and software. So perhaps our fallback focus will be moving more to the small screen.

Regardless, the main focus should be on keeping content accessible to as many people as possible.

The post Supporting Old Browsers: How-To and for How Long appeared first on Speckyboy Design Magazine.

Because of the fact that there are still people that use older browsers such as IE7, using CSS to work across different browsers is still a tricky job – regardless where your site is hosted.

While a consistent appearance on every web browser is the key in providing a better user experience, it should be done carefully to avoid any cross-browser issues.

In this article you will learn about some of the important things you need to consider as a CSS beginner when building sites that work properly and look good in all browsers.

Use a CSS Reset

Web browsers behave differently – especially when it comes to reading basic HTML elements. Including a CSS reset in your style sheet will eliminate lots of potential cross-browser styling issues when viewed on different browsers. You can either create your own reset CSS, use the popular reset.css or normalize.css, which are available online. This is what the Meyer Resest looks like:

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
 margin: 0;
 padding: 0;
 border: 0;
 font-size: 100%;
 font: inherit;
 vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
 display: block;
}
body {
 line-height: 1;
}
ol, ul {
 list-style: none;
}
blockquote, q {
 quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
 content: '';
 content: none;
}
table {
 border-collapse: collapse;
 border-spacing: 0;
}

Use Vendor Prefixes and Fallbacks

If you consider using CSS3 features such as gradients or border radius, it is important that you enable your styles to handle fallbacks – especially when a browser doesn’t support a CSS property.

Using vendor prefixes will let older browsers understand the fallbacks and skip the code that it can’t use. Otherwise, the new browsers will implement it on its platform.

The following is a list of vendor prefixes for each of the popular browsers.

• -webkit- (Chrome, Safari, newer versions of Opera)
• -moz- (Firefox)
• -o- (Old versions of Opera)
• -ms- (Internet Explorer)

Target IE Browsers Specifically

As we all know, Internet Explorer has caused many issues in the past. If you are having issues with IE8 or below, you might consider using IE conditional comments. They provide a mechanism that targets specific versions or IE as a group.

IE conditional comments are made up of HTML markup wrapped in a conditional statement. If the statement returns true, the enclosed HTML is shown within the HTML file.

Here’s a basic form of an IE conditional comment:

<!--[if IE ]>
<link href="iecss.css" rel="stylesheet" type="text/css">
<![endif]-->

Here’s a conditional comment if you want to target all IE browsers except IE7 and above:

<!--[if lt IE 7 ]>
<p>Only less than IE 7 will see this</p>
<![endif]-->

Target IE versions greater than 6 or above:

<!--[if gte IE 6 ]>
<p>Only IE 6 and greater will see this</p>
<![endif]-->

You can also exclude one of the IE browser versions by using the (!) exclamation sign just before the IE version. See the code below:

<!--[if !IE 6]>
<p>IE7 or IE5 only</p>
<![endif]-->

If you want to learn more about this, I would recommend reading Sitepoint’s tutorial here.

Always Clear Floats

Clearing floats has been a widely used protocol in web development for several years. Using “clearfix methods” will let you fix the float issues on any web browser. There are two suggested methods you can use:

1. Using the clear property:

One of the most common ways to clear floats is by using the clear: both property and value which mimic the use of tables for layout. This usually goes with a defined class named clear. Check out the CSS example below:

.clear {
clear: both;
}

2. Using the overflow property:

Another great method to clear a float is to use the CSS property and value overflow: hidden to force the container of the elements to extend to the height of the elements that are floated. Consider this CSS:

.container {
overflow: hidden; 
}

Always Check CSS Display Types

CSS uses a display type for each element such as inline, block, inline-block, table, and many more. When you build within the W3C standards, mixing display types is common, but something to check on during the debugging process.

You can visit the MDN docs display page for a full list of the CSS display types.

Validate Your CSS

After setting up your CSS you can then validate your code via CSS Validation Service. This will help you debug some issues within your style sheet that can also prevent things from breaking on different browsers.

Use Cross-Browser Plugins

Apart from implementing some tricks to make sure that you will have the same page layout across multiple browsers, you can also use some good plugins to help browsers detect HTML5 and CSS3 features.

Some of them are on the list below:

• Modernizr – a feature detection JavaScript library that lets the browser detect which HTML5 and CSS3 features your user’s browser supports. It enables developers to test for features supported and then provide fallbacks for browsers that do not support them.
• CSS Browser Selector – a very light JavaScript library that gives you the ability to write specific CSS code across different browsers.

Testing Tools

CSS tricks are nothing if you can’t test them on different browsers to make sure they work. Below are some useful cross-browser tools that are freely available over the Internet.

• Quirksmode – a good place for hunting down cross-browser issues. It uses strict mode to interpret your CSS and gives an overview report of the possible issues.
• Browsershots – helps show how your page will be displayed across multiple browsers and operating systems by taking screenshots of your web pages rendered on real browsers.
• IE Tester – a free web app that enables you to see the look of your web pages within Internet Explorer 5.5, 6, 7, 8 and 9 in a MS Word-like interface.
• Sauce Labs – a cross-browser testing tool for testing your site across different versions of browsers and operating systems. (Recommended by Adobe Systems).

Wrapping Up

There is so much more to discuss on the topic of cross-browser CSS. More than tricks and tools, you also need to consider knowing the foundations of CSS.

Cross-browser has been a big topic within the web development community from the very beginning as technology always improves and, almost every year, there are new browser versions coming out.

I hope that the tricks and tips in this article are helpful to your cross-browser journey.

The post The Cross Browser CSS Styling Tips You Need to Know appeared first on Speckyboy Design Magazine.

These lesser known browsers may not have the same level of backing as the big four, but they often present a different way of looking at the web. These browser can provide tools that make it easier for web programmers and page designers to create sites that are easier to use for both human users and software interpretation.

Lynx

Lynx is an interesting alternative browser because it doesn’t use a graphic interface and instead opts for a text-only environment. While it’s completely lacking in the bells and whistles department, it makes up for it with its two targeted use cases. Lynx does not need powerful hardware to operate: it can run in operating systems as old as DOS386+ which means Lynx lets you browse the web on very old computers.

The second use case is much more applicable for web developers. When you browse a website in Lynx, you view it similarly to how a machine or program sees it. If your site doesn’t make sense to you in Lynx, it won’t make sense to an indexing program that will substantially hurt the site’s appearance in web searches through Google, Yahoo, and Bing. Lynx makes it clear where a site is using graphics instead of text for functionality that can confuse software trying to interpret the page.

The text-only view is also great for looking into content structure and page hierarchy. For example, if the site’s title doesn’t appear immediately on the text page in Lynx, you have a content prioritization problem.

Lunascape

Unfortunately in the web development process, what you see when you view one of your pages isn’t necessarily what your audience sees. The big four web browsers use three different page rendering systems between them: “Trident” for Internet Explorer, “Gecko” for Firefox, and “WebKit” for Safari. These three rendering systems feature different CSS default values, interpret code with slight differences, and vary in support for advanced design features.

Web developers often have to test every page with three different web browsers open at any given time, which can quickly devour your system’s memory as well as generate an unwieldy amount of windows to manage. This is where Lunascape ORION enters the fray. While offering a similar web browser experience to the big four, it features a toggle button on the address bar that lets you switch between Trident, Gecko, and WebKit rendering on the fly.

The browser also supports “Cascade view” which lets the developer view all three rendering systems side-by-side. While Lunascape offers a great general idea of how browsers will display pages differently, it doesn’t account for browser version differences.

Opera

Opera Software’s Opera browser is often mentioned alongside the big four browsers despite its comparatively small market share because of its contributions to web browser innovation as well as its reputation for reliability. Opera is built for a mainstream audience.

It’s navigation is based around a launch page of most-frequently visited websites, so it works great for people who have more routine Internet use habits. If you’re looking for a similar experience that’s device agnostic, this browser is for you: it’s available on PC, Mac, Linux, iOS, Android, and Windows Phone.

SeaMonkey

SeaMonkey is a web browser that integrates several common desktop applications like IRC chat, e-mail, feed readers, and HTML editing into a singular program. It strives to be the only program you need to open on your computer for most of your software needs. This browser is actually a continuation of Firefox and Thunderbird’s predecessor, Mozilla, and shares much of its source code.

SeaMonkey’s HTML editor is an excellent companion tool for web development newcomers thanks to its easy, efficient graphic interface and on-the-fly previewing capabilities. It also has a nostalgia factor to it, heralding the best features from early 00s web browsing. The browser is available for Windows, Mac, and Linux devices.

Maxthon Cloud Browser

As its name implies, Maxthon Cloud Browser integrates cloud technology to enhance the web browsing experience. Using Maxthon is similar to using the big four browsers, except it offers a device-independent experience tethered by Maxthon’s cloud-app that does things like improve page rendering speed, sync browser data across devices, and download files to cloud storage instead of on the local device.

The cloud storage feature is particularly useful if you’re the type of user that moves from device to device throughout the day. For example, if you find an MP3 podcast you want to listen to later while browsing the web on your phone on the train, you can store the file on the cloud so you can quickly access it from your work or home computer. The cloud storage method simplifies the issues of moving data from device to device, especially in cross-platform use cases.

Your MacBook laptop, Windows 8 home PC, Windows 7 work PC, Android smartphone, and iPad can easily move web downloaded files between each other with Maxthon. The browser also supports “Cloud Sharing” which lets you share content like images, links, files, and text with friends and coworkers that are also using the cloud service. Maxthon sports wide compatibility with devices running Windows, Android, OS X, iOS, Windows Phone, and Linux.

Vivaldi

The new browser Vivaldi (currently in technical preview) is a relatively new browser developed by Vivaldi Technologies. Founded by the former CEO of Opera Jon Stephenson and is targeted at former Opera users. Currently it’s available in 41 languages and runs on Windows, Linux and OS X. As Opera and Chrome it’s powered by the Blink engine and aims to recreate the features missing from Opera since it’s rendering engine change from Presto to Blink.

Already implemented features include quick commands, notes on websites, speed dial and tab stacks. Vivaldi is especially interesting because it’s still ongoing development and feedback provided by the community has a real chance of getting heard and acted on. Because of the blink engine Vivaldi comes with the proved and good developer tools known from Chrome. So if you did not find your perfect browser give Vivaldi a shot.

Concluding

With all of these browser options and different versions running around in the wild on the Internet, it can be difficult for web developers to keep up with making sure their sites work well and degrade gracefully with older, less-capable browsers that don’t support modern web standards.

This is particularly problematic with browsers like Internet Explorer on computers running older operating systems like Windows XP that can’t upgrade to a newer version. Maybe some of the above browsers and their Add-ons can help make your next web project ready for the wide array of browsers out there.

The post 6 Lesser Known Alternative Browsers to Chrome and Internet Explorer appeared first on Speckyboy Design Magazine.

In fact, many users are often unaware of the advantages of having an up-to-date web browser. Maybe they do not care, or simply do not know the benefits — in either case, an outdated web browser not only hinders the end users’ internet browsing experience but can also becomes a nightmare for most web developers (recall: IE 6).

What, then, is the solution for this problem? The folks at Team Geek have come up with one such idea: Browser Awareness Day – a social campaign to alert users that they need to upgrade their browsers.

Basically, the idea is to urge users to upgrade their web browsers, thereby helping them browse better and also lessening the developers’ burden.

Sounds interesting? You can generate snippets that you include in the <body> of your site that will inform your visitors if their browser is out of date. Furthermore, you can download banners and even upload your brand’s logo and details to show support for the Browser Awareness Day.

"Together, we can make the Internet better."

The post Browser Awareness Day: Encouraging Users to Upgrade Their Browsers appeared first on Speckyboy Design Magazine.

Unlike the previous version, Firefox 16 does not come with a long list of revolutionary improvements. Instead, it brings to us certain vital additions. For a start, HTML5 is no longer a no-fly zone — CSS3 animations, transitions, IndexedDB, web APIs — you name it! Firefox 16 has finally got them all covered. Well, almost all.

If you are a developer, Mozilla has tried its best to win you over. The browser now runs faster with the addition of Incremental Garbage Collection.

Mozilla claims that Firefox 16 will now respond better to gestures and mouse movements, and animations as well as games will also run smoothly. There is web app support for all desktop operating systems, though it is obvious that Firefox will not be able to convert developers overnight and persuade them to migrate from Chrome. Of course, there will be improved add-ons to follow as well.

Another developer-friendly feature is the Developer Command Line. Simply put, it will provide you with no-nonsense keyboard controls for most of the developer tools. Beyond that, the browser has also seen some localization improvements.

There have also been platform-specific improvements. For example, Firefox for MAC OSX has VoiceOver Support turned on by default. Furthermore, the Android version now has a Reader Mode, to help you experience streamlined browsing — bigger fonts, improved picture layouts, and no ads.

As someone who uses Linux, I often find Firefox to be the default browser on most new operating systems I install. Naturally, I’m happy with the improvements, though personally, I don’t see Firefox 16 beating Chrome any time soon.

What do you think of the improvements in this version of Firefox?

The post Firefox 16: HTML5 Awesomeness And Love For Developers appeared first on Speckyboy Design Magazine.

In this post, we explore the various facets of today’s browser wars and look at where it’s headed from here.

The bigwigs with the (unfair) advantage?

What began as a one to one combat between Netscape Navigator and Microsoft Internet Explorer (back in 1995), with IE eventually trumping Navigator for good, has evolved into a full-blown battle for market dominance involving a lot more players. We’re talking Google Chrome, Mozilla Firefox (funded by the guys of Netscape fame), Apple Safari, Opera and the oldest survivor of the lot, IE. That’s not all: RockMelt, Maxthon, SeaMonkey, Konqueror, Flock, Prism, Galeon and OmniWeb add to the din, even if as an almost imperceptible background buzz.

Microsoft strikes it big!

The battleground is far from level, however. This can be attributed to browser manufacturers doing a lot more than making stand-alone browsers. Microsoft has its own Windows OS, the MOST popular series of operating systems, hands down (W3schools pegs them at a whopping 84% market share as of May 2012). Usually every machine running a Windows OS comes pre-installed with Microsoft’s Internet Explorer. In fact, Microsoft recently sparked quite the controversy when Mozilla and Google cried foul over Windows RT (Windows 8 for ARM devices) offering full functionality for IE 10 alone, leaving users no choice but to settle for IE10, when Win 8 is released later this year.

The Google advantage

Google took off as a breakthrough search-engine company that now has its own, very popular Android OS targeting mobile users, a not-so-popular Chromebook PC and an extensively used Webmail platform in Gmail, among a multitude of other products, developed in-house and acquired. Whereas the Chromebook PC solely operates the Chrome browser, Gmail and other Google services (Picasa, Google Docs, YouTube etc.) are fastest on this browser.

Chrome was also the first browser to introduce a multiple sign-on feature that enables users to login to different Google services such as two or more linked Gmail accounts, Picasa, YouTube, Blogger, Google Plus etc, using a single account you’ve registered with Google. This level of integration entices users to flock to Google’s Chrome browser and that’s not a bad thing at all. Firefox and IE followed suit with multi sign-ons. But, as we often say, once a Chrome user, always a Chrome user!

Bitten by the Apple bug? Go Safari!

Apple Safari is not far behind in competitive advantage: Mac OSX computers offer a superior browsing experience with Safari (the default browser on a Mac), not available on other browsers and Apple’s iOS does not support any browser not using its version of the WebKit layout engine. This may change eventually if and when an iOS-compatible Chrome is released.

Popularity tussle: Firefox emulates Chrome

The rat race for kingship in a crowded browser market has got browser vendors shipping out newer, improved versions on tighter schedules, with Chrome leading the pack. Following a Software Release Cycle of around 6 weeks between launch of successive beta versions, Google has set the industry benchmark and others, notably Mozilla, have been quick to catch up. Earlier, this didn’t quite work in favor of the Firefox browser, mostly because it provides extensive support for third party add-ons or extensions. Newer versions released in quick succession assumed add-on incompatibility by default; as such, any installed extensions would be lost with an upgrade and users would have to wait till compatible versions of their extensions were released. This hurt Firefox’s popularity as its biggest selling factor is customizability via add-ons. Mozilla was quick to address the issue, declaring an extension compatible unless found to be otherwise in a compatibility check.

A major contributing factor to Chrome’s popularity has been its lightning fast performance and relatively low memory/system resource footprint. Firefox and IE, the other major players, commanded greater resources. With Firefox 13, Mozilla claims to have improved on memory management along with start-up times and to some extent, this seems to be true. Besides, crash rates and response time have improved over previous versions. Another plus point!

Chrome syncs to Firefox

Firefox 11 was the first to implement syncing of tabs, bookmarks, history, extensions and passwords across devices, followed by Chrome 19. On the other hand, Chrome’s support for multi sign-on is emulated by Firefox and more recently, Yahoo’s Axis.

Firefox 13 also introduces a tabs-on-demand feature, which puts off loading multiple tabs until you click on them. This feature has evoked mixed response from users, as it presents a tradeoff in productivity over start up time and cannot be used as a long-term strategy to boost performance metrics. Chrome does not implement any such feature, nor does IE. Tab grouping is another Firefox feature that lets you group several tabs together and access one group at a time. So, if you are catching up with tech news blogs the same time you are finding a quick dinner recipe, Firefox helps you cut the clutter, neatly organizing tabs into separate groups, should you choose to. This is even more effective when you need more groups.

IE: Fighting a losing battle?

In the ongoing war between Chrome and Firefox, IE seems to have lost out on popular demand, despite offering significantly better versions in IE 9 and now IE 10 (optimized for touch). Most users are unaware of IE’s superb server-level encryption, over and above the 128-bit encryption that makes it the most secure browser, especially for online banking or e-commerce.

No clear winners

Browser usage is a hotly debated topic, since there are multiple algorithms used by independent entities. Table below summarizes most recent stats from NetApplications, StatCounter, W3Counter and Wikimedia:

All’s well until it isn’t

A treatise on browsers is never complete without talking of how the contenders edge each other out with claims of better online privacy. All major browsers come integrated with pop-up blocking features. You can also clear history, form data, cookies on browsers and set privacy to disable third party cookies used to serve targeted ads by advertising companies.

But that’s the most privacy you could get from browsers, which are themselves notorious for tracking users. However, what makes it worse is when browser vendors take over all your online data, through the offering of integrated services (think Google: webmail – Gmail, blogging – Blogger, networking – G+, photo sharing – Picasa, video sharing/viewing – YouTube) and couple this with your browsing patterns to form your online identity. Some of us might not see any harm in this, but a majority of the online community is definitely upset, so even a spark could create an uproar and hurt user confidence.

Acknowledging user preference for greater privacy, Firefox has been the first browser to offer a Do-Not-Track feature to alert websites when a user doesn’t want to be tracked. Other browsers followed suit, though Google Chrome is yet to do so, probably by end of this year.

The future of web is mobile!

Anticipating future trends and using it to develop a sound strategy is key to business sustainability. Technology analysts have identified an increasing number of internet users is taking to mobile and tablet phones to access the Internet. According to research published June 2012 by Pew Internet, around 55% adult cell owners go online using their phones. If that’s the figure for adults, one can only imagine what it would be like for a much more tech savvy younger generation.

Safari and Android browsers are the leaders in the mobile/tablet phone browser market, each with a 65.8% and 19.2% stake, and Opera at 10.6% is not far behind. This presents a lucrative opportunity for browser vendors to develop phone-compatible versions in a Safari-saturated market, taking browser wars to its third episode.

Although there is no clear winner in the browser wars yet, one thing’s for sure, internet users are spoiled for choice and with each browser aiming to outperform its rivals, feature rich and super-fast performance have become industry bywords, making end user experience even more delightful!

The post Browser Wars 2.0: Bring it on! appeared first on Speckyboy Design Magazine.