website design

4 Tips of Desktop-First Design for Responsive Websites

Posted on by Mario

responsive website

Nowadays, where all attention is in mobile-first design, desktop-first design seems less popular. This is because many designers aim to create responsive design. However, starting from desktop is not the bad. In fact, this design works better if you want to create feature-rich designs. This workflow may not as popular as mobile-first design, but as a web designer, you should know why you also need to put attention on desktop-first design.

The Benefits of Desktop-First
Generally, desktop first is something that everyone made websites up until the responsive era. Today, with so many people talk about mobile first, there are still so many reasons why we have to stick with the desktop approach, especially if you want your site have tons of detailed features on larger screens.

Here are some benefits of the desktop-first ideologies.

  • You get to see all major features at once
  • It lets you imagine all the largest possibilities for your design first
  • It’s the best strategy if your audience mostly uses desktops/laptops

You must think that any modern websites like Twitter puts mobile-first design. However, even Twitter have lots of extra features that come along with the desktop experience. Therefore, you need to create feature-rich websites that depend on a strong desktop design. This is perhaps the biggest benefit of a desktop-first layout. You get to see the site as it should look with all of its accessories. These extras can be removed for smaller screens as you test and find certain features just don’t carry over well.

It’s easy to consider dynamic features more like an afterthought with a mobile-first approach. But, you’re treating these features as the primary display method with a desktop-first approach, then choosing to remove them as needed.

No one is better than other, so you can try both of them to see what you prefer. Working from smaller area or starting from desktop then working smaller.

Supporting All Browsers

Handling browser support is the trickiest part of desktop-first design. In fact, it is reasonable for all mobile browsers to basically support the same features as desktop browsers. The main difference can be seen not in HTML/CSS support, but rather in touch-based support.

So, it is important to consider how the different browsers work, what they support, and how to handle the user’s touch-based input when moving from desktop to mobile. A few good rules to consider while scaling down your desktop-first design:

  • Increase body text size so links are easier to tap
  • Make tappable elements larger
  • Add JavaScript libraries that support swipe motions

Graceful Degradation
Graceful degradation is a process that builds all your website’s top features with everything you want on the site, and then if other browsers can’t support them you revert to fallback methods. A common example of this tactic is the removal of dropdown sliding menus for mobile. However, rather a change in user experience, this isn’t strictly graceful degradation. On the other hand, you’re searching for JS functions or CSS3 properties that literally cannot be supported in a certain browser.

When Desktop Takes Priority
After all, you can think about designing a site where desktop takes priority over mobile. If the mobile experience can be incredibly simple but the desktop experience needs to be detailed and dynamic. But, you also should have a plan for the mobile site with at least a vague idea in mind of how it’ll look.

 

Guidelines to Avoiding Google’s Penalty Caused by Intrusive Interstitials

Posted on by Mario

Intrusive interstitials guidelines to avoiding google's penalty

This year, Google has made one recent change known as the intrusive interstitial update. This update aims to penalize intrusive popup ads which affect the mobile user experience. No wonder that some websites have experienced lowered mobile rankings. If you are working in SEO service field, this thing may become one of your concerns. But, don’t worry as you can avoid Google’s penalty caused by intrusive interstitials. Figure out the solutions in the passages below.

Decrypting the Intrusive Interstitial Update
First of all, it’s a mobile popup penalty.  Secondly, it’s an intrusive popup penalty. In light of this, Google wants to make sure that ads and popups do not interfere with the user experience. By devaluing pages with popups and overlays on the screen, Google can help users access the content they’ve requested in the first place.

What is the Impact of this Latest Update?
Pages with intrusive interstitials will no longer consider as being mobile-friendly. This is because obstructing content on mobile with ads or other popups is against Google’s guidelines. Ads or popups on screen causes the content inaccessible for a few seconds. In fact, Ads displayed over content are no longer acceptable on mobile. This includes popups that appear when you load the page from Google or when you scroll down.

What Constitutes an Intrusive Interstitial?
Intrusive interstitials will lead to a frustrating experience for desktop and mobile users alike. In fact, it tends to block most or all of a page. This will hinder visitors from experiencing your site as they block the content that visitors seek unexpectedly. In light of this, intrusive interstitials has become the biggest enemy as on desktop they are annoying at best and can ruin the entire experience on mobile.

What is still Permitted and not?
Even though, you have to deal with pop ups ads, but this doesn’t mean that all pop ups are forbidden. In fact, some popups are still permitted, such as:

  • Intrusive popups are still ok on desktop
  • Interstitials triggered by exit intent are still allowed
  • Page to page interstitials will not be penalized

Types of intrusive interstitials that will be forbidden are:

  • a popup or modal window that blocks most or all of the content on a page (this is basically a full-screen interstitial above the header);
  • a standalone interstitial that’s not responsive and that blocks the content;
  • a layout in which the content above the fold has the look and feel of an interstitial and requires dismissal or scrolling in order for the user to reach the main content beneath the fold.

Workarounds
Popups is frustrating indeed, but companies use them as at some points they are effective. So, if interstitials still become the best options to convert users for your websites. You can consider keeping them on the website by a no-index tag in your code. However, this will cut off organic traffic from Google to that page.

Therefore, designers, developers and marketers must create another ways to generate revenue. A sound strategy would be to leverage content marketing to educate audiences and guide them through the buying process. In the other words, you should move away from interruption marketing towards permission marketing.

So, the solutions that you can do related to this situation are; audit your popups, cookie notifications, overlays and big banners. This is to make sure that they comply with Google’s new guidelines. Furthermore, make sure that don’t take up space more than 15% from the screen to avoid penalty.