Responsive Web Design

Posted on April 17, 2012 by atomni

Responsive web design is the creation of device-agnostic websites by using text scaling, HTML5, and hierarchically organized CSS3. The emergence of Responsive Website design has been fueled by the staggering increases in mobile device usage for Internet browsing. With thousands of device and screen combinations, web designers needed a better way to make a site that looks great on any device. So how do you effectively build responsive websites and include your customers in the process?

Prototype Soon, Prototype Often.

Prototyping is a hard hill to climb – even the most seasoned of designer at some point has thought while working on a iterative prototype, “Why I am doing all of this work when it will all change anyway?”. When struggling to convince yourself prototyping is worthwhile, remember all of the roadblocks and detours you avoid by thoroughly vetting design decisions with a conceptual working model. Prototypes make use-cases much more tangible and easy to grasp. When you don’t prototype, you often wind up with situations where elements weren’t properly considered or included at all. For example, when within a few weeks of delivery you realize that the ‘User Preferences’ screen the front-end development team says is required never got designed, coded into the user model, or included in the database schema. At that point the few extra hours you spent re-incorporating the client’s feedback into the Balsamiq mock-ups will be dwarfed by the (potentially avoidable) work needed to make the sweeping changes required downstream.

“Well now that I click it.”

Not everyone is a designer, a developer, or even technically savvy. Case in point, if your customers were as good as you at what you do – why would they be hiring you? The realm of website design blends the quantitative and qualitative – combining functionality, aesthetics, and usability into one powerful brand marketing package, but not everyone can look at a Requirement’s Document and see that. By creating touchable, (even usable) prototypes that best represent the end product based on the current progress of the design you’ll be clearly coordinating with the client exactly what they should be expecting – which can make or break any relationship no matter how solid.

Try Style Tiles

Style Tiles are a bit different than your traditional wireframes – they organize & arrange different web components to present clients with interface choices in a non-overwhelming format. It’s a design concept that facilitates the client communication of a particular web view in it’s different device iterations. More importantly for responsive web design, these hybrid moodboard/wireframe/mockups easily communicate the device-specific interface options without requiring the investment in photoshop mock-up iterations on the front-end of the design process.

Pick Your Look Greats and Look Goods

Responsive web design makes your website palatable to really any device, but you’ll definitely want to identify which devices your customer wants the site to look great on – so you can be sure to properly test and base your responsive logic accordingly.

A Responsive Website Design Example

Here is an example of how you can present a responsive design by quickly creating multiple wireframes using the same components across specific device constraints. Notice the smaller device (iPhone) only uses a paired down subset of the component from the full browser version. No new controls, styles, or information is presented, just tweaked for an optimized mobile experience.

PC Responsive Website Design Example

Mobile Responsive Website Design Example

Magento Product Images Don’t Show Up

Posted on October 20, 2010 by Mike Angstadt

There seems to be several interesting steps associated with troubleshooting the first steps beyond the default Magento install. In particular, after you’ve installed a theme and begin to create your own product catalog. The theme for this particular application was from Template Monster and actually built for a previous version of Magento, which in and of itself proved to be a challenge. These are two major issues I ran into and their respective resolutions.

Newly Added Categories or Products Aren’t Showing Up on the Frontend

There are several issue that could be at hand. The best synopsis I’ve found on Stack Overflow. While in the Product editing section (Catalog->Manage Products, and select a product)

1. Make sure all of the products you want to display are in categories
2. On the Inventory Tab, The quantity in stock has to be greater than the ‘out of stock’ minimum quantity, The item has to be marked ‘In-Stock’
4. On the General Tab, The product’s status has to be set to ‘Enabled’ and the visibility has to be set to ‘Catalog’ or ‘Catalog and Search’
5. Once you’ve made sure of these, go go System->Index Management and refresh the product-category indices

Products Show Up, But There Are No Images

This was by far the most frustrating to me. The image files existed on the server, the url’s were identical – but for some reason the images wouldn’t load.
Again, a few steps to troubleshoot while in the Product editing section (Catalog->Manage Products, and select a product)

1. Make sure to recursively change the file permissions in magento/media to ’777′ (full read/write/exec access)
2. On the Images Tab, make sure there is at least one image uploaded for the product, that the Excluded checkbox isn’t checked, and the radios to include it for thumbnail, base image, and small image are selected for the respective images.
3. Under System->Configuration->Catalog->Product Image Placeholders, make sure there is a default image uploaded for each of the respective image types
4. Delete the .htaccess file located in the magento/media folder (thanks rafa)
5. Under System->Cache Management, flush the catalogs image cache.

Navigate to the front-end of your Magento install, and you should see your products with images in the product catalog.

For more great information about Magento, eCommerce Consulting, PHP Development, and Web Best Practices – please visit us at atomni.com, a Philadelphia-based Web Consultancy.

Is a website template really right for your business?

Posted on October 8, 2009 by atomni

As Managing Director of a web consulting firm I am constantly given the opportunity to meet individuals who work with technology. I have had the chance to meet brilliant developers, designers, information architects, etc. all of who love what they do and put unbelievable amounts of time into growing their talents. At the very same time there has been a re-occurring theme over the past year – as the internet continues to grow, and more people become involved with developing the information, suddenly “webmaster” has been diluted to include people who have never seen more than a <p> tag.

I was at a wonderful event last Wednesday night, the National Foundation for Celiac Awareness’s Appetite for Awareness: A Gluten-Free Cooking Spree, held at the Wachovia Center here in Philadelphia. I went to support our friends at the foundation, and maybe meet some folks who could benefit from some gluten-free SEO. Instead many of the small business owners I met were indifferent with their website or were working on a new “site” and very excited that their new website would drive them leads and hopefully business.

