Print Page   |   Your Cart   |   Sign In
Technology
Group HomeGroup Home Blog Home Group Blogs

Taking a Look at Current Responsive Navigation Trends

Posted By Gabriel Salcido, Arizona Small Business Association, Friday, September 12, 2014

Responsive web design(RWD) has been a topic for many years now. It’s certainly nothing new, but like many previous trends, responsive design has taken time to crescendo into mainstream popularity. Today I’d like to discuss some recent trends in responsive navigation and how they could tie into your next web project. This post should at least give you a clean starting point, but remember that new ideas permeate constantly so there’s always room for improvement.

Natural Font Resizing

A very simple method to choose would be resizing fonts to fit nicely on the smaller screen. This doesn’t require a whole lot of extra CSS because you can gradually reduce the fonts with media queries. Then beyond a certain point you might drop the menu into a new position keeping the list elements in proper alignment.

Skinny Ties has a brilliant display of resizing and fitting fonts in their navigation

The web shop for Skinny Ties has a brilliant display of resizing and fitting fonts in their navigation. On larger screens the nav elements align horizontally next to the logo. After dropping below a certain point the navigation moves down onto its own horizontal line and the fonts gradually reduce in size. This is an interesting example because each nav item retains the related dropdown menu regardless of the screen size.

A smaller example of Font Resizing can be seen on the Hangout music festival website

A smaller example can be seen on the Hangout music festival website. The header spans a full 100% width keeping all content centered. On a smaller browser the links drop in size but always seem to have enough room on the page to breath. This technique is great if you don’t have more than 5-8 links in a menu – but there’s always room to experiment.

Vertically-Elongated Menus

Using a wide horizontal menu with the combination of a small responsive screen doesn’t always bode well. One of the cleanest solutions would be realigning the menu towards a vertical display instead of horizontal. Beyond that responsive threshold it would help users to see all the links in a formal vertical list which is easier to tap and browse.

Hirondelle has an outstanding responsive navigation system

 The website for Hirondelle has an outstanding responsive navigation system. I find the vertical links to be much easier to read when compared to the more compact horizontal menu. For nav menus that include sub-menu links these vertical layouts can offer more than enough room.

The clean menu style for Nanoc is a little different but works surprisingly well

The clean layout style for Nanoc is a little different but works surprisingly well. These menu links don’t turn into 100% block items but instead retain a tabular structure. This makes a clean grid navigation which is just as easy to browse on a mobile screen. A designer might even try to increase the font size just to make the links more tappable.

The overall gist is to not worry so much about making the page longer. Mobile screens already have a reduced viewport so feel free to try any method that can make the browsing experience more pleasurable.

 

On-Screen Toggle

Who doesn’t love the open and close command on toggling menus? It makes you feel like the boss in a sad yet fulfilling sort of way. Some users may get annoyed but there’s no denying this is a great tactic for controllable navigation. You could even transform a vertical menu into a toggle menu which saves extra room on the screen.

Broadgate Park has a nice toggle menu that's clean and functional

Broadgate Park has a nice toggle menu that’s clean and functional. The navigation design blends nicely with the site using familiar fonts and colors. It’s especially nice because even the sub-menu items can be toggled from the same page. This incorporates some great UX concepts to save time and HTTP requests when users need to browse multiple pages.

Bonnaroo has a menu which actually stays fixed as you scroll down the page

The large music & arts festival Bonnaroo has a similar menu which actually stays fixed as you scroll down the page. Each link can be clicked to directly access the page, or you can toggle the plus symbol to access deeper links. It’s a great example of contrasting text and easily-accessible navigation items.

 

Hidden Toggle

Now we get to the heavily debated hidden toggle menu. This has plenty of names like the 3-bar menu, hamburger menu, sliding drawer menu… or just the hidden toggle menu. It first became trendy in mobile iOS apps that used native Cocoa libraries for powerful sliding animations. Web developers have since picked up the concept and use this a lot more frequently in responsive website layouts.

Japan Times is a case where the menu toggle link stays right within the navbar itself

The website for Japan Times is a case where the menu toggle link stays right within the navbar itself. But the menu is hidden offscreen and must be toggled into view. Most of these sliding side menus will push page content out of the way to create a greater focus on the links. One of the biggest pitfalls though would be in browsers that do not support JavaScript.

