Table of Contents:

  1. How Do You Use a Bootstrap Mindset?
  2. Key Points to Remember when Designing Child-Oriented Websites
  3. The Most Effective Tools To Enrich Reader Engagement On Your Site

How Do You Use a Bootstrap Mindset?


 

[firstwebdesigner_subscribe]

When we think of bootstrap, the first thing that comes to mind as web designers is a computing technique or a popular HTML, CSS, JS framework for developing responsive, mobile-first projects on the web.

Another definition of bootstrap, on the other hand, is the ability to get yourself in and out of a certain situation using whatever resources you have.

If you look at the principles, though, they are almost similar – both make use good use of whatever they have on hand.

What Really Is a Bootstrap Mindset?

According to Joel Zaslofsky, a bootstrap mindset is being connected to a lot of friends and communities, where you bring people together and you help each other. It is for people who want to collaborate with each other instead of competing with each other.

Joel added further that having a bootstrap mindset does not focus on making money, but more on making an impact to others – of people thanking you because you have been generous enough to help them.

You might think that getting thank yous from people will not work for you because you also need to live and pay the bills. Joel was quick to add that it is becoming a resource to people. By becoming a resource, you can also gather resources to yourself as well.

Re-defining What Resource Is

Often times, we have this mindset that we do not really have something to give to other people. The excuses we often give are: I have no money, I have no time, I have no time, I don’t have the motivation, etc. You will be surprised, however, that even in the world of business, people do not really need a lot of money.

What a lot of people need today is motivation, accountability ally, or someone to help them in their struggles. For example, a startup company might have all the technical team in place and a practical know-how, but they have difficulty waking up in the morning and be excited about what they’re doing.

However, if they know that you are going to call them and do what you have promised to do yesterday, that alone has a big impact on them. By doing that, you become a resource to them, someone who provides the motivation they need and someone who becomes an accountability partner to them.

In short, a resource is not about doing something for yourself, but doing something for someone because you made a promise to them.

Conclusion

There’s really nothing fancy about a bootstrap mindset. It is simply becoming a resource to others. It also means becoming a connecting bridge to others so that they can collaborate instead of compete. As a web design professional, there is nothing more satisfying at the end of the day than in knowing that you have helped someone and provided the much-needed boost they want.

 

Watch the video and hear more how to adapt that bootstrap mindsetand don’t forget to share and spread the love.

Now you know how to use Bootstrap mindset. In the next section we will talk about what you need to bear in mind when designing a website for children.


Key Points to Remember when Designing Child-Oriented Websites

This generation’s children are becoming more web-savvy as more and more children have access to the internet. Over the years, the growth in sites that cater to younger children has increased by leaps and bounds, and kids even as young as three years old can use the internet.


In the world of children oriented websites, the conventional rules of web design don’t quite work. There are many elements that live on child-oriented websites alone, for children are a whole different audience (rather, a whole different species in the world of design).

Bright and Lively Colors

Color combinations that are normally scoffed at in normal web design will actually be effective in a children’s website. Most children’s websites are lively, bright and cheerful. Don’t worry to go crazy with bright colors and weird combinations–the more offbeat, the better.

And yes, it seems like kids have more tolerance to clutter than adults. Color and high activity in the web site stimulates the child’s senses, which is effective for retaining their interest and attention.

Cartoon Network

Wizards of Waverly Place

Spongebob Squarepants

Home of everyone’s favorite yellow sponge, Spongebob Squarepants.

Pictures, pictures, pictures

Pictures are important in children’s websites. Text should be used sparingly, it should be easy to understand and straightforward.  You can emphasize language by adding relevant pictures.

Fish Hooks

2. Games and Activities

Most kid’s websites feature mini-games to keep kids entertained for long periods of time. These games are one of the main reasons why kids come back again and again to the website. Featuring games, quizzes and activities is perfect for retaining traffic to your site, making it popular among children and thus retaining their loyalty.

Most kid’s websites feature mini-games, to keep kids entertained for long periods of time. These games are one of the main reasons why kids come back again and again to the website.

Also know your gender group. Pattern the games and activities after the intended target. For example, girl’s games are often about dress up and playing house. Little girly girls love clothes, makeup, princesses and the color pink.

But it doesn’t mean that boys can’t enjoy ‘dressing up’–they can create and ‘dress up’ their own cars in the official Disney Pixar’s Cars website.

  • Games that Promote Education

