Blog

Technology news & comments affecting web professionals' lives

HOWTO: Official way to ask jQuery to wait for all images to load before executing something

April 1, 2013

Official way to ask jQuery wait for all images to load before executing something – Stack Overflow

With jQuery, you use $(document).ready() to execute something when the DOM is loaded and $(window).load() to execute something when all other things are loaded as well, such as the images. Click through for more details.


Filed under: development, tips-n-tricks, web Tagged: howto, javascript, jquery, webdev

HOWTO: Managing JavaScript on Responsive Websites

March 25, 2013

From the blog:

Managing JavaScript on Responsive Websites | Viget

Since the project I was working on required browser support down to IE8 and I wanted my media queries and JavaScript to function (think older netbooks), I decided to create my own solution.

jRespond is a script that holds a list of user-defined functions that are fired based on the browser’s width compared to a list of customizable breakpoints. Entry and exit functions can be defined so transitions between breakpoints can be managed by removing and unbinding some page elements while creating and binding others. jRespond was built to be independent and browser agnostic. It does NOT sniff for media queries in the stylesheets.


Filed under: development, mobile, tips-n-tricks, web Tagged: browser, howto, javascript, jrespond, js, responsive, toolbox

HOWTO: Using Visual Social Platforms For The Non-Visual Business

March 22, 2013

From the blog:

Using Visual Social Platforms For The Non-Visual Business | Content Marketing & Digital PR Blog

With the recent boom in visual social platforms like Instagram and Pinterest, you may be wondering how you can find success through the use of a visual medium, even if you don’t have a very visual business.

Well here’s some good news for you: Your business doesn’t have to be related to photography, beauty, or fashion to hit it big on visual platforms. You just have to be more thoughtful and creative when strategizing their use.

On Instagram, users generally take photos with their smart phones (or upload photos to their phones), apply filters, and share with their online community. While on Pinterest, users organize and share their own images, as well as anything they find of relevance on the Web. The great thing about Instagram and Pinterest is that you can share your images across nearly all of your social platforms.

Here are a few ways your non-visual business can maximize your results on a visual social platform.


Filed under: business, social networking, web Tagged: hashtag, instagram, pinterest, seo, social media

HOWTO: Special Characters in HTML

March 8, 2013

Special Characters in HTML

HTML Entities and/or ISO Latin-1 codes can be placed in source code like any other alphanumeric characters to produce special characters and symbols that cannot be generated in HTML with normal keyboard commands.

For example, to render Düsseldorf the HTML source should read

Düsseldorf or Düsseldorf

While many similar lists are available on the Web (run your favorite search engine using “ISO Latin” or “HTML Entities”), none I’ve seen account for the standard character sets of different operating systems (e.g. Windows vs. DOS vs. Macintosh, etc.); this list should produce the same results on all platforms.


Filed under: design, tips-n-tricks Tagged: html, special characters, toolbox

A Detailed Explanation of the Anatomy and Components of a DotNetNuke Website URL

January 28, 2013

From the blog:

A Detailed Explanation of the Anatomy and Components of a DotNetNuke Website URL

People don’t like to think about or talk about URLs. Unless someone know how their website works in detail, there is a chance for URL confusion. Even technically-minded people gloss over when talking about the details around what is happening with the fundamental pieces of a URL.

Because this seems so common, I thought I would devote some time to discussing each piece of the URL and what the significance is. The example used is a DotNetNuke (DNN) URL. I will start with the very basic and expand from there.


Filed under: web Tagged: dnn, DotNetNuke, url
Posted in: web, dnn, DotNetNuke, url

2012 in review

December 30, 2012

The WordPress.com stats helper monkeys prepared a 2012 annual report for this blog.

Here’s an excerpt:

600 people reached the top of Mt. Everest in 2012. This blog got about 7,800 views in 2012. If every person who reached the top of Mt. Everest viewed this blog, it would have taken 13 years to get that many views.

Click here to see the complete report.


Filed under: company
Posted in: company

HOWTO: Tips for a Clean and Minimal Online Store Design

December 26, 2012

From the blog:

Tips for a Clean and Minimal Online Store Design | Codrops

What better way to showcase your products than by giving them the stage?

This is the concept behind a growing trend in e-commerce web design – going minimal.

In the past many online stores took the opposite approach to design. Sites were often cluttered with information, fonts and colors were overwhelming, and sites were quite simply “over-designed”.

Now, many sites are ditching models, crazy colors and fonts, and fancy photography for the simplistic style of just showcasing their products. It’s a trend that is taking over much of the web (not just e-commerce) with the emergence of responsive design models. More designers are embracing the trend that simpler can be better, while focusing on readability and usability.