>Comedy Central has a very similar menu which is just so classy”/></a></p> <p><a target=Comedy Central has a very similar menu which is just so classy. Their interface uses JS along with a CSS3 fallback for mobile browsers without JavaScript support. Also once the side menu opens it will darken content on the page to keep the menu in full focus. Great effect when pulled off properly – annoying when done incorrectly.

I recently found a blog post which suggests avoiding these hidden sliding menus. The primary argument states that since all links are hidden by default the user may not know which pages are available, or how to access the menu at all. It also requires more time and effort to first open the menu before choosing a link.

There are plenty of arguments for and against this type of menu but I keep seeing it used in modern websites for good reason. It works, saves on screen space, plus it offers a method for top-tier links and sub-menu links to fit together nicely.

 

Nav Realignment

Here’s a UI trend where you keep the navigation links together but just realign the positioning. This could be vertical or horizontal, really doesn’t matter as long as the links fit and still make sense on smaller screens.

Stinkdigital moves their navigation into a horizontal block right beneath the logo

Stinkdigital moves their navigation into a horizontal block right beneath the logo. On wider screens it would make sense to align them evenly and keep the page a little bit shorter. But as I mentioned this isn’t always a concern with mobile users. One caveat might be the font size – it could help readability to increase the fonts and let the links break down onto a couple of lines if necessary.

 creative example found on the portfolio of Lotta Nieminen

Here’s a really creative example found on the portfolio of Lotta Nieminen. It behaves like a single-page website that moves horizontally between content sections. When resizing the window down smaller the links will bundle up on top of each other but still transition through content in the same way. It’s a fresh take on the realignment technique and it’s perfect for a portfolio layout.

I have also written a post on Portfolio Design Trends, you should check it out as well.

 

Conclusion

I’m hoping this post can offer an insightful guide to the world of responsive navigation. Trends are mostly popularized by designers that imagine & create exceptional concepts. Look over some of your favorite websites (assuming they’re responsive), or favorite templates and themes, and see how they handle navigation. Check out websites in the same niche of each project you create.

Truly understanding what makes a usable interface is the first step towards building your own unique responsive trend.

All screenshots have been created using John Polacek’s awesome Responsivator.

 

By Jake Rocheleau - A passionate web designer and social media entrepreneur.

Source: http://marketblog.envato.com/trends/taking-look-current-responsive-navigation-trends/?goal=0_6f890803c2-f2e70b533f-198115169

Tags:  webdesign 

Share |
PermalinkComments (0)
 

Hackers exploit critical vulnerability in popular WordPress theme component

Posted By Arizona Small Business Association, Friday, September 5, 2014

Attackers are actively exploiting a critical vulnerability in a WordPress plug-in that’s used by a large number of themes, researchers from two security companies warned Wednesday.

The vulnerability affects versions 4.1.4 and older of Slider Revolution, a commercial WordPress plug-in for creating mobile-friendly content display sliders. The flaw was fixed in Slider Revolution 4.2 released in February, but some themes—collections of files or templates that determine the overall look of a site—still bundle insecure versions of the plug-in.

The vulnerability can be exploited to execute a local file inclusion (LFI) attack that gives hackers access to a WordPress site’s wp-config.php file, researchers from Web security firm Sucuri said in a blog post. This sensitive file contains database access credentials that can be used to compromise the whole site, the researchers said.

In February, ThemePunch, the developer of Slider Revolution, mentioned in the release notes of version 4.2 that a security issue had been fixed but didn’t release any additional details about the problem or its impact.

Information about the vulnerability circulated on underground forums for several months, but on Sept. 1 someone posted a proof-of-concept exploit for it on a public site, including a list of WordPress themes that are likely affected, security researchers from Trustwave said Wednesday in a blog post. “Our web honeypots picked up increased scanning activity today.”

Sucuri researchers also observed attempts to exploit the vulnerability. “Today alone, there were 64 different IP addresses trying to trigger this vulnerability on more than 1,000 different websites within our environment,” they said.

Slider Revolution is sold via CodeCanyon.net, an online market for Web scripts and other components. The plug-in is bought by regular site owners, but also by WordPress theme developers who then bundle it inside their products to enable content slider functionality.

The problem is that when bundled with themes, Slider Revolution’s automatic update mechanism is typically disabled. Users then have to rely on theme authors to update the plug-in along with their themes, which in many cases doesn’t happen.

“We fix all issues within hours,” a technical support representative for Damojo, the Cologne, Germany, company that owns ThemePunch, said Thursday via email. “As you know it is essential that all your plugins, WordPress and servers are always updated with the latest releases. Our direct customers do and can update their plugin regularly and automatically if they choose to.”