Aside from entertainment, games can be used as a tool to educate, inform and allow interaction.
Nasa Kids Club>

A great educational site for kids to learn more about astronomy and space.
PBS Kids

PBS Kids is a rich resource for educational games. Kids will love this site. Parents will love this site. The children are learning even when the kids are not intending to.

  • Activities

Printables, coloring pages and crafts are also important to sustain the fun, even if the child is not in front of the PC. These options are often available on the ‘Downloads’ Page.



3. Know your Age Group

Children can be divided into three groups according to age bracket: very young (ages 3-5), mid-range (6-8) and older kids (9-12) The different age groups have different activities, behaviors and interests. As kids grow older, they also get more web experience and knowledge.

  • Young Kids (3-5)

Cute characters, nature themes, clean colors and graphics are just some of the common elements found in web sites for young kids. Use of text is very minimal, instead compensating for buttons, graphics and sound.

Octonauts

Kids appreciate web site design that is rich in depth. 3D animation, rich shadows and highlights, subtle gradients are what composes this beautiful web design from Octonauts.

Barney

Crayola

Coloring activities and printable color pages are popular especially for websites targeted to the younger age group.

  • Mid-range Kids (6-8)

The older the child, the more proficient he/she is with reading. Consequently, more words appear in web design targeted to older kids. Sites also offer more challenging and varied games, now growing bored of the young kid’s simple games and one-task activities.
Ben 10

Scooby Doo

  • Older Kids (9-12)

Kids ages 9 to 12 are now more mature and experienced in web use. Older kids are bored with repetitive games, so it will take a deal more for them to come back again and again to a web site.
This means developers should craft sites that allow frequent visitation to the site. Games for older children should be more engaging and interactive, by means of which they now have more freedom to create their own characters, upgrade them, create houses for them, and compete in games with other online players. Websites for older teens should have the option to interact with other players but still providing the necessary security and privacy for the young users.
Neopets

Go Supermodel

  • Parent’s Section

Responsible parenthood requires parents to supervise their kids on their net use.

3. Low Attention Span

But kid’s websites are often heavy (using Java and Flash) for they carry plenty of games, animations, sounds and music. To prevent kids from closing the site, websites create creative pre-loaders.

Pre-loaders offer your kids something interesting to look at while waiting for the whole page to load.

4. Ease of Navigation

Navigation in children’s websites must be oversimplified so that kids can navigate through it easily. Spatial navigation is important, thus the ‘map’ layout is popular among kid’s websites. Text-based links are not as effective compared to large buttons and graphical icons. Finally, children do little or no scrolling, so design websites with no scrolls, and be sure everything of relevance is located at the front page of the site.

  • Navigation Bar

The most important links are of course placed in the navigation bar. The navigation bar is a common element in web design, even so in kid’s web design. Kid’s websites tend to be unconventional and unique, but the navigation bar keeps for it keeps the important links organized. They are a constant element in the site, to ensure our young users won’t get lost amidst the maze.

Kids don’t use the search feature as often as adults, instead relying on bookmarks and clicking on buttons. Because of this, make navigation as simple as possible. Everything should be present at first sight.

  • The Map Layout

The layout of children-oriented websites can be more complicated because of their target market. While adults use the internet for information and communication, children log on to the internet for fun and entertainment.

Claus.com

A fun, Santa-themed website for kids with games and activities. The site allows kids to navigate through the North Pole. Fun places include the Elf School, Reindeer Barn and Mrs. Claus’ Kitchen.

Neopets

Spatial navigation is necessary for children’s websites. Kids want something that’s imaginative, but in a world that is real and familiar to them. Create creative layouts such as a room where you can click and interact with the objects.

5. Animated Animals and Characters

Interaction is vital for a child’s entertainment. Design a children’s website that offers plenty of stimulus such as sound, music, animation and videos. While most adults find music unnecessary and annoying, for kids it can make and break the website. The music and animation sets the mood and tone of the whole website.

Disney Princess

Phineas and Ferb

Club Penguin

An MMORPG winter-based world for kids age 6-14 where they can play games, customize their igloos and penguins.

Dr. Seuss

In the Dr. Seuss site, whimsical music set the theme and environment of the entire site. The site looks exactly like the Dr. Seuss storybooks we have as a child.

Bob the Builder

