This post is written for those of you who have not yet upgraded to 6.2 (for whatever reason) but still want to give specific content to specific users. My goal is to present some of the code and process for implementing content targeting on 6.1 as well as explain the underlying theory of content targeting to stir up your creative developer side, no matter what version of liferay you are on, so that you can implement it in any situation.

Two Methods: Location & Persona

Whether you know it or not, you target content all the time. Maybe not on your website, but it is a normal part of social interactions. As you meet and get to know people you tailor your conversation (your content) to what you know about them. If you have a friend who lives Chicago, when you talk with them you probably ask how it is there, anything from the weather to current events in the area. If you know that a person likes a certain type of music or activity, your conversations often center around those topics, because they are points of connection. Communication is about connection. Relationships last when both parties are mutually engaged in the communication. Whether its a person you meet on the street, or a long time friend, the more connections you have the easier it is to communicate.

The same is true for your website. You have a relationship with your user, and the more they connect with you the more you can connect with them. This is why content targeting is important. When you communicate relavant content, they are more interested and more invested. This is key for a good user experience.

There are lots of ways you could connect with your sites visitors and target content for them, but this post will mainly focus on two: location and persona.

Location-specific information is prevalent with smartphones and can also be beneficial for content on your website. However, instead of only depending on GPS or IP to locate people, you should also gather location information via your forms and then deliver content that applies directly to them, even if their devices do not support location detection. Specifically, if I know that a visitor on my site lives in Brazil, then I would want to tell them about our Brazil Symposium, even if their current IP address registers in Africa.

Using personas is another logical way to provide relevant information to users. A persona is a fictional character that represents a particular group of people who use your site. Since many companies employ several people to serve various roles, two people from the same company might be visiting your site with different objectives. For example, if you work at a tech company, your company website probably attracts many visitors with programming or CEO backgrounds. In this instance, you could define at least two personas, a technical end user and business decision maker.

To target both audiences, there are three things you should do: record information about the user, review the information you've gathered, and then render the relevant content.

1. Record

The first step in content targeting is figuring out who your users are. If you do not know key information about your visitors, you will be unable to provide them relevant information. The easiest way to obtain information is to ask them for it.

For instance, if your site features a user sign-in, then you can add custom fields to your user that are required on sign-in. If you're trying to determine their location, you can create a "Country" field to capture that information. Or if you want to discover the persona-type they most align with, you could use fields such as Company Role and/or Department. (For specific instructions on how to do this, refer to Custom Attributes.)

Other ways to record data about your users can involve deploying the IP Geocoder plugin, which can take the user's IP address and determine their country, or integrating with third-party software. A product like HubSpot integrates well with Liferay and allows the ability to track user information, which means you can later retrieve that data to deliver relative content.

2. Review

Once you have recorded all the information you want, you can simply pull that information into a web content template and do a little logic to output the desired values. In my example I create a template with all the logic, and then I am able to parse that template in any other template I want to run the same logic in.

After rendering this template in another template, the variables $target_country and $target_persona will be available for me to use them however I choose.

3. Render

The last step is to render different content for all the various target audiences. There are several ways to do this, but a relatively easy method is simply embedding a web content portlet with a specific instance ID based on your selected persona or country. The drawback is that you have to select the web content for each persona or country you are targeting (but you only have to do that when you set it up, so it isn't that difficult).

I've provided several code examples for you to see the idea/logic behind it and tailor it to your site (the code examples won't just work if you copy & paste it—sorry!). Of course, I would recommend using Liferay 6.2+ simply for the fact that you can download the Audience Targeting App and it will do all of this and more for you. However, even if you do use the Audience Targeting App, it's important to understand who you should be targeting and how it adds business value to your site.

How do you target content on your site? What methods or approaches besides location and persona have you found effective? I would love to hear your feedback and see how all of you are engaging your audiences.

To find out more about Content Targeting and how we do it on liferay.com, check out my recent session from our 2014 Liferay North America Symposium.

Tables tables tables. Tables are used all over the web. Some people hate them, some people love them. No matter your opinion on tables, there are many cases where html tables are effective and efficent ways to display content and convey information. Many times it is helpful to use them to show things such as form submissions or with dynamic information. I recently worked on a site for the company retreat and we had a number of tables displaying sign up information or details that people needed to know that pertained to themeselves. We implemented two different strategies for displaying this content in Liferay, I thought it might be helpful to share what we did with those of you out there who are building websites with Liferay.