While at the event…

_____________________________________________________________

A gentleman approached me and handed me a flyer for his website. I glanced down at the flyer, the service offerings, the domain, and immediately knew that I could offer some potentially valuable advice on traffic development and conversion refinement. I am not one to hold my questions, so I asked “how is the website doing? Are you happy with its performance?” I got an immediate and very excited yes. With a response like that I figured the website must be put together correctly and performing well. So a few questions later I learn that he, let’s call him Joe, is in fact the webmaster and that the website has been live for a little over a month. As soon as I’m home I go online.

I check out the site…

_____________________________________________________________

At the bottom of Joe’s site is a logo from his web hosting company indicating he made the site in one night. What does that mean? That means that Joe rushed his brand to market and is probably not best representing the value of his product or service to his target audience. More and more people who have or want to have businesses online are turning to website templates. The idea of website templates is not the crazy part; it is the unrealistic branding expectations that are being sold. A business has an identity, defined goals, and clear objectives – so should a business’s website. Unless you are purchasing a franchise, your business does not have a template for success – so how can your website?

The problem is…

_____________________________________________________________

The internet is not only the world’s most dynamic marketplace – it also happens to be the largest; meaning highly saturated competitive markets. How can you expect to compete with websites that were designed specifically around a business’s brand and core objectives? Sites with content design targeting customer experiences for behavioral groups in conversion-based time buckets. The answer is easy – you can’t. To take it a step further, how do you expect people to take your business seriously if you don’t? Why is someone going to spend money on your product or service if you do not believe in it enough to spend the time and money yourself? Your website is the most important branding tool your business has ever had. It is the international storefront of your business, and it never closes (at least it’s not supposed to).

Website templates in general…

_____________________________________________________________

Homestead-website-templates

Look familiar? You have probably seen (seriously) 1,000 of these, if not more. The screen capture above is from homestead, one of hundreds of website template companies selling a solution that is not the best fit for online businesses with real service offerings, and real value. Don’t get me wrong, website templates have their place; personal sites, blogs, even non-profits in some instances, but certainly not businesses looking to achieve a sustainable online revenue stream.

What is the point of online business?

_____________________________________________________________

Hopefully to generate some form of profits so you stay in business. In order to generate profits online you need to remain ahead of a very large curve. This is done by outlining an effective strategy, nailing down a solid brand, bringing your business to market, and efficiently marketing your services for maximum impact. How do you control all of those aspects when you have no control over your largest branding tool outside of your logo, some pictures, and your text content?

It is all about user experience

_____________________________________________________________

With trillions of websites already out there and more being launched every day, you literally have10 seconds (if that) to capture the attention of your visitors or they simply will move on to the next site. It is not like the old days of brick and mortar businesses, there is no “well since I’m already here,” within 5 seconds they can be somewhere else, Australia or Japan. This is the age of A.D.D. – thanks in great part to mass media and our culture’s obsession with “options.” With the average internet user’s attention span lasting only a few short moments, online businesses are literally forced to create the most captivating and effective experience possible.

It’s a lack of information…

_____________________________________________________________

I guess my issue is the intelligent and very effective push marketing by the website template companies and Joe business owner not realizing the importance of his website, and hence not making the proper investment. If you have a valuable product or service to offer, starting or bringing a business to the internet can mean great opportunity for success. The internet is a different marketplace from traditional media and it takes different expertise and ingenuity to engineer effective experiences that grow businesses online. Business owners need to be concerned with building and refining web experiences, not web sites. If an experience is sticky people will remember it. Your brand – whether in its infancy or has a walker – needs to leave as permanent a footprint as possible.

Coming back to Joe…

_____________________________________________________________

The purpose of pointing out Joe is not to exploit the countless people creating template websites with little to no knowledge of web platforms, well not the whole purpose. The fact of the matter is that the information should be designed differently so expectations are more in line with average results. When you go around calling yourself a webmaster, there is an expectation that you have mastered some part (usually platform) of the web, so if you have no knowledge of a single platform - even if just HTML, you are not a “webmaster.” The same applies for template driven websites with no real design consideration, if you cannot control more than the color, logo, and some titles on your website – it’s not a website, it’s a template. We at atomni hold ourselves to a higher standard – we want to improve the human experience of the web; to design and produce information that increases comprehension and usability. Is your website designed from a template or from scratch?

About the Author
Nick Eubanks is the managing director of atomni, LLC, an innovative web consulting firm based near Philadelphia, PA, where they build websites from scratch, he blogs here and rides here. Check out www.atomni.net for more information on innovative web consulting. Nick Eubanks provides web consulting to the NFCA (FTC now requires that’s there).

Some CSS Perspective Part I

Posted on February 20, 2009 by Mike Angstadt

Css Explosion

Cascading style sheets are an immensely helpful tool in creating appealing designs and provide time savings during initial creation, maintenance, and enhancement. In the past few years they’ve also become a powerful ally to client-side processing, client management systems, as well as unique identification for hierarchal functionality. Many bleeding-edge applications of CSS leverage its abilities with scripting technologies to create interesting visual effects which lend themselves to positive user experience. Even with the majority of web sites in operation utilizing some form of CSS to manage the look of their site while keeping their mark-up lite, and D.R.Y.ing up their code; there are many ways in which CSS can bog down your site, make layouts and styling unintuitive, and in general make it cumbersome to manage, maintain, and enhance current features. Good, thoughtful design is the basis for a clean, well-factored CSS which is easily extendable and reusable.

D.R.Y. up Your CSS

Don’t Repeat Yourself. Whether it is source code or CSS the same concept applies, Continue reading →