Bob the Builder welcomes visitors to play games, to click on the trucks to see how they work or click on him to create something from start to end. Then it plays the familiar ‘Bob the Builder’ theme song in the background.

Conclusions

Designing for a children’s website is tremendously harder to develop and design, but more rewarding and fun. Designers learn to design and layout according to their audience’s behaviors, preferences and web experience.

When designing for children’s website, we learn:

  • Website should have bright colors and a cheerful mood.
  • Use minimal text and plenty of graphics and pictures. Stick to plain talk and be straightforward. Font size should be around 14 for younger kids, and 12 for older kids.
  • Ease of navigation is key — navigation bar should be where it is most visible (like on the top), with heavy graphics and big buttons. Maps and open-ended environments offer kids freedom to roam and have fun.
  • Kids click more than they type. Kids don’t do searches as often as adults do. When saving their favorite websites, they rely more on Bookmarks than Google.
  • Animation, sound and music is integral in web design. Add sounds and animation that trigger upon hovering or clicking the mouse.
  • Games are just as necessary. Printables and crafts as well. Games should be varied and plenty, fit for the age group.
  • Give kids a chance to create their own characters and reward return users by giving them the option to personalize and upgrade them.

Now let’s take a look at how to get maximum attention of your visitors.


The Most Effective Tools To Enrich Reader Engagement On Your Site

What do we mean when talking about reader engagement? Well, in terms of blogging the first things that come to mind are comments, sharing, questions, conversion rates. To sum up we could compare reader engagement with building a community. A community where readers care about each other, where action doesn’t stop after reading the final paragraph and where exciting discussions are born.


Unfortunately, good content and neat design aren’t the only factors which affect reader engagement. You need to learn to focus readers attention and start a conversation. Developing an engagement is a win-win situation. Your visitors will want to explore more and join the conversation but you, as the publisher, will be looking at higher conversion rates.

Gamification is a whole branch in reader engagement which brings together game mechanics and marketing to create engagement and solve problems. What do we understand with game mechanics from a web standpoint? Well, that doesn’t necessarily has to be the traditional online games as we are used to seeing them. Gamification relates to things like points, badges, activity levels, leaderboards, challenges etc. Gamification is an excellent way to help shape user behavior and influence them to take actions. There are already lots of successful companies who’ve implemented these game mechanics into their services. Foursquare and Farmville are only two brilliant examples of efficient use of game mechanics.

How do you start then? While there are many ideas and tips to help you improve reader engagement this article focuses on tools and services that do the work for you. Polls, comment platforms, newsletter and gamification services – continue reading and check out these 15+ awesome tools to enrich the readers engagement. The post also contains some neat examples of user engagement and gamification techniques in use.

Tools & Services

1. Badgeville

Badgeville-1-tools-enrich-reader-expierience

Badgeville is the leading Social Loyalty and Smart Gamification Platform. Badgeville makes it easy to drive reader loyalty and increase retention by rewarding targeted behaviors, such as visiting, reading pages, commenting, and sharing links.

You can use Badgeville pertaining to retail & ecommerce, media & publishing, entertainment, health & fitness, education etc. Basically the principle stays the same. You implement a social rewards program into your website, in that way being able to offer a variety of rewards to make the experience more enriching.

The platform

Badgeville gives content, commerce and community brands the power to drive and measure user behavior with social game mechanics. Badgeville’s industry-leading customers are experiencing increases in key business objectives by more than 30%.

Dynamic Game Engine

Badgeville-2-tools-enrich-reader-expierience

Badgeville’s patent-pending Dynamic Game Engine (DGE) makes it easy for smart brand marketers and product leaders to use social game mechanics to drive user behavior across their web, mobile, and social experiences. Chosen by industry-leading brands, the DGE is the most flexible and lightweight gamification solution available on the market today.

Widget Studio & API

Badgeville-3-tools-enrich-reader-expierience

With the Badgeville Widget Studio, you have access to an extensive library of skinnable, turnkey widgets that make it possible to deploy a deeply integrated social loyalty program across your web experience in a matter of weeks. For additional customization, the Badgeville API can be quickly integrated into any digital property.

Social Fabric

Badgeville-4-tools-enrich-reader-expierience

Social Fabric is a groundbreaking technology that brings the social interactions found on Facebook, Twitter, and similar social sites to any web property, delivering relevant, real-time social experiences tied to site-specific user behaviors and content. Social Fabric offers real-time notifications, follow functionality, and relevant activity streams.

