Bideo.js is a JS library that makes it super easy to add fullscreen background videos.
The post Bideo.js : Easy fullscreen Video Backgrounds appeared first on jQuery Rain.
by Admin via jQuery Rain
Tuesday, May 31, 2016
Visme - Design Interactive Presentations, Infographics & Banners in HTML5
Visme is a collaborative HTML5 design platform that makes the creation of infographics and presentations accessible to non-designers. All work is conveniently done through an online app using templates and hundreds of pre-built elements, the price tag starts at ‘free’ so we decided to review it.
If you have some time on your hands then try the ‘day to day designs’ task we used to test Visme and remember to leave a link to your creations in the comments box below.
by Irfan Ahmad via Digital Information World
How to Improve Page Performance and Make the Most of Your Hosting
This article was sponsored by Hosting Facts. Thank you for supporting the sponsors who make SitePoint possible.
[author_more]
You can spend months building an amazing website only to let yourself down at the last stage with inadequate optimization or hosting.
Average page weight has reached 2,300KB and increases around 15% every year. The rise of projects such as Google Accelerated Mobile Pages, Facebook Instant Articles and ad-blockers highlight user frustration with the web we’ve created. Obese pages:
- are slower to load and render
- struggle on mobile networks and may cost users money
- are less responsive on slower devices and smartphones
- will affect your search engine rankings
- are more difficult to update and maintain.
Few developers bother to optimize their sites so why should you?
The reason: there’s no downside. Your search engine rankings improve. Your users benefit from a slicker experience. Your conversions increase. Your hosting charges drop. Unlike real life, the most drastic weight loss can be achieved with minimal effort…
Site Analysis Tools
Assess the scale of any problems before making changes. Several free tools are available which report the number of requests, file sizes and server response speed. Some provide improvement suggestions.
Alternatively, use the Network or Profiling tools in your browser’s development tools to assess your site. Make a copy of the statistics so you can compare improvements later.
The following sections provide optimization suggestions starting with the easiest changes.
Find a Suitable Web Host
Your site may have taken considerable time and money to create. Should you really host it on a $5 per month service?
Take time to assess whether you need space on a shared server, your own private server or a cloud-based virtual server. Read hosting reviews at sites such as Hosting Facts and seek advice from others with similar requirements. At this moment, they’re suggesting to use A2 Hosting or A Small Orange.
Use a Content Delivery Network (CDN)
Browsers limit HTTP requests to between four and eight simultaneous connections per domain. Loading 40 page assets at once is not possible – files are queued on each request thread.
In addition, your users may be located in a different geographical location to your server. A user in France would see a faster response from a UK-based server than similar hardware in Australia.
A CDN increases download speeds by distributing web site assets to other servers. Those machines can be physically closer to the user and run from different domains which more than doubles HTTP request limits.
CDNs have become simpler to use and many automatically handle assets once you’ve configured DNS settings. Popular options include:
Enable GZIP Compression
Around a third of websites do not enable Gzip compression yet it can drastically reduce the amount of data sent to the browser. Gzip compression is often set by your web host on the server – contact them for further advice.
Enable Caching
Caching ensures a browser downloads asset files once. The local version is retained until your website instructs it to fetch an update. The first page load won’t be faster but subsequent page loads will be considerably improved.
There are plugins for Content Management Systems such as WordPress which make caching simple, e.g. W3 Total Cache or WP Super Cache.
Other systems can adopt technologies such as Expires, Last-Modified, Keep-Alive or Etag in the HTTP header. Your host may provide configuration options or you can define your own. For example, an Apache .htaccess setting to cache all images for one month:
<IfModule mod_expires.c>
ExpiresActive On
<FilesMatch "\.(jpg|jpeg|png|gif|svg)$">
ExpiresDefault "access plus 1 month"
</FilesMatch>
</IfModule>
Optimize Your Media
Images account for more than 60% of page weight. The average page requests 55 separate images at 1,457KB, 126KB of fonts, 400KB of video and 45KB of Flash. This seems slightly preposterous given the current trend for simplistic, plain-colored flat-designs!
The first step: remove unnecessary assets. Do you need that background video, hero image, italic font or 300 icons few will ever see? Can you use a subset of a font? Could you replace some images with CSS3 effects such as gradients or borders?
Presuming an image is required, ensure you use the most efficient format. In general:
- SVG is suitable for line diagrams
- Web fonts may be an option for single-color icons
- PNG or perhaps GIF is best for smaller images with clear color definitions such as icons, buttons and screenshots
- JPG is best for photographs or anything where fine detail is less important.
If in doubt, experiment with different types until you find the best compromise between quality and file size.
Large images should be resized to reduce the resolution. An entry-level smartphone camera produces high-resolution photographs of several megabytes but you rarely need an image greater than 2,000 pixels wide for the best of today’s screens.
Next: ensure your images are the optimal size. Few graphics packages remove all possible data and most will retain unnecessary colors or EXIF meta data such as dates, locations and camera settings. One-off compression tasks can be achieved using online tools such as TinyPNG/JPE or smush.it. Installable processing tools such as OptiPNG, PNGOUT, jpegtran and jpegoptim can bulk-compress images. You can introduce compression systems such as imagemin into your build process or CMS users have options such as WP Smush which automatically compress uploaded files.
Smaller images can be combined into a single image sprite to reduce the number of HTTP requests. This has less of an advantage in HTTP/2 but icons used on every page can still benefit from being combined.
Finally, consider Base64-encoded inline data URIs for smaller, regularly-used images, e.g.
.bullet {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEUAAAD///+l2Z/dAAAAM0lEQVR4nGP4/5/h/1+G/58ZDrAz3D/McH8yw83NDDeNGe4Ug9C9zwz3gVLMDA/A6P9/AFGGFyjOXZtQAAAAAElFTkSuQmCC");
}
This reduces the number of requests although maintenance can be more difficult. Online tools such as DataURL.net and data:URI Generator are fine for one-off conversions. There may also be encoder plugins for your editor/IDE but the easiest solution is PostCSS Assets – a PostCSS plugin – which magically converts any image, e.g.
.inline {
background-image: inline('image.png');
}
Continue reading %How to Improve Page Performance and Make the Most of Your Hosting%
by Craig Buckler via SitePoint
Bringins – jQuery Plugin to Show Animated Page
bringins is a jQuery plugin to show contents on a webpage as an animated page. These page will be positioned 'fixed' with scrollable data.
by via jQuery-Plugins.net RSS Feed
The Web Should Just Work for Everyone: Microsoft Edge and Inclusive Design
[author_more]
This article is part of a web development series from Microsoft. Thank you for supporting the partners who make SitePoint possible.
This article is part of the web development series from Microsoft tech evangelists and engineers on practical JavaScript learning, open source projects, and interoperability best practices including Microsoft Edge browser and the new EdgeHTML rendering engine.
We encourage you to test across browsers and devices including Microsoft Edge – the default browser for Windows 10 – with free tools on dev.microsoftedge.com, including the EdgeHTML issue tracker, where you can report or search EdgeHTML issues, such as problems with site rendering or standards compliance. Also, visit the Edge blog to stay updated and informed from Microsoft developers and experts.
Continue reading %The Web Should Just Work for Everyone: Microsoft Edge and Inclusive Design%
by Microsoft Developers via SitePoint
Quick Tip – Installing the Ionic Framework for HTML5 Apps
Ionic is a framework for building hybrid mobile apps using the web technologies you know and love, Angular and Cordova. The Ionic 2 release (currently in beta) leverages Angular 2 (also in beta) and ES6, and you can opt into TypeScript if you prefer.
It allows you to write your application code once in HTML, CSS and JavaScript and deploy to multiple targets using the same code and have them look and feel like native iOS and Android apps.
Continue reading %Quick Tip – Installing the Ionic Framework for HTML5 Apps%
by Mark Brown via SitePoint
3 Years of Unsplash
Long scrolling One Pager celebrating a phenomenal 3 years of Unsplash. The Single Page website features a solid responsive design with infographics, screenshots and highlights from the past year.
by Rob Hope via One Page Love
Gem
'Gem' is a One Page HTML template with a slick minimal design. It's a multi-purpose template but comes with 5 One Page layout options: App, Creative, Coming Soon, Photography and Restaurant. Each featuring lovely hover animations and subtle parallax effects. The demo featured here is the Creative portfolio template.
by Rob Hope via One Page Love
Multi-Device Onboarding: What We Can Learn from Mint & Expensify?
Whenever I sign up for a new web app, I immediately download the companion mobile app as well (or vice versa). After all, I use my laptop and iPhone almost interchangeably, often starting a task on one device and then finishing it in another. I bet you do the same.
On the creator side, having desktop, mobile, and potentially tablet versions of your app presents a challenge to new users: How do you create an onboarding experience that spans across devices?
The same flow that works perfectly on a big computer monitor, qa laptop, or even an iPad may be far too complex for a small phone screen. Plus, while auto-fill has made completing forms fairly easy on computers, users still need to manually enter text on their phones. And to make things even trickier, navigating with a keyboard and mouse or trackpad is completely different than with touch gestures.
Nonetheless, designing a cohesive onboarding process that translates to different devices isn't impossible. Let's look at two examples-Expensify and Mint-to see how they've done it successfully.
Expensify
Expensify's slogan is "Expense reports that don't suck," which tells me right away the product will be easy to use (or should be, anyway).
Desktop
[caption id="attachment_130997" align="aligncenter" width="800"]
After I click "sign-up," Expensify asks for my work email. I enter it and immediately, I zoom to my newly created dashboard.
According to my timer, this task took three seconds. That's pretty darn impressive.
[caption id="attachment_130993" align="aligncenter" width="1366"]
I'm also impressed by the "Concierge" onboarding screen. True concierge onboarding involves a real person guiding you through the steps, which is incredibly helpful for the user but time and labor intensive for the company. Expensify's automated version is far more scaleable.
My one nitpick? It would feel a little friendlier to be greeted by a human persona, like "Carol the Concierge," than a talking bell. Incorporating a distinct personality into your app can make your app more memorable and engaging.
[caption id="attachment_130992" align="aligncenter" width="1366"]
The app asks me who I'd like to send my expense reports to. Requesting an email address before I've even uploaded my receipt is smart; the faster I create a network in Expensify, the more likely I am to keep using it.
[caption id="attachment_131003" align="aligncenter" width="1366"]
Next, I'm prompted to download the mobile app. I like how quick and easy the download is-I can text myself a link rather than having to find the app myself in the App or Google Play Store – but this modal puts yet another step in between clicking "Send Expenses/Receipts" and actually uploading a receipt.
A better flow probably would have been:
Click "Send Expenses/Receipts" → Choose recipients → Upload and send receipt → Receive link to download mobile app
With this modified flow, you get the user to download the app while she's still riding high from the "Aha!" moment.
[caption id="attachment_130990" align="aligncenter" width="1366"]
Once I'm done, Expensify shoots me to my dashboard. The cheery, congratulatory message makes me smile. There's apparently no tour or walk-through guide; in fact, there's not even an FAQ, as I discover when I click "Help." However, I don't feel like I need more assistance: The navigation bar is simple and intuitive, and I now know how to send expenses. Looks like Expensify's desktop app has fulfilled its promise to make the expense process suck less. But will the mobile app do the same? Let's find out.
Mobile
Interestingly, Expensify's mobile onboarding flow starts with a series of screens explaining the value of the app. This approach is known as 'benefits-oriented onboarding' but there are two other alternatives.
'Function-oriented onboarding' teaches you how to use the product. 'Progressive onboarding' shows you relevant info as you navigate the app.
Why exclude this run-down of the benefits from Expensify's web onboarding? I'm guessing more users first download the mobile app, then use the site, rather than the other way around.
Personally, I'm not a huge fan of tap-through carousels. I end up repeatedly jabbing my screen so I can get to the good stuff (i.e. the app itself) as quickly as possible. UX research suggests I'm not the only one.
Once past the screens, I'm into my dashboard. Everything looks and acts familiar, like I've already used the app before – probably because the interface looks like a cross between Swarm and Snapchat. This is a good reminder that if you want to lessen your user's learning curve, use familiar icons, interactions, and design patterns.
Like with the desktop app, there isn't a traditional onboarding process. Since the app doesn't have any of my info yet, each screen prompts me to take a different action (connect my bank account, create an expense report, etc.) And of course, there's the big green camera smack dab in the middle of the menu, showing me I can take a picture of my receipt at any time.
As soon as I take any action within the app, I'll have my first "Aha!" moment. Expensify deserves major props for delivering value so quickly and seamlessly – and without giving me traditional instructions.
Grade: A-
Expensify's desktop and mobile onboarding processes pair well together. Both propel me toward uploading and sending my first expense, yet they're both individually suited for their mediums. I'd boost its grade to an A if Expensify got rid of its mobile screen carousel; I don't think you need it to communicate the app's value when that comes across so clearly simply from using it.
Mint
Mint is billed as a comprehensive personal finance app, giving you a single digital place to set budgets, pay your bills, track your spending, check your credit score, and even get financial advice.
Desktop
As soon as I see double entry fields for both my email and my password, I'm glad I didn't first attempt a mobile sign-up. Since using Mint will require sensitive financial information on my part, having double email and double passwords forms feels more justified than if I was creating an account in a different app, but it's still a little tedious.
Notice the sidebar telling me why I'll love Mint. If you've got a long sign-up process, adding a visual reminder of your app's benefits will motivate your users to keep going.
Now I have to enter my location. Hmm, is this really such crucial info it couldn't wait till my account had been created?
Next, I connect my bank account. I'm not crazy about the banner copy: "See all your accounts in one place." After all, I only have one account: I signed up to use Mint's budgeting features.
Choosing a more universal value proposition, like "See where your money goes," or "Get control over your spending," might be more effective.
Continue reading %Multi-Device Onboarding: What We Can Learn from Mint & Expensify?%
by Alex Walker via SitePoint
Brenner Cycles
Long scrolling One Pager with great imagery and a lovely responsive design for handmade urban bike brand 'Brenner Cycles'.
by Rob Hope via One Page Love
Microlight.js – Highlights Code in Any Programming Language
microlight.js is a micro-library which improves readability of code snippets by highlighting, for any programming language, yet without attaching additional language packages or styles
by via jQuery-Plugins.net RSS Feed
5 Instagram Changes: What Marketers Need to Know
Are you up to date with the latest Instagram changes? Want to know what the changes mean for marketers? In addition to a brand-new logo, Instagram has rolled out updates to its ad products, video features, and news feed algorithm. In this article, you’ll discover how the most recent Instagram changes can affect your marketing. [...]
This post 5 Instagram Changes: What Marketers Need to Know first appeared on .
- Your Guide to the Social Media Jungle
by Kristi Hines via
How to Help Your Staff to Curate Content
Is third-party content part of your social media marketing mix? Do you have multiple people in your company who discover content? With the right process, a team can become a content-curation powerhouse. In this article, you’ll discover how to set up a collaborative workflow for content curation. #1: Establish Team Structure Collaboration starts with structure. [...]
This post How to Help Your Staff to Curate Content first appeared on .
- Your Guide to the Social Media Jungle
by Aaron Orendorff via
Cantor Fine Art
by via Awwwards - Sites of the day
Push.js : Cross-browser JavaScript Push Notifications
Push is the fastest way to get up and running with Javascript desktop notifications. A fairly new addition to the official specification, the Notification API allows modern browsers such as Chrome, Safari, Firefox, and IE 9+ to push notifications to a user’s desktop. Push acts as a cross-browser solution to this API, falling back to use older implementations if the user’s browser does not support the new API.
The post Push.js : Cross-browser JavaScript Push Notifications appeared first on jQuery Rain.
by Admin via jQuery Rain
Monday, May 30, 2016
Switchable : jQuery iPhone Style Switch Buttons
Switchable is a replaces checkbox by beautiful iphone style switch buttons.
The post Switchable : jQuery iPhone Style Switch Buttons appeared first on jQuery Rain.
by Admin via jQuery Rain
Winning the battle between design and analytics
Remember when web design was just about the design? We used whatever rudimentary tools we had to create a mostly informational, brochureware site, and just hoped people would find it. We had no analytics — no way of knowing if people were visiting, how long they were sticking around, and we certainly couldn’t track conversions. We just focused on making it pretty.
Thankfully, times have changed, and we now have a valuable window to see insights. By integrating Google Analytics into our websites, we can keep track of all kinds of information about our users’ behaviour. This information helps guide our decisions to make sure our websites and landing pages are operating at optimum levels.
But what happens when a design-level decision thwarts those efforts?
In this article, I’ll take a close look at four of the most common website design decisions that can send your analytics into a tailspin. More importantly, I’ll give you my tips on how to correct them before the damage is done.
Email capture
One of the most valuable conversions on a non-ecommerce site is collecting visitors’ email addresses. These are essentially “hot leads” we (or our clients) can market to later. It may seem like a no-brainer-time-saver to connect your website to your email provider account so that new subscribers go into your list automatically. But this can come at a cost.
Effective email capture from quicksprout.com
The problem
If you direct visitors away from your site after an email signup, you can’t use a destination goal within Google Analytics. To track email signups, normally you’d specify a goal URL, but when users leave your site, you can’t track that conversion. As far as Google knows, your visitor just bounced.
In addition to the Analytics issue, sending subscribers to a third party page is a lost opportunity from a marketing perspective. If subscribers leave your website, you lose an opportunity to make other offers and keep them in your sales funnel.
The workaround
A better option is to keep the whole email capture process within your own website environment. Some email programs are fully customisable and can be configured to add users to your list without taking them away from your website. If your email service can’t do this, it’s still worth the effort to manually import new subscribers to your list, so you keep visitors on your site and track conversions.
The form submission
Another common conversion goal is a successful form submission. I consider this the main goal of my own site, in fact. The whole purpose of my site is to entice prospective web design clients to get in touch with me to schedule a free consultation. It’s a very valuable conversion, and one that I definitely want to keep track of.
The problem
Think about what happens when you fill out a web form and click that little “submit” button. You wait for some kind of feedback that tells you it was received. Usually this takes the form of a “thank you” message. Some websites decide that it’s good enough to simply replace the form with a thank you pop-up. But this can impact your goal tracking.
The workaround
Instead, best practice is to route your visitors to a dedicated “thank you” page. Then you can use that URL as a destination goal within Analytics. It’s a very simple way to track how many people actually fill out your form, letting you know how well your current strategy is converting.
Another advantage to a dedicated page is that you can use it as more than just a simple thank you. You can populate that page with additional content and navigational cues to keep visitors engaged, and on your site.
In the example below, you can see the website owner uses this opportunity to lead visitors further into his funnel, with a new call-to-action.
Image source: jamesgrandstaff.com
The one-pager
There is a huge trend happening right now with one-page, long-scrolling websites. Typically, clicking navigation items results in an auto scroll down to that particular section, rather than opening a new page.
As a less extreme example, your site could have multiple pages, but several sections on each page. In either case, multiple elements coexist together. Maybe some content is hidden in tabs, maybe in modal windows that pop-up when triggered.
A lot of designers gravitate toward this type of site based on pure aesthetics. I get it, they look gorgeous, but is that a good enough reason?
The problem
Analytics works using Javascript, which means it’s triggered only once on a page, as the page loads. So if your page combines more than one section or topic, it won’t pick up any insights about which part of that page your visitors were interested in.
This is a problem if you are trying to refine your site’s content based on user preferences and behaviour.
For example, let’s say you offer five different services, and they are all listed on the same page. You can make it look as pretty as you like, but since they are all on the same page, Analytics can’t tell you which service people were interested in when they landed on that page.
This makes it hard to tweak your offerings based on what’s most popular with your visitors.
The workaround
A better option is to break your content up further, and create separate pages for each section, service, or piece of individual content. They can all be linked from that master page, but this way, you can see within Analytics exactly which pages get the most views.
In the example below, you can see that each of this company’s service offerings has its own dedicated page, making it easy for them to tell what exactly is most popular with their audience.
Image source: panaceatek.com
This can come in handy when you’re making decisions about what to highlight, demote, or scrap altogether.
The blog
You may not realise it, but where you choose to place your blog can make a big impact on how you can track the performance of individual posts. There are three options, but only one I recommend.
The problem
Some companies host their blog on a separate website, for example, ABCcompany.com might host their blog on ABCcompanyBlog.com. This is a problem for several reasons:
- Analytics for the separate domain won’t show a clear picture of how they relate to the main site. Certain data, such as time on site, traffic sources, and bounce rates would appear worse for both sites, because Google Analytics would account for time spent on each site separately.
- Search engine rankings could also be affected, since domain authority, backlinks, and other ranking signals are now diluted between two different domains.
Locating a blog on a subdomain (blog.ABCcompany.com) also comes with its own problem: it’s hard to track the performance of individual posts. You can’t filter for all blog content since the “relative URL” doesn’t show what’s blog content and what isn’t. Using the Behaviour > Site Content > All Pages filter will only turn up results for the search term “blog” if that term comes after the .com.
The workaround
It’s best practice to host your blog within your main site (ABCcompany.com/blog.). Now, your performance-tracking problem goes away. If you’d like to see how individual posts are performing against each other, you can filter for them in the All Pages report by simply searching the term “blog”. Since each post automatically has the word “blog” after the .com, (ABCcompany.com/blog/PostTitle) they will all appear in one place, allowing you to compare posts against each other for popularity.
Image Source: megalytic.com
Analytics and design can still play nicely
While the design of a website is certainly important, there are times when even a visually pleasing design decision can have a negative impact on the backend. But with a bit of pre-planning, and having clear, measurable goals, you can sidestep these problems before it’s too late.
After all, having a beautiful site isn’t worth much if you can’t track its progress. It’s only by keeping tabs on what’s working, (and what isn’t) that you can start to make informed decisions that really matter for your clients. The rest is just window-dressing.
The post Winning the battle between design and analytics appeared first on UX Mastery.
by Wes McDowell via UX Mastery
How To Create A Successful YouTube Channel - Infographic
YouTube is no longer just a website to share and watch videos on, it's an industry full of fame, celebrities, careers and awards. It has made rich people out of the girls and guys next door. Who says you can't be one of them! Take a look at this infographic-guide, created by WeAreTop10, on how to turn your dreams into reality.
by Irfan Ahmad via Digital Information World
4 Steps to Boosting Conversions with Prioritized Navigation
A well-conceived navigation strategy can make or break any website. When done right, you lay out a path you want site visitors to take, leading to a sale, lead generation, or a successful form submission.
When done wrong, you are essentially allowing your visitors wander aimlessly. There's a chance they will find your target, but probably not. Why chance it?
Good UX should never treat conversions so casually - it should take users by the hand, and provide intuitive cues that they can pick up on. That way, they know where to find what they need, while giving into what you wanted all along - a conversion.
In this article, I'm going to walk you through a simple strategy you can use on just about any site to boost its conversion rate.
When used properly, you can deliver clients a website that will not only look great but will actually help them succeed at their business goals.
In other words, you'll be their hero.
Step 1: Adopt a Landing Page Strategy
Knowing what we know about online marketing in 2016, every website should be using landing pages as a part of its conversion strategy. If you are applying this to a redesign, this step doesn't require you to eliminate existing pages, but rather add to what you have.
The idea is that you build self-contained pages that have all of the necessary information required to properly convince a visitor to convert. The number of landing pages will vary, depending on the business and its goals. For simplicity's sake, let's use your own portfolio website as an example.
Let's say you offer both web design and logo design as services. In addition to your simple portfolio pages which show your work, you would want to build two new landing pages - one for each service. On each landing page, you might include portfolio highlights, some convincing sales copy, a bulleted list of benefits you can provide, customer testimonials, and a clear call-to-action (CTA.)
The reason for these landing pages is this: You don't want your visitors to have to click around from page to page. Give them everything they need in one place. This will result in a much more focused sales funnel, and you don't risk losing them along the way.
Step 2: Highlight Your "Money" Pages
In addition to your new landing pages, are there any pages that you think are necessary to the conversion process? Maybe an entire page of testimonials perhaps? Or a list of your other services?
If this is the case, then you have a few options:
Contextual Links
Placing links within the body copy of your landing pages can be a great way of leading site visitors through a pre-chosen path. Let's say you have a few case studies on your landing page. You might want to offer them a look at more of them through a contextual link underneath the case study examples.
Image Source: http://ift.tt/17x0CVl
Limited Header Navigation
Another way to go is to choose your top two or three pages and link to them through a pared-down header navigation bar. Following the same portfolio site example, you might want to include links to both of your landing pages within the header, allowing visitors to toggle back and forth between your different offerings.
Image Source: http://revlocal.com
Ideally, you would want to make this header bar "sticky," so that it stays in place as users scroll down the page.
Step 3: De-emphasize Everything Else
Have you ever heard of "decision fatigue?" It is basically the concept that says people given too many options are less likely to take any action at all. There was a famous study illustrating this concept with jam.
Researchers lined a small shelf at a grocery store with five varieties of jam. Passersby would stop to look at the selection and most who stopped selected one. Later that day, they added more options, until there were thirty jams to choose from. People would stop to look, feel overwhelmed by the sheer number of choices, then keep walking.
This isn't what we want on a website. When you give visitors too many navigational choices, they may not see a clear path, and bounce. Here's how to fix it:
All other pages should not be presented as primary options. They will be designated as secondary navigation.
It is up to you how you want to handle this secondary navigation. You can either place it in another, less important position on the page, (such as just above the footer,) or you may choose to store it in a hidden drawer menu, accessible by a menu button.
Yes, I know this is a hotly contested debate between UX-perts. Many of them hate the idea of hidden navigation for the extra barrier it creates. But remember: your landing pages and your primary navigation items should be enough to entice a conversion. The secondary pages are only there for those who choose to seek them out.
By eliminating the less important options, (or at least de-emphasizing them,) people will have a much clearer path in front of them, which is good user experience by any measure.
Step 4: Place Your CTA Button
A clear, strong CTA is the entire purpose of a website.
Following our same portfolio site example, suppose your end goal is to get your prospective clients to fill out a form in order to schedule a consultation with you. Once you have that part figured out, you'll want to put it in a place of honor, where it will most likely be seen.
In addition to strategically placing it within the body of your landing pages, I recommend placing it in the main header navigation as well.
But in order to make it stand out from your other two or three navigation options, you should style it as a button. This gives it a bit more visual punch, especially if it is a bright pop of color that stands out against the rest of the content on your site.
Img Source: http://ift.tt/1WVtYEr
Continue reading %4 Steps to Boosting Conversions with Prioritized Navigation%
by Wes McDowell via SitePoint
Jump Start Sass: Architecture in Sass
The following is a short extract from our recent book, Jump Start Sass, available for free to SitePoint Premium members. Print copies are sold in stores worldwide, or you can order them here. We hope you enjoy this extract and find it useful.
Architecture has always been one of the major pain points in CSS development. Without any variables, control directives, macros, or object inheritance, CSS code tends to be long and repetitive—a single ever-growing file. While it’s technically possible to split plain CSS into multiple files that reference each other with @import, the additional HTTP requests make that a poor solution. As you’ve seen, Sass has an answer for every piece of the architecture puzzle—but what’s the best way to put it all together?
Ask ten experts, and you’ll receive ten different answers—most of them involving (or aided by) Sass. OOCSS, SMACSS, Atomic Design, ITCSS, and BEM are all popular systems for CSS architecture, but there are many more. If you’re using a front-end framework such as Bootstrap or Foundation, there might be some architectural opinions already built in.
These are all solid systems, none of which were designed with your project in mind. CSS architecture is hard, so it’s a mistake to trust any one-size-fits-all solution. There is no “right” answer that works for every team on every project. We’d recommend learning them all, and then mashing together the best parts to create a system that works well for you.
Let’s start with a broad discussion of the building blocks, and then look at the ways we can fit them together.
Multiple Files and Folders
Breaking your code into multiple files is one key advantage to using a preprocessor, and forms the basis of any architecture. With Sass, there’s no harm in breaking your code into the smallest logical units and organizing it into multiple files and folders. We recommend taking full advantage of it.
Sass has bestowed new power on the CSS @import rule, allowing you to combine Sass and CSS files during compilation so they can be sent to the browser as one single file. This is the only place where Sass has stepped on the toes of an existing CSS directive, so it behaves differently in Sass than it did in CSS.
CSS Imports
As mentioned, the CSS @import directive allows you to reference one CSS file from another. Importing is handled by the browser and requires additional HTTP requests—since the importing file has to be parsed before the @import directive is discovered. If you have a chain of files importing each other, those imports will happen in sequence, blocking the document from rendering until all the CSS has loaded. For that reason, most people avoid CSS imports entirely.
Using CSS imports, you can reference another CSS file using relative or absolute paths, even adding a media query rule for conditional imports. Even though Sass provides different functionality under the same at-rule, there are various cases in which Sass will fall back to the vanilla CSS output, such as when:
-
an imported file has a
.cssextension -
a filename begins with
http://orhttps:// -
the filename is a
url(..)function -
@importhas any media queries
The following will compile to standard CSS imports, even in Sass:
[code language="css"]
@import 'relative/styles.css';
@import 'http://ift.tt/1XKyYLa';
@import url('landscape.css') screen and (orientation: landscape);[/code]
Sass Imports and Partials
Sass imports look similar to CSS imports, but the imported files are compiled into one single output file, as though their contents (including variables, mixins, functions, and placeholders) were copied and pasted into place before compilation. This type of Sass import will only work on files with .sass or .scss extensions, but you can leave the extension off when importing (as long as there are no similarly named files). In fact, we recommend dropping the extension whenever you can, for simplicity. It’s also possible to import multiple files in one command, or import files into a nested context:
Continue reading %Jump Start Sass: Architecture in Sass%
by Miriam Suzanne via SitePoint
Subscribe to:
Posts (Atom)