Why is it so important to build for the future now?
Mobile site design has barely grazed the capabilities of today’s mobile devices, let alone the features to come. Most people haven’t even begun to comprehend the unique opportunuties of web design when it comes to mobile.
Handheld technology companies have anticipated this future shift by building extremely sophisticated tech into devices. Now, web development is beginning to take advantage of them. There are staggering possibilities, just waiting for us to tap into them.
Most new smartphones already come standard with gyroscopes, accelerometers, pressure sensors, proximity detectors, fingerprint scanners, and more. Combine those with cameras, microphones, and GPS capabilities, and you’ve got a wheelhouse of powerful tools to tap into and engage users. The ways designers will do this is limited only by our imaginations.
For example, most devices can already detect the weather and store users’ locations automatically. Mobile sites could customize displays to the weather in a visitors’ zip code- showing your company’s swimsuit inventory in a hot climate, for example, or your winter coats wherever it’s snowing.
It’s not unthinkable that in a decade, devices could even be synched with users’ pulse rates or brainwaves, allowing servers to load the site version most likely to engage users based on their current mood. We’ll also see more and more stunning device hardware- 3D printing technology, for example, could even allow your site to project physical objects into user realities.
This might sound like science fiction, but the hardware included with today’s smartphones already has far more possibilities than mobile web design has evolved to take advantage of. The next few years will see sites getting more interactive and user-specific in ways most consumers never imagined possible.
Before too long, websites might pop complimentary sticks of gum out of a port on your smartphone! Just kidding….or are we?
Mobile tech advancements are happening faster than we can build for them. MagicLamp can get you ahead of the game with an professional mobile approach that makes it easy to adapt to tomorrow’s frontiers.
Are we really entering a post-PC world? Surging numbers of mobile users certainly make the future look that way. Mobile will soon become the standard web browsing experience- your “main website” will be your mobile site! This seismic shift means it’s crucial to build excellent mobile sites now to offer mobile visitors everything your desktop version delivers- and maybe even more. A solid mobile design is essential to prepare your company for the next big leaps in technology, too, which will focus heavily on mobile possibilities. You probably already know your mobile site should include something called responsive design. What you may not know is that not all responsive design is the same.
Just a couple of years ago, mobile-compatible sites were rare. Most administrators didn’t even have mobile versions of their sites- users had to deal with frustrating load times, painfully tiny text, awkward oversized navigation, and some non-functional features if they wanted info on the go. Development lagged behind hardware, reducing mobile browsing to a desperate measure most only resorted to in a pinch, maybe for quick driving instructions or business hours. Things have changed quite a bit since then!
Mobile users are everywhere, and they no longer have patience for anything less than full mobile optimization.
Mobile sites of yesteryear were not very much fun >
Users expect pages that load lightning-fast and give them exactly what they’re looking for, front and center. They expect mobile-specific features that automates much of the work for them, detecting location, device type, preferences, and more. They won’t poke around your site, pinching and zooming to find what they need. They’ll get frustrated and go to another site with better mobile design.
These users expect to meet objectives in even less time than PC users, in a simpler format, on an even smaller screen. This calls for some creative new approaches made just for mobile.
Some developers will approach your mobile site by delivering a great-looking desktop version and then simply “scaling it back” for smaller screens. They might use a plug-in to automatically condense your info, or resize and rearrange your layout to fit, or even cut out crucial features to produce a “lite” version of your site. These are outdated approaches to mobile design. Not only do they consume more work hours (and presumably more cash) than current strategies, they also weaken your site overall.
Flaws with these Common Mobile Development Strategies:
1) Mobile sites shouldn’t be conceptualized or executed as watered-down versions of the full site. The WC3 recommends a “One Web” approach to design today, which means “making the same information and services available across all device platforms,” as much as reasonably possible.
Mobile is a huge design opportunity- not a downgrade-
and the future belongs to those who realize it.
2) Mobile users are not just desktop users on a smaller screen, and simply resizing your desktop site won’t cut it for them. They have different sets of expectations, needs, and priorities. They use the web differently and need sites designed specifically for them. Starting with the question “What do mobile visitors want to do on your site?” is key. A good designer will know the answers and get them right in front of your customers.
Mobile-friendly doesn’t just mean your site will load on a smartphone or tablet screen; it means your site is responsive, not only in terms of size or layout, but responsive to actual mobile user needs.
3) Great mobile design isn’t something you tack on to the end of development. Mobile design that works- gets you sales and prepares you for tomorrow’s web- is embedded in the development process from start to finish.
Mobile design is a huge design opportunity, not a downgrade, and the future belongs to those who realize it.
So What’s the Smart Way to Design for Mobile?
There are three basic approaches in professional mobile design today. Each has their own benefits. MagicLamp can help you pick the one that best fits your particular goals.
Responsive Web Design is the most common one web approach. It uses CSS queries to modify the presentation of a website based on the device display.
Benefits: Designers can use a single template for all devices, and just use CSS to determine how content is rendered on different screens.
Limitations: Testing can be a tedious process and may require some work to get site sections to size cohesively, otherwise sites can end up looking like puzzle pieces that don’t fit quite right.
Responsive sites can be sluggish in loading and performance. Why? Because they load media templates for all possible devices at once, and users have to wait for every page element to load before they can browse. This can be mitigated by incorporating a mobile first approach, where the mobile use case is prioritized during development. However, this often entails a lengthy development process, which can mean rebuilding your site from the ground up. When it’s done, though, you’ve got a really solid foundation for future mobile development and a site that’s truly responsive.
See MagicLamps’s work on these fully responsive client sites: Aptare HearUSA
Client-Side Adaptive Design can deliver experiences targeted at specific devices and contexts. Adaptations happen on the client side, right in the user’s browser.
Benefits: Client-side adaptive uses JavaScript to detect device types and display your site in different ways depending on device capability. For example, smartphones with retina displays will receive retina-quality images, and phones with regular displays will receive standard quality images. You can even target your marketing to specific device models, offering iPhone users a site that’s dialed into conversions for apple users, for example.
Another big advantage of client-side adaptive over responsive: you don’t have to rebuild your website! Your developer will simply build an adaptive layer on top of your existing content and code base. Testing is also a snap with client-side adaptive, since you’ll use one set of HTML and Java templates across all devices.
Adaptive design also performs better and loads faster than responsive, because only the required resources are loaded by the device. CDN networks like Akamai and Edgecast can use most of their caching functionality without disrupting user experience.
Limitations: Client-side has a higher barrier to entry than responsive. You’ll need a developer with advanced skills and a solid grasp of JavaScript. You’ll also need to maintain and update your client-side adaptations regularly, since they’re a kind of layer on top of your existing code base.
See Client-Side Adaptive in action:
Threadless iDeel
Server-Side Adaptive makes the web server do the heavy lifting of detecting a user’s device and loading the appropriate template. This approach goes beyond customized experiences for devices, so that you can even dial marketing into specific user behaviors and preferences.
Server-side adaptive features multiple device-specific templates, but unlike responsive, only the necessary template is loaded to the device, eliminating the slow performance issues responsive can suffer from.
Benefits: Server-side adaptive utilizes distinct templates for each individual device model, allowing for even greater customization, and it keeps device-detection logic on the server, making for lighter mobile pages that load faster.
Many server-side plugins are available for common CMSs and eCommerce systems like Magento.
If you’re looking to invest in an ultra-customized user experience with high performance capabilities, server-side adaptive is the way to go.
Limitations: When mobile user agent detection is performed on the server, many common caching mechanisms deployed by CDNs need to be turned off. This can result in slower user experience for both mobile and desktop users.
Server-side requires the most extensive upfront changes of these three approaches, including significant upgrades to your back-end systems, which can require hefty development time and investment. Managing multiple templates also raises ongoing maintenance costs, and performance can be impaired when servers are under heavy traffic.
With so many different capabilities to compare, it can be tough deciding which approach is right for you on your own. MagicLamp developers have experience with every type of mobile approach, and we would love to tell you which one would fit you best and why. Tell us about your project and get a free consultation now.
Back in 2010, Google made big news by releasing their own open source web fonts. Starting with just 19 typefaces, it was a huge improvement for developers and designers who’d been stuck with the same 9-10 web safe typefaces for their font stacks. By 2012, Google Web Fonts (since renamed Google Fonts) had grown to over 500 font families. Adobe typekit became popular around the same time, offering even more web type options. Web creators were no longer limited to a handful of body text fonts, and we all basked in the happy glow of digital progress. Unfortunately, there was a hitch. Most web designers work on Macs, known for their pristine graphic rendering. While the new fonts were looking great on designers’ Mac screens, the letters appeared very differently on the average user’s PC: they were highly pixilated, blurry at the edges, and “crunchy-looking.” Once developers realized they should be testing the sites on PCs, they were shocked to see their new typefaces looked, frankly, awful.
The problem wasn’t with the fonts themselves- PC browsers just weren’t advanced enough to display the new typefaces cleanly. Internet Explorer was the first to optimize character rendering; soon, open source fonts looked better in IE than any other browser. This still wasn’t very crisp, but it was better than everything else out there. Firefox quickly followed suit and improved HTML text appearance even further. The rendering you see in Firefox today is the standard that set the bar for text rendering over the last few years. Chrome’s text looked jagged and pixilated in comparison until just this August, when Google’s Chrome 37 update raised the ante again. The update came with DirectWrite support for Windows, which transformed HTML characters into something crisper and cleaner than PC users had ever seen before.
Same Fonts, Different Browsers: Firefox and Chrome’s text rendering. (Firefox: Left, Chrome: Right)
Looking at these Chrome and Firefox text displays side-by-side, you can see how Chrome text is distinctly crisper and more resolved, looking a lot like the rendering on a Macintosh, in fact. Chrome’s new super high-resolution type display is a a huge leap for browser technology. Suddenly, all fonts look incredible, no matter who’s supplying them.
We offer the complete inventories of Google Fonts, Adobe Typekit, and Fonts.com for our clients’ web projects. The foundry previews are real HTML, not bitmaps, and they show you exactly how your fonts will look. The right type sends a cohesive message about your company to customers, telling them exactly what “personality” your business has. We also offer expert font selection advice if you’re having trouble deciding or want a second opinion. Between these resources, you get an incredibly broad typeface selection- a tool that gives you a fresher-looking site that stands out from the rest.
Graphics and Iconography with Open Source Glyphs
The evolution of typeface display technology actually gives us a powerful opportunity for rendering graphic elements, too. Recently, we’ve actually started replacing traditional graphic elements with HTML glyphs, using characters from font sets as symbols, graphics, or even images. You see glyphs like the TM and copyright symbols implemented this way traditionally, but the level of clarity in web text display now opens up a whole new world of possibilities.
Advantages of HTML Typeface Characters as Graphics:
Web font characters come ready to go as live, linkable text.
Faster loading than traditional JPG images.
Completely resizable as pixel-perfect vector entities.
They don’t require any special coding structures, like image files.
HTML glyphs are searchable by engines for SEM keyword optimization and visitor queries.
Many font packages are specifically designed to use as icons or ornamental elements, targeted to specific graphic styles, like the Adorn typefaces.
Now that browser technology has caught up, font-based graphics look just as sharp as any traditional graphic.
They cut design time and costs down significantly.
We can also create HTML iconography through typeface packages now. Whether you’re developing a web app, branding a new product line, or want some simple icons for your homepage navigation, we can offer you a whole new playground to experiment with.
These techniques not only open up possibilities for designers and creatives, they also empower developers, who can now use typography instead of graphics to stylize web apps, create brand identities, and unroll fresher-looking sites. Having access to all of these symbols opens up a whole new field programmatically. Instead of designing a graphic, resizing it to optimize loading times, coding it for html, and uploading it, programmers can literally just hit one key, paste in a character that’s already an html entity, and keep on trucking.
We’ve come a long way since Wingdings!
Interested in updating your site’s typefaces? Want to see what we can do for your icons and graphic elements? We would be happy to give you a free consultation. Contact us today.
Faceted classification will transform your site into an experience visitors love, but it can achieve even greater feats in the hands of business owners and site administrators.
Faceted classification isn’t just about a polished presentation for your guests- it’s also about what you want to do as a merchandiser. On top of making searches quick and easy for customers, faceted classification opens up a world of possibilities for you. The more ways you can slice and dice your product catalog, the more power you have to implement persuasive, exciting merchandising strategies. Just like customers can filter in or filter out particular facets, you and you staff can use the same system to filter items for promotional codes, new ad campaigns, clearance sales, individual discount expirations and more. With a few clicks, you could group your summer inventory on a special page, offer a discount on all items from a certain designer, set up a limited-time coupon code for any of your starter kits, or whatever makes sense for your company’s objectives at the time. When products are organized and classified this way, you have the freedom to merchandise in virtually endless ways.
Faceted classification certainly improves the user experience at the front end, but it also gives you tremendous power to merchandise effectively from the back end using the same built-in structure of information. MagicLamp builds this system into your website, letting you take advantage of the simple elegance of effective web architecture. This kind of merchandising is actually more flexible and precise than traditional storefront selling!
Want to experience MagicLamp’s faceted classification firsthand? Contact us today to set up a demo.
There’s more than just one kind of faceted classification. In the world of blogs, authors use labels called tags you’ll see in a list or “cloud.” Tags are actually another form of faceted classification. Bloggers tag each article with words that describe the subject, making it easy to bring up posts with shared themes together. Tags can be very useful, but they’re also free-form entries, which means bloggers type in each tag by hand. This can create problems if the tags deviate accidentally, even slightly. Tagging one blog post under “pet snake” and tagging a related post “pet snakes,” for example, will break down the integrity of the site’s organization. If you have multiple authors working on the same blog, things can get even trickier. For the system to work right, everyone has to tag facets with exactly the same word or phrase, otherwise it’s very easy to lose standardization, which prevents reliable navigation.
MagicLamp doesn’t suffer from these problems because of the way we implement our systems. For our eCommerce framework, we use pre-defined labels instead of free-form fields. Users simply click on the filters they want to apply, leaving no room for keystroke errors or mislabeling.
Our faceted classification systems also work faster than others. When you look at the way platforms like WordPress and Magento implement faceted classification through tags, you can see how the limitations of those system will slow down processing more and more as you develop your site and the data grows. Click a tag for “widgets,” for example, and WordPress does a search across all of your blog entries in the text field called tags for any instances of the word “widgets.” Even for a computer, going through every single blog entry word-for-word can take a long time if you have a lot of information there! The same thing can happen with eCommerce if your product information is organized like a Magento site. MagicLamp sites are different. Since we pre-index every facet, they all become independent vectors, making searches instantaneous. Heavy user traffic is no problem at all.
Accuracy of Classification = Integrity of Navigation.
Your web developer should be able to pick the best style of information architecture for you- one that makes the most sense for your particular business’ merchandising goals and style. At MagicLamp, we’re careful to select the systems that fit best for your type of inventory, giving you the power for optimum results!
Orange, Water-Resistant, Small, USA Made, Remote-Controlled…
Every quality of an item is something we call a facet. How do you organize all that information?
Faceted Classification is something we build into every one of our eCommerce sites. It’s a powerful feature that makes it very easy for your customers to find exactly what they’re looking for on your site in a way no other system can. Products aren’t just organized by category, or sorted according to one attribute, like color, for example. Instead, each item is coded for every attribute, or facet, that a visitor might be interested in.
If you’re an online hat retailer, this means your customers can not only look for blue hats using a search based on a color facet, but simultaneously search for hats according to style, materials, level of sun or wind protection, or even sizes current in your inventory. They can also search with any combination of these facets to find just the right hat. They can include or exclude any qualities they like. If a large, blue, cotton, US-made, waterproof hat with a brim is what they want, they can look for those exact features with a few clicks on the filter categories. Our faceted classification organizes your site like department stores organize merchandise. Customers can navigate inventory effortlessly and intuitively.
In a brick-and-mortar retail store, every item has certain qualities or attributes- color, name, size, SKU number, function, price, or manufacturer, for example. Coding these facets into our eCommerce sites makes a big difference in what both you and your customers can do on the site. If you walked into that retail store, you’d find things grouped together in a way that makes it easy to find them. Websites can do the same thing, but what happens when you have some items a customer might expect to find in two or more areas of the store? In a physical shop, you could simply place the product in both areas. On the web, it can be trickier. One of the first problems developers run into is code that only allows each product to be placed in one category, or virtual “bucket.”
Our way of implementing faceted classification gets your products cross-indexed so you and your customers don’t miss a thing. If a customer searches for a V-neck shirt, for instance, you want your site to show them all of the V-neck shirts in your inventory. If you have one blue-colored V-neck that gets coded for the facet “blue,” but not the facet “V-neck,” your customer is probably going to miss it in their search, and so will you when you need to bring up those styles for administrative tasks. With our system, the shirt would be indexed in both categories and any others that applied, basically “cross-listing” it, so it would be sure to come up in a search for any of its facets.
< An example of detailed
faceted classification for hats
on Amazon.com
On the FACE Stockholm site, we designed a product catalog where customers can browse with a broad range of sorting options. Here’s how faceted classification works in the Nail Polish section of FACE:
Visitors can see the complete polish inventory in the “Full Spectrum” view, sort polishes by finish (Cream, Shimmer, Sparkle), organize them in order of popularity, or simply list them in alphabetical order.
“The less time and energy your
customers have to spend navigating
your site, the happier they will be.”
How many times have you felt perplexed in front of a huge shelf of products in a store? When displays don’t seem to be organized in any particular order, it’s hard to find what we want. A website with well-implemented faceted classification is actually easier to navigate than a physical retail store!
In the online world, the less time and energy your customers have to spend navigating your site, the happier they will be. A site without our kind of faceted classification is frustrating- shoppers have to invest extra attention sifting through more of your inventory than they want to. Whether or not your site has a clear, effective organization structure can easily mark the difference between a site customers return to and one they’ll avoid!
In modern web design, the more streamlined, focused experience you can give your visitors, the better your results. Far from a niche style, Minimalism is actually key to any good professional website today.
Web design is all about appealing to your customer’s eye and drawing them back again and again to your site. In eCommerce design, the ultimate goal is getting your product purchased. A well thought-out, appealing design will keep your viewer engaged, while supporting the credibility of your product, site, and business as a whole.
As web designers, we have seen many designs become overworked, under-planned and simply unfocused. An experienced web designer learns to balance design versus functionality and simplicity versus gimmicks. While staying at the forefront of web trends is a goal for any site, an e-commerce site’s main focus has to be getting the consumer to purchase the product.
Remember websites in the early 90’s? Busy, info-packed layouts with bright flashing colors that lit up your screen like a disco ball? Although we find those early designers’ “more is more” enthusiasm for the brand-new online world a little endearing, web design has come a long way since. Research shows us that less really is more when it comes to engaging visitor attention, and success online is all about how your site shapes people’s focus. Caption: If your site still looks like this, it’s time for an upgrade!
Minimalist aesthetics are a popular design strategy in e-commerce today. The style directs customer focus to the product immediately, eliminating any clutter that would distract the viewer. Minimalist design allows the product to become the focal point of the site. By breaking a design down to the bare essentials, you can produce a clean, but very functional site. A good minimalist designer knows how to use white space, create balance and contrast, and precisely focus the content. These types of designs guide the viewer’s eye- not to flashy ephemeral web trends, but the clear-cut star of the site, the product.
Companies sometimes shy away from minimalist designs for fear they might look unfinished or too simple, but when they’re done right, minimalist designs are some of the most beautiful, classic and engaging sites on the web.
One great example of minimalist design is MagicLamp site Odin New York. By simply showcasing their products through high quality imagery, Odin created a storefront that exudes the high class, fashion forward image it’s known for. With simple lines, clean typography, generous white space and outstanding product photography, Odin uses clean, minimal design to focus on what their site is for: selling their products. Another excellent example of using minimalist design to focus on the end goal is PosePrints. PosePrints created a cohesive site aesthetic with careful use of white space that draws the eye to the product focal point. Using a simple monochromatic color scheme, the only flashy items on this site are the products themselves. The stationary card images are the color and the “pop” that stand out on this site. PosePrints’ design gives the customers a sense of style without distracting them from the product itself.
When it comes to web design and minimalism, remember “less is more” and sometimes less can bring you more…revenue.
Digg.com is a social bookmarking site that allows users to share stories, videos, and digital photos with other users of Digg. It’s a great way to find out what’s happening in the world of technology, politics, science, sports, or just about any topic – particularly obscure stories the main stream news may not be pushing or covering.
Digg can be an excellent way to build buzz about a big news story, funny video, or hot technology. Here’s how Digg works. You register for Digg and “digg” stories. “Digging” a story is like voting on it. The more “diggs” or votes a story gets, the higher it moves up in the ranking. The goal is to get your submission on the front page. Front page stories typically have a minimum of several hundred “diggs”, sometimes even a thousand if the stories on the front page are hot enough. So, if a submitted story gets 300 “diggs” in one day, it can make the front page, where it gains even more exposure, which can in turn lead to more “diggs”. And exposure is the key to building your brand, right? In theory, yes, Digg seems like the perfect place to submit information about your company, be it press releases, brand videos, blogs, etc. Unfortunately it is not. Below are several reasons why Digg will not help you build your brand.
1. The Digg Network – The Digg network is vast, with hundreds of thousands of users. While on the surface that sounds fantastic, and in theory it is, those hundreds of thousands of users may not ever see your story because there are millions of stories, videos, and other items that they are being asked to look at. There is simply too much information for everyone to consume at one time.
2. Shout it out! – The only way to alert the Digg network to the story you have either submitted or would like to share with other Digg users is to send a “shout” to your mutual friends network. This is fine and dandy, however your mutual friends are also receiving shouts from their mutual friends, who are receiving shouts from their mutual friends, who are receiving… you get the picture. One could literally have a thousand “shouts” waiting in their inbox. That’s a lot of stories to read and “digg”. Plus, many times shouts go unheard simply because of the volume of shouts your mutual friends are getting. And even if your shout doesn’t go unheard, there’s no guarantee your mutual friends will “digg” it.
3. Friends – As I mentioned earlier, there are hundreds of thousands of users on Digg. Well, there is only one sure fire way to get people on Digg to “digg” your story and that’s to become a fan of another Digg user. Seems simple enough, so let’s try it. Let’s say you see lots of stories posted by a user that you like, so you decide to add them as a fan. That user then gets a message saying you have added them as a fan. They can either choose to reciprocate by adding you as a fan (which makes you mutual friends) or do nothing. Here’s the problem. If they do nothing, you are simply a fan of this person and you can’t share a story with them. Since you can’t share a story with that person, you can’t get them to “digg” your story, which means lost opportunity to get your submission on the front page. You could literally become a fan of hundreds of users and never be able to share your stories with them. What’s worse is out of all the hundreds of people you added as fans, only 30 or 40 might be a mutual friend. That is not nearly large enough to get the “diggs” you need to get your submission on the front page.
4. Cool Factor – You have built up a good network of mutual friends. You have a video you want to share with them that you think is cool. Well, cool is in the eye of the beholder. Your mutual friends may view your video and not like it enough to “digg” it. It really can be a crap shoot at times.
5. Multiple Submissions – Okay, so the stars have aligned and you have everything you need to get the story you are submitting to Digg on the front page. It’s a really cool video and you have hundreds of mutual friends that you know will “digg” it. Your set and ready to go. You submit the story and guess what? Someone has already submitted the story. Digg will always prompt users during the submission process to limit multiple story posts, but it doesn’t always stop people. Sure, you could turn around and simply “shout” the existing story to your friends network, but what if you’re trying to build brand for your company and there are several submissions? Well, on the positive side there have been several submissions with several “diggs” attached to each submission, but the negative side is those several submissions with several “diggs” each aren’t cumulative. So yes, a few dozen people may have “digg-ed” your story, but without the “diggs” being cumulative, you can’t build the ranking you need to get on the front page. And without you getting your submission on the front page, you’re not reaping the benefits of Digg.
I’m not hear to bash Digg. I love Digg! There is just so much random nonsense to read about and so many videos with insane stunts or bizarre antics to watch that I just can’t get enough. Plus there’s actually a ton of useful information too. It’s just not the place to build your brand. You are excited about your product, but the users of Digg are not. They don’t care about your blog. They don’t care about the technical achievements your company has discovered. Unless you work for a large company like Sony, Microsoft, or any other corporate giant that have highly sought after product that people will “digg” in a heart beat, your chances of success with Digg are slim to none.
Problem #3: Layout wraps columns, even when everything is supposed to fit
Solution: specify width and set overflow: none on all columns; this keeps potentially offending elements inside the floats from “breaking out” and thus breaking the layout
Lastly, I will reiterate a point I have made before: when/where possible, stay away from padding (especially left/right).