Engagement Analytics

Badgeville-5-tools-enrich-reader-expierience

Marketers can now take advantage of the same analytics that social game developers use to build compelling, revenue-generating user experiences. With Badgeville’s Engagement Analytics, you’ll gain deep, real time insight into the health of your user community, measuring daily active users, lapsed users, as well as a host of behaviors.

2. Polldaddy

Polldaddy-tools-enrich-reader-expierience

With Polldaddy you can create stunning surveys, polls, and quizzes in minutes. Collect responses via your website, e-mail, iPad, Facebook, and Twitter. Generate and share easy-to-read reports.

Features:

  • Create stunning online surveys. Use the survey editor to create surveys quickly and easily. Collect responses via your website, e-mail or on your iPad or iPhone
  • Market-leading online polls. What does your audience think? Embed simple, one-question polls into your website to find out.
  • Test their knowledge with an online quiz. The perfect tool for the classroom, colleagues or just for fun. Create quick and fun quizzes to test their knowledge.
  • Get your content rated. Create simple five-star and Nero rating widgets to attach to your blog posts, images, videos, and more.

Pricing:

  • Free (200 survey responses per month, 10 questions per survey): $0
  • Professional (5,000 survey responses per month, unlimited questions per survey and more): $200/year
  • Corporate (unlimited survey responses per month, unlimited questions per survey and more): $899/year

3. Outbrain

Outbrain-tools-enrich-reader-expierience

Outbrain is a simple way to increase engagement, generate new revenue and drive traffic to your mobile-optimized site. Outbrain automatically places your best content at the foot of your article to guide your readers towards more of what you have to offer.

Features:

  • Improve site recirculation. Targeted content recommendations increase page views by 3-12% and move readers between your blogs, site sections, and other properties.
  • Make money. Customers pay Outbrain to distribute great articles and content that they want read. When quality articles match your content, links to these articles may show and generate revenue for you.
  • Editor friendly. With Outbrain, you decide which content sources will be recommended to your readers. You will also have a full control over the sponsored recommendations that drive you revenue.
  • Extend to mobile platforms. Outbrain recommendations are a great addition to your mobile platforms.

4. Disqus

Disqus-tools-enrich-reader-expierience

Disqus is a comment platform that helps you build an active community from your website’s audience. It has awesome features, powerful tools, and it’s easy to install.

Features:

  • Realtime comment system. Comments become more like live discussions with realtime posting and updating.
  • Notification and reply system. The notification system lets people know when they’ve received a response. Best of all, they can continue the conversation straight from the email.
  • Inline media embedding. Full integration with media services such as Youtube, Flickr, and more. Attach media such as photos and videos right within the comments.
  • Mobile commenting. Fully compatible with mobile websites for commenting while on the go.

5. The Slide

Slide-tools-enrich-reader-expierience

The Slide by SimpleReach recommends related posts from your site on a widget that “slides” in at the bottom of the page. You’ve seen a similar content recommendation widget on sites like NYTimes.com, and now SimpleReach is allowing anybody to take advantage of this awesome tool for free. The Slide uses ‘asynchronous loading’ and will not affect the load time of your pages.

6. Readability

Readability-tools-enrich-reader-expierience

Readability delivers a great reading experience that compensates publishers and writers without slowing down the web. Why would you want to use it as a publisher? 70% of all Readability membership fees are earmarked for writers and publishers. Every time a subscriber uses Readability on your site, a portion of that subscriber’s fees are allocated to you.

Features:

  • Snappy auto-rendering of content on mobile & tablet devices.
  • Innovative analytics that provide new insights into reading activity.
  • A powerful API that is simple to integrate and build upon.
  • Enhanced accessibility and instant printable + single-page views.
  • A rich mobile experience — without installing an app.

7. Intervue

Intervue-tools-enrich-reader-expierience

Intervue is a quick and easy tool for publishers who are looking to gather short video responses online from anyone with a webcam.

8. Zooshia

Zooshia-tools-enrich-reader-expierience

ZOOSHIA is a simple yet clever tool that arms websites and blogs owners with fresh content from across the social web. ZOOSHIA is the first and only social plugin that enables you to mix content that interests you and your audience.

9. BigDoor

