Webintel by Ironpaper
Recent articles
- Managing numerous local Facebook Pages for business
- Single page web apps will become a bigger part of web design
- Automatically extend years in static dropdown checkout forms using javascript
- Custom Web App Fields in Adobe Business Catalyst – Text (Hyperlink) vs Text (String)
- Ordering Web App Items by Date in Adobe Business Catalyst
Tags
Inside Webintel
Webintel: The web business and web design knowledge base.
Managing numerous local Facebook Pages for business
January 26th, 2012For businesses that have numerous locations, until recently, it has been a frustrating experience managing and maintaining a Facebook social presence that account for each location. Basically, businesses had two options: 1. keep only the primary, corporate Facebook Page and ignore the local instances of the business or 2. create and operate a separate Facebook Page for each location of your business in addition to the corporate Page.
Fortunately, Facebook launched a new feature to help alleviate this problem. The new feature Parent-Child allows businesses to easily claim, administrate, and manage places pages and check-in deals for brands with more than five locations. This helps make social media marketing less of a burden for larger organizations.
Some of the great benefits of Parent-Child include:
- Locations Tab: list all of your retail locations under a single tab
- Manage Deals: push a single check-in deal to every location through the parent Facebook page
- Assign Admins: allow your local location managers or business units to run their own Place page, while giving the parent organization control over the corporate brand
- Consistent Branding: create uniform descriptions and meta data, along with a single profile image--unifying the corporate brand identity at one fell swoop
Single page web apps will become a bigger part of web design
December 29th, 2011Single page, application websites (or microsites) are often used to replicate the experience of native apps, especially mobile apps. Such applications are designed to act like native apps by rarely or never needing to be refreshed. They often are developed using frontend javascript to create dynamic user interactivity. For a long-time, such a reliance on javascript was discouraged on the web for a number of reasons, most notably since it can break the "back" button on browsers and it's inability to deep link into the application or website.
Such website applications are becoming more common. Twitter and Facebook are examples of such applications and are testament to their growing popularity. Web designers are adopting the #! / web app mentality ever more, as the approach is spawning new, rich forms of interaction online.
HTML5 paves the way to greater interactivity and better design
HTML5 will help single, page web apps become more exciting, engaging and usable. Problems, such as breaking the browser "back" button, will be relieved by the new capabilities of HTML5 (HTML5 History API will help solve this issue for example). The promise of HTML5 has already helped to dethrone Flash, as a staple for interactive web design and development. Adobe has ceased to support Flash for mobile at a time when mobile is becoming more of a necessity than a luxury for businesses, brands and organizations.
The new capabilities of HTML5 will power a new breed of websites, applications and microsites and create a new level of interactivity online that will be user-experience and data centric.
The web becomes "native"
Single, page web apps have already become a steadfast part of mobile web development. With the broad support for HTML5 on smartphones, native apps are nolonger required universally, although at times they may be the best tool for the job. In many instances, website applications liberate brands from entrenched mobile marketplaces and still provide excellent functionality and marketability. In a world where the "cloud" buzzword breeds excitement and possibility, the web is finding new ways of achieving accessibility and powering rich interactivity. Single, page web apps will have their place in this next phase of web development.
Automatically extend years in static dropdown checkout forms using javascript
October 28th, 2011There are many ecommerce websites that have static coded checkout forms. For these forms, the code to populate the drop down lists for years may be hard coded, which presents longterm problems for your website. In cases where PHP or another suitable language is prohibited, you may be looking for a way to expand the year option of a field automatically. If so, you can insert this javascript in in place of the hard coded <option>s, it will set the years options to be the current and go up to 10 in the future.
This solution works great with Adobe Business Catalyst projects, where the original eCommerce form has been manually over-written (for whatever reason).
<script type="text/javascript">
var d = new Date();
var curyr =d.getFullYear();
document.write('<option selected="true" value="'+curyr+'">'+curyr+'</option>');
for(cur=curyr;cur<curyr+11;cur++){
document.write('<option value="'+cur+'">'+cur+'</option>');
}
</script>
Custom Web App Fields in Adobe Business Catalyst – Text (Hyperlink) vs Text (String)
October 6th, 2011By Chris Wallace
This is an issue that has caused me some headaches when working with Adobe's Business Catalyst content management system, so in the interest of trying to prevent the same from happening to you, I'd like to share some tips about these fields. First, an explanation of the behavior.
A custom web app field with type Text (String) will display exactly as entered when outputted on the front end.
A field with type Text (Hyperlink) will output automatically wrapped in an <a> tag with both the href property and the text of the <a> tag set as what you entered.
The result of this is that if you want to display the link on the front end, if you use Text (Hyperlink) you have no choice over what the text actually says. You can't change it to "Click Here", "Article Title", or anything else, it will always be "http://theurlyouentered.com".
Unfortunately, you can't change the type of a field once data has been entered. We set up one client with a web app that had two URL fields, and they entered hundreds of items in to the system. When it came time to display the link on the front end though, I realized that there was no way to edit the text, so instead of the link saying "Click here" as it was supposed to, it was saying "http://urlthecliententered.com", which happened to be quite a long URL with lots of GET variables.
So how did I solve the issue? To sum up the process, first, I created <div>s where the links would go. I then assigned the full output of the adobe tag {tag_fieldname} to a javascript variable. Next, I parsed the actual URL, without the HTML tags, with a regular expression. Finally, I added the script that said when the page loads, insert my own custom <a> tag with the parsed URL as the href value, and the display text of my choice, into the correct <div>. Worked perfectly!
There are two ways to do this, with jQuery and without jQuery. Below are both versions.
Non-jQuery:
<div id="linkgoeshere"></div>
<script type="text/javascript">
var linkhtml = '{tag_fieldname};' //assign output of adobe tag into a JS variable
//it will look like this:
//<a href="http://www.site.com">http://www.site.com</a>
var linkurl = linkhtml.replace(/(<([^>]+)>)/ig,""); //strip out the html tags with a regex
var goodhtml = "<a target='_blank' href='"+linkurl+"'>Click Here!</a>"; //assign the a tag in the format we want to a variable
document.getElementById("linkgoeshere").innerHTML = goodhtml; //insert the html into the div on our page
</script>
jQuery:
<head>
<script type="text/javascript" src="/js/jquery.js"
</head>
<body>
<div id="linkgoeshere"></div>
<script type="text/javascript">
var linkhtml = '{tag_fieldname};' //assign output of adobe tag into a JS variable
//it will look like this:
//<a href="http://www.site.com">http://www.site.com</a>
var linkurl = linkhtml.replace(/(<([^>]+)>)/ig,""); //strip out the html tags with a regex
var goodhtml = "<a target='_blank' href='"+linkurl+"'>Click Here!</a>"; //assign the a tag in the format we want to a variable
$("#linkgoeshere").html(goodhtml); //insert the html into the div on our page using jQuery
</script>
</body>
Learn more: Ironpaper: web design
Ordering Web App Items by Date in Adobe Business Catalyst
October 4th, 2011This issue recently came up simultaneously on several of our websites built using the super easy to use Adobe Business Catalyst CMS. It's a great system for getting sites up and running quickly, but sometimes it takes a minute to figure out how to fully customize everything to your own specifications.
For example, by default, web app items are listed alphabetically whenever you use {module_webapps} to display them as a list, no matter what other parameters you pass. There's a simple way to change it, but it may not be what immediately jumps to mind. I originally thought that when adding the module to a page, there would be a setting "order web app items by…" and a list of options such as alphabetically, by date, etc. After probably too much time looking for such a selection, I realized there would have to be another way.
The Business Catalyst documentation at kb.worldsecuresystems.com can be hit or miss, but I took my chances and went to see if it could help. If I can't find something quickly in the docs, I usually just get on chat with one of their support people. But luckily I found just what I was looking for. The docs explain how to order the web app items by date here.
Basically, you enter the dates in the "weighting" field on the individual web app item page under "more options". Enter it in the format YYYYMMDD. Because of the way the weighting works, i.e. the highest numbers go to the top, this ensures that the most recent items, whether news or events or anything else you might want to list by date, appear most recent first. But make sure you enter in the date that way for every item, or else the ones that don't have a weighting will list alphabetically after the ones that do.
Happy site-building!
Connecting mobile devices to Photoshop CS5
September 11th, 2011
Adobe is releasing Photoshop Touch SDK, which allows users to bridge the potential of mobile with the power of desktop software. The Photoshop Touch SDK allows applications running on the iPhone, Android, Blackberry, and iOS mobile and tablet devices to interact with Photoshop CS5.
Adobe's belief is that such mobile to desktop software connections will power new business ideas and opportunities. SDK developers can connect and create applications that communicate with Photoshop CS5 over a TCP connection. In the company's official announcement, they offered the suggestion of creating an eBook that connects directly to Photoshop. This SDK will extend the range of possibilities for the leading image-editing and design software.
Are dashes better than underscores for SEO?
August 17th, 2011Here is an old SEO question... Which is better for improving a page's ranking in search engines--dashes or underscores? The difference between dashes and underscores for SEO for Google is fairly small--a second order effect--not a primary factor in ranking, but there is a difference which should be noted.
Dashes are used as a separator, which allows for distinction between terms. For example, a URL "website-designer" will be seen clearly as two separate words, whereas underscores have been built into Google's framework as a joining element--drawing a close correlation between the words--essentially creating a statement.
Matt Cutts, from Google, does a fantastic job explaining the difference. He ultimately recommends uses dashes over underscores, but comments that the difference between the two is not a big factor in ranking.
Monetization ideas for blogging
August 6th, 2011We can categorize the ways to earn revenue from blogging in two broad categories: direct monetization and indirect monetization. Direct monetization is perhaps the most popular approach--namely web advertizing. Bloggers can always experiment with the two approaches to learn what is best for them.
Direct Monetization of Blogs
- Advertising: banner advertizing, text link ads, website and web page sponsorship, Adsense or PPC ads, etc
- Sponsorships
- Paid reviews
- Membership component to your blog for specialized or high-value content
- Text links ( This one is controversial. You can lose your rankings if you are caught. )
- Paid placement of paid reviews (in addition to the paid review)
Indirect Monetization of Blogs
- Freelance contracts deriving from your blog work
- Service contracts both from your authority about the topical content or as a blogger
- Courses, classes or workshops
- Membership websites and paid communities
- Books and eBooks
- Speaking engagements
List your content alphabetically in Drupal
August 1st, 2011In Drupal, it is fairly simple to create alphabetized lists of content items. The approach that I am about to describe is just one of a few ways to do just this--perhaps one of the easiest, as it comes straight out of the box.
Create a custom content type
We would recommend creating a custom content type for your content list. This will allow you to group all your content items under one parent grouping. As you (the web designer or website manager) goes to add content to the site or proof the content in the site, you will be able to quickly sort the content items by the "content type" or grouping. This can be mighty helpful as you browse for specific content items (and you don't want to wade through a mound of misc. pages).
Customizing your new content type
Your new content type is a "home" for all content related by your conceptual grouping. You can customize a content type by adding new fields and data-types. This can allow building structured data--a column grid or a list of data fields. It can also allow you to add things like a downloadable PDF or Word Document to your page. To give you an example, let's say you were designing a website that required a Press Section. In the Press Section, you want to have a normal web page that is editable, but also a single downloadable PDF "take-away" for the page. You can simply add a new data field using the "file" option, and the Drupal framework will take care of the heavy lifting of the new piece of functionality.
Above: find the "Manage fields" menu inside "edit" content types.
Above: Shows the process of creating a new custom data field in Drupal.
Adding your list to a new web page
Once you have created your new content type, specified the fields and added content to your new content type, you can now proceed with creating your "list page". For this you should go to your Admin menu and select "structure." Inside "structure" you can select "Views" and create a new "view." A view will allow you to create a list of content items from your content type. Once you type a name for your new view, you can proceed with selecting the content that you would like to display on your new web page. Choose your new content type and try sorting by title.
Now making your list alphabetical
You can modify and customize your view in numerous ways. Ultimately your view will act as a web page. It will have a URL, which you can specify and a page name. You can alphabetize your content list by going to "Sort criteria" and selecting descending or ascending--as you wish. You can also further customize the display of this content list. For example you could choose to display some teaser text below the title or even display a date field (that you will need to add using the field manager).
Organizational tools for investigating corporate officers
July 17th, 2011When investigating a company, it is vital to look at more than just assets--look at the people behind the company.
Here is a quick list of resources for investigating a corporate board.
The corporate website
It is always a good idea to start with the web. The internet can be a treasure trove of information. Many companies place a lot of useful information on their corporate websites and sub-sites. Generally, most companies and non-profits list their entire board, which helps to legitimatize the company. Many companies also list their staff directory as well.
Google and the indexed web
Google is yet another fantastic way to find information on a company. Google's index of the web also contains old and deleted files from a corporate website--it may be very useful to do a more advanced site search to uncover records and files indexed from the past, including past staff members.
Former Employees
Try interviewing former employees of a company to find out who may still be working for the company that you are investigating. This may also include former board members. Such research may turn up disgruntled employees or really interesting stories about the inner workings of the organization or company. Current, employees may be less apt to disclose such information.
Phone Lists of Private Companies
You can access private company lists from services such as infusa.com and zapdata.com. These databases have amassed quite a bit of data from various public records and open-source databases, news and telephone interviews. It should be noted that these lists are focused on marketers, but the data is nonetheless useful as an open-source intelligence source.
Annual Reports
Publically traded companies provide annual reports, which are accessible online. It is a great way to find a list of board members and their backgrounds.
SEC Filings
Try searching the SEC (sec.gov) by company name to locate a company's proxy statement (DEF-14 filing), which will reveal the compensation paid to board members and corporate officers.