In light of the recent COVID-19 pandemic - OPTASY would like to offer DRUPAL website support for any Healthcare, Government, Education and Non-Profit Organization(s) with critical crisis communication websites or organizations directly providing relief. Stay Safe and Stay Well.

Switch from A Mobile-Friendly to A Mobile-First Strategy!

Switch from A Mobile-Friendly to A Mobile-First Strategy!

by Adrian Ababei on Nov 21 2016
How do you find the online landscape now, when the air is filled with new possibilities, opportunities, forecasts, and wishes for 2017?

 
You do find it dominated by the digital environment’s own trends, and technological breakthroughs, right? Moreover, it’s just dictated, as it has always been, by the future-oriented end user, let’s face it.

 
Since more and more mobile users won’t even get to visit your website on their desktop devices anymore, but exclusively on their mobile devices. And since they will visit it more frequently from their mobile phones you need to cope with this context or else you’ll turn into a “dinosaur” stubbornly attached to his “desktop supreme” belief.

 
How should you cope with the (not so) latest shifts in the online world? You should go beyond the “mobile-friendly” approach and you should adopt the forward progression, the “mobile-first” plan!

 

Draft Your Mobile-First Strategy from Day One

If you want to boost its effectiveness, you must draft it from the very beginning, from the product’s/services creation phase, so that you can align it with all your further marketing strategies and business maneuvers.

 
Practically, starting with a mobile-first viewpoint allows you to automatically make all the other business strategies and operations revolve around it.

 

But First, Let’s Analyze Three Different Approaches to Mobile-Friendliness

1. Responsive Web Design

Let’s call this approach (which emerged in 2003) “the pioneer of all mobile-friendly techniques”.

It practically revolutionized the way web designers and mobile users started to envision and to navigate through mobile websites and it’s still quite alluring even now, for many developers, due to its obvious advantages:

 
  • one URL for a given website across all devices
  • cost-effectiveness (derived, of course, from the above-mentioned advantage)
  • adaptability: web pages/content resize to any given width, enabling web users to quickly switch from the way they used to navigate through websites on their PCs, to the vertical type of navigation (scrolling)

     

And yet, as any “pioneer” in its field, responsive web design has slowly started to show its weaknesses:

 

  • “adapting” content-heavy website for mobile devices with fewer functionalities and far less equipped for supporting all the heavy content lead to a significant increase in loading time
  • it inevitably looks like some sort of “compromise”: developed for the desktop and re-thought so that it should somehow fit the small screen devices’ features

     

2. Dedicated Mobile Site

Then, when web design responsiveness starts to show off its limitations, it was time for the “dedicated mobile sites” to shine!

 
Basically, they were subdomains of desktop websites. Users got “detected” when they accessed websites from their mobile devices and they got automatically directed to the mobile version of the desktop site, using a different URL.

 
The big step forward? This was the very first attempt of customizing the experience for the end-user visiting a specific website on his mobile device, instead of just delivering him/her a “compromise”: a shrunk version of the standard desktop site.

This approach paved the way for mobile-specific content strategies. And yet, there are certain disadvantages to this mobile-friendly approach, as well:

 
  • You have multiple URLs to juggle with (mobile and desktop version)
  • If wrongly configured, it could easily lead to SEO-related trouble

     

3. Dynamic Serving (Server Side Components+ Responsive Web Design)

And here is the most complex (for the team of developers who’ll have to respond so some bigger challenges now), but surely the most efficient (from the user’s experience standpoint) mobile-friendly approach!

 
What makes it better?

 
As a web developer, it allows you to display content, using just one URL, based on a user agent. The user reaches a specific website from his mobile device, he gets “detected” by the server-side JavaScript and the HTML, CSS, and JavaScript written and adapted to the mobile is delivered to him.

That, instead of the same content being created for the desktop version of the website and then adapted...  somehow, so that it should fit the mobile, too.

 
Let’s sum up the pros: 

 
  • one URL
  • a much-improved user experience
  • mobile-targeted content

     

Now, Let’s Dive Into the Mobile-First “Philosophy”

