Tutorials

Tutorials about HTML, CSS, PHP, Javascript, and Photoshop

  • Home
    Home This is where you can find all the blog posts throughout the site.
  • Categories
    Categories Displays a list of categories from this blog.
  • Tags
    Tags Displays a list of tags that has been used in the blog.
  • Archives
    Archives Contains a list of blog posts that were created previously.
  • Login
5588

CSS3 gives designers many new properties and modules (like the CSS Animations and CSS Transitions modules) that allow them to add fascinating interactivity onto their work.

If you want to take advantage of these modern CSS capabilities, one quick way to do that would be to use (or study) CSS effects libraries. Let me talk about a few open source collections of CSS that will help you craft great transitional interfaces.

1. Animate.css

Animate.css

Animate.css is a collection of over 60 CSS effects by Daniel Eden, a designer at Dropbox. Daniel Eden’s work on Animate.css is an inspiration to some of the other CSS effects libraries below.

2. Hover.css

Hover.css

This is a huge collection of 48 CSS3 hover effects by front-end developer, Ian Lunn. What’s cool about Hover.css is it comes with a SASS version, which is really, really handy for a whole lot of us.

3. fancyInput

fancyInput

fancyInput deals specifically with interactions related to your HTML <input> and <textarea> elements. It gives you the ability to implement interesting CSS effects when users type into your form fields.

4. magic

magic

(Note: The link above goes to an Italian-language website.)

magic is an interesting collection of CSS3 effects. The magic project is inspired by Daniel Eden’s work on Animate.css and is by an Italian developer who goes by the moniker, miniMAC.

With magic, you can easily trigger CSS animations and transitions using jQuery (or your preferred JavaScript front-end web development framework) simply by setting event listeners on your target HTML objects and then adding/removing the magic-specific CSS animation classes when the event occurs.

For example, say we have a button called #submit-button and we wanted to remove it from the DOM — which is a design pattern for critical interactions where you don’t want users to keep clicking on a button that’s intended to be pressed only once — but we wanted to do it in an impressive, transitional way to make sure the user doesn’t get confused and left wondering where the button went, all we would need to do is this (using jQuery):

$('#submit-button').click(function(){
  $(this).addClass('magictime vanishOut')
});

5. Effeckt.css

Effeckt.css

Effeckt.css — which is still a work in progress — is a Mobile First library of animation and transition CSS effects. The effects included are contributed and curated by designers to make sure they’re tasteful. Effeckt.css strongly emphasizes on performance, one criteria being if it can’t run well at 60fps on mobile devices, it’s out. Read the 9 goals of Effeckt.css and watch the project’s 22-second video on YouTube to get a glimpse of Effeckt.css’s future.

This isn’t an exhaustive list of CSS effects libraries. I’m sure I’ve missed some equally great projects out there. If you know of an open source project that should’ve been on this list, or if you’re working on one, please share it with us in the comments. Thanks!

Related Content

About the Author

Jacob Gube is the founder of Six Revisions. He’s a front-end web developer by profession. If you’d like to connect with him, head on over to the contact page or follow him on Twitter: @sixrevisions.

The post 5 CSS Effects Libraries for Supercharging Your Designs appeared first on Six Revisions.

Continue reading
0
4206

Mainstream blogging platforms like WordPress, Blogger, Tumblr, etc. aren’t designed for hackers. They’re encumbered by features developers just don’t need or want.

And, out of the box, the popular blogging platforms certainly lack a lot things coders actually would want, such as code syntax highlighting, blog theming capabilities using a standardized templating engine, markup language support besides HTML, and integration with source code repositories, among other things.

If you’re looking for a blogging solution that’s programmer-friendly, you’ve come to the right place. The free and open source blogging platforms I’ll talk about are designed with the needs of developers in mind, and not their moms’ (unless she likes to code too).

Hexo

Hexo

Hexo is a blogging platform powered by Node.js (it says so right there in the site’s tagline).

Its hacker-friendly features include native support for GitHub Flavored Markdown (GMF) as well as templating and extensibility capabilities using EJS, Swig and Stylus.

