Websites sure have changed dramatically since the rise of the internet, wouldn't you agree? When competition for winning User's attention with gorgeous design and high quality, interactive content intermingling with online marketing strategies/tools has become so fierce, what do you do?
How do you resist the temptation of overloading your website so much that it will end in annoying your visitors since it will load all its "awesomeness" way too slow for their high speed lifestyles?
Here is where we come in, lending you (or just reminding you of, since we're sure that many of the following "tips and tricks" on optimizing your website for gaining some more speed are no news for you) some helpful advice on how to regain control over the speed of you site (and to gain the amounts of traffic you've been fantasizing about and the conversion rates that you've dared hoping for and not just a beautifully looking website for your (and your friends' maybe) own pride and joy only.
1. Is it Really Worth the Effort?
First things first! Before you even put together your action plan you should realize and accept that optimizing your site is not just about speeding it up: it's also about the UX and SEO benefits that it comes with.
It's about improving your users' experience while on your website and thus turning them from first-time visitors into loyal visitors (and from visitors into to customers).
Just think about it: the quicker content on your site loads, the less bandwidth your visitors use (it will reduce your bandwidth costs).
2. Aim for High Speed, Not Size
Aim for the (apparently) impossible: while your site gains (inevitably) more weight, strive to keep it optimized and efficient!
Constantly monitor its speed, while keeping up with the trends (which are building websites with rich-content pages and outstanding imagery, which risk to weight them down).
3. Go for Modular Code
You might think now: "But, wait a minute: modular code will just add even more bloat to my website!"
It's true, it will "load" it with more options for you to choose from, BUT think about modular code this way: you get to put together multiple common pieces of your code using less. Take combining two CSS classes, for instance: module coding gives you the same results with less "resources" that could bloat you website.
And that, my friend, it how efficiency looks like!
4. Draw A Line Between Development and Production Level Code Bases
Handle the two environments differently! In short: realize the difference between compressing the code and compressing the images on your website.
the code's compression depends a great deal on the language you're using (go for Google’s htmlcompressor, for YUI Compressor for CSS, or any other method that suits you)
the images' compression could just as well mean using Photoshop's "Save for the Web" tool. Keep diving into the "sea of tools and best practices for image formats, compression algorithms, quality monitoring and so on” available online.
5. Keep It Super Neat
It's a common sense practice not to "abuse" your server, don't you think?
Just imagine it "exhausted", trying to efficiently handle all the messages you send it: web fonts, JavaScript, CSS style sheets. If you "empathize" (and you should) with it, then start applying these tips for easing all its hard work:
load stylesheets at the top and scripts at the bottom
bundle up your images, nice and neat, so that it should be easier for your site to load them
6. Go From Poorly Written To Readable Code
Besides "heavy", large images, un-optimized code is another major factor that slows down your website. So, as regards best practices for writing you code (for reaching top speed), we have 2 tips for you:
if possible, call JavaScript last (by the time JavaScript starts slowing everythinf down, your site will have already displayed the markup, processed the HTTP requests, the CSS. etc.)
write identifiable, short CSS selectors: they will be far more speedy in doing "accomplishing their mission"
7. Optimize Your Fonts
Remember that we've talked about beautiful typography being forecast as one of the UI trends in 2017? Well, looks are not enough when you're approaching your site from its efficiently/speed perspective.
You need both beautiful and optimized fonts if you want to keep your site's performance high, all while enticing your visitors with gorgeous design. Here are a few tips for optimizing your fonts:
compress, compress, then compress your fonts some more (use FontLoading Api for instance)
juggle with maximum 2 fonts
go for font-face (whenever you need to access external font resources)
select only the variants you need (no need to overload you website with all the available weights and styles)
ease your site's job: go for WOFF2, WOFF, TTF, and EOF formats
use CSS inlining
8. Do It For Google
Pleasing Google and pleasing the User are (or at least it should be) the goals that drove you when you actually built your site (or your client's) in the first place, right? Well, then if you've already started to draft a “How to speed up my site” plan in your head while reading this post, you're on the right path: Google rewards developers/site owners like you!
The almighty search engine will always appreciate (and thus rank better) optimization-oriented developments practices. It's pretty logic: a happy user (“happy” for the web pages he/she accesses load content really quickly and doesn't make him/her lose valuable time) means... “happy Google”, so to say.
And how does this impact you? You do the math!
9. "Tame" Your Third Party Scripts
In a few words: don't let the “little ones” run the show on your website!
Mind you monitor all those third party scrips (Facebook “like” buttons, analytics trackers etc.) lest they should considerably slow down your website!
10. Limit Your Dependency Requests
How do you limit all those dependency requests adding bloat to your website and slowing down the downloading process? There are a couple of good practices that you should consider starting today:
use a CDN (especially if you're website's a large, heavy-content one)
use SVG or sprites methods for handling images from your style sheets
This is it, our “decalogue” of good practices for optimizing your website for higher speed. One more thing we'd like to add: there's no such thing as “a too fast website”, there's always room for even more optimization!
Adrian Ababei / Nov 30'2016
Proudly wearing its “mobile-first” aura, Drupal 8 is here to help you deal with the issue of responsiveness nice and smoothly. No need to write miles of code anymore, to master the art of pulling off HTML, back-end languages and JavaScrip combos anymore.
In other words: Drupal 8 is here, have no fear! It projects a new world of easy-to-build responsive themes.
It simply “spoils” you with an easy-to use responsive image setup (which comes in its core, another great news). Basically, it puts an image formatter and breakpoint mappings at your full disposal so that you can have your due-sized images, using HTML 5 picture tag, ready in just a few quick steps. Thus, you'll get your images adapted to every device's viewport in no time.
Well, not really “in no time”, but in 5 simple steps! Walk us through this step-by-step demo:
1. Turn on Your Responsive Image and Breakpoint modules
You've got that right: the Responsive Image Module is part of core Drupal 8, you get it upon installation and yet, if you want to use it you still have to first enable it. It's the same thing for the Breakpoints module, as well.
How do you enable the Responsive Image Module in Drupal 8 you say?
You go to /admin/modules
You click the check box close to “Responsive Image”
You click the “Install” button
2. Set Up Your Breakpoints
“What is a breakpoint?” you say (if you're new to Drupal)? It's a window width that you get to set up, thus letting Drupal know that it should start using a different size image starting from that particular width size. Got it?
Do you remember how things used to be in Drupal 7's Breakpoint module (oh, the (not so) good old days when Breakpoint was a contributed module!)? You could define your breakpoints in your admin interface.
Well, not anymore! In Drupal 8 you have to set them up in code.
If it's a pre-built theme that you're using, there's a high chance that your breakpoints are already set up. If you're creating your own theme instead, then you need to set them up yurself in breakpoints.yml file.
So, here is how you set them up (make sure you start with the smallest ones):
your_theme_slug.bannerImage.narrow:
label: narrow
mediaQuery: ''
weight: 0
group: Banner Image
your_theme_slug.bannerImage.wide:
label: wide
mediaQuery: '(min-width: 600px)'
weight: 1
group: Banner Image
3. Create Your Image Style
What image styles do you want for each one of your previously defined breakpoints?
Once you've answered yourself that, go ahead and set them up (after you've done a bit of math setting up your breakpoints):
Go to /admin/config/media/image-styles/add
Type in your image style's name (we suggest you go for something descriptive) and click “Save”
Click “Select a new effect” (you'll find it there, under “Effect”, in the next screen that will open up once you've clicked “Save”)
Click “Scale and crop”
Enter the width and height sizes
Click “Add effect”
Et voila! Can you go through all this process all by yourself now? For you still have to go back and create image styles for each one of the breakpoints that you've (virually) set up, you know.
And this is how Drupal automatically resizes all the images, that you'll upload on your site, to the image styles that you will have defined. And it doesn't do all this the rudimentary way, no sir: first it sizes the image, then it crops off the extra so that the result should be a perfectly adapted new image (not the stretched or the shrunk, very unnatural looking type)
4. Define Your Responsive Image Style
After you've created images styles for each breakpoint, go ahead and put them all together in a responsive image style.
Go to /admin/config/media/responsive-image-style
Give the “Add responsive image syle” button a click
Give your style a name (go for something easily recognizable)
Select the “Breakpoint group” (you know, the one that you've set up at step no.
Select the breakpoints one by one and associate them each with one image style
Can you see the option for fallback image style there, at the bottom? It's the “default” image that Drupal generates for those browsers that don't support responsive images (such as Internet Explorer 8). We recommend you to select the largest image style!
5. Allocate Your Responsive Image Style to An Image Field
Just one more quick step to take and you can upload images on your website and let Drupal do all the formatting/smooth resizing job for you! Before it can do that, you still need to let it know what image field to actually responsify for you:
Click on “Structure”- “Content Types”
Click the arrow close to “Manage Fields” and then click “Manage Display”
Spot your target image field (you'll see the entity type, ranging from taxonomy vocabulary to content type that your image field is assigned to)
Select “Responsive Images” (under “Format”)
Pick one of the responsive image mappings that you will have set up (under “Responsive image style”)
Click “Update”
And that's it! You've provided Drupal 8 with all the settings it needs for “working its magic”: pulling off images of appropriate sizes without comprising their quality.
Adrian Ababei / Nov 29'2016
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