I think it’s now the joint project of all of us to make mobile the answer to pretty much everything” Eric Schmidt (Google).

 
Do you need more reasons for making your mobile-first website a top priority than these 2 major ones?

 
  1. desktop devices’ supremacy has started to fade away (more web users will try to access your website from their mobiles and, moreover, there will be quite a lot of them who will be using only those devices for visiting your site)
  2. Google itself is all into the “mobile-friendly” “craze”

     

To these two main reasons for “saying yes” to a mobile-first approach, add 2 main targets, too:

 

  1. freeing your future mobile-first website off all the heavy, unnecessary content, just an unwanted “legacy” from its “bigger brother”, the desktop version of the website
  2. reducing Its loading time and overall making all the displayed info looking neat irrespective of the technology used on the specific devices that your website’s accessed on.

     

Graceful Degradation vs Progressive Enhancement

As we delve deeper into the mobile-first type of mentality that more and more website developers and website owners adopt these days, we should point out two main viewpoints that subsequently developed.

 

1. Graceful Degradation

It is a concretization of the need for a design to work properly across as many platforms and browsers as possible.

With this “goal” in mind, designers strive so that the user enjoys the best experience while visiting a certain website and makes efforts so that this website functions properly, despite the inevitable shortcomings.

 
Basically, the resulting website would need to scale back and lose some of the content that would slow it down or just didn't adapt to certain viewpoint sizes. It was about “losing the heavy content”: graceful “degradation”.

 
This viewpoint’s limitation is obvious: the final product often features the look of an afterthought, of an unpolished (one-size-fits-all) product.

 

2. Progressive Enhancement

The whole perspective changes when you adopt this mobile-first viewpoint.

You practically start by making your website look amazing and function properly on a low technology mobile device, thus trimming it to its core features, and then you progressively add new, heavier content, new features and turn it into a more robust desktop-ready website.

See the difference?

 
It’s a much more organic way of developing a website: from its nucleus, made of its most vital elements, to a far more complex version of it.

No need to rethink it from scratch so that it should work properly on mobile or, even worse, to “make it fit” (and it never does in a “natural” way) for mobile devices. You go your way up!

 
Also, when it comes to content (you know, “the all mighty king”), to the way that it gets enhanced or constrained by these two types of “methods”, the progressive enhancement “wins again”.
It’s obvious why:

 
  • the graceful degradation: all the heavy content gets loaded on the largest platform and even though much of that content is removed from the mobile web pages, the already loaded heavy content still slows down the mobile website.
  • the progressive enhancement: the basic elements get loaded first, making navigation much smoother on a mobile device and loading time much lower, and then progressively additional resources get added, when/if needed (to platforms that can support them well).

     

The Top-Down Method vs The Mobile-First Method

We’ve already tackled these two mobile-friendly types of approach, but without actually naming them, so we’ll just sum up the basics:

 
1. The Top-Down Method: creating a website for large-screened devices, then “decreasing” it for smaller and smaller-screened devices.

The main shortcomings are:

 
  • overloading mobile devices with way too heavy content, with too much information
  • omitting many of the tempting features and functions specific to mobile phones

     

2. The Mobile-First Method is all about usability, all about user-friendliness.

Start with the highly simplified, core version of your site which should work perfectly on devices equipped with lower-tech and level it up so that it should evolve into a website suitable for the latest high-tech devices.

Facing simplicity (you’ll practically have to “work” with only 80% of your desktop’s screen size), maintaining it and turning it into your main goal, enables you to keep focused on the core elements of your website. And on how the end-user can carry out any given action on your site as quickly and intuitively as possible!

Going from small to big is always far easier and it seems to be far more efficient, too!

 
Needless to add that the approach to mobile-first design is a flexible, constantly evolving strategy.

It needs constant “trimming”, constant modifications so that it organically adapts to all the technological changes and to the shifts in mobile users’ way of interacting with the digital world, as well!
Development

We do Web development

Go to our Web development page!

Visit page!

Recommended Stories