The first strategy, which isn't limited to Liferay alone, is pulling from google docs. Often times planning, organization of details, and information is stored in google's friendly and free docs interface. Google provides great APIs for how to pull from their apps, but I will do a basic walk through of the process.

Copy the "key" which is in the url or in the "Get a link to publish data" section of the pop up.

Now that the google doc is all set, the next step is to create the url which will give us a jsonp with our content. Looking at the google spreadsheet pulling APIs we see how to create the url which will give us the jsonp we will use. The url will look like this:

Essentially all you need to do is is place your key in the YOUR_DOC_KEY place and the sheet number in the YOUR_SHEET_NUMBER place. Give it try. Just paste that url into your browser and you will see the jsonp content.

Last step is to pull that information to your site. Basically all you need to do is create a Web Content Template that contains this code (remember to replace the url variable with the url we created in the previous step).

All it does is provides a list of people who signed up already, which is dynamically updated through a google doc. We added the aui-live search module to help people search for there name at the top, but it ended up being a clean, easy solution to let people know if they were signed up for the retreat.

This method of pulling data can be very useful because often times you are already using google docs/forms, or they can just be easier to maintain and collaborate with. However, being dependant on 3rd party API's always has its risks and drawbacks. Loading google docs will have a lag time and can be easily broken if heading titles get changed or there are gmail login conflicts. Liferay has a less known solution that offers a large amount of versatility and similar benefits of google docs being used in this way. This solution is Dynamic Data Lists, aka DDLs.

There are a number of good blog posts and other documentation on DDLs which already exist, so I am not going to explain how to use them here. However, there are some great features I think deserve highlighting. DDL's are super useful because they are similar to the article/template/structure system which most are familiar with, yet they provide a centeralized place to add and edit entries. All you have to do is add the "Dynamic Data List Display" and create a new "Data Definition" (comparable to structure in Web Content) and a "Data List".

These features are all available out-of-box, and are very useful for recording and display data. There is a spreadsheet view (found in the portlet configuration) which is extremely useful in that you can click and edit you entries right there on the screen, just like google docs. You can also use velocity to create "List Template" just like Web Content templates and now you can display your content exactly like you want to.

One of the things we used DDLs for on the Liferay retreat site was to sign up for childcare.

The DDL Display portlet gives you the sign up button, so it is easy for employees to simply click sign up and add their name to the list.

These are just a few of the features that make DDLs a useful tool in Liferay. You can even deploy the Dynamic Data List Form portlet and use it to create and record surveys. On the Web Team we have plans to use DDLs much more in the future, and I think they are great features which are worth all of you spending some time to get familiar with them.

There is a pressing need for websites to respond to the ever-changing technology which is used to visit them. As mobile devices become more powerful and more prevalent, more and more people surf the web and visit websites on an array of devices. These devices range from small screens to large monitors, from ios to android, to other operating systems and internet browsers. Supporting all of them is quite a chore, and next to impossible depending on the method you use. This is why I believe the best way to design a website is responsively.

I do not intend in this blog post to define responsive vs adaptive or defend why I believe responsive is preferable. My goal is to provide a few basic concepts and implementations that I have found very helpful while creating responsive themes with Liferay. Essentially, these are the things that I would put in just about any theme I create in order to make capable of being viewed on any screen size. In essense, this is just a chunk of css that will work with Liferay (6.0 and 6.1 at least) and create a fluid layout for you to build on and some extra classes to use as you populate content on your site. Before we dive into the code, here are some basic rules I have found helpful in responsive theming:

Avoid setting fixed widths over 300px

As a rule of thumb, just don't set widths over 300px. Usually I set the min-width of the body to 320px, meaning I support a screen size as small as that before it will scroll horizontally. If you set anything, such as content, containers or images, with a width over 300px, it will interfere with the layout when it gets smaller. If you really need to you can use the max-width to a larger number and then the width to 100%, or set larger widths and then use media queries to change them, but it is best to structure your site simply and efficiently to respond to the situations naturally. It will save you code and time in the end.

Use percentages as much as possible (aui widths are great ie. aui-w50)

This point is similar to the last one, but more of the positive side of it. Use percentages as often as makes sense. The aui width classes are very useful and available out of the box with Liferay. They are being used in the default layouts, and can be used as you create content and other structures on your site.

Design things with mobile in mind

