There are many different types of sidebar widgets that vary in style and purpose. In modern web design, it’s much easier to create dynamic widgets using CSS and, at times, JavaScript for sliders, tabs, and other related elements. But the type of content you use can be just as impactful as how it’s designed and coded.
Today we’ll look at how different types of websites gain value from various types of content and media in the sidebar of a website. I’ll use examples to show how these trends work and hopefully you will go away with some creative ideas for your own projects.
Social Features
Every branded website has at least one social profile. Initially, the biggest networks were Facebook and Twitter, both of which do offer custom widgets. But now there are so many other networks like Instagram, YouTube, Soundcloud, and Snapchat that could also be included in the sidebar.
Social Profiles offer a way for users to keep up with your latest content without having to visit a site every day. Social feeds are becoming the new RSS feeds, and these profile features belong in the sidebar for a very good reason.
Take the Sound Rock music theme as one example. In the sidebar, you’ll find a big Facebook Like box counting the number of fans along with a link to a Facebook profile. There’s also a live feed showcasing the latest three tweets via Twitter’s API.
Some visitors may not even consider that your website has social accounts. These sidebar widgets act as friendly reminders without getting in the way of the page content.
Consider which social profiles work best for your site and play around with the designs. You can have basic links with social icons like the News Magazine WordPress theme. But this straightforward approach may be less effective than embedding custom social widgets.
These social boxes do blend in well with most designs. They might feel a little crowded, but they never impede on the main content.
And there are tons of social icons that you can download and use instead of having to design your own from scratch.
API calls and custom widgets are also much more interactive. They practically beg the user to click through to a Tweet or an Instagram photo.
The above Sunrise theme is the perfect example of API social widgets in action. The sidebar includes the four most recent Instagram photos along with recent tweets from Twitter.
And while these features do encourage user interaction, they also require a lot of external resources and HTTP requests. Depending on the site, you may wish to forego individual API widgets for the social icons.
No choice is ultimately better than the other. They both serve the purpose of getting visitors onto your social accounts and ideally becoming lifetime followers.
Review Ratings
If you publish content reviews on a blog or website, it’s always a good idea to include some of the best reviews in the sidebar. These reviews can be sorted by relevance, publication date, or by popularity.
Google’s review schema makes review content appear much nicer in the Google search results. But when people are already on your website they might not even know your site even offers reviews.
Check out the Newspaper Video design. It eatures a large review widget in the sidebar. The very first review has been given extra space with a larger thumbnail image.
All the links have a 1-5 star rating which makes it easier for visitors to glance through the ratings of each article. This design is a perfect example of ratings in action as it makes each review stand out from other related stories in the sidebar.
If you have a lot of reviews, you could even have a system for visitors to sort the reviews by popularity or by publication date. I do like the examples found in the Swagger theme which includes various types of review widgets.
One section can be organized by category and another has tabs for sorting reviews by the most popular or the most recent.
Giving visitors a choice of how to browse content makes it much more likely they’ll click through onto something that catches their eye.
Sometimes you might even have a user-based voting widget on each review page. This is less common for smaller blogs but still a powerful way to encourage user interactivity.
Take a peek at the Gauge theme above. Each review includes a small “user rating” widget in the sidebar. You can select from 1-10 including a point scale (like 3.6 or 8.1).
There are many reasons to look for increased user engagement from a UX perspective. The sidebar is typically where these sorts of widgets would appear, so it’s a no-brainer to add custom user reviews to any review website.
Recent Posts List
In the same vein as recent reviews, there is also the recent posts widget. This is much more applicable to any blog or website regardless of reviews.
A list of recent posts or related posts will undeniably lower your site’s bounce rate, even just by a few percentage points. When readers finish a post, they can click over to a related post and keep browsing. Goliath Tech provides an excellent example of this.
Some designers prefer to move these posts into the main content column just below the content. There’s no right or wrong placement, but I always recommend at least keeping a “recent posts” sidebar widget to drive visitors further into the site.
The Porto theme is very similar but features a dot-based navigation. This allows visitors to scroll through a couple pages of recent posts all from the comfort of the sidebar.
Since all the major browsers support JavaScript this type of widget is rather safe even in today’s web of progressive enhancement advocacy.
One other option is to manage blog content based on editor’s picks. Check out the Daynight magazine and scroll down the sidebar until you see “Editor’s choice”.
This widget can be added alongside recent posts, but it’s used in a more commanding way. The editor can select which posts belong in this section and push them out to the entire site.
Recent posts, related posts, and editor’s picks all represent the same thing. Offering visitors a choice of content that might catch their interest and drive them further into the site. This is a must-have sidebar widget on any blog and should be considered for other blog-style sites if possible.
User Interactive Features
From YouTube videos to music players and image slideshows it’s easier than ever to include dynamic interactive content into your site.
Take a look at the very creative NetMag theme which adds a QR code right into the sidebar. It’s actually just a dynamic image created from the QR Code Generator embedded on the website.
This may not be useful for blogs or content websites. But think about the implications for small businesses. You could use QR codes to check in at appointments or keep notes saved for upcoming appointment dates.
The diversity is almost never-ending, and there’s so much ground to explore when it comes to interactive content.
CrazyBlog uses the example of a music player from SoundCloud right above a dynamic FAQ widget. Neither of these features would be hard to recreate, and they’re both valuable for different reasons (music for exposure, FAQs for user assistance).
You can take this as far as your imagination goes. The best approach for dynamic content is first to think about what a typical user might need. If most users need to get in touch with you, then consider a small contact form in the sidebar. If most visitors are looking to book appointments you can make a custom form for that too.
Go with anything that feels right in the layout, but always consider the user first and foremost.
Fixed Sliding Boxes
I’ve noticed on many websites that the bottom section of the sidebar will stay fixed and scroll with the user all the way down the page. I call these fixed boxes and they’re wonderful when used with lengthy web pages.
This effect can be created with JavaScript and can work on any part of the sidebar. Most websites keep one or two sidebar sections fixed and scrolling up until the very bottom of the page.
Take for example the Apemag blog layout. It has two sidebars that are sandwich either side of the main content column. The right sidebar includes many different features while the left sidebar stays fixed and scrolls down the page.
With this fixed sharing box in place, visitors are much more likely to share a great article once they reach the bottom. Notice that if you keep scrolling past the article the fixed social box will stay put right at the bottom.
If you’re building a website that is going to publish 2000+ word articles, then this is a trend you’ll want to follow. Fixed sidebar widgets are great in almost every scenario, and they offer readers more than just a column of text when reading lengthy articles.
For some designs like the Onfleek theme you can keep the entire sidebar fixed with the scroll.
In this example the post behaves normally up until the very end of the sidebar content. Then everything stays fixed and moves as you scroll.
This is a great alternative to the single fixed widget approach. If you get a lot of users who run high-resolution browsers, they’ll see the entire sidebar while scrolling.
The Blogberry theme is another great example of the fixed full sidebar. If you’re looking to increase conversion rates on email signups then definitely try this method. A carefully-placed signup form can do wonders.
The great thing about the full sidebar is that every widget can be visible through a combination of scrolling down and up the page. When users scroll down, they get the bottom portion of the sidebar and when they scroll back up the upper portion will remain fixed.
Obviously this technique won’t work great if your audience predominantly visits on mobile devices.
But it’s still a powerful trend that I’m seeing put into action more and more with great results.
Scheduled Events
Here’s something you wouldn’t normally consider, but it’s surprisingly useful for time-sensitive content. Upcoming events can be added to the sidebar reminding visitors of, well, anything!
Sporting events, movie releases or TV show premieres, even Twitch streams can be promoted via the sidebar in a list of scheduled events. This works best with upcoming events that pertain to your website.
Take for example the Golf Club theme. One section labeled “next matches” includes a list of three upcoming matches with dates and players. This can be useful for a local country club but also for a fantasy football team, or even a blog about football (or any other sport).
This sidebar widget can remind visitors about upcoming events and introduce new visitors to events they hadn’t heard about yet. This type of content adds real value which is exactly what you should be trying to do with every web page.
Another cool example can be found on the Born to Give homepage which features a large section of upcoming dates. These are presumed charity drives and/or events related to a charity.
Although this particular example isn’t found directly in the sidebar, it’s still easy enough to refactor this widget into sidebar content.
Local charities and organizations can help visitors find out about unknown upcoming events. If the community is small and the audience is targeted this can be invaluable to the design.
Relevant Site Content
I wasn’t quite sure how to title this section, but I’m talking about specific content relevant to the particular website or web page. Related posts are one example meant to drive visitors further into the site.
But consider a sidebar section that includes more information about the blog’s author. Most author bios can be found at the end of an article, but a sidebar widget could be just as useful.
Take for example the Blogius theme which includes a luxurious author bio in the sidebar of every page.
Sitewide author bios in the sidebar work best when the site is managed by just one person. So if you create a blog about yourself, your work, or just as an authority brand, you can place your name and bio in the sidebar because you’re a big focal point of the website.
You will see this trend used a lot on Mommy blogs where the blog likely has one blogger and it’s meant to be an outlet for the site owner’s personal musings.
But also consider a team environment like a spa/massage parlor or a real estate agency. Visitors will likely be interested in learning more about the company, its services, and what it has to offer.
Villareal offers a glimpse of this technique in a real estate agency theme. The sidebar lists a few agents by name along with email addresses for contacting purposes.
You can also peek at the most recently listed properties with links to their pages on the site.
The concept of a “featured properties” widget doesn’t seem much different than a “featured posts” widget. In truth they’re both very similar; in fact, both can be done on WordPress using the same system of content organization.
But the difference is in how users interact with the information. New properties need to sell and by having them listed in the sidebar on every page, you significantly increase the chances of someone seeing and placing a bid.
Retail and commercial websites have different interests than blogs and personal portfolio sites. But if you approach each project with the goal of pleasing the user then you’ll have no trouble filling up a sidebar with content that’s both dynamic and practical.
Wrapping Up
By studying what’s out there and learning from other designers, you’ll increase your visual library of UI concepts to pull and use whenever you need them.
I certainly hope these examples can help you find nuanced ideas to throw alongside the main content of any layout. Sidebars are by definition ancillary, but that doesn’t mean they’re verbose or nonsignificant.
By adding valuable sidebar content that users look for can prove to be one of the best resources for attracting long-term visitors and clients.
Featured Image: iDoodle
The post The Interactivity Benefits & Design Trends of Dynamic Sidebar Content appeared first on Envato.
envato.com coupon from Envato http://ift.tt/2coI5Bm
envato.com coupon
Tidak ada komentar:
Posting Komentar