Installing Hexo will take you but a few seconds, assuming you already have npm set up and ready to go. Boom:

$ npm install hexo -g

Fun tangential fact: "npm" doesn’t stand for Node packaged modules or Node Package Manager. It’s a recursive acronym like PHP. Or more accurately: "It’s a recursive bacronymic abbreviation because it stands for ‘npm is not an acronym’," as the author explains. [Source]

Jekyll

Jekyll

Jekyll is a static site generator that compiles your markup files into Web-ready HTML documents — that’s what all static site generators do, more or less — the value proposition being better Web performance and the option to ditch your databases and server-side scripts.

Jekyll has a steady-growing ecosystem, as evidenced by the other open source projects being developed for it:

  • Octopress – a blogging framework designed for hackers
  • JekyllBootstrap – makes it easier for you to use your GitHub Pages to host your blog for free
  • Exitwp – helps you move from WordPress to Jekyll

Jekyll can be installed as a Ruby Gem:

gem install jekyll

Anchor CMS

Anchor CMS

Anchor CMS is a featherweight; the project’s source code .zip archive is just a little over 200 KB.

Off the bat, Anchor supports Markdown syntax, which a lot of coders feel is easier and more natural for blog-writing and formatting. It also supports art-directed blogging, i.e., you can easily make each post look different.

Wheat

Wheat is truly cool: It pulls articles from your GitHub repo and then publishes it to your website. Imagine the possibilities! Like open source blogging where other hackers can issue pull requests for correcting and improving your blog posts.

Wheat is developed with Node.js and can be installed as a Node packaged module:

npm install wheat

Nikola

Nikola

Nikola, a static site generator, is strongly blog-oriented but it can also be used for any other type of website. Code wranglers will love the fact that it has a small codebase, which the creator of Nikola deems as an advantage because it means "programmers can understand all of Nikola core in a day."

Nikola supports a whole slew of markup languages: reStructuredText, Markdown, etc. And, of course, HTML will do just fine too if that’s how you roll.

toto

Stolen straight off its repo description: toto is "the 10 second blog-engine for hackers."

toto is a minimalist blogging engine that runs on Git, which means you can version-control your posts just like you would when you’re writing code.

Poet

Poet

Poet is another Node.js-powered blogging platform. What makes it unique is the project’s snooty character mascot. Just kidding.

What’s notable about Poet is it gives you the ability to write your blog posts using a markup language you’re comfortable in, whether it’s Markdown, Jade or whatever you want. Also, customizing routes for your blog posts and other pages is simple.

Dropplets

Dropplets is a minimalist Markdown blogging platform. Its purposefully limited feature set helps makes sure you spend more time writing and less time tinkering.

Pelican

Pelican

Pelican is another static site generator, but it’s written in Python. It supports reStructuredText, Markdown, or AsciiDoc markup. It has code syntax highlighting right out of the box, and an importing feature for data coming from other publishing platforms such WordPress. Theming can be done using Jinja2.

Wardrobe

Wardrobe

Wardrobe is a minimalist blogging platform with a simple UI that will help you focus on writing. Wardrobe is developed with PHP. It’s very similar to Anchor CMS.

Bolt

Bolt

Bolt is a full-on content management system, so you can use it for other purposes outside of blogging. It uses Twig for templating and comes with its own Symphony debug bar for tracing code issues. And, with absolutely no magic required, you actually get to choose which relational database management system to use for a change: SQLite, MySQL or PostgreSQL. Need more reasons? How about this: Bolt was built with the assumption that you might actually want to run unit tests on your CMS; it supports PHPUnit natively.

Shout out to the awesome Six Revisions readers who pointed me to some excellent open source blogging platforms via the comments of another related post.

Related Content

About the Author

Jacob Gube is the founder of Six Revisions. He’s a front-end web developer by profession. If you’d like to connect with him, head on over to the contact page or follow him on Twitter: @sixrevisions.

