livejs

CSS & JS Auto-Refreshing with Live.js

Posted by | CSS, Design, Ecommerce, HTML, Online Store, Website | No Comments

I want to share a fantastic little tool that I’ve only recently come across; Live.js, written by Martin Kool.

This JavaScript file automatically checks for changes to your CSS and JavaScript files, and refreshes them.

That means you can have your text editor in one half of the screen, and a web browser in the other. When you save changes in the editor, the updates are reflected immediately in your browser. It really helps to speed up your development time.

A lot of text editors offer HTML previews and such, but they only work for plain .html pages. The great thing about Live.js is that it works on any webpage, including a working WordPress theme.

Live.js for WordPress Plugin

I have put together a (very!) simple plugin for WordPress to make things that little bit easier. You can download it here (Rename the folder to “pbd-livejs” once you unzip it), or view it on Github.

It automatically adds Live.js to your theme, but only when you are logged in and working locally. You should never use this script on a live site, and the plugin ensures you won’t.

It also keeps the script out of your theme code, which is good because it’s purely for development. There is no need for it to be present in the files on your server.

One final note is that although Live.js also supports sensing HTML changes, I have disabled this. With it enabled, your webpage essentially “flashes” as it loads every second or two.

Let me know if you try it out, or if you’ve used Live.js before already!

trends

The 5 Global E-commerce Trends for 2014

Posted by | CSS, Design, Ecommerce, HTML, Online Store, Website | No Comments

It has been another big year for e-commerce and we can expect this to continue forward with new trends emerging for the upcoming year. Keeping up with the constant growth and innovation of e-commerce is essential to stay competitive in the online retail market. E-commerce website are playing very important role for business grooming and sales generation. There are so many platform for E-shop creation, but Magento development is the best suitable choice for all needs. In today’s scenario Magento and ecommerce solution are called similar terms, just because of the huge reliability of Magento.

Let’s see what we can expect to drive the industry as we look forward to the the global e-commerce trends for 2014.

1. SEO, SEO and more SEO

Studies have proven that most of the traffic from search engine results goes directly to the top 3 results. If you’re looking to become competitive in the market, then focusing on valuable and engaging content is key. From pictures and videos to unique product descriptions and customer reviews, online merchants are going to have to take serious action to implement content that aligns with their strategy.

2. The Big Data Theory

2014 is the year where online merchants will make use of all the “big data” they have been collecting and make business decisions based off this valuable data. It will help online businesses accurately forecast buying trends, personalize the online shopping experience and understand their overall market to better engage and convert customers.

3. The M-Commerce Movement

If you’re not mobile-friendly then you’re not competitive, bottom line. Mobile platforms such as smart phones and tablets are changing the purchasing behaviors of online shoppers. Mobile commerce is sweeping the industry and shoppers will expect a seamless mobile shopping experience.

4. The Ultimate User Experience

With the use of big data on the rise, more and more online businesses will be able to provide their shoppers with a customized user experience. Allowing customers to save favorite products, a smooth checkout process and recommendations based on browsing habits are going to set the bar for customer expectations. Breaking down the barriers between online and in-person shopping is going to be all the craze for personalization in 2014. 

5. Now Everyone’s a Socialite

It’s true! Suddenly it’s socially acceptable for everyone on the internet to update their social networks on where they’re shopping, their latest purchases and share products they really want. If your customers are there then you should be too! Social media networks including Facebook, Twitter, YouTube and Google+ are expected to make a stronger impact on search engine rankings in the near future.

Of course, these trends are merely calculated predictions and there’s a chance their importance could be dominated by a new, emerging trend. However, it’s sure that the e-commerce market will continue to grow and that’s why staying informed on the latest trends is crucial to secure online success.

optimization

Top 5 Ultimate Ways to Drive New Traffic to your Online Store

Posted by | Ecommerce, Magento, Online Store, Prestashop, Website | No Comments

Drive new traffic to your online store to create new customers and boost sales. Push the petal to the metal and increase your traffic with these 5 fundamental tips

1. Optimize Your Site for SEO

  • Blogging: One of the surest ways to improve your SEO is to create a blog and post on it frequently. Not only will a blog boost your SEO but it will present you as an industry leader – someone who really knows their product and target market. Check out some of these great PrestaShop powered store blogs: What Goes Around NYC, Oh Snap Boutique, Creed Boutique
  • Text Is Everything: Focus on creating rich product descriptions and using powerful keywords. A good starting point is the Google Adwords Keyword Tool. Find out what customers are searching when they Google your competition. This will give you valuable information about what keywords you should concentrate on.

2. Use Wish Lists

Give your customers the option to create wish lists on your site and share the list with their friends. The wish list creator is marketing for you by creating a call to action that will be difficult to ignore and in turn will expose your store to new customers. These new customers are entering your site with a stronger sense of trust since the wish list creator has given your store the greatest endorsement possible, confirming that they shop there.