“The main issue is that theme authors that bundled the slider within their theme did not update the plugin for their customers,” the Damojo representative said. “The hint ‘Security Fix’ [in the release notes] should have ringed some bells. Why haven’t they updated the plugin since February?”

The latest version of Slider Revolution is 4.6, released on Aug. 25, but this particular vulnerability only affects versions older than 4.2.

The Damojo representative advised users to check if their themes contain a vulnerable version of the plug-in and to contact the theme authors in case they do, adding that the company shouldn’t be blamed for someone else’s failures.

This incident highlights yet again the risks of insecure third-party code reuse, a widespread problem that affects all types of software, not just Web applications and WordPress themes.

Many developers use third-party components and libraries in their own software projects and fail to keep up with their security updates. This can lead to situations where a vulnerability is identified and fixed in a software package, but lingers on for months or years in other applications.

 

Contributor:  

Source: http://www.pcworld.com

Tags:  hackers  slider  wordpress 

Share |
PermalinkComments (0)
 

Facebook Adds Ability To Advertise Events In News Feed

Posted By Arizona Small Business Association, Monday, September 1, 2014

Event ads were previously stuck in the right rail. Company also officially introduces Insights for events.

 

More than 400 million people interact with Facebook events every month, the social network says. And today, the company announced that it’s giving Page owners another avenue to reach those people.

Facebook has enabled ads for events to be placed in mobile and desktop News Feeds. Previously, event ads only were available for display in the less prominent right rail on the desktop platform. Here’s a Facebook mockup of how the ads, available globally through the Ad Create tool and the Power Editor, will look:

facebook-event-ads

Facebook also officially announced that it will display Insights for events, which we reported earlier this month. Insights are displayed in the right-hand column of the events page and show:

  • The number of people who’ve seen a link to the event on Facebook

  • The number of people who’ve viewed the event

  • The number of joins, saves and maybes the event has received

Facebook also announced that it has redesigned the event page for users:

Each person’s events page has a new look and feel to better highlight their upcoming events and showcase new events, including suggested events based on information such as the Pages they like, their location and the day of the week.


Tags:  events  facebook  marketing 

Share |
PermalinkComments (0)
 

Tech Moves That Level the Ecommerce Playing Field for Small Business

Posted By Arizona Small Business Association, Sunday, August 31, 2014

A clear gap is emerging between ecommerce behemoths such as Amazon and eBay and the small-to-medium businesses (SMBs) competing with them. However, new technology services can help SMBs in the ecommerce space identify and measure key business metrics and even begin to gain parity in many important areas.

Technology has always played a significant role in leveling the playing field for American businesses. That opportunity is accelerating in today’s online marketplace. As many as one-in-four users will abandon a website if it takes more than four seconds to load. Think about that. In less time than it takes to read this paragraph, as many as one-quarter of your customers could be leaving your site.

 

If you rely on your website for sales, you should carefully monitor the following areas.

Speed index. Many ecommerce businesses rely on measures such as Time to First Byte (TTFB) to ensure that site performance is up-to-par. However, while important for search engine result rankings, TTFB is not the most effective way to measure the user experience of overall site speed.

Business owners should monitor how long it takes the customer to begin engaging with the site. Speed Index, the perceived time it takes the full page to load, is a better means of measuring site speed. Studies confirm that for every second it takes an ecommerce website to load, approximately seven percent of visitors will abandon the site. Business owners can check their speed index online for free at webpagetest.org.

Checkout speed. While most business owners monitor overall site speed through some means, few ecommerce businesses keep tabs specifically on their checkout speed. Once a customer has decided to buy, the process from that point onward should be as quick and simple as possible to prevent checkout abandonment.

The average checkout abandonment rate is already 67 percent. Let’s not give customers any additional reasons to abandon SMB checkouts.

Time-outs and outages. When time-outs occur, a website may appear available to some visitors but not others. Site outages occur when a site is completely unavailable to all visitors. As many as 90 percent of the ecommerce sites that we surveyed on one of the most popular ecommerce platforms experienced, on average, 26 timeouts during June 2014.

Put simply, during each one of these timeouts some visitors trying to reach these sites were unable to get in the door. Outages often occur during traffic spikes that can cause server overload or infrastructure failure. These outages often occur at the worst possible time for ecommerce businesses, such as on Cyber Monday or during their Super Bowl Ad.

