Exploring the Use of Sticky Vertical Navigation in Web Design

Navigation in website design typically only includes the same basic menu items, modestly sit in the header, and always greets the viewer from the outset. Since the popularization of the hamburger button, nothing earth-shattering has happened in navigation design.

But some web designers have dared to change that by using the unconventional yet elegant sticky vertical menu. They tend to be more compact, minimal, and beautifully make use of vertical lettering.

There are several reasons why some websites will choose to use vertical navigation:

• First, they are compact, making them ideal for those who need or want to use up the entire hero section of a website.
• Second, their sizes are typically suited for use on both desktops and mobile devices alike.
• Third, thanks to their stickiness, they are perfect guides and anchor points, making the user experience much more comfortable.
• And finally, continually displaying the logo or name of the website is an easy way to enhance brand identity.

To experience the vertical navigation for yourself, take a look at the inspiring examples we have collected for you below. You will love the results!

The Web Designer Toolbox

Unlimited Downloads: 1,000,000+ Web Templates, Themes, Plugins, Design Assets, and much more!

Web Templates

2,000+ Templates

Newsletter Templates

270+ Templates

Dashboard Templates

150+ Templates

WordPress Themes

1,200+ Themes

WordPress Plugins

550+ Plugins

Mockup Templates

8,200+ Templates

Start Downloading Now!

Austin McKinney

Our first stop is to the personal portfolio of Austin McKinney. Here, the vertical navbar includes only the essentials: a hamburger button, links to social media profiles, the logo, and the designer’s occupation. As well as a beautifully designed vertical navbar, this website is also the perfect blend of ultra-minimalism and ultra-narrow design.

Editorial New

The creators of Editorial New show us that vertical navigation works regardless of color, stylistic options, or interactive details. Their navbar includes just one element – the hamburger button. It opens a lovely slide-out menu with a table of contents. Since the navigation has been stuck to the left side of the screen, users always have quick access to the menu wherever they are on the site.

The Crowdfunding Formula

The vertical navbar of Crowdfunding Formula is located on the right side of the page. Although we are not accustomed to seeing it there, it nevertheless works perfectly well. What’s more, thanks to the contrasting orange color of the menu button, it naturally catches an eye.

NSDI

The team behind NSDI uses a vertical navbar for displaying not just the hamburger button, but also the pagination of a full-screen slider. Another distinctive feature is that all of the elements move with the user. Here, they have an ultra-narrow vertical navbar and corner navigation that co-work together in order to create a comfortable user experience.

Villa Covri

The official website of Villa Corvi has not one but two ultra-narrow vertical navigation bars. The first is used for displaying their social media links, whereas the second houses the button for activating the inner menu. Along with the upper header, these two strengthen the subtle boxy feel of the website. Note that only the right panel sticks to the screen and moves along with the user.

TedCo

Much like Editorial New above, TedCo’s vertical navbar is a part of the corner navigation, looking elegant and informative, and completes the sophisticated design of the UI. The vertical navbar stays where it is, giving users the always useful focal point when navigating a website.

Rogue Studio

The detailed navigation bar of Rogue Studio is an excellent example of a solution where all of the menu items are on full display to the audience. Although the component looks more cluttered than our other examples, it has one significant advantage over them. It gives users everything that they need to navigate the website without having to perform any secondary function.

Making navigation vertical can breathe new life into any website. Even though they are not something new, they feel somewhat bold, refreshing, and worth trying out.

The post Exploring the Use of Sticky Vertical Navigation in Web Design appeared first on Speckyboy Design Magazine.

Community News: Latest PECL Releases (01.14.2020)

Latest PECL Releases:

• expect 0.4.0
  Added code to support API for PHP 7.x Updated build scripts, to support 64bit centos

• vld 0.17.0
  - Fixed segfault while reading of jump tables for SWITCH_LONG/STRING - Removed support for PHP 5 (Peter McDonald) - Fixed issue #47: Display for NEW does not mention classname