Web Design + Digital Marketing = Success
  “Marketers need to build digital relationships and reputation before closing a sale.” - Chris Brogan, Chief Executive Officer of Owner Media Group. And how else can you build brand reputation in the digital era than with a robust online presence? Today, leading companies are leveraging web design to sustain their digital marketing efforts and are seeing remarkable business results. The following article provides a clearer picture of how digital marketing and web design can work together to deliver digital-readiness and build long-term customer relationships. What makes a great web design strategy?   User-friendly web experiences. One of the primary purposes of a website is to build brand awareness, attract, and retain customers. Consequently, when crafting your web design strategy, the user experience should be a top priority. Think big: accessibility, usefulness, credibility, value, desirability, usability, ease-of-use. All of these are core elements of what attracts website visitors to turn back to your site and, ultimately, become your customers. Search engine optimization (SEO). An SEO-centric web design approach will help you build a solid online presence and a long-lasting brand image. When thinking of SEO, you must consider your long-term objectives and adjust your optimization techniques according to these objectives. On-page and off-page optimization methods, meta descriptions, catchy headlines, alt tags in images, etc., are just a few of the elements in the arsenal of a solid SEO strategy.  Content optimization. This is the backbone of your website, and it can work well in tandem with SEO. When done right, your content will be easy to read, accessible, comprehensive, and informative. You don't want to overwhelm website visitors with too much text, so keep it short and concise. And don't forget about engagement. Think from your audience’s perspective—what would you like to learn from the content displayed on your website? Streamlined navigation. It might sound basic, but the truth is many websites could use some serious work when it comes to navigation. A user-friendly website allows visitors to quickly move from one page to another without 'getting lost'. A site map can prove to be really effective for this purpose, offering interactive and functional features for the users to know exactly where they are on the website and how to get to the desired location.  Branding. Your website should reflect your brand's identity, your business’s culture, and the way you relate to your customers. You can create this brand-website link by investing in visually connecting your logo, print material, and brick-and-mortar location. In this way, you'll add an extra layer of credibility and enhance your brand’s overall image.  “Your website is the center of your digital eco-system, like a brick and mortar location, the experience matters once a customer enters, just as much as the perception they have of you before they walk through the door.” - Leland Dieno. What makes a great digital marketing strategy?   Content management and planning. To be successful in digital marketing, you need to set realistic frameworks from the beginning. There are plenty of strategies and tools that can help you with this, such as content mapping, editorial calendars, or timelines. At this point, you want to plan smartly and organize your project with well-defined outcomes in mind. However, nothing is certain in life, especially in business, so leaving room for uncertainty can be a productive mindset. Set your key performance indicators (KPIs) and ensure that they match your overall business goals. Choosing the right KPIs. Speaking of goals and performance metrics, how do you accurately set them? To stay on target, you must understand your digital needs and marketing efforts. There are some key questions to ask here:      How are your KPIs connected to your objectives?      What's the subject of your measurements?      How do these measurements relate to the user experience?      To what extent do you need to monitor these specific metrics?      Answering these questions will not only help you go beyond data and address the human experience but will also support a solid digital and sales marketing strategy. Leveraging effective content strategies by addressing the 3 R's of engaging content: reliable, relatable, and relevant. Getting to your audience and performing effective outreach campaigns relies on wisely chosen content. Provide your customers with fresh, relevant information, and you'll quickly build trust and position yourself as a reliable advisor.   Strategies are important, but so is flexibility. In business, as in life, it is always wise to leave room for uncertainty. That means building a strategy that is flexible and can adapt to new, unexpected scenarios. In other words, leave some unfilled spots in your timeline so that you can, later on, incorporate things like viral competitors' articles, trends, and current events, or unforeseen expenses in new technologies. To build flexibility, ask yourself these questions from time to time:      Where could I improve my strategies?      Which tools should I choose to keep the business in line and better organized?      Where is the business getting the most traffic from?      What KPIs am I interested in at this stage? Measure your content's performance and see where it is heading. In digital marketing, you always want to know where the business is standing. That's why visualizing a clear direction and planning accordingly to reach your goals is essential. That means being aware of each stage of your funnel and adapting your strategies to match your current activity’s needs and demands.  Why web design and digital marketing should work together?   The impact of web design on your digital marketing outcomes is substantial. The way you design your website speaks volumes about your brand, and it plays a vital role in how your overall business is perceived and engaged with. Elements like the website experience, SEO, social media outreach, and branding are essential components of your digital marketing ecosystem. Blending web design and digital marketing is a modern approach that takes digital businesses to the next level.  “Websites promote you 24/7: No employee will do that.” - Paul Cookson. What are your thoughts on the importance of connecting digital marketing and web design in a holistic business approach? If you want to leverage the full power of the digital, have a look at Optasy's services and see how our experienced team can craft a personalized digital strategy that will suit the needs of your business. Let us build your roadmap to digital success! Photo credit: edhoradic on Unsplash.   ... Read more