Bigdoor-tools-enrich-reader-expierience

BigDoor use game mechanics to increase user engagement, loyalty and monetization.It’s goal is to help web publishers, marketers and developers grow and engage their communities. BigDoor offers a cost-effective, flexible and easy to use suite of tools to quickly build game mechanics into your online experiences and applications.

Pricing:

  • BigDoor is free as a widget and for developers, yet you have to pay for the enterprise service.

10. Bunchball

Bunchball-tools-enrich-reader-expierience

Bunchball is yet another gamifaction platform which allows you to influence users behaviour and optimize the way they interact with the website.

Nitro Platform is designed to make it easy for you to offer meaningful experiences to your users. Highly flexible and scalable, Nitro can be customized to your needs, but offers intuitive, easy set-up.

WordPress Plugins

1. Newsletter

Newsletter-tools-enrich-reader-expierience

This plug-in lets you collect subscribers on your blog with a single or double opt-in subscription process. Double opt-in is law compliant and it means the user has to confirm the subscription following simple standard instructions sent to him via email. Newsletter Pro can send emails directly from your blog, collect statistics, has a built in feed by mail service and an auto-responder for follow up you new subscribers.

2. Subscribe 2

Subscribe-tools-enrich-reader-expierience

Subscribe2 provides a comprehensive subscription management and email notification system for WordPress blogs that sends email notifications to a list of subscribers when you publish new content to your blog.

3. GD Star Rating

Star-rating-tools-enrich-reader-expierience

GD Star Rating plugin allows you to set up rating and review system for posts, pages and comments in your blog. You can set many options for displaying the rating stars, and add widgets into the sidebars for displaying top ratings and other statistics generated by the plugin. Plugin includes advanced settings panels that will allow you to control many aspects of rating.

4. Sharethis

Sharethis-tools-enrich-reader-expierience

The ShareThis plugin seamlessly enables users to share your content through Email,Facebook,Twitter, Google +1, Like, Send and many more. You can customize the ShareThis widget on your site and register with ShareThis to get access to enhanced share related analytics for your site.

5. Quick Chat

Chat-tools-enrich-reader-expierience

Quick Chat is WordPress chat plugin with support for translation, chat rooms, words filtering, emoticons, user list, gravatars and more.

6. Gigya

Gigya-tools-enrich-reader-expierience

The Gigya Social optimization plug-in aggregates authentication and social APIs from Facebook, Twitter, Google and other OAuth & OpenID providers, giving sites the ability to authenticate users via social network and OpenID providers and increase site traffic by enabling users to easily share content with their friends and followers.

7. Facebook Comments

Facebook-tools-enrich-reader-expierience

Allows your visitors to comment on posts using their Facebook profile. Supports custom styles, notifications, combined comment counts, recent comments

Examples

1. Foursquare

Foursquare-tools-enrich-reader-expierience

Foursquare uses badges as a reward for challenges completed. Badges is a great way to engage users and keep competitive mood around them. Bagdes will be the stimulus for existing users to keep using service and an attractive detail for the newcomers.

2. Dropbox

Dropbox-tools-enrich-reader-expierience

Dropbox is another great example of efficient use of user engagement. They’re offering extra free space for completing challenges. One of the challenges include inviting friends so in that way the service is being popularized.

3. Tribesports

Tribesports-tools-enrich-reader-expierience

Tribesports is a social network for people interested in sports and an excellent example of website gamification. In the screenshot above you can see the user profile page. Tribesports have implemented the whole package – activity level, leaderboard and badges. One the main site’s features is challenges. You can take them., challenge your friends, create your own ones and see the progress of others.

4. Mint

Mint-tools-enrich-reader-expierience

Mint has this fitness feature which allows you to do drills, take challenges and view your progress.

5. Dribbble

Dribbble-tools-enrich-reader-expierience

Dribbble is also a nice example of user engagemenet. As you get the status and gain more exposure you’re also promoting your business. Plus the exclusivity of the site also plays a role in user engagement.

Editorial Team

Written by Editorial Team

  • Sam

    Hello!

    What do you think about new full stack JS framework – MeteorJS and it’s concept? (www.meteor.com)
    How it change design of web apps?
    On what details should we point our attention when we make design for web app?

  • Dewald Swart

    Using bootstrap resources can greatly increase the speed of developing a website because instead designing something from the ground up, you just build on a existing framework.