• mysql_xdevapi 8.0.19
  WL#13541: Fix admin command namespace usage WL#13398 DNS SRV support
• phalcon 4.0.2
  Full changelog can be found at: https://github.com/phalcon/cphalcon/blob/master/CHANGELOG-4.0.md

  [4.0.2]

  Added

  Changed

  • Changed the logic when logging times for PhalconLogger to use DateTimeImmutable so as to handle microseconds if necessary. #2893
  • Changed PhalconHttpCookie::send and PhalconHttpCookie::delete to allow for samesite to be passed in the options when using PHP > 7.3 #14627

  Fixed

  • Fixed PhalconMvcModelCriteria Di isn't set when using Criteria::fromInput() #14538
  • Fixed PhalconDbDialectMysql removing unnecessary parentheses for double and float #14645 @pfz
  • Fixed PhalconHttpCookie::delete to parse the correct parameters - cannot use alternative syntax until PHP 7.3 #14643
  • Fixed PhalconMvcModel::__isset to take into account non visible properties by checking the getter if it exists #13518 #13900
  • Fixed PhalconMvcModel::__set to return a more informative message if we are tying to access a non visible property #13518 #13900
  • Fixed PhalconMvcModelResultsetSimple::toArray to correctly process virtual fields #14669
  • Fixed PhalconSessionManager::getUniqueKey to prefix the key only if uniqueId is present #14688
  • Fixed PhalconDbAdapterPdo::describeColumns to correctly detect ENUM columns #14691