The result is a better experience for online shoppers, with cleaner interfaces, text that is easier to read and interfaces that are simpler, faster and more user-friendly. This trend is about more than just design, it creates a better overall experience.

Think about the success of Apple and its online store. Simple and direct can equal sales. Here, we take a look at the trend, companies that are doing it well and tips for making it work for you.


Filed under: business, design, tips-n-tricks, web Tagged: ecommerce, online store, webdesign

HOWTO: 75 Tips to Manage Your Social Media Efforts

December 17, 2012

From the blog:

75 Tips to Manage Your Social Media Efforts in 2012

With all of Google’s post-Penguin focus on natural link building and the increasingly high weight given to social performance by the company’s algorithms, it’s clear that social media marketing should be a priority for every business operating online these days.

However, when it comes to social networking, there’s a right way and a wrong way to go about promoting your business. Take a look at the following tips to see what’s working in 2012, and which outdated social media marketing tactics should be avoided at all costs!


Filed under: business, social networking, tips-n-tricks Tagged: content, facebook, google, howto, linkedin, pinterest, social media, tips, twitter

HOWTO: Engage Your Blog Readers by Following the “5:3:2 Rule”

December 17, 2012

From the blog:

Engage Your Readers by Following the “5:3:2 Rule” | Gist

Business blogging and social media publishing can be a great way to engage your readers and share insight into both your personality and business. However, they are – by no means – straightforward processes.

Chances are if you’ve been online for any amount of time, you’ve read both good web content and bad content. Good content can be extremely useful in generating customer leads and forming positive brand associations amongst future prospects. Bad content, on the other hand, can be very, very bad!

So what makes bad web content, bad? In fact, there are a number of cardinal sins that can sink a well-intentioned business blog or social networking profile. Posting too much promotional content is one, as nobody wants to read sales message after sales message! At the same time, posting too much dry, technical content will turn off readers who come to this interactive space looking to get a feel for you and your brand.

To prevent these unintentional missteps from occurring, I’ve developed the “5:3:2 Rule,” which I’ve found to represent an optimal balance of different content types on any web property. Here’s how to use this strategy to increase responsiveness to your digital content:


Filed under: business, tips-n-tricks, web Tagged: 5:3:2, blogging, content, howto

HOWTO: How to Use Newly Released Pinterest Business Pages

December 14, 2012

From the blog:

How to Use Newly Released Pinterest Business Pages « HECKENKEMPER

Pinterest hit the social networking scene this past year and has quickly become a platform that is showing great promise and meteoric rise in both number of users and time spent on site. It’s ease of use, powerful visual imagery and seamless tie ins to Facebook and Twitter have shown it’s one that should not be ignored. Pinterest started off with a very high percentage of female users in the 20-30′s demographic, the last 6 months have shown an equalizing trend with more and more male users and now the fastest growing segment of users are in fact corporate/business pages. We saw pages going up dedicated specifically for brands and many small business owners created boards for their business within their personal accounts. November 2012 Pinterest released their Business Pages that offer enhanced options including a verification badge similar to what you have seen on Facebook or Twitter, giving an authenticity to accounts. Business pages also offer buttons and widgets to be used on your company website. Let’s take a closer look on how to set up your business page or how to convert your existing account to a business page.


Filed under: business, social networking, tips-n-tricks Tagged: howto, pinterest, social media

Themes and topics – another article about Information Architecture

December 5, 2012

From the blog:

Tags, taxonomies, polyhierarchy and all that jazz. Crafting good categories for news content ain’t easy.

stdout.be | Themes and topics

Wednesday I suggested that we could solve a lot of problems with tagging if we start thinking in terms of relationships to real things instead of seeing tags als mere labels. With tags as true entities it’s easy to figure out what to tag (you tag persons, organizations, locations, events) and how to tag it. Relationships can be a part of the foundation for the kind of contextualized journalism that we hope to see more of in the future.

However, while talking about the future of metadata, I carefully sidestepped a thorny issue. Tags aren’t always used to refer to persons or locations. Even more often, tags are used to categorize content by a broader theme or by subject. Themes or topics aren’t real things, they’re bundles of things. Bundles of things upset the carefully crafted scheme I set out earlier. Today I’ll talk about polyhierarchy as a way of getting topics and themes into the fold.


Filed under: technology, web Tagged: categories, content, folksonomy, IA, information architecture, tags, taxonomy

Tags don’t cut it – an awesome article on Information Architecture