The key to having a responsive site is to plan for mobile first. This means when you are structuring your html, think about what will happen when the screen shrinks. If you have multiple columns, make sure that they will wrap nicely when the screen width decreases. This rule takes a little more planning and is not always in your control, especially if you have an existing site that was not designed to be responsive. It is possible to mobilify an existing site, but it is much cleaner and easier to plan it from the beginning. I would even go as far to say that you should have two separate mockups of your site before you start, a mobile view and a full view.

With those basic rules, there are now two areas that need to be addressed, one is a fluid layout and the other is navigation.

Fluid Layout

This is the basis of your theme. Thinking out the framework is vital in order for your theme to be fluid and respond to whatever screen size it is viewed on. I have found a few lines of code which have served me well in creating a fluid layout with liferay. It takes what comes out of the box with Liferay and makes it respond well, and it also gives you the structure for how you develope content. Here is the code you would add to the custom.css in your theme:

Basically what this code is doing is taking all of the columns in your layout, which already run off of percentages, and making them 100% when the screen width is under 720px. This will cause the columns to stack, and be easily viewable on a mobile device. It also implements a class to hide elements when the screen width is under 720 (responsive-hidden) or a class to only display elements when it goes below that screen width (responsive-only).

These classes are helpful to have, but perhaps the most useful class are the ones with "container-column" in them. Let me explain why. On the web team for Liferay, we are very often creating new pages. Most of the time we create the content on the page using the Web Content Portlet. Having a set of classes we can use to create a structure on the pages that makes it automatically responsive is incredibly useful. The easiest way to explain this is by showing an example.

Essentially we are mimicking how the layouts are made, but with a different class name. When you form sections, these classes will take care of all of the padding for both full screen and mobile views, as well as the sections wrapping. All you have to do is remember to add the class "container-column" and "container-column-content" and everything structurally takes care of itself. You still have to be mindful of the content inside of it, but using these classes saves a lot of time and css in your articles.

Navigation

The next big question you have to deal with for mobile development is what to do with the navigation. There are many options, from using select boxes, restyling it to fit the page, or adding a toggle button. On liferay.com we used multiple methods, but for our main navigation we created a toggle button. It is relatively simple, all you do is add an anchor into your navigation.vm with the class "responsive-only" (because we wrote that into our css) and a few lines of javascript to toggle a class.

Now you are free to style your navigation however you would like in the media query in your custom.css, utilizing the class "show-nav" to hide and display it when the toggle button is clicked. Something as simple as:

There you have it, the starting point for an adaptive theme. There are many more tips and tricks out there, but this post is already long enough. Hopefully this is helpful if for no other reason then to get you to start thinking about structuring your code with mobile in mind from the beginning. Happy Coding!

The new trend in web design is long-scrolling pages. It allows space for cool animation and flowing content while cutting down the need for changing pages and waiting for things to load each time. A simple thing I found to make your scrolling page look sleek is by animating the scroll. Often times the navigation or links on a long-scroll style page are "#"s which link somewhere on the page. Instead of having the browser jump directly to that spot, it adds to the UX if you see the page scroll down. Alloy has this functionality and it is rather simple to implement.

My idea was to just make a class that you could add to any anchor with a "#" in the href and on click it would scroll to the position you want. Here is what my code looks like:

In order to implement this into Liferay all you would need to do is paste this code into your main.js or even into a script tag in a web content display. Then just add the class "animate-scroll" to any anchor with an href that is a "#". (For example Link). Simple and easy to implement. Enjoy!

Recently I found myself searching through the internet for how to best add social share buttons to a website. The documentation that exists is helpful, however I decided it might still be useful to share some of my findings.

I discovered, as many of you probably know, that there are mainly two ways to create a social button. The first way is by using a script that the respective social network service provides. I used Facebook, Twitter, LinkedIn and Google Plus, all of which had great documentation. The second way to acheive a share button is by creating a url which contains the information, and then you can put that url wherever you please. Here are the two different methods:

Script versions of social bookmarksThings to note in this first section, Facebook requires an app id to use this method. So in order to use it you would need to create an app and in the app settings approve the page you are trying to share from. However, doing it this way allows you to write the script once and then call it onclick and pass in the variables you want as many times as you want. The other three services are similar in that they have a script and then use "data-x" attributes to pass in the values you want.

Anchor versions of social bookmarksThe anchor versions are also an option, while they don't have the nice default icons that the scripts provide, they are beneficial for different reasons. The url that you form is very convenient because it very simple and can be used anywhere. You could use it in emails as well as on your website or anywhere else you can paste a link. It should be noted that because it is a url, it is necessary that it is written like one. This means in all of the fields where spaces are required (ie. titles or descriptions) the spaces must written as "%20" so when you want to write the title "Here is the title" it will be written like this "&title=Here%20is%20the%20title".