• igbinary 3.1.1a1
  * Throw when an uninitialized php 7.4 typed property is included in the result of __sleep(), instead of emitting a notice and attempting to represent the unset/uninitialized value as null (#258). See https://bugs.php.net/bug.php?id=79002

  Uninitialized properties without types from __sleep continue to emit notices and be represented as null.

• datadog_trace 0.37.0
  ### Added - Target a specific PHP version during install by setting `DD_TRACE_PHP_BIN` #604 - Curl Integration: Add all available information from `curl_getinfo()` as span tags #642

  Changed

  • Move dogstatsd client init to rinit #703

  Fixed

  • Issues related to limited tracing #689
  • Backup and restore last error (related to error_get_last() issue) #694
  • Handle out-of-sync spans #702
  • Sandbox tracer flushing #707
  • Enhance OpenTracing StartSpanOptions support #708
  • Ensure errors raised in request init hook do not affect error_get_last() #709

Create Business Cards as Unique as You with Print Peppermint Sponsored

Business cards are a staple for every freelancer and agency. We hand them out to prospective clients and pass them around like candy at design conferences. They are a small, yet tangible, representation of who we are.

If we want to make an impact, then, it stands to reason that our business cards should be memorable. That can be accomplished with top-notch design combined with unique, high-quality materials. In other words: Cards should not only look good but provide the right kind of tactile feedback as well.

For business cards that do it all, check out Print Peppermint. They are an online printer offering a variety of incredible finishes and premium papers. In addition, they provide you with the flexibility to design your own card or use their expert in-house design team.

Let’s take a look at the features that make Print Peppermint the ultimate source for your business card needs.

High-End Features & Attention to Detail

Your business is special, so why settle for the same old business cards? With Print Peppermint, you’ll gain access to the tools and materials that will help you stand out from the rest.

Thick and Premium Papers

It all starts with the paper, and Print Peppermint provides a number of great options. Choose from 100% Cotton, Soft-Touch, Triplex Layered, Clear-Frosted Plastic, Onyx Black Suede, Recycled Kraft and more. Whatever look and feel you’re aiming for, there’s a paper to make it happen.

Special Finishes

The right finish can turn an ordinary business card into something truly unique. Print Peppermint offers luxurious finishes such as foil stamping, die-cutting, embossing, letterpress, edge painting and more. Depending on your choice, the full CMYK color spectrum is at your disposal.

Create Your Own Card Design

Using Print Peppermint’s free business card maker, you can start with a blank canvas and create your own design. And you can do it all from the comfort of your web browser.

Or, Hire a Graphic Designer

Want your business cards to have a fully-professional look? Put Print Peppermint’s design team on the job. They can help bring your ideas to life. And you’re not limited to business cards alone. Hire their pros to design logos, t-shirts, stickers and a whole lot more.

Quality Assurance

Print Peppermint cares about each and every order. That’s why they take the time to hand proof every single one. Big orders, small orders – they’re all treated with great attention to detail. And, you can rest assured that your order will be done right, backed by a 100% money-back guarantee.

An Online Printer You Can Trust

Over the past 7+ years, Print Peppermint has gained experience through completing thousands of projects. They have worked with 10,000+ companies of all sizes and earned a reputation as a refreshingly creative and reliable print shop.

In that time, they’ve had the opportunity to collaborate with some pretty big names. Companies such as Google, Vice, Wendy’s, Geico and Grammarly have placed their trust in Print Peppermint – so can you.

The team also likes to share knowledge through their design blog. In it, you’ll find product guides, inspiration, along with business tips and assorted off-the-wall topics. It’s a great place to learn and get ideas for your next project.

And, if you’re unsure of the right paper, finish or design – they’ll be glad to help. Just start an online chat, call or send an email. The same goes for getting a quote on a custom project.

Large orders are welcome, with awesome group discounts for businesses and organizations with multiple employees.

Looking for something beyond business cards? Print Peppermint also offers a wide selection of marketing materials. Get your banners, buttons, stickers, magnets, greeting cards and more – all from one trusted source.

Get a Better Business Card

If you’re in the market for a completely stunning, one-of-a-kind business card, head on over to Print Peppermint. Their meticulous approach separates them from the competition – and their business cards will do the same for your business.

The post Create Business Cards as Unique as You with Print Peppermint <span class="sponsored_text">Sponsored</span> appeared first on Speckyboy Design Magazine.

5 Simple Tips for How to Update Content on Your Website

Transcript:

Your website isn’t set in stone, so you shouldn’t treat it like it is. 

Technology and the internet change quickly, and often. You should update your website regularly to keep up with the times.

Having an up-to-date and optimized site creates a great user experience, and will likely encourage people to spend more time on your site’s pages. 

This contributes to your search engine optimization, or SEO, because Google values good user experience. 

If people are spending a lot of time on your website, it’s also a signal to Google that you have something they want, so you’ll likely see a bump in your rankings. 

Higher rankings equal more of that coveted web traffic. 

But what EXACTLY should you do to update your website’s content? 

I’ll tell you…after this intro!

Ok, now let’s get to updating content on your website. 

Here are five tips on how to update content on your website.

• Before you actually start making updates to your site, check your SEO. 

You’ve probably spent a lot of time putting content together, and that time would be totally wasted if people couldn’t find your site in search engines. 

There are many, many factors that determine where your site appears in the search engine results pages or SERPs. 

To check your SEO, you’ll want to do an SEO audit of your site, which will tell you what factors you’re hitting and which ones could use some improvement. 

You can use our free SEO checker to get a report of what your site is doing right and what your site is doing wrong for your SEO.  

Some SEO factors you should be looking for when updating your website content are:

• Keywords: Are you using relevant keywords for your business throughout the headings and content of your pages, and in your pages’ title tags and meta descriptions? 
• Page speed: Is your site loading quickly on desktop and mobile devices?
• Mobile-optimization: Does your site work smoothly on mobile devices? 
• Site security: Do you have an SSL certificate installed to protect user data?
• Broken links: Do all the links on your site work, and are you redirecting old links to new ones? 

Again, that list was far from exhaustive. If you want a thorough analysis of your site’s SEO, you should consider partnering with SEO experts. 

That leads us to number two. 

• Look at what your competitors are doing with their websites before updating your own website. 

I know, I know. It’s another thing to do before you even touch your website, but it’s important to do a thorough analysis of the competitive landscape before making any decisions.

This also ties in with your SEO audit. 

Look at the top results for the keywords you want to target and see what the top pages are doing to get those coveted spots. Are they using their keywords in their headings? Do they have any multimedia elements? 

Take a look at the content as a whole on their website. Is there anything your competitor is doing that you can do better? Can you make a video or write a lengthy piece about a topic that will outrank theirs? 

Ok! Moving on to number three. 

• Add some multimedia elements to your site when you’re updating your website content. 

This tip is two-fold.

Multimedia elements like photos, graphics, and videos look great on a website and can break up any text-heavy areas of your site to really engage viewers.

Pages with longer pieces of content also tend to do well in search engines, but a block of 1200 words or more can be hard to follow. 

If you use multimedia elements in between text, you’re giving readers a visual break and encouraging them to stay on the page longer. 

The longer people stay on your page, the more likely it is you’ll rank higher on Google. 

When you’re adding multimedia elements, however, it’s best practice to compress any images and embed videos from a separate hosting platform.

Adding large files to your site can slow it down, which creates a less-than-optimal user experience and hurts your SEO. 

Kraken is a great (and free) tool for compressing images, while video hosting platforms like YouTube or Wistia easily generate links so you can embed them in a snap. 

All right, so you’ve got your multimedia ready to go, let’s talk about number four. 

• Test different changes on your website.

When you’re updating content on your website, you don’t have to make changes blindly. 

You can test changes to your website to see which resonates more with your visitors. 

Tools like Google Optimize and Optimizely allow you to experiment with different elements of your website. 

Your changes can be small but still have an impact, like tweaking the copy ever so slightly on your homepage or adding a call to action next to a pricing table. 

That takes us to number five. 

• Refresh old content and design on your website.

If you have a lot of content on your website, it’s definitely worth taking some time to revisit the old and make it look brand new. 

Say you’re an accountant and you wrote a popular blog post a few years ago about how to fill out a certain tax form. A few years later, some parts of that tax form change. 

Instead of creating an entirely new post, it would save you time to go back and tweak the parts of that old post that aren’t relevant anymore, and then you can re-share it on Facebook, Twitter, or wherever else you might get content to your audience. 

The same goes for content using any statistics. After a year or two, the numbers might change, so it would definitely be helpful to make sure your website content is as accurate as possible.

You should also try to keep your website looking modern. Web design has changed dramatically over the last decade, so it’s important your website doesn’t look like it’s stuck in the early 2000s. 

So you know what to change, but how often should you update content on your website?

Well, there’s not really a hard answer to that. 

It all depends on your internal resources, your budget if you’re working with a team of web specialists, and industry and web updates. 

The general consensus for overall site redesigns is every few years, but you should keep track of industry trends to make sure your site can compete with other sites out there. Refreshing your site’s content doesn’t have to be that extensive, either. 

For content, some pieces might be relevant for years without you having to make any major changes. But it’s very likely you’ll have to refresh most of the content on your website more often than every few years. 

Keep track of your pages and their rankings in a spreadsheet, and see which ones are falling in the SERPs, which are flatlining, and which are doing well. 

It might be helpful to set a weekly or monthly schedule to check in on your rankings and make updates to your content’s SEO as needed.

But ok, all of this is easier said than done. Updating your website on a regular basis requires a time commitment, so if you’re already worried you won’t be able to keep up, contact some web professionals. 

And that concludes this video on how to update content on your website!

Don’t forget to hit that YouTube subscribe button. We post videos on our YouTube channel every Monday, so you definitely don’t want to miss out on the latest in digital marketing. 

And check out our blog for even more digital marketing content from our team of experts!

We’ll see you next time!

The post 5 Simple Tips for How to Update Content on Your Website appeared first on WebFX Blog.

See the Sound: Audio Visualization CSS & JavaScript Code Snippets

At the turn of the 21st century, MP3 audio was just hitting the mainstream. Certainly, the portability of these sound files was a big part of their allure. But there was also the unique side benefit of being able to visualize the sound on our computer screens.

Audio players such as WinAMP came with visualization plugins, making the experience of listening to our favorite tunes even more engaging. Not only could we hear the music, but we could also see it dance across our monitors as well.

As the web has evolved with CSS3, HTML5 and complex JavaScript libraries, this trend has continued. Visualizing sound, or at least the appearance of doing so, is still a big attention-getter.

Here is a collection of code snippets that bring a visual element to sound. Some are the real deal and will work with audio files, while others are merely facsimiles of the effect. Let’s crank it up!

Before we start, just a word of warning: Many of these snippets do play sound, so adjust your speakers accordingly.

The Web Designer Toolbox

Unlimited Downloads: 1,000,000+ Web Templates, Themes, Plugins, Design Assets, and much more!

Boro HTML Template

HTML Templates

Minilam Newsletter

Email Templates

Adminto Dashboard

Admin Templates

MiniMag Magazine Theme

WordPress Themes

Mobile Menu Plugin

WordPress Plugins

Laptop & App Mockups

Mockup Templates

Start Downloading Now!

Songs on the Sun

This visualizer takes the form of a circle and, thanks to some clever design, appears to form a ring around a sun-like sphere. Click on the screen to play a tune and watch the mesmerizing effect. The snippet uses HTML5 canvas and some JavaScript to power the player.

See the Pen
Audio Ring Visualization by Nelson Rodrigues

3D Tune Tiles

Increasingly, we’re viewing the web in three dimensions. This trend has been employed here, as the screen rotates while tiles move to the beat of the music. The 3D effect is powered by d3.js.

See the Pen
Audio Visualization – 3D Tiles by Carlo Alducente

Like Atari, but with Better Sound

Start up this audio visualization and you’ll be transported into a 1980s-like video game world. Sound can be turned on and off with a click, and your trip through the portal will change direction based on your cursor position. In a word, it’s RAD!

See the Pen
Landscape V2 Audio Visualizer by Niklas Knaack

A Simple Approximation

Not every website needs an audio player, but the visualization effect can still be useful. For those situations, this single-div simulation is a great fit. With just a little bit of HTML and you can add some colorful movement to your project.

See the Pen
One Div Equalizer by Octavector

Cloud Music

Particle animation seems like the perfect tool for making sound a visual experience. And this is a prime example of its power. Push play and see the dots “light up” and move along with your cursor. This pulsating effect is bold without coming on too strong.

See the Pen
AUDIO CLOUD by André Mattos

BYOMP3 (Bring Your Own MP3)

To bring this visualizer to life, you’ll need to upload an MP3 file from your personal collection. The effort is worth it though, as waveforms jump out from the pink sphere for a futuristic effect.

See the Pen
Audio Visualizer2 by Misaki Nakano

Liquid Audio

Here is a very unique take on bringing audio to our eyes. This colorful “Inkqualizer” is fun to watch. Plus, it makes us wonder if the ink cartridges in our printer are dancing like this when we aren’t looking.

See the Pen
Inkqualizer – Audio Equalizer by Ryan McKay

When in Doubt, Do “The Carlton”

Do we really need accurate visual renderings of our favorite songs? This snippet says “no”. All we really need is a great song and a pixelated Alfonso Ribeiro doing his famous “Carlton” dance. Frankly, this should fit in perfectly with every project.

See the Pen
Pure CSS The Carlton dance by Grzegorz Witczak

The Sights of Sounds

If your website or app features audio, adding visualization to the mix can make the user experience that much better. It helps to keep eyeballs glued to your presentation and adds an element of fun. And even a simulated visual can be used to draw attention.

Want to see more exciting examples? Head on over to our CodePen collection for more.

The post See the Sound: Audio Visualization CSS & JavaScript Code Snippets appeared first on Speckyboy Design Magazine.