December 5, 2012

From the blog:

If we re-imagine tags as rich connections that relate content to the
persons, organizations, locations, events and themes they talk about,
hopefully magic will happen.

stdout.be | Tags don’t cut it

Tagging is a success story. Ten years ago, who would’ve thought that any regular Joe could and would be associating metadata with content. Out of their own free will, at that! Collections that would’ve just stayed a random pile of content in the past, like the bookmarks on Delicious or the photos on Flickr, are now being organized by the magic of folksonomies — a showcase for the sheer power of the many.

Tags dovetail nicely with our almost random way of browsing the internet, for instance by being the engine behind great topical pages for blogs that provide a gateway to any and all similar content written in the past. It’s metadata for the masses.

And so the human species does what we’ve always done when we see something that we like and that seems to work: we copy it. We’ve now got labels in GMail and in our customer relationship management software, tags in iPhoto, hashtags in twitter and there is tagging going on just about anywhere else where we want some order in what would otherwise be a big blob of undifferentiated content. And the world is better for it.

But because we’ve copied, thinking that if it’s good enough for Flickr, it ought to work for us too, we’ve forgotten what makes tags great, how they can add value and why they work when they work. We’ve forgotten that tags are just one way of bringing order to chaos.


Filed under: technology, web Tagged: bookmarks, categories, content, folksonomy, IA, information architecture, tags, taxonomy

HOWTO: CSS Architecture

November 29, 2012

From the blog:

CSS Architecture | Appfolio Engineering

To many Web developers, being good at CSS means you can take a visual mock-up and replicate it perfectly in code. You don’t use tables, and you pride yourself on using as few images as possible. If you’re really good, you use the latest and greatest techniques like media queries, transitions and transforms. While all this is certainly true of good CSS developers, there’s an entirely separate side to CSS that rarely gets mentioned when assessing one’s skill.

Interestingly, we don’t usually make this oversight with other languages. A Rails developer isn’t considered good just because his code works to spec. This is considered baseline. Of course it must work to spec; its merit is based on other things: Is the code readable? Is it easy to change or extend? Is it decoupled from other parts of the application? Will it scale?

These questions are natural when assessing other parts of the code base, and CSS shouldn’t be any different. Today’s web applications are larger than ever, and a poorly thought-out CSS architecture can cripple development. It’s time to evaluate CSS the same way we evaluate every other part of the application. It cannot be an afterthought or written off as merely the “designer’s” problem.


Filed under: design, tips-n-tricks, web Tagged: css, howto, webdesign

TOOLBOX: DiffMerge for Mac – Visually compare and merge files – FREE

October 30, 2012

From the website:

Download DiffMerge for Mac – Visually compare and merge files. MacUpdate.com

DiffMerge is an application to visually compare and merge files.

Product Features

  • Diff. Graphically shows the changes between two files. Includes intra-line highlighting and full support for editing. Merge. Graphically shows the changes between 3 files. Allows automatic merging (when safe to do so) and full control over editing the resulting file.
  • Folder Diff. Performs a side-by-side comparison of 2 folders, showing which files are only present in one file or the other, as well as file pairs which are identical or different.
  • Configurable. Rulesets and options provide for customized appearance and behavior.
  • International. Compatible with 42 different character encodings.

Filed under: development, free Tagged: compare files, diffmerge, mac, toolbox

TOOLBOX: Sammy.js – A Small Web Framework with Class

October 24, 2012

From the website:

Sammy.js / A Small Web Framework with Class / RESTFul Evented JavaScript

Sammy.js is a tiny JavaScript framework developed to ease the pain and provide a basic structure for developing JavaScript applications.

Sammy tries to achieve this by providing a small ‘core’ framework and an ever-growing list of plugins for specific functionality. The core includes a simple API for defining applications which are made up primarily of routes and events. By driving application development around a small and specific API, Sammy attempts to keep your code organized while still allowing a lot of breathing room to define your own style and structure.

Sammy is not a solution for every JavaScript application or problematic situation. It is a single and rather opinionated method for building applications that tries to lend itself to best practices and maintainable development. It does this without the overhead of a large base framework or a single method or system for building models or views. If you want something more fully featured I highly suggest checking out SproutCore or Cappuccino.


Filed under: development, free, web Tagged: api, framework, javascript, js, REST, sammy.js, toolbox, webdev

TOOLBOX: Fluid 960 Grid System

October 24, 2012

From the website:

Fluid 960 Grid System

