What's the ideal dosage for putting together the perfect blending of functionality and design in an app? Does functionality come first and steals design a bit of its fame or, on the contrary, it's the fine looks that catch the eye and this first good impression gets, later on, strengthened by great functionality, easiness to use and all that?
Does clean and clear, simple and elegant, refined and minimalist mean... basic?
How can you be unique in a huge mass of uniqueness and creativity bursting apps developers? What if uniqueness hinders functionality? What if functionality constraints uniqueness.
Well, these are just some of the questions you might ask yourself now, when you've got your “moment of pure genius”, you've had a greater than life idea of an app and now you face the challenge of making it steal the spotlight, of making it set itself apart from a huge crowd of great apps, all trying to woo and entice the User.
We don't have the answers to all of your questions. Still, we have 10 tips and tricks that we hope will boost light on your path (to success) and boost your confidence as an app developer:
1. Make it Unique
“Duh!”, you might say, but still, we need to stress out (over and over) the high importance of being ten times more unique than your competition.
You need to “exhale” creativity, so wrap up your app in distinctive features and appealing (nothing like your users have seen before) visuals that will help it stand out from the crowd. Pour uniqueness in all the stages of your app's development: from its name, to its graphics and to the engaging content you insert in.
You can't afford to go for “safe and easy” and “nice and cozy” when competition is as high as in apps' world!
Extract uniqueness from every feature! So what if the idea of your app has been already exploited over and over again? Think outside the box:
drop in some good sarcastic humor it that defines you
go for a totally new type of design
focus on one single detail, that has been neglected by everyone else, and cast a light upon it
put in some of you as a unique human being able to tell his/her very own unique story
and success will come, we guarantee you. Just that the road to success is paved with uniqueness, that's all!
2. Put Your Lights (Keywords) On
Put your keywords to work! They'll be the shedding light upon your app!
Still, don't rush in to pick basic info related to your company that anyone can easily find online or keywords overused by your completion already.
Stick to your uniqueness-paved road to success. Remember? Carefully choose the keywords that best speak out of your app's amazing features. Select your “own” keywords!
3. Detail It
It would be such a shame to leave out some of the awesomeness of your app, not to shed light on some of its great features now wouldn't it?
Therefore, make sure you accurately describe your app to your users! Start with a concise, yet “powerful” sentence that will present/market your app's distinctive feature (what it does that others don't, what makes it stand out, how does it... ease or brighten up your user's life)?
After he/she will have read your description, your user has to get instantly familiarized with your app's main functionality and luring features. Make sure to put in all the info that makes your app unique, to include all its beneficial features in its description and to make your text as easy to read as possible as well.
Convey the very essence (what makes it different from is previous versions an what makes it set itself apart from other similar apps), but don't spare details that could help your users get familiarized with it.
4. Think Global
Going for a cross-border distribution strategy is not an option, it's a must!
It's either a “Dare and think big!” or a “Stay connected to the globalized society!” mentality. Pick the one that suits you best and make sure you keep this in mind: create multiple versions of your app for different key markets around the world.
Adapting it to new and new environments, cultural differences.... now that's going to be a “sweet” challenge that you'll have to respond to!
5. Dazzle Them With Graphics
Again, you might think (as in the case of “uniqueness”): “Duh! Of course my app has to feature outstanding graphics!”
Well, we just wanted to double check that you're aware of how great looks sustain and enhance functionality! So, go ahead and mesmerize them with great graphics!
Let your jaw-dropping images convey the message you want convey and to stir the type of emotion you want to trigger in your users. Strategically use the colors affiliated to the mood you want to create through your app. Should your app fill up your uers with energy or rather to help them relax after a hard day at work? Make great graphics serve your goals!
6. Go For Eye-Catching Icons
“Don't judge a book by its cover!” So not true in case of great apps!
Face it: it's that tiny little icon that will determine your app's trajectory: up for fame and success or... down to “eternal” oblivion. Which one should it be?
Here are a few tips for you, for creating “attention-grabbing” icons:
lose the words: no need to get your icon stuffed with text no one can read and which, moreover, tends to outshine the icon's awesome graphics. Don't sabotage all your work from the very beginning!
keep it clear, simple and different: take that small window put at your disposal as a tiny canvas that you have to project your app's specificity on. Here, conceptualization is key if you really want it to make it stick it to your users' memory (you surely can think of some great brands which are easily recognizable though their so very conceptual logos, right?). Consider your icon as your app's logo in apps' world and, therefore, put a great deal of effort into its design!
make it simple, yet not rudimentary: you don't want your icon to have an unfinished, unpolished look. So, although you have to stick to simplicity, do feel free to play with colors, highlights, reflections, shadows
7. Keep It Simple
Remember the UI trend forecasted to make waves in 2017, the one related to “extreme minimalism”, that we pointed out to you in one of our previous posts on this blog?
Well, here we are stressing out the importance of keeping your design simple and elegant once again. Keep in mind that your users will be on the road and not comfortably seated in their desk chairs at home, facing their PCS.
So, whenever you think you've put together a minimalist design for your app, ask yourself this: “Should this be the very last variant or I can still simplify it (and thus refine) it even more?”
When it comes to UI deign, a simpler interface will definitely keep your users engaged some more. So, place your bid on simplicity! Effectively use your colors and ease your user's job, making it simple for him/her to do more with less touchscreen gestures. Keep it simple and your first-time user will turn into a regular one!
8. Make It The Easiest to Use
Considering the frenetic lives we're living and the tremendously fierce competition in apps' world (with so many other apps out there “fighting” for your users' attention and loyalty), making your app easy to use shouldn't be your goal anymore. You need to make it the easiest one to use instead!
It's not an easy job for you, we're well aware of that, but if you manage to achieve his ultimate goal, if you manage to skillfully mix and match chunky font with intuitive swiping and bright colors and to come up with a super easy to use app, then expect to see it there, on apps' “walk of fame”!
9. Build Some Buzz Around It
Spread the news about your awesome app, show it off to some of you target users, in a few words: create some buzz around it. Don't rely exclusively on its official launch for releasing it into the wild!
Strategically put together the proper “launch” environment for it:
rely on keywords-related methods (App Search Optimizatio and Search Engine Optimization are but 2 solutions you could choose from)
design the screenshots that make the perfect curiosity-stirring teasers
10. Design It For Them, Your Target Audience
That's right, no need to be a daydreamer and think that EVERYONE, regardless of age, profession, sex, level of education, location etc. will love your app!
Instead, make sure to dazzle and make a difference in your own' segment of the whole audience targeted by the apps' ecosystem. Once you've defined your target audience's portrait, keep it in your head throughout the entire app development process!
These are our 10 tips for you, aimed at helping you make your next app stand out from the crowd! How does your own “toolbox” look like? What other trends, surveys and advice from those who've already “made it big” in apps' world do you rely on in your work as a remarkable apps developer?
Adrian Ababei / Nov 28'2016
Here you are, facing a major challenge: you'll be moving your “precious” site (or your client's site, but still “precious” for him/her and for your own reputation) to Drupal 8! This is process is called: the Drupal 8 migration.
What if something goes terribly wrong? What if you lose valuable information during the process? What if the final look and functions turn out to be less amazing than what you've already heard and read about the highly praised Drupal 8?
No need to freak out, we're here to reassure you: you've taken the best decision!
Moreover, we're here to help you with a risks-minimizing and workflow efficiency-boosting guide that will show you how to upgrade your dear website and have it running in Drupal 8 in no time! It's all about a little bit of planning and putting all the implied processes into place, that's all!
Speaking Drupal 8 migration, just to make it clear, we'd like to mention that: although the whole website migrating process includes configuration migration, updating your websites theme and content migration, too, we'll be focusing on content migration only in this post (by far the most "daunting" one).
Effective Drupal 8 migration: Its 5 Main Phases
Before you proceed with any one of your future Drupal 8 migration projects, we strongly advise you to take your time to go over these 5 major steps to take if you want to ensure your projects' success:
1. Audit Your Source Site:
analyze the site to be migrated, see how its content is structured, how it looks, what it uses
to examine its taxonomy terms, users, menus, fields, content types, in a few words: don't let anything skip your "inspection"
2. Plan Your Data Model:
once you've closely analyzed the source website, it's time you (and your team and client) took some major decisions: what stays on, what should be removed, what corrections/modifications should be performed. To put it simply: it's now that you plan out the content that the future Drupal 8 site will display
3. Get Everything Prepared for Migration:
at this stage you'll first overview and then make use of the contributed modules, you'll work with Migrate API, configure and run your migration
4. Put Together Your Migration Strategy:
hopefully (for this is the best practice for reducing downtime) at this phase of the whole migration process you'll opt for a near-continuous content migration variant
5. Launch Migration:
set up a timeline and be prepared to mitigate any risks that might arise (either before or post launching)
A Drupal 8 Content Migration Example
Before we proceed with the “enlightening” Drupal 8 migration example that we've promised you, let's have a quick look at the modules which will make the whole “transition” to Drupal 8 possible?
Migrate Module: part of Drupal 8 core, this module will serve you both with the content and the site's configuration migration process
Migrate Plus: comes with additional functionality (you get to migrate from XML, JSON and CSV formats)
Drupal Upgrade: it's the one to install if you want to operate in a web interface (which will enable you to specify the files directory and the database of your core site. Once the migration has been completed, you'll get to see all the successfully migrated entities in the report that it will provide you).
Warning!!! Don't forget to back up your future Drupal 8 website!
Now here's that migration example! It briefly describes all the steps to take for migrating the files that Drupal 8's Migration module won't migrate (images here included).
1. Migrate Your Website's Background
Let's imagine the following task from your Drupal 8 migration project: you need to import TV shows into Article nodes (from Tvmaze's JSON API).
You'll have to define our YAML file, migrate.migration.shows.yml:
id: shows
label: 'TV shows'
source:
plugin: json_source
path: 'https://goo.gl/uKiuxw identifier: id
identifierDepth: 1
headers: { }
fields: { }
constants:
type: article
format: restricted_html
destination: plugin: 'entity:node'
process:
title: name
body/0/value: summary
body/0/format: constants/format
type: constants/type
Can you identify the 3 main section here?
source: it informs migrate about the “source” that our content comes from .
destination: it lets migrate know what exactly is it that we want to generate (in the above example: nodes)
process: this section informs migrate that it should turn JSON into Drupal fields (summary turns into node body, while the name from JSON becomes the node title)
2. Write a Process Plugin
The next step one on our wish list is “adding images”.
Since it's not the URL of the poster image that we'd like to add, but its contents themselves, we face the second challenge of this 3 steps migration process: writing a process plugin (since there's none, already available in Drupal 8, that actually downloads a URL) that will enable us to transform our URL.
So, we inherit from ProcessPluginBase and apply the transform() method which handles $value as a URL.
Next, once we get our plugin's name (file_import), we'll update our process section:
process:
# snip
field_image:
- source: image/original
plugin: file_import
3. Run Migration
Here are the 3 last steps to take for finally running your content into the Drupal 8 migration process:
check whether all the proper modules are installed: the Migrate Tools module, migrate_source_json and the custom one, with the process plugin that you will have already written
import your YAML file
run migration with Drush's migrate commands: drush migrate-import shows
And this is how you migrate images and other types of files (other than SQL dumps or JSON files) to Drupal 8! Was is hard? Do you find the Drupal 8 migration of content a complicated process? Feel free to share your thoughts!
Adrian Ababei / Nov 25'2016
There, there, no need to get yourself stressed out over all the new Javascript libraries trying to lure you with their irresistible features. It's impossible even to test all of them!
Why should you allow this whole array of equally tempting choices to “sabotage” your efficiency by keeping you from creating new amazing websites and innovative web apps?
So, how can you keep your focus? By keeping a close eye on these 10 (lesser known) JavaScript libraries that we're convinced that will gain popularity and become the 10 most influential ones in 2017.
Find out what our predictions rely on!
1. Node.js
A bit sick and tired of hearing everyone in the web community keep talking about Node? No wonder it's one of their main topic:
it's one of those JS libraries that keeps on growing and growing at a mind-blowing speed, no doubt about that
it makes that reliable “boost”, the ideal environment, for any developer to get his web development project started with
it turns local packages management into a “child's play” in the command line
it eases your unit testing (in Mocha.js) work
it puts the Sails.js framework at your disposal for building your front-end interface
2. Riot.js
Now here's another JS library that will be wrapped in glory in 2017! Mostly front-end developers will get all excited around it!
Where will the excitement come from? Its helps you create powerful digital interface libraries!
But what makes it a strong alternative to React, one that you should even consider?
Here are just 3 answers to this legitimate question:
the whole community of developers backing up Riot.js, that you get to rely on, will make getting the answers to your questions much more time-efficient
its simple syntaxh makes it easier for you to control it while you're access DOM
it makes the perfect choice for customizing the elements of your app
3. Keystone.js
We could say that Node.js “passes on the torch” to Keystone.js.
Once you've used all of Node.js' capabilities in your web development process, reach out for Keystone. It will empower your website/web app with a 100% JavaScript, full-scale CMS engine!
4. D3.js
What do you currently rely on for creating eye-pleasing visualizations of your data?
Whatever you're using, you should definitely let D3.js stir your curiosity.
It has no rival among the JavaScript visualization tools. It will help you add the modern edge to your graphs, dynamic visualizations and charts in no time.
Give it a try! Don't let the trends in the big data industry pass you by, be the one who crafts the trends!
5. Create.js
On a constant look for the best toolkit to rely on when you create all your web animations and digital media “awesomeness”?
Well, you should consider Create.js for the role of “assistant” in your work. It's so much more than just “another JavaScript library”: it's a whole collection of libraries in fact. Each one of these “sub-libraries” spoils you with certain features and help you target certain parts of your digital media projects, so that that you should pick the ones that specialize on what you want to achieve in 3D.
For instance, one library/feature will help you build custom animations for the web, while others will help you handle the HTML5 canvas elements. Got the idea?
6. Meteor.js
What's your future web development/web design project? And your second one? How about the third one in your schedule?
Well, learn that you can practically build all these platforms on Meteor! All of them, plus the ones that are still in the phase of ideas populating your imagination!
Being an open source project, it empowers you with unlimited freedom of creation and innovation. From chat apps, to social media platforms, from custom dashboards to social voting website you can build anything from the ground up on Meteor and React.
Unlimited possibilities? Who could say no to that?
It's true though that Meteor is for the skilled web developers, it's not one of the easiest JS libraries to learn! Therefore, expect to have your brain muscle challenged a bit before you get to play with its whole array of great features!
7. Vue.js
Are you in the Angular fans team or in the Ember addicts team?
Now what if I told you that a new “actor” will be stepping on the stage and stealing the spotlight: Vue.js?
For front-end developers it will be more than just “lucky no. 3”. It's a MVVM front-end framework and it's Javacript (how else!)! Therefore, it steps away from the standard MCV architecture.
Although learning it might turn out to be quite a challenge, don't let that discourage you: this is going to be the two typical front-end frameworks' (Amber and Ember) big “rival” in 2017, so you'd better be one step ahead of trends and start learning it now!
8. WebVR
How's your VR projects coming along?
JavaScript comes to streamline your workflow with its' new API made for VR in your browser.
It's still under testing (and being an open source you can just imagine the “army” of developers testing all its weaknesses, checking how it works on VR devices and in the latest browsers), but even so, dare and rely on our prediction: you want to keep an eye on it in 2017!
9. Chart.js
Name a type of chart that you need to integrate in your website/web app and we'll tell you that you can easily put it together with Chart.js.
Besides the cool data graphs that you can build, we've put this Javascript library on our list due to its other tempting features:
it's so easy to customize
it's easy peasy to set it up, too
it comes already upgraded with great options for animations
it's an open source, meaning that you gain access to helpful documentation, too!
10. Three.js
And here's a more than useful JavaScript resource whenever you feel the urge to pull off some:
unbelievably realistic motion-sensitive backgrounds
mind-blowing 3D effects
amazing 3D web graphics
Don't you look forward to 2017 now, knowing what cool JavaScript libraries will get perfected and ready to help you enhance your full potential as a developer?
Adrian Ababei / Nov 24'2016
Has all the craze about Drupal 8 got to you, too? Have you started to "fantasize" about it:
tempting easy-to-customize components
HTML5, mobile-first input
quick edit feature
responsive admin
100 languages feature
and all the other "hard to resist to goodies" that the latest version of Drupal comes enhanced with?
Well, my friend, it's time you stopped fantasizing about it, bid farewell to good old, familiar Drupal 7, and level up to Drupal 8.
In order to make this "breakup" easier for you, we've put together a how-to guide that will help you build your very first website in Drupal 8 as quickly as you say: "Drupal!".
You won't believe how quickly you'll have your Drupal 8 site running and looking great!
1. Instal Drupal 8
Before you rush in to install Drupal 8 on your PC, laptop/ server, make sure you have the proper "welcoming" environment for it on your system. I'm referring here to all the must-have software: MySQL, Apache, and PHP.
After all the due preparations, it's time to install Drupal 8! Here's the step-by-step installation process:
Download Drupal 8 (its latest version)
Extract the distribution (from Apache)
Create your database
Then the settings.php and the files directory, too
Run the whole installation process (by accessing your website in your web browser)
Et voila! You've just carried out step no.1. Easy peasy, right?
Now let's hurry up and put together the foundation of your first Drupal 8 website, a foundation made of 4 basic building blocks: Users, Taxonomy, Content Types, Menus.
2. Create User Accounts/Add Roles
Will there be a “one-man show” on your website, meaning that you'll be the one authoring, editing and managing all the content? Lucky you then! You can skip this step, for the admin account that you've got yourself with during the installation process will be the only one you'll need.
If this is your case, then you can just rush in to step 3!
If, instead, you'll be teaming up with a bunch of talented people for creating amazing stuff on your website, then you'll need to create user accounts and assign roles to your colleagues, right?
Here's how you do it in Drupal 8:
A. For creating new users:
Log in on your website's homepage. See the admin menu at the top? Awesome! On the menu there you need to click Manage, then, in the next menu popping up, click People.
B. For assigning roles:
Go to Permissions tab. There, on Permissions page you have a whole list of permissions available for you to assign to the various roles the users on your website will play. Select the permissions to be given to each role (what features/functionality on your website they'll gain access to).
C. For creating new users accounts
Click on the List tab, then on the Add user, fill in the right values and you will have created your first user account, apart from the admin one (which is yours).
3. Create Taxonomy
What's “taxonomy” and why do you need this fancy-named core module for your Drupal 8 site? Because it will help you build up a nicely structured content architecture. Basically, it enables you to organize your content by key terms and phrases related to the specific vocabulary used on your website.
In this respect, Drupal 8 enables you to create vocabularies made of taxonomy terms:
Go to your Admin menu, click Manage, then Structure, and last Taxonomy.
It's in Taxonomy that you get to create one or multiple vocabularies and to“populate” it/them with taxonomy terms.
4. Create Content Types
And here we are, to step no. 4, facing the content's (The King) creation issue.
Will you settle with the 2 core content types that Drupal 8 puts at your disposal upon installation, article, and basic web page, or do you crave a bit more complex templates? Templates that should include a bit more elements for your authors to juggle with than just body and title?
If you've chosen the second variant, then here is how you can quickly make your wish come true:
See the Structure link? Then do you see the Content types link underneath it? Great! Give it a click and a list of both already existing content types and a link for creating a brand new one will unfold before your eyes.
Take it from here, build your customized eye-pleasing content type!
5. Link Content and Taxonomy
OK, so you've put together your taxonomy, you've picked/created your content type, not it's time to connect these building blocks. Here's how:
add a new field to your content type
select term reference (this is your field type)
click Save
double-check that you chose the due vocabulary and the no. of taxonomy terms that goes for each content item
6. Create and Manage Menus
Can you believe this! You're halfway through building your very first website in Drupal 8!
Who could dare underestimate the Menus' value from the user experience's point of you?
Now here's how you get to create and then manage the menus on your future amazing Drupal 8 site:
Go to Structure
Click Menus (there, you'll find all the default menus that you got upon installation)
Click Edit Menu (in Operations)
Click Add Link
Once on the Add Menu page feel free to enter your menu's title, to enter a link , too, and so on
7. Work With Blocks
Familiar already (from working in Drupal 7 maybe) with the handling of these boxes of content that you can arrange and rearrange as you want to in different regions of your website?
Now how about finding out how you can juggle with them in Drupal 8?
First of all, if you want to see all the blocks that you've got upon installing Drupal, you need to click the Structure link and then the Block layout link. All the regions (displayed in the left column) are listed there. As for the already available blocks, they're listed in the right column.
When you want to assign a block to a region, you just need to click the specific block name and then select the region that you want to assign it to, from the block configuration page.
But how do you actually create blocks in Drupal 8?
They can get created programmatically by a core, contributed, or custom module
You can create them, as well: go to Block layout page- click the Add Custom Block button
8. Expand Its Functionality
“First” doesn't have to mean “basic”, right?
So, even if you're building your very first website in Drupal 8, maybe you want to boot its core functionality.
Well, in that case, you can stay reassured. With thousands of developers backing up this version of Drupal, constantly improving it, constantly testing it, you'll no doubt find the module to respond to your specific need.
Just go to https://goo.gl/ha9J33, select 8.x and “grab” the module/s that will boost your website's looks or performance!
9. Change Its Looks
Have you heard about Twig? The brand new “thing” in Drupal 8 who's replacing the “old” PHP template?
Why is Twig important for changing the look of your shiny and new site? Well, in Drupal 8 it's Twig that drives the theming system's capabilities, you know!
And since we've uttered the magic word, “theming”, here's a list of ways in which you can theme your website in Drupal 8:
select a pre-built theme
go for a starter theme (which comes with a structure and a set of pre-built capabilities, too)
create your own custom theme by making all the needed configuration files
When it comes to installing a new theme, it's nothing but a sequence of 5 quick and easy steps:
Go to Appearance (in the admin menu)
Add a new theme
Download your new theme
Set your new theme as your website's default theme
Easy peasy, told you!
10. Manage Your Brand New Drupal 8 Website
Don't be just another “proud” Drupal 8 website builder, be a future-oriented one. Look for your site and keep it safe (pretty much like its parent)!
“Proactive management" is the golden phrase and here are the tasks to carry out for “proactively” looking after your Drupal 8 website:
review the log files (the Recent log, in your Reports menu will display all the errors logged by your site)
back it up
constantly look for updates (Reports Page- click on Available updates)
create and disable user accounts
check the status report (Reports- Status)
Bravo! Now get yourself rewarded with a cup of coffee! You sure deserve it: you've just (virtually) built your first website using Drupal 8!
If you want to access proactive Drupal support for your development projects, contact Optasy.
Adrian Ababei / Nov 23'2016
It isn’t for no reason that we’ve called Drupal 8 Paragraphs module an “emergency kit” that Drupal 8 comes “to your rescue” with. Not only that it makes building a landing page so very time-efficient, but it “fortunately” limits your creativity freedom.
How come “fortunately”? Because the fewer options you have at your disposal, to distract you and to challenge your creativity, the more focused you are.
To put it simply: it’s the lack of options that sharpen your mind!
It challenges you to take the best decisions in short time while empowering the end user with so much flexibility (he/she can rearrange and edit the content later on). It dares you to come up with an ideally simplified (not necessarily minimalistic, although “extreme minimalism” is such a huge trend these days) result and to put the spotlight on content (that’s right, The King).
Now let us show you precisely how you can use the Drupal 8 Paragraphs module and integrate it into your team’s landing page creation process.
Steps to take with Drupal 8 Paragraphs module
1. Get It Running (plus helpful stuff about handling paragraph types and fields)
add the Entity Reference Revision and the Paragraphs modules to your website
notice that the Drupal 8 Paragraphs module comes equipped with multiple new “paragraph” fields
notice that you get to a theme and to control the way they’ll display on the web page, as well
add a new paragraph field on the target Content Type and select the Paragraph Types (Structure > Paragraph Types) that later on the end user can administer (as a developer you practically get to create precisely those types of paragraphs that your client needs)
use paragraphs independent from one another (they’re predefined)
although they’re called “paragraphs”, they can take whatever
form/functionality you want; they range from images, headlines, buttons, text blocks, links etc. Each one of them is a different paragraph type with its own “collection” of fields (that you get to define)
2. Build Your Landing Page (Plus An Example)
So, you’ve added the Drupal 8 Paragraphs module to your website, you’ve learned about the Paragraphs’ “juicy” features, now let’s get to work (for there was an unreasonable deadline haunting you, remember?)
First, define the paragraph bundles that you’ll be using later (using the User Interface). They come in three “versions:
simple: title+ body field
advanced: title+ body+ field collection fields
blocks paragraphs: title+ body+ block reference field (the cool thing about this type of paragraph bundle is that the end user gets enabled to add maps, embed sliders, views blocks etc.)
In a nutshell: you select the node you’d like to add your field of paragraph type to, then you choose the paragraph bundle that this specific fields will refer to.
Ok, now let’s imagine that we’re rushing in (we have no choice, the clock is ticking) to create a “call to action” type of paragraph.
Our long experience as landing page “creators” will then instantly unfold a list of a call to action-specific components in our mind: text, link, message.
What do you do then? You add all these fields, that your mind’s informing you about, to your Paragraph Type.
Let’s it sum up:
add your Paragraph Type called “Call to Action”: Paragraph Types- +Add Paragraph Types
add all the needed fields (link, title, image and the rest) to your “Call to Action” Paragraph Type: Manage Fields > +Add Field
create a content-type landing page and a field of type Paragraph labelled “Call to Action”. Afterwards, from Settings you get to predefine which Paragraph types will be referenced
Probably one of the most alluring features of this module is that it enables you to display even far more complex components (galleries, videos, ads): you simply create a paragraph type of each one of these complex components and then give permission to the end user to reference them.
Reference Type- Reference Method: Default- Type
Note that it’s “none” that you must select from the “paragraph types” drop down menu, so that the user can reference more than just one type.
3. Decide How Your Fields Will Get Displayed
There, you have your content added to your landing page and yet: don’t rush in to proudly show your “work-of-art” to your client!
There’s one more fix you still need to do: setting up the way the call to action gets displayed.
Go to Manage Display and do your thing: format and update the order in which those fields will get displayed.
Now it’s just a matter of… filling in the blanks, since all the major configuration and predefining steps have been taken.
When it comes to your landing page’s customized visuals, add CSS and override templates.
Here's An Ultra Efficient Workflow for Building Up a Landing Page
1. Gather and structure all your information and fill in the landing page content form
2. Choose a Paragraph type for each fragment of content
3. Add the elements of design that each paragraph form require
4. Mix and match, edit and rearrange the paragraph entities till you get the desired result
5. Test out the results, of course!
See? Quick and easy!
And although some might say that Paragraphs limits your creativity, in fact, it actually challenges you to be ultra efficient and, given the limited options, to get even more creative. Ironical, right?
What’s your opinion on Drupal 8 Paragraphs module? Have you been using it for building your landing pages so far?
Adrian Ababei / Nov 22'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?
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)
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:
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
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!
Adrian Ababei / Nov 21'2016
The much-awaited, much talked about and supposedly innovative Drupal 8 is stil “too shiny and new” for you? Still a bit „nostalgic” about the good old, so familiar Drupal 7?
Well, don’t be! We’re going to point out to you 5 of its coolest modules which will make your life as a websites builder a lot... simpler (for, besides flexibility, simplicity has always been one of the Drupal community’s ultimate goals).
Now let’s just dive into our selection of “juicy”, highly useful, won’t-be-able-to-live-without-anymore Drupal 8 modules!
1. Views
It’s by far one of the most used modules in Drupal, so no wonder that the worldwide team behind Drupal 8 strove to improve it.
Probably one of the best news regarding this module is that it’s a core module now! You do realize what this means, right? You’ll get it by default, along with the whole installing package, no need to add it yourself, manually, afterwards anymore.
And since Drupal’s all about „empowering the non-technical end-users”, you’ll be glad to hear that the Views module comes equipped with some new too-hard-to-resist-to „powers” for you:
as a content editor and site builder it enables you to filter and to display information depending on your predefined parameters: you can create a block listing the most recent posts, you get to „play with” your taxonomy listing, to put together a slideshow with the best images of the last month or a sidebar with the most recent/longest/interesting/useful comments on your website etc.
as an admin, you get „spoiled” by all the „responsibilities” that the Views takes in Drupal 8: it controls content admin page, user admin page, lists, blocks and more. Moreover, you get to „work your magic” without even having to write a single line of code, just by “playing” in its admin interface: configure lists, calendar, create photo galleries etc.
2. Rules
You may not be inclined to follow rules in your life outside Drupal’s world, but how about the power to set up your own rules for your website?
This contributed module allows you to create three types of rules which, put together, create a complex, logical sequence: you can set up an event (first rule), a conditioned one (second rule) in fact, which leads to a certain action (third rule).
Here’s a suggestive example for you: you’re a website’s admin, right? Well, imagine now that someone posts a comment on your site (event) and, thanks to your configured rules, you automatically get an email informing you about this posted comment (action). Got it?
The whole "attraction" for the Rules module is the fact that it enables you to create and to manage automated workflows on your website.
3. Features
Now here’s another super useful contributed module that Drupal 8 „spoils” you with!
It will be extremely useful in your work especially if you have a whole portfolio of Drupal websites to juggle with (as 99% of organizations do). How precisely?
You’ll get to import/export your multiple configurations and all your code as whole packages that you can then move across your whole collection of websites.
Enlightening example: just imagine that you’ve come up with a rule (you know, we’ve just talked about that module). Ok, now the great part is yet to come: you can export it so that it can get imported to all the other websites that you might administer, simultaneously. Time-saving and efficiency-boosting, wouldn’t you agree?
4. Admin Toolbar
Ok, ok, so you think that it has been improved and yet that it could have turned out much better.
Still, we can’t underestimate the role it plays in your work as a Drupal site developer: it’s menu (replacing now the old admin menu module) is now responsive. It sure fits the whole Drupal 8 „mobile-first philosophy” right?
5. Pathauto
If the whole „SEO is dead” nonsense hasn’t got to you, you’ll find this module to be so helpful.
What does it do exactly? It upgrades your website with search engines-friendly, clean URLs for your content. Of course, you’ll be lending this specific module a decisive helping hand to enable it to get your site SEO-friendly, since you’ll be the one predefining the page path patterns.
The result? Standard Drupal links turn into readable links that your visitors will love and since happy visitors means a better Google rank, you do the map!
These are our top 5 Drupal 8 modules. How does your own top 5 list look like? Is there anyone of our preferences listed there or not? Feel free to share it with us.
Adrian Ababei / Nov 18'2016
You do agree that a good web designer must always strive to “read the future”, right?
To predict the trends and align his/her efforts with them even before they get to turn themselves into trends. Well, we’re here to lend you a helping hand with that, empowering you with a forecast on what will change, what will become even more prevalent and eventually what will become outdated in UI design in 2017.
So, here’s what professional experts with extensive experience in UI design predict for the year to come:
1. Extreme Minimalism
If in 2016 the trend of minimalist, clean, airy design spread like wildflower, wait to see the trend of extreme minimalist design simply explode in the year to come!
Well-experienced designers predict that a magazine-specific layout (which some visualize in black-and-white, while others featuring bold, retro-style colors and arty, pop culture themes) will take over the digital interface.
Big, visually-appealing photos, engaging videos and highly simplified icons will outshine the long copy. Copy which will eventually get refined to short, easy to read and to understand phrases.
Conclusion: the print layout is expected to take over the digital world and the human eye will become, in 2017 more than now, the main “target” for all designed interfaces.
2. Micro-Interactions and Animations
By far the most popular and therefore the best representation of a successful micro-interaction is Facebook’s “like” button.
Well, it looks like in 2017 designers will strive to come up with many more interactive forms of visuals, challenging their creativity to add the fun factor to them, too, so that they should: inform and engage and entertain at the same time.
Users feel „important” for a certain feedback is asked from them and they get to visualize what will happen if they click a certain button, if they perform a certain action.
Interaction is key in 2017’s web design and if you add creativity and fun, as well, then you’ve got yourself a magic formula!
3. Illustrations
UI design has been about authenticity (“template web design” has been forgotten long, long time ago) this year and it will surely be about authenticity even more in 2017! About authenticity and personality, as well!
Even more than photography, illustrations allow you and your team to get creative and to enjoy unlimited freedom when you’re trying to present your brand’s uniqueness through storytelling.
Go for doodle-like illustrations if you want to portray a fun, playful brand or for line-based illustrations if you want to project a more sophisticated, professional look for your company.
4. Gradients and Vivid Colors
Ok, how about flat design and muted colors? Been there, done that, it’s time to move along and to experiment!
What does this mean? It means that if you want to infuse some personality and dynamism into your UI design in 2017, you’d better get bold and go for vibrant color palettes and gradients.
Warning! Make sure that the vivid colors that you’ll opt for compliment and highlight your content. That you don’t sabotage yourself by choosing a color palette that goes against your content!
5. Parallax
Since we’ve already forecast the trend of the „new”, modern magazines-specific layout, parallax is the perfect mechanic to pair it with!
The effect where the foreground moves at a faster rate than the background creates the impression of dynamism and of a fluid flowing content that both we and users are addicted to.
If you compliment it with text and imagery and with that non-traditional type of layout we were just referring to, the effect of fluidity is guaranteed!
Still, be cautious! If you’re not prudent, parallax can tire your users’ eyes!
6. Typography
Bid farewell to once so cutting-edge, now „dusty” sans-serifs fonts and say „hello!” to the new big, bold, artsy looking fonts!
In 2017 you’ll get to challenge your creativity not just to put together illustrations, eye-catching minimalist layouts and „humanized”, fun-filled micro-interactions. You’ll get to create your own statement „look at me” typefaces, too, thus adding even more personality to your content!
Remember! You can craft uniqueness by simply putting big, beautiful fonts into the center of your stage!
7. Eye-Catching, Full-Screen Video
It’s true that it’s no longer a breakthrough trend, but immersive, visually-appealing videos will become even more prevalent in 2017!
Again, as we’ve already mentioned, the human eye gets (vision more than any other human sense) constantly stimulated through dynamic, storytelling videos. They catch attention, they engage and if you pair them with eye-pleasing typography you get: a match made in heaven!
8. Scrolling Down and Long Content
And here’s another not-that-new-anymore trend that will continue to grow in the year to come, too: continuous scrolling!
Why is it that this type of viewing has got so popular is pretty obvious: users get to „digest” long content in a fluid, less-disruptive motion.
What’s truly interesting is that it has become more and more popular for larger screened devices, too. That’s right, those old strict demarcation lines between mobile and desktop devices type of design have become more and more blurry.
Expect to see more and more websites featuring this type of mechanic on desktop devices, too.
Big plus! Continuous scrolling down is a so very versatile mechanic, since it works great on landing pages, on news stories, long-form copy and, again, on all devices, too!
9. Breaking the Grid
Since we’ve already stressed out that dynamic layout is going to be a big trend in 2017, we couldn’t possibly have left this related forecast out: UI designers will be breaking the rigid grid!
Feel free to experiment, in the name of fluidity and dynamics! Play with focal points, layering, motion and depth, since your UI design’s potential will no longer get limited by a grid.
Be cautious though! Never ever should you put form ahead of function! Know your limits, when you’re experimenting breaking from the grid’s tradition, lest you should come up with a UI design less intuitive and rather confusing for your user. You definitely don’t want that!
10. Cards-Based Design
Told you there’s going to be little (close to none) „borders” left between desktop and mobile devices design. Card-based design is just one eloquent example, a trend that will grow more and more influential in 2017!
Just think about, let’s say, Pinterest! It’s probably one of the best examples of engaging cards-based design. The secret behind its popularity: it enables designers to structure and display large bits of data on a screen at a single click/tap/scroll.
Not only that you get to organize your information so that it should be easy-to-dig-through for your users, but you can customize your cards, too!
How do you prefer them? Do you want them to spin, to flip or to stack maybe?
And now we’ve reached the end of our list of „premonitions” when it comes to 2017’s trends in UI design.
Which one/s of them do you find more „likely to turn into a big hit”, which one/s of them do you consider to be outdated already and what other predictions, that we haven’t added to our list, can you share with us?
Adrian Ababei / Nov 17'2016
Since flexibility’s already one of Drupal’s emblematic features, it was about time they did something about their quite rudimentary commenting system, right? Well, get ready to embrace the upgraded Drupal 8 comments, which are far more than just some basic settings in a node type.
So, What Makes the Drupal 8 Comments far More Tempting?
1. They’re set up as fields
That’s right, comments are no longer fieldable, full-featured entities. They’re still entities but set up as fields. What’s in this for you?
You get to choose where exactly on the page your comments will get displayed and you’re no longer restricted to add them to content only (now they can practically “show up” anywhere the fields can)
2. Comments have their own fields
Can you believe this! Not only that they’re set up as fields in Drupal 8, but you can also add a set of fields to each comment.
3. They’re of several types
Now, this is just a big step ahead of the standard, one-type-only comments in Drupal 7!
For instance, now you can add comments to taxonomy terms, to users, blocks, contact messages, content and even to… other comments.
Just imagine: you’re the admin of a social networking site! You can leave private notes to your users, they, as well, can leave their own private suggestions for you, while users can also leave comments on your public-facing website, too.
Here’s another quick example of Drupal 8 commenting system’s flexibility: if you want to add comments to a content type you simply add a field “Comments” on the “Manage Fields” page and voila: there’s your comments field!
Still, when it comes to this new upgrade in Drupal’s commenting system, we must be fair and point out an issue that still needs improvement: in Drupal 8 multiple types of comments don’t come with multiple individual permissions, as well. This means that anyone who’s granted permission to post a certain type of comment can practically post any type of comment on the website.
4. Comments have their own area now
You get to scroll through the “Unapproved Comments” and the “Published Comments” lists.
5. The “Recent Comments” block is in Views
Remember how frustrating it was realizing that you could not edit your “recent comments in” D7?
Things have changed now: the “recent comments” block has been moved to “Views” in Drupal 8 and is available by default.
And Here’s How You Can Create Your Comments in Drupal 8
Basically, the whole process comes down to 2 major steps:
You create a comment entity in code.
Then you save it.
Here’s how the code will/should look like:
// To create a new comment entity, we'll need `use` (import) the Comment class.
use Drupal\comment\Entity\Comment;
// The function name doesn't matter. Just put the the function body where you need it.
function my_modules_function_or_method() {
// First, we need to create an array of field values for the comment.
$values = [
// These values are for the entity that you're creating the comment for, not the comment itself.
'entity_type' => 'node', // required.
'entity_id' => 42, // required.
'field_name' => 'comment', // required.
// The user id of the comment's 'author'. Use 0 for the anonymous user.
'uid' => 0, // required.
// These values are for the comment itself.
'comment_type' => 'comment', // required.
'subject' => 'My Awesome Comment', // required.
'comment_body' => $body, // optional.
// Whether the comment is 'approved' or not.
'status' => 1, // optional. Defaults to 0.
];
// This will create an actual comment entity out of our field values.
$comment = Comment::create($values);
// Last, we actually need to save the comment to the database.
$comment->save();
}
Now let’s have a closer look at each one of these fields:
entity_type: it’s the entity that you attach your comment to (a node, for instance)
entity_id: it’s the id that you’ll attach the comment to (it would have to be a nid in case it’s a node that you’ll attach it to)
field_name: this field is the one for the entity that you’re attaching your comment to
Practically, what all these 3 first fields do is let Drupal know what entity it should attach your comment to. This whole “flexibility” laid at your feet, that you get to juggle with multiple comment fields of the same entity and the fact that those comments’ fields can use multiple types of comments, themselves, is just part of the upgrades added to the commenting system.
uid: informs Drupal which user wrote a specific comment
comment_type: the type of comment you want to create (you know, who’ve already talked about how in Drupal 8 you have several types of comments to juggle with). The default comment will be just comment
subject: just like a node comes with a title field, so does a comment come with a “subject field” in Drupal 8
comment_body: is provided by default and you can remove it, just like you can remove any other one of the fields
status: if you don’t want, as admin, to be asked to approve each comment before it goes live, set it to 1
field_foodbar: although it does not show in the above example of code, we still wanted to show you that you’re free to add custom fields if you want to. Simply use the field’s machine name and give it a default value.
So, what do you think about Drupal’s new commenting system?
Do you find the improvements made to the way you can create comments to be a big step ahead, contributing to Drupal’s overall flexibility or do you consider that there are many other possible upgrades (feel free to name them) that its developers should have focused on?
Adrian Ababei / Nov 16'2016