3. Embrace Social Networks

Social media is a necessary, inexpensive marketing tool to reach your target audience and increase web traffic. Much like a blog, facebook, twitter,  social media should be updated frequently with posts that interest your audience and make you relevant in their daily lives. Don’t be too sales oriented on your social media but make sure that you redirecting fans and followers to your website. You also may want to include links for your customers to “share” your products from your site so that their friends hear about it.

4. Offer Referral Bonuses

Let your customers bring in more customers for you! Offer your customers discounts or cash towards their next purchase for referring friends to your store. Simplifying the process for your customers is the best way to increase their success. For example, offer a system on your site that allows customers to refer friends via email directly or provide your customers with a vanity URL to ensure that they get credit for everyone they refer.

5. Market Places & Price Comparers

Submit your e-commerce website to all of the top search engines and market places. You may also want to use a product feed to expand your reach. You can manually submit your products with all of your product details, photos and prices to search engines through databases such as Google Base. You may also want to do some research on price comparison shopping sites that may be a fit for your store. You always want to know where your competition is and if they are on price comparison sites, submit your inventory as well.

Also, make sure you take a look at the Complete Guide to SEO for additional strategies to boost SEO or download PrestaShop, the most SEO friendly e-commerce solution, today!

magentocode

Top 5 Magento Coding Recommendations to Optimize Site Performance

Posted by | Design, Ecommerce, HTML, Magento, Website | No Comments

In eCommerce, customer satisfaction and conversion hinge on site performance. Yet how do you implement all the bells and whistles to attract today’s elusive consumer without impacting site speed? According to Radware’s Tammy Everts, the average web page has grown 151% over the past three years, with over half that bulk coming from images. No wonder retailers around the world find the industry’s 3-second page load benchmark so elusive! Studies find over 92% of retailers are failing to hit this mark and running as high as eight seconds or more.

Yet with pre-holiday shopping off to a fast start already, the 3-second bar takes on even greater importance, as shoppers just want to get their shopping done to spending time with friends and family.

While web performance best practices abound, Magento’s Expert Consulting Group (ECG) identified the top five Magento coding issues, which represent 84% of all performance issues, encountered in 96% of our client codebases. Most of these are related to inefficient operations, redundant or useless computations, and memory misuse:

  1. Calculating the size of an array on each iteration of a loop
  2. SQL queries inside a loop
  3. Loading the same model multiple times
  4. Redundant data set utilization
  5. Inefficient memory utilization

To learn more about these five issues as well as how to fix them, see the full ECG report Conquer the 5 Most Common Magento Coding Issues to Optimize Your Site for Performance.

Collective76_arbitrary

Arbitrary anchors for any element on your page

Posted by | CSS, Design, HTML, Website | No Comments