Hope all of this is useful. There are more things you can do with social buttons, but for my use case this worked great, and it is nice to have all four social buttons in one place. You can see a demo of the code here. The nice thing about Liferay is that you can take this and throw it into a template so that even those who don't know how to code can create and/or populate social buttons for your site. Copy and Paste away!

The last script I will share with you for now is one that I call on screen helper. This is also a simple script, but very useful when it comes to animations, transitions, and effects. Essentially all it is doing is adding classes when a given element enters the screen and removes them when it leaves. Combine this with some css3 and you have an endless amount of cool things you can do to make your website more interesting.

On Screen Helper

In order to use on screen helper all you need to do is add the class "on-screen-helper" to whatever element you desire. Then, when the element reaches the bottom of the visible screen the class "on-screen-bottom" will be added. When the element reaches the top of the screen the class "on-screen-top" will be added. After the element has completely left the visible screen both classes will be removed.

On screen helper allows you to add animations or transitions to elements which are triggered each time they enter the screen. You could add a css transition on .on-screen-bottom and then each time it entered the screen that transition would occur. This function can also be used for a paralax scrolling effect. Using the .on-screen-top class you could change a div to position:fixed when it reaches the top of the screen, resulting in the allusion of paralax scrolling.

See it in action here(to see the on screen helper adding the classes you can inspect the elements and watch the classes being added and removed)

Here is another script that we developed for the redesign of Liferay.com. The goal for this script was to help with loading times on pages with a lot of images as well as provide a way to effectively implement transitions/animations. It isn't too complicated, but useful nevertheless.

Lazy Load

In order to use lazy load all you need to do is add the class "lazy-load" to whatever element you desire. If you want to lazy load an image add the class and instead of placeing the img url into "src", place it in an attribute called "datasrc". This is useful for a number of things, whether it is speeding up initial load time by loading images when you scroll to them, or by adding a class when you scroll to something and utilizing that class to add transitions or animations to the respective element.

Lazy load will happen when the div reaches the bottome of the visible screen. It only happens once, so once it is loaded the class and loaded image will stay there until refresh.

The code could look something like this:

See it in action here(to see the lazy load adding the classes in this example you can inspect and check the console, it prints out all the lazy-load elements onscroll, so you can see which elements have been loaded already)

As a part of the redesign of Liferay's website we have developed a number of new scripts in order to effeciently acheive new effects and improve the UX. I thought I would share some of the code we have created and found useful for a number of different use cases. This blog posts and the two to follow will show parts of our main javascript code which is currently being used in our theme. I will breifly explain how to use the code so hopefully all of you can reuse and tweak it as you need. All three of these scripts will be used on Liferay's hompage when it is revamped in the not so distant future.

Happy Coding!

Pop Click

This first script is used across Liferay's entire site in the top navigation. It is called pop click and all you need to do in order to us it is add the class "pop-click" to whatever element you desire. When an element with the class "pop-click" is clicked on the class "pop-click-active" is added to that element. The class will then be removed on any click that is outside of an element containing the class "pop-click-content".

Pop Click's easiest implementation is for drop down menus. You can add the class "pop-click" to the lis and the class "pop-click-content" to the menu ul or div inside of that li. Simply hide the submenu with css and then display it again when the class "pop-click-active" is present. It could also be used for anything that you want to do with css that occurs on click and is removed when the user clicks somewhere else on the screen.

If you want to see some places where we are using this you can look at the slide out tab on the right of the France Symposium page or by clicking on "lanuage" button in the top right navitaion at Liferay.com

Want a quick and easy way to make a sticky nav right out of the box with liferay? Thanks to AUI with 10 lines of code you can turn your navigation bar into a sticky nav. This is especially useful with long scrolling pages, where it is useful to see the navigation as you scroll.

Some additional styling may be needed to make it look the way you would like, but this essentially clones you navigation and then when you scroll pass the #navigation element it fixes the clone to the top of the page as you scroll. Pretty cool and easy to add. Enjoy!

My name is Ryan and I work at Liferay. I am currently on the web team at Liferay and have the unique opportunity to both use Liferay's software as customer and collaborate with all the other devs who work in the same office as we do. Over time I have learned or figured out new things about Liferay Portal, as anyone using lifery does, and I want to share those findings with others.

My hope is that my postings would be clear and understandable, and give information which makes other devs lives a little easier and websites a little better. Hope you enjoy it!