The Fluid 960 Grid System templates have been built upon the work of Nathan Smith and his 960 Grid System using effects from the MooTools and jQuery JavaScript libraries. The idea for building these templates was inspired by Andy Clarke, author of Transcending CSS, who advocates a content-out approach to rapid interactive prototyping, crediting Jason Santa Maria with the grey box method.


Filed under: design, development, free, web Tagged: 960.gs, fluid, grid, toolbox, webdesign

HOWTO: Border-radius – create rounded corners with CSS3

October 24, 2012

From the site:

Border-radius: create rounded corners with CSS! – CSS3 . Info

The CSS3 border-radius property allows web developers to easily utilise rounder corners in their design elements, without the need for corner images or the use of multiple div tags, and is perhaps one of the most talked about aspects of CSS3.

Since first being announced in 2005 the boder-radius property has come to enjoy widespread browser support (although with some discrepancies) and, with relative ease of use, web developers have been quick to make the most of this emerging technology.

Here’s a basic example …


Filed under: design, tips-n-tricks, web Tagged: border-radius, css3, howto, webdesign

HOWTO: Speed Up with CSS3 Gradients

October 19, 2012

From the blog:

Speed Up with CSS3 Gradients | CSS-Tricks

Safari 4+, Chrome 1+, Firefox 3.6+, and Opera 11.10+ are all now supporting CSS3 gradients. This wide browser support makes using them for progressive enhancement all the more appealing. More good news, CSS3 gradients fall into the camp where you can specify fallbacks (i.e. images) so that browsers that don’t support them just use the image instead.

But wait… if you need to use an image anyway, why bother with declaring the gradient with CSS? That is kind of how I felt for a long time, but there is one important aspect that makes it worth it: browsers that support them don’t load the image fallback. One less HTTP Request = all the faster your site will load.

How it’s done

Cutting to the chase, here is the CSS for the most simple possible top-to-bottom linear gradient …


Filed under: design, tips-n-tricks, web Tagged: css3, gradients, howto, webdesign

HOWTO: jQuery UI Tabs Styling

October 19, 2012

From website:

jQuery UI Tabs Styling

Have you wanted to do something a little different with your jQuery UI Tabs?
  • Remove the header background
  • Remove the entire header
  • Remove most of the formatting
  • Make the non-active tabs smaller
  • Add icons
  • Centre the tabs
  • Move the tabs to the bottom
  • To the left
  • To the right
  • Nested horizontally and then vertically
  • Have a single line of tabs that scrolls

All of these examples only involve CSS changes (except for the single line of tabs) that can be added inline to your page to override the defaults. Note, however, that for the left and right side examples you need to explicitly set the tab content height and the tabs list width, and that for the single line of tabs you must specify the overall list width.


Filed under: design, tips-n-tricks, web Tagged: css, howto, jqueryui, tabs, webdesign

Schema.org – Why You’re Behind if You’re Not Using It…

October 16, 2012

From the blog:

Schema.org – Why You’re Behind if You’re Not Using It… | SEOmoz

If someone told you that there was a quick and easy way that many of you could improve your SERP CTR for minimal effort, you’d all stop in your tracks and give them full attention. Yet, Schema.org and rich snippets are still horribly under-utilized.

Since Google (and Bing!) officially introduced schema.org in June 2011, it’s fair to say motivation to implement it has been mixed. However since its introduction Schema.org has already evolved a lot, adding a lot of new stuff that people haven’t paid attention to. Here I try to persuade you there are few downsides and plenty of upsides.


Filed under: seo, technology, web Tagged: bing, google, microdata, microformats, rich snippets, schema.org, search, serp

Demo Websites

To help you vizualize what your new website may look like, we've prepared different "template" websites with mock content.

Company Website

Typical pages for a business include: About Us, Products, Services, Customers, Contacts.
View Demo

Society Website

Typical pages for a non-profit society include: About Us, Officers, Programs, Meetings, Photo Gallery, Contacts.
View Demo

Portfolio Website

Typical pages for a portfolio include: Photo Gallery, About Me, Contacts.
View Demo

Event Website

Typical pages for an event include: General Information, Registration and Travel, Accommodations, Agenda/Program, Pricing, Contacts.
View Demo

Keep in mind, these are samples; your actual website will have your own branding (logo), content (text and images), and menu structure.

About Us

Web Page Authority's vision is to help businesses grow through effective and affordable web solutions. Our team members have experience in diverse industries including information technology, commerce, graphic design, printing, and management, thus building a strong foundation of expertise in web design solutions.

 

Contact Us

+1 (574) 208-3932 Paul (Indiana)
+1 (918) 850-4224 Bogdan (Oklahoma)