With jquery.arbitrary-anchor.js , you can easily create useful and neat dynamic anchor scrolling by simply adding a jQuery/CSS selector after the hash (#) in your page’s URL. This plugin extends the normal anchor functionality, that is, an anchor tag with a name value attribute will still get scrolled to as normal. The same goes for an element with an ID which matches the hash. This little plugin will take care of everything else.

Design-in-enterprise-apps

Expert Tips for Staying on Top of the Latest Web Design Trends

Posted by | CSS, Design, HTML, Website | No Comments

As a student earning a degree in web design, you should feel confident that you are learning the skills and techniques necessary to create a strong foundation on which to build. But the fact is, like many industries, the design world is constantly evolving. Because of this, staying on top of the latest web design trends is critical to your success.

With new techniques and technologies emerging every year, it’s important to be sure you don’t fall behind the latest web design trends. Your education, combined with a passion to continue flourishing as a designer, will keep you sharp when it comes time to enter the workforce.

So to help keep you organized in your professional development efforts, we’ve compiled some tips and tricks to help you stay on top of the latest web design trends. These are real tactics that industry experts have shared with us, so pay close attention.

1. Read web design blogs
Keeping tabs on the top web design blogs is a great way to keep your finger on the pulse of the industry. But be careful because it’s difficult to determine which trends are worth adopting and which are just a fad.

Some of the best:

2. Follow industry leaders on Twitter
As an aspiring web designer, it’s always smart to take tips from the pros when you can get them. Twitter is an outstanding tool for getting up-to-the-minute thoughts and ideas from the industry’s biggest names.

3. Join professional design organizations
Becoming a member of these organizations has numerous benefits. Not only will you form relationships with other members but you’ll also have unique opportunities to participate in events. Most of these clubs also distribute newsletters highlighting new industry trends.

Some of the best:

  • American Institute of Graphic Arts (AIGA)
  • World Organization of Webmasters (WOW)
  • International Webmasters Association (IWA)

4. Participate in design forums
Web design forums provide a unique opportunity to interact with other designers. They can be used to solve problems, learn new techniques and bounce ideas off one another. By participating in these communities, you can hear opinions about new trends.

Some of the best:

CSS

Learning Principles for Improving Your CSS

Posted by | CSS, Design, HTML | No Comments

In today’s article I will mostly talk about my own experience, and what I have learned about CSS after almost one year and a half of heavy practicing.

First, let me remind you that CSS is an extremely simple language. It can be summed up in 3 words: selector, property, value. Nothing more, really. This is why some people don’t like CSS at all: because they feel like children playing with LEGOs.

Yup. Explain the basics of CSS to a 9 years old child and he or she will be able to create a website. Not a complex one I agree, but maybe a few pages with headers, links, content, images, and such.

But the fact that CSS is an easy language doesn’t mean everyone is on the same level. Some people use CSS like a chimp uses a fork, some people are okay to good with it, and some people can do magic with it.

From what I can tell, I’ve been playing around with CSS for almost two years now and on what I would call a heavy level for something like 7 months. I’m still far from perfect, and there are still some tricks I don’t know or understand.

Anyway, there are a few things I understood over the months and I’d like to share them with you. One more time, it’s not code snippets or useful tricks, it’s more like general principles and good practices. Here is what I will cover:

  1. Don’t rush your code and keep it simple
  2. Keep an eye on the future
  3. Read other people’s code
  4. Keep practicing

1. Don’t rush your code & keep it simple

Rushing into the code may lead to time loss. What if you spent one hour creating something to realize you can’t do it this way and have to start all over again? This shouldn’t happen.

Spending hours on a CSS slideshow to end up with SlidesJS or Adaptor is a shame. Not because you didn’t succeed, but because it was a complete waste of time. On a tight deadline, you may suffer from such a mistake.

Keep it simple

CSS is a simple language but things can easily become complex. Especially if you want them to be. In most cases, the simplest idea is the better idea. When you want to achieve something, always ask yourself if there is not a simpler way to do it. You’d be surprise how often the answer is ‘yes’.

As an example, if you want a really simple horizontal navigation with only links, you have multiple ways to do this:

  • Float the list elements
  • Set the list elements to inline
  • Set the list elements to inline-block

Pick the simplest and set the list elements to inline. No need of a clearfix hack. No need of an inline-space fix. It only needs a regular padding, nothing more. End of story.

8. Keep an eye on the future

Languages are evolving. It’s very true with CSS. CSS specifications are never finished, and browsers are not waiting for them to add new features to their engine.

Regarding this, my best tip would be to stay alarmed about what’s coming. I know you may not be able to use it right on launch, but knowing which feature is now in Chrome Canary, soon in Chrome stable and Safari, then Opera, then Firefox and so on, is important in order to gain perspective of what the CSS problems and possible solution are.

Resources to keep an eye on the future:

9. Read other people’s code

One of the best ways to learn how to code is to read code. Thankfully, CSS is client side, so you can read it on every single website on the web with a web inspector like WebKit Inspector, Dragonfly, Firebug, etc. Plus, the web industry is somewhat really focused on open-sourcing, meaning people are glad to share their sources with you.

Another great way to learn is to follow tutorials. Take an easy tutorial, and do it step-by-step. Then try to redo it from scratch. If you happen to be stuck, have a glance at the solution, then continue by yourself.

When you’re comfortable with CSS and want to get deep into it, you might want to have a look at unexplained demos and experiments. People create stuff everyday, you’ll always find something you can’t do.

Regarding this, a few months ago Chris Coyier, Tim Sabat and Alex Vazquez launched CodePen, some sort of platform to create, share and explore front-end code (HTML, CSS, JavaScript). CodePen also includes a bunch of tools like libraries (jQuery, jQuery UI, MooTools, YUI, Prototype, Zepto, Dojo, Ext JS, PrefixFree, etc.) and preprocessors (HAML, Markdown, Slim, LESS, SCSS, Sass, CoffeeScript) if you need.

Further resources to find examples of other people’s code:

10. Keep practicing

You know what’s said about learning: we learn by doing. So my best advice is to keep practicing as for anything else. The more you practice, the better you’ll be. Practicing doesn’t necessarily mean doing a website from scratch. Just pick a simple shot on Dribbble and try redoing it with pure CSS. The result may not be useful, but what you’ve learned, definitely is.

And as I said before in “Know the basics and learn the tricks”, CSS is full of special cases. Learning how to deal with them is part of the job in writing CSS. And the only way to know they exist is to practice, find one, have a look at the solution, and go on.

I’d also suggest you to share your code. It’s always helpful to get constructive feedback, so be sure to ask people to review your code once close to be finished. Simply drop them in a JSFiddle, share and ask for feedback

If you already have an idea, then what are you waiting for? Request a Quote