While large companies have staff dedicated to performance, the average SMB simply does not have the resources to devote to performance. Enter today’s web services that can automate much of the necessary infrastructure.


I recommend carefully evaluating these areas:

Web hosting. Reducing the probability of timeouts and outages requires asking questions of your web-hosting provider. How does your service scale out when traffic spikes? What controls do they have in place over change to the production servers? How long will it take your business to get back online when a failure does occur? How often do they test and prove that their recovery services work?

Security. Ecommerce sites accounted for nearly 50 percent of all security breach investigations in 2013. Have the necessary security patches been regularly applied to your ecommerce platform? Has the underlying operating system been kept up to date with critical security fixes? This is viatl to your business.

 

Findability. Can people find your business when they want what you’re selling, but have never heard of you? Too many SMBs think that if their site appears on Page 1 of a search when their business name is typed, they’ve won the war. Chances are, they’re not even fighting the right battle.

Fortunately, there are many affordable and easy-to-use services that allow business owners to monitor and manage their ecommerce websites.

 

Contributor
Founder and CTO of Lagrange Systems

Source: entrepreneur.com

 

Tags:  ecomerce  Technology 

Share |
PermalinkComments (0)
 

Meet the new, reversible USB

Posted By ASBA, Tuesday, August 12, 2014

The USB 3.0 Promoter Group has announced that it has finalised its redesign of the USB.

Called USB Type-C, the specification -- which was announced last December -- aims to solve several problems with current USB design; possibly the most exciting of which is the eradication of "right way up" with a reversible plug. Like Apple's Lightning connector, it can be plugged into its port either way.

The new USB is also designed both to be small enough to fit mobile devices, yet robust enough for laptops and tablets.

"Interest in the USB Type-C connector has not only been global, but cross-industry as well," said USB 3.0 Promoter Group chairman Brad Saunders. "Representatives from the PC, mobile, automotive and IoT industries have been knocking down our door anticipating this new standard. This specification is the culmination of an extensive, cooperative effort among industry leaders to standardize the next generation USB connector as a long-lasting, robust solution."

The USB is comparable in size with micro USB 2.0 Type-B connectors, with a port size of 8.4 by 2.6mm, yet will be compatible with SuperSpeed USB at 10Gbps (USB 3.1). It will also support USB Power Delivery up to 100W, with additional support for scalable power charging and future USB performance needs.

It won't, of course, be compatible with existing USB plugs and receptacles. While the industry begins the slow transition, USB Type-C ports will coexist with other USB ports on devices, and new-to-existing cables and adapters will be made available so that consumers will be able to use the new connector with their existing tech.

The specification for USB Type-C can be downloaded from the USB Implementers Forum.

Source: cnet.com

Tags:  Technology 

Share |
PermalinkComments (0)
 
Page 6 of 6
1  |  2  |  3  |  4  |  5  |  6

Affordable Dental Plans for ASBA Members

Delta Dental of Arizona

2 employees? No problem! We’ve got a dental plan to meet your needs & budget. Click to learn more!

LEARN MORE

Join ASBA

ASBA

ASBA is the most powerful resource for your business in Arizona. We ensure the tools we offer are valuable and support the growth, education and connections necessary for today’s top business minds.

LEARN MORE

Enterprise Bank & Trust

ASBA

Enterprise was founded on the idea of serving the lifetime financial needs of privately held businesses.Today, we continue to empower privately held businesses and also help families to secure their financial futures.

LEARN MORE

RSVP

Coffee Connect with ASBA

REGISTER

Date: Held monthly
Time: Click for times based on location

RSVP

ASBA Speed Networking

REGISTER

Date: Held monthly
Time: Click for times based on location

Have Questions on Health Insurance?

Health Insurance

Do you have questions on plans for Individual, sole proprietor, or group? We can get the answers needed to make sure you find the right plan for you and your employees.

LEARN MORE

Investment Partner Program

CopperPoint

ASBA’s investment partner program delivers your brand throughout Arizona. Share insights, connect with small business and highlight your company’s involvement with the association. Contact Jodi Towns to get started.

LEARN MORE

Upcoming Event

Health+Plus

ASBA is bringing you Health+Plus, an all-inclusive healthcare experience for business owners! We’re getting you in front of healthcare providers, insurance carriers, health and wellness experts, HR, software solutions, telemedicine, and more.

REGISTER

Association Management Software Powered by YourMembership  ::  Legal