2014 February

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