The post 10 Open Source Blogging Platforms for Developers appeared first on Six Revisions.

Continue reading
0
4498

It’s reasonable to assume that a website’s loading time is important.

We can confidently conclude that slow sites have usability and SEO issues because we know that users hate waiting for web pages to load and that Google uses site speed as a factor for its search rankings.

But, quantitatively, what are the other effects of having a slow website?

Let us look at some cases of tech companies sharing what they have learned about web optimization.

Case Study: Amazon

While discussing his work on Big Data in a presentation (PDF or see a report here) Greg Linden shared the significance of site speed in terms of revenue.

In his work at Amazon — Linden, by the way, invented Amazon’s recommendation engine — he talked about how only a 100-millisecond delay could lead to revenues of the online company dropping by 1%.

Let’s do some back-of-the-napkin calculations.

Last year alone, Amazon’s estimated revenue totaled $74.5 billion.

Based on Linden’s disclosure, increasing page loading times by just a fraction of a second would cost Amazon $745 million a year in lost revenue!

Case Study: Bing

In a joint conference presentation, Eric Schurman (from Bing) and Jake Brutlag (from Google) discussed the impact of web server delays.

Bing performed an experiment testing to see what would happen if their pages loaded 1.5 seconds longer than usual.

The results?

Source

Among other key metrics, they saw decreases in:

  • User satisfaction (-3.8%)
  • Revenue per user (-4.3%)
  • Number of clicks (-4.4%).

Case Study: Akamai

Akamai is a longstanding industry leader in the content delivery space.

In 2009, the company conducted a survey research study involving over 1,000 online shoppers.

This is what they discovered:

  • The threshold is 2 seconds — more than that and the user will become impatient
  • 40% of the respondents will abandon the site if it takes more than 3 seconds to load

These stats all equate to one thing: Considerable amount of losses in revenue.

Case Study: Google

In a talk, Marissa Mayer — then a VP at Google and today Yahoo’s CEO — discussed an experiment (video) she and her team ran on Google’s search results page.

They tested the effects of displaying more results in Google searches: 10 search results vs. 30 search results.

Analyzing their data, they witnessed 25% fewer searches from users that saw more search results.

Source

But was it because displaying more results meant users found what they were looking for on the first search results page, and so they felt no need to perform additional searches?

After further investigation, they attributed this drop in searches (i.e. page impressions) to increased page load times.

On average, the group that had more search results were subjected to longer page response times (0.9 seconds) vs. the group with fewer search results but got the page loaded quicker at only 0.4 seconds.

In conclusion, Google discovered that even a few milliseconds of delay — just 500ms to be exact — could lead to a notable reduction in page impressions.

Case Study: Shopzilla

A few years ago, Shopzilla embarked on a major, two-year-long redesign of their site.

During this time, Shopzilla was already huge — they received between 20-29 million unique visitors a month and 8,000 searches per second. Optimizing website performance to handle this sort of traffic thus became crucial.

Their web optimization efforts led to significant improvements — up to a 5-second reduction in page-loading times.

Phil Dixon, VP of Engineering at Shopzilla shared data and the lessons the company learned during their optimization efforts.

They witnessed amazing growth in important metrics by improving their website’s speed:

  • Conversion rates increased by 7-12%
  • Page views increased by 25% — just imagine how much more page views they gained just by focusing on improving site speed, because they were already getting 100 million impressions per day

Case Study: AOL

While sharing some key metrics, David Artz — Director of Website Optimization at AOL and the co-author of the book Website Optimization concluded that:

"Visits experiencing the fastest load times delivered us [AOL] the most page views per visit"

Source

This was because in the sections of AOL.com tested, they saw up to a 160% increase in average number of page views from users in the group who were in the top 10% in terms of average load time (fastest experience), compared to those at the bottom 10% (slowest experience).

Conclusion

These studies impart upon us one important lesson: Website speed should be a high priority if we want to build great websites.

Based on these reports, we have evidence suggesting that having a slow website will have negative effects on revenue, conversion rates, usability, and UX.