Raluca Olariu / Mar 18'2021
Blog Placeholder
The design and development industry continues to grow more competitively over the years. Agencies that have specific niches and all-around firms are popping left and right. Aside from those, there are also different types of development and design works. As a player in this game, we are driven by our clients’ reception. We value their success and their feedback more than anything else because that’s how we will continue to thrive and grow. We are OPTASY, a digital commerce, marketing, and web development agency based in Toronto. With 16 years of experience under our belt, we’ve experienced so many ups and downs that equipped us with the knowledge we need. We’re an internationally renowned and award-winning team that continues to work hard for our clients. With that said, it has just recently come to our attention that we’ve been selected by Clutch, an established B2B review agency, as one of our nation’s industry leaders. Our team has ranked among the top Drupal and Magento designers and developers because of our spot on projects. "We are thrilled to have been chosen as one of the leading web developers by Clutch!" - Adrian Ababei, CEO of OPTASY, Inc. Clutch also created a list of the top fifteen companies. They measured agencies’ ability to deliver and service focus to determine the industry leaders — and OPTASY ranked sixth on their Leaders Matrix. In addition to that, our team is also found on The Manifest’s, Clutch’s sister site, top 100 mobile app developers in Canada list. This helps us prove that we can handle different projects and deliver phenomenal results. These two recognitions are igniting our drive to further our success this 2021. We are grateful for those who support us, especially our clients. This means so much to the whole OPTASY team.  What can we help you with? Contact us and let’s start collaborating! ... Read more
Adrian Ababei / Feb 15'2021
5 tips to pass your Acquia Site Studio (Cohesion) Certification Exam
A few weeks ago, I had the chance to take the Acquia Site Studio (formerly Cohesion) Certification exam. In this post we are going to discuss why I took this exam and more importantly, how I passed it and became an Acquia Certified Site Studio Site Builder. Optasy and its commitment to quality through knowledge You already know that quality is part of the corporate culture of Optasy. For us quality is a key factor to protect our clients' investments and guarantee them a high ROI. But having a good QA department is not enough. Actually, it's often too late when the QA team detects an issue. At Optasy we prefer to ensure quality at the early stages of our projects, analyzing deeply the needs of our clients and transform them into effective digital experiences but we also know that the quality of the code we produce comes from the experience and the skills of our developers. That's why Optasy has an internal 'skill knowledge acquisition program' to help its employees (optasians) to acquire new skills or improve them. This program gives to each optasian one day off per month (paid by the company) to study a particular field. As a way to ensure knowledge acquisition and validation, optasians also receive paid leave to study and give their Acquia certification exams. This includes the exam cost too, that’s why many of the optasian developers are actually Acquia Certified developers or Acquia Certified site builders All things considered, it was a pretty easy choice for me to take the exam, not only do I get to improve my skills, but I get paid for it too! What are the Acquia certification programs? Acquia is a preferred Optasy partner that delivers a cloud-based digital experience platform built on Drupal that enables organizations to build experiences that scale. Acquia is committed to facilitating certification programs allowing developers to validate their Drupal skills year after year. Acquia certification exams are administered at Kryterion Testing Centers in more than 750 locations across the globe. Exams are also available as online-proctored tests and are often offered at DrupalCons across the world. What is Acquia Site Studio? Acquia Site Studio (formerly Cohesion) is a low-code solution for building and editing Drupal sites. As an Acquia partner, our team got the chance to become an early adopter of the technology.  Acquia Site Studio is a sort of layout builder on steroids without writing any line of code. Not only can you build layouts or templates, but also you can build whole websites from the headers to the footers, and everything in between, like components and widgets, just by using the interface. No code required! It's a kind of atomic design system (like Pattern Lab) where you can create and preview CSS style guides, components, template layouts, page layouts or view layout from a visual user interface with simple “drag and drop”. And all of this within your Drupal site! To be fair, Acquia Site Studio is an amazing tool allowing designers and marketers to create and modify any layout component without calling the development team. If you’re a designer with no coding knowledge you’ll be able to create totally unique layouts based on your designs using intuitive drag and drop layout builder. If you're an editor, you may choose the layout you want to use and add all the pre-designed components you wish. Want to add a slider or a 'Related Articles' block? You drag and drop it in your layout! 5 tips to successfully pass your Acquia Certified Site Studio exam As other Acquia Certification exams, the Certified Site Studio exam requires both experience and knowledge. Though the test is not difficult, it’s not something you want to run into unprepared. From my experience, the questions ranged from a very low to medium range of difficulty, there were barely any difficult questions. This exam validates your ability to: Understand the features and functionality provided by Site Studio Install and configure Site studio environment on new or existing websites. Build a website using Site Studio style builder, components and website structure design elements. The official description of this exam can be found on Acquia's certification overview page. But in short: The tests are all multiple choice. They don't require that you actually configure a Drupal site or write any code. They are available in person at a testing center, or at home by installing the exam software on your computer. The price was $155 (In my case, Optasy paid for the test) Get a good understanding of Drupal Layout Builder As I mentioned earlier, Acquia Site Studio is a Layout Builder on steroids and many concepts are the same, so having some experience with this Drupal module will help you a lot, like the inline editing tools or the concept of drawing element into the layout. This is not mandatory, but I felt really comfortable with Site Studio having this previous experience. Read carefully the contents of the exam On Acquia's certification overview page you'll find the blueprint of the exam like the following: But below it, you'll find the content itself. Read it carefully and repeatedly. This should be your guideline during your study. This will help you focus on what really matters but also to recap and structure your notes. Read and study the documentation While there are really good videos on the Acquia Academy site about Site Studio, watching all of them won't be enough. If you don't have prior experience with Site Studio, it's a good starting point. But it definitively won't give all the knowledge you need to pass the exam. Reading the documentation should sound obvious, but you'll really need to read and study all the documentation in depth. Don't leave anything behind cause the exam covers all the aspects of Site Studio, from the basics to more advanced topics. This will also give you the right vocabulary to understand the questions of the exam, since sometimes they can try to trick you changing just one word. So the technical vocabulary has an important role, and that's where the documentation comes into play. Write down some notes after reading each section. This will help you a lot during the recap! Train on the Acquia Site Studio demo environment You can request an online demo environment for free at the bottom of this page The main benefit is that you won't need an API key or an Agency key, so you can test Site Studio for free, the environment acts just like a normal Drupal website. and the site will be all yours to experiment on. This site will be your friend during your study, you should test everything you learned in the documentation here. Do it several times and try different cases. The night before the exam, after reading back your notes, try to build a site from scratch in this environment to recap all the main concepts. This is key! Don't forget the 'Miscellaneous concepts and features' part These three concepts are not placed in one section, they are dispersed in the documentation. Study and practice all of them because you'll have a question about each one. They are only three, it doesn’t sound like a lot but they are worth 15% of the exam! That is a quick and easy win! A bonus tip What really worked for me was to read a section, practice the concepts of this section in the demo environment, read again the same section and take some notes. The day after, read all the notes of the previous day, do the same 7 days later, reading back your notes and practicing again on the demo site. That way, 80% of what you studied will stay forever in your memory. Conclusions Acquia Certification Site Studio Site Builder can be a good way to validate your skills and knowledge There are barely any difficult questions Study all the documentation because the exam is based on it, but also because the exam will cover all of it. Practice a lot, recap a lot. ... Read more
Karim Boudjema / Aug 27'2020