How to Speed Up Your Website

If you feel that your site’s speed needs improvement, read these articles to get started:

Read Also

About the Author

Smriti Chawla works at Visual Website Optimizer,a popular A/B testing and heat-mapping tool. Read more articles on A/B testing and high-converting design ideas by visiting the Visual Website Optimizer Blog. Connect with Smriti on Twitter.

The post Why Website Speed is Important appeared first on Six Revisions.

Continue reading
0
3847

A good online presence is key to the success of modern businesses.

Or is it?

There’s a new movement brewing up in the business world: Companies no longer want to have websites, mobile apps, social media accounts, or any sort of presence on the Internet.

Businesses are shutting off their websites, powering down their servers, pulling out their apps from app stores, terminating their Twitter accounts and Facebook pages, and firing their web developers.

I managed to talk to and interview one such entrepreneur in the front lines of this latest trend.

His name is Buck Cooter — one of the many successful CEOs on a mission to usher their companies back offline.

I could not find a photo of Buck Cooter so here's a guy playing the banjo instead. From Gratisography. Awesome site. www.gratisography.com

Here’s my Q&A sesh with Buck.

So You Took Your Website Down?

Buck: Yes, we deleted that thing a while back.

Our developer, web designer, UX/UI designer, usability analyst, information architect, server engineer, and IT staff — a guy named Larry — has unfortunately been made redundant.

No more sites. Or mobile apps. And tweets are for twits.

Seriously: Your Business is Completely Offline? On Purpose?

Buck: Yeah. The Internet — we decided we’re not doing that anymore.

What is the Reason for Going Offline?

Buck: As a business, you have to continue to innovate and iterate on your unique value proposition (UVP). You have to apply the Agile method to your business model.

Our company is now on stealth mode and we’ve brought it back to a minimum viable product. Our innovation here is that usually tech startups do these two things in the beginning, but we’re pivoting in the late-stage and disrupting the startup template (with support from our VCs) because we believe it’s really going to get us some good traction and a great termsheet if we ever get aquahired by Facebook (which did wonders for Oculus Rift, their early adopters love them even more because of the recent acquisition.)

What Are the Benefits of Taking Your Business Off the Web?

Buck: As the leader of a company, you have to promote that passion for innovation and you have to mix things up.

One of the key advantages of taking down our site and social media accounts is we’re able to focus on exploring new ways to communicate our brand and getting our message across to our target demographic.

For instance, sending them our message via mail through the postal service, telegraph, fax, the like.

Or cutting a hole at the bottom of two tin cans and attaching them together with a string and then giving one can to our customer and then our PR manager and marketers are speaking on the other end of this device. This is really fun.

From Gratisography

How Has This Changed Things at The Office?

Buck: Not sure I understand the question. Has my office changed? No, not really.

Here’s a photo of my office:

This is from New Old Stock: nos.twnsnd.co/image/75491786304

I still have my custom-built PC (it’s by the window) and my ergo chair.

No. This is What I Meant: How Has This Changed Your Company’s Culture?

Buck: Our employees are spending less time on Facebook. In fact, they spend no time on Facebook because I got our ISP to shut off our office’s Internet connectivity.

If you’re going to do something, you gotta go all out son.

Any Parting Words?

Buck: You can’t end a business interview without somehow mentioning Steve Jobs or Apple.

So I’ll end with a Steve Jobs quote, but just pretend in your head I’m the one saying it to you:

"We have an environment where excellence is really expected. What’s really great is to be open when [the work] is not great. My best contribution is not settling for anything but really good stuff, in all the details. That’s my job — to make sure everything is great. "

The Buck stops here. I’m out.

Related Content

About the Author

Jacob Gube is the founder of Six Revisions. He’s a front-end web developer by profession. If you’d like to connect with him, head on over to the contact page or follow him on Twitter: @sixrevisions.

The post Businesses Don’t Want Websites Anymore appeared first on Six Revisions.

Continue reading
0
2986

An entire work day. That’s how long it took to create the 8-page project proposal you wrote, edited, and packaged to perfection for a potential client. It’s the third one you’re sending out this month.

It looks ready. It feels ready. You’re confident it’s going to blow the client’s socks off.

You wait a couple of days. The client hasn’t responded yet. Did he get the proposal? Should you send a follow-up email? Maybe send another copy of the proposal just to be sure (might have been trapped in their spam folder by accident).

Eventually, you hear back from the client. But his email brings in some shattering news: He thinks you’re a talented professional, but he decides to pass on your project proposal.

What happened?

It’s tough to handle the rejection after putting in all those hours. But the truth is many freelancers struggle even in just convincing the client to read their proposal its entirety and to truly consider their offer. Besides losing out on potential business, these service providers spent time and effort they can never take back and reuse on actual paid work.

READ ALSO: Why Designers Should Get Paid for Proposals (designinstruct.com)

Rather than beating ourselves about it, let’s try to understand the reasons why clients aren’t interested in our proposals so we can tweak our approach to create better ones.

Your Proposal Doesn’t State the Problem You’re Solving

If you can’t identify the client’s problems and needs, it tells them that you don’t understand their business. Employers are hesitant to work with people who aren’t on the same page.

Before sitting down to create your next proposal, ask yourself these two questions:

  1. What problem is the client trying to solve with this project?
  2. What solution can I offer to the problem?

Successful proposals present solutions that will address the problems and needs of the client. It has to be detailed enough so the client can see how you are intending to deliver on your promises.

Most project proposals get thrown into the trash folder because they focus too much on credentials, past work experiences and capabilities of the service provider. Their proposals read like a resume.

The 8-page proposal you spent an entire work day on? It’s filled with fluff meant to increase the proposal’s page count, and doesn’t mention anything that can move the needle forward for the prospective client.

But if you want to set your proposal apart from the rest of the proposals the client will be reading that day, you need to be bold and state what you will achieve for them.

Will your proposed solutions improve customer acquisition? Will the project open up new opportunities for revenue? How?

In other words: What objectives will be met after the project has been completed?

In his article on Forbes.com, August Turak emphasizes the importance of knowing and stating the goals in a proposal:

"Great plans start with projections or outputs, and work their way back through the activities and money needed as inputs. Poor plans focus instead on activities and ‘budget’ in the forlorn hope that if we just stir up enough dust some of it may magically settle into money."

Your Proposal Isn’t Supported by Facts

For your proposal to have a stronger argument and a tighter hold on your client, invest some time in research.

Find relevant data, articles and research study results, then use these resources to bolster your proposed solutions.

Your Proposal Doesn’t Describe Your Project Methodology

Traditional proposals are often written and presented to the client without a project plan. It’s because, at this early stage, you won’t have enough data to plot out how and when the project will be completed.

However, you can outline the general stages of your projects, such as the research phase, planning phase, production phase, post-launch phase, and so on. Perhaps you use a standard project methodology like Agile, Getting Real or Lean Startup — you could mention that too.

Describe how your methodology helps complete projects efficiently and successfully.

Doing so gives the potential client an idea of what it will be like to work with you. And it shows that you mean business.

Also, describing your project methodology adds to the perceived value of your services.

SEE ALSO: How I Earned A Lot More on Projects by Changing My Pricing Strategy

Summary

By understanding the prospective client’s needs, he will be more likely to take your proposals seriously. And at that point, you will be a step closer to winning the client’s trust and landing new business.

Related Content

About the Author

Stef Gonzaga is all about creating great content for a better Web. She’s a resident blogger for the project scheduling software, TeamGantt, where she writes about productivity, project management, and the latest apps. Connect with Stef on Twitter @stefgonzaga.

The post Why Clients Aren’t Interested in Your Proposals appeared first on Six Revisions.

Continue reading
0

Testimonial

Thank you so much! We are very happy with our new website. It is easy to use and all of our customers tell us, they love it.

Contact Us

  • 13245 Atlantic Blvd. #4352
    Jacksonville, FL 32225
  • 904-240-5823