BlogmyQuery – BMQ

You can be the best web designer in the industry, but if you do not know how to properly lay things out and create a great interface for mobile devices, you will fail in such a task. With that said, designing for mobile devices is quite different from designing for mainstream devices such as your PC as screen sizes and resolutions play a big part in how much space you can utilize, and how it performs.

Therefore, we cover eight useful interface design techniques for mobile devices that will help you get started on your quest for designing for mobile platforms.

Layout, Layout, Layout

The layout of the design is what sums it up for accessibility, usability, and overall readability for users on mobile devices. First and foremost, the design needs to be flexible across the mobile devices as all screen sizes and resolutions vary greatly between each and every mobile device.

What that means is, the content needs to scale in size as the screen size and resolution increases or decreases depending upon each device. The layout needs to be touch and key capable for users with touch screens, and for users without them. To go into more depth, let us dive into each of these aspects individually.

Order and Size

These are two major keys to a good user interface for mobile devices. When we mention order, this is referring to the order or sequence in which each element within design is laid out. For example, the order of buttons, text boxes, links, etc. This is actually very important for many mobile platforms for the way they react with your design. Therefore, assure the order of the elements within the design or layout are ordered in the way intended for use, and skip out on the fancy ordering techniques you may have for web design on mainstream platforms.

The size of content is also a big deal for many mobile platforms. Make sure the links and buttons are of fair size for those who have touch screen devices as each person’s finger varies in size, a good-sized button will help make it easier for all of your users to navigate about. You need to remember that the small link sizes or button sizes you make for normal website designs for mice and keyboards is a lot different than actually using your finger or a keypad to navigate around, so assure to cope for the differences.

Hierarchy of Importance

On a mobile device, screen space is a limited resource and thus you need to use it wisely. With that said, you need to eliminate clutter as much as possible, and one way to do this is to set your content in hierarchy format. Set content apart by playing around with the font size, weight, color, and the likes. You want the content to speak for itself rather than describe it before it runs. By doing so, you are eliminating unneeded elements and clutter from the layout and or design and increasing on needed space and using the space for quality content.

Lightweight

You need to remember that when users are visiting your website from a mobile device, they are visiting the website to view the content, and not the fancy layout you may have put together for non-mobile devices. Therefore, you need to eliminate all the unneeded fancies and stick to a lightweight layout that clearly presents content in an organized fashion.To put it into perspective, imagine yourself in a hurry trying to load a website and run to a meeting.

As the website is loading all sorts of fancies need to load, you need to scroll through a long header, and the likes. When you are in a hurry to obtain information before dashing to a meeting, you do not care for these fancies, you just want the information you were looking for. Similarly, users who visit websites on mobile devices are also after the content, and not the fancies you may surround it by.

Important Content

Your website can consist of a whole genre of goodies; however, before bringing everything to the mobile platform via the web, you need to eliminate some of this content, to make the website load quicker. Therefore, only port over essentials that make up your website and what your users are mainly visiting your website for.

Offer a Simple Navigation

Many mobile devices and platforms do not offer a browser with too many navigational features such as a back button. Therefore it is a good idea to offer these essentials in a simplistic form within your website’s mobile version for easier navigation, but do not over do it as it can slow down the loading time significantly, and effect vital screen space.

Do Not Use Tables

Do not use tables for your mobile website designs as the main structure for your design. They often do not look or work very well with many mobile platforms. Therefore, the best option to getting your website’s mobile version working and looking well across many mobile platforms is to utilize the basics of CSS to get the design styled.

Platform Detections

One great way to making the most out of your website’s mobile version is to detect different platforms and offer different versions of the website for them. For example, the iPhone platform is very flexible in terms of design capabilities that you can provide versus other platforms.

Therefore, if you want to make the most out of different platforms for your users, detecting their platforms and providing different content and capabilities for them is a great idea. Additionally, this also helps make your fallback mobile website version a lot simpler with less content to assure it can work on older mobile devices or platforms as well.

Overall, you need to understand the mobile devices limitations before being able to create and develop around them. This helps greatly to better understand the mobile platform and how your website’s mobile version may appear across these multiple platforms. You can also test your website’s mobile version or versions using simulators and or emulators sometimes provided by the platform developers.

The product is developed, the site is designed, it has content, it works, and it is ready to go! Well, many websites that are in this stage are not actually ready to go, but are closer to being ready for public release or launch.

As many of us, we tend to forget to perform many precautionary or pre-launch tests because either the project is quite large and many things are forgotten, or we become too excited to introduce our new flavor to the internet that we do not think about precautionary elements, but rather getting it out to the public and fast.

In order to help prevent precautionary methods or tests from being skipped, it is generally a good idea to make a nice laundry list on all the steps and tests you need to go through before deeming your website ready for launch as with any tangible products and goods. With that said, we cover five things that you generally need to do before launching your website in hope we are reminding you of that you may have forgotten to add to your pre-launch list.

Cross-Browser and Platform Checks

We all have a favorite browser that we tend to love, adore, and recommend to anyone who is not using it. What this means is, we generally tend to test our website design in our favorite browser the most than any other browser out there. In fact, this is one of the major issues we see with new launched websites that the design is sometimes messed up in the browser we use versus the browser it was mostly tested in. Therefore, visiting the homepage of your website in different browsers is not enough to deem it” alt=”" />

Not having the browsers installed onto your working environment is not a good excuse to not testing your website across multiple browsers. If you do not want to download each browser individually, there are a plethora of cross-browser testing suits and tools to fulfill the proper testing environment.

If you do not have a proper testing environment, it is a good time to get started on setting one up before coding your design as it is generally helpful to fix bugs along the way, rather than leave them to the end for fixing, which may lead to more troubles and bugs that you may have not seen or that may have been caused due to fixing other bugs.

Working Links

I admit, when I sometimes needed to link to dozens of tutorials or pages within my content I tended to get lazy on clicking every single link to assure they all work and lead to the correct location or page. However, I learned the hard way and faced having to spend more time going back and correcting the errors than just fixing them as I went along.

With that said, before launching your website, make sure you proofread your content and click on every link you provide within your website to assure they all link to the appropriate and intended locations as it will keep your website ranked higher, as well as you time in the long run.

Traffic Statistics

Before launching a website you need to make sure you get some sort of analytical program working to keep track of traffic and “hot spots” on your website. If marketed properly, we all know the most traffic we will get for a while would be on the first few days of launch, and not having any analytical program to keep track of how many visitors landed or where they are going on your websites good be a success or fail situation for your website as these few days are vital for improving your website to keep as many visitors as you possibly can.

Code Validation

I cannot stress enough on how valid code is just a key aspect that you cannot disregard when launching your website. There are so many benefits to valid code such as professionalism, better search engine optimization, and others, so do not disregard it, and spend the time needed to get all the tidbits fixed and to have that code ready.

To give you an example of accepting invalid code as a solution, let us say you are creating a tangible coffee mug that you plan to use every day. As you are creating this coffee mug, you notice that around the handle that you attached, there some holes and imperfections within the clay.

You know that if you do not fix the imperfections and holes that you will have a leak of coffee, making the mug unusable, so you decide to opt in to fix the imperfections to enjoy your cups of coffee in the long run. Similarly, these imperfections in the mug are like having invalid code, and you know that if you do not fix them, you may have troubles in the future with the many aspects discussed earlier. Therefore, try your best to get your code validated to future proof your website.

Printer Friendly

If your website is content based such as articles, tutorials, and the likes, make sure you create a style sheet specific for printing. The worst thing anyone comes across is printing out a website to only get the header and some bits of text rather than the full text, and less the header and advertisements. Therefore, in order to have open arms to the growth of your website and to not face this printing issue later on, create the style sheet and test it out in many different case scenarios, long or short, wide or not to make sure the desired printing result is what you get every time.

Overall, getting your website prepared for launch may be a long task, but it is worthwhile. While we covered only a few important things you need to make sure you get right before launch, we hope this encouraged you to whip up your own list, and to stick to it when you launch your next website.

Minimalistic designs are trending in today’s world. The reason for that is designers are looking and aiming at creating designs that are lightweight and friendly to the viewers yet elegant in its own way. Who would have thought it would be trending with all the delicious technology that is being rolled out such as CSS3 and HTML5.

For those who are creating minimal yet modern designs, we discuss six different elements or aspects that deem a design minimalistic.

Grid Based

Grid based web design is major key role in minimalistic design and there are reasons for that. Grid systems already provide locations for certain bits and widths and lengths and the like for all sorts of applications and content that are being implemented. Think of it as the blueprint of a design, everything is well laid out for you; all you need to do is add to it and give it flavor.

The nice thing about grid systems is they allow you to play with creativity as well as strengthen your layouts and design eliminating busy and chaotic designs that generally arise. Therefore, following the grid system is a key to minimalist design.

Light Background Textures and Patterns

Another piece of the minimalist puzzle is to have lightweight background textures and patterns. Remember, minimalistic design is all about simplicity and lightweight elements, which means complex patterns and textures are not part of it.

The background textures or patterns should have a light shade or color transition from the foreground, making it a real background piece where the eyes can focus on the content or main container and not on the fancy or busy background.

Clear Typography

If the typography is not clear and fairly large for easy reading your design will not technically be lightweight. With that said, keep the typography clear and readable and in some cases hierarchical for a nice clean minimalistic design.

Minimize Icon Use

Let us face it, many designs either use icons way too much or do not use at all, leaving pages overcrowded or less understandable. Minimalistic design is all about being lightweight to an extent, and thus, minimizing icon use is key, which means that icons should be used where absolutely needed and eliminated or minimal where optional.

White space is Delicious

Minimalism in design is all about the white space. No matter how “minimal” you make your design, it is not minimalistic without proper white spacing. With that said, use white space liberally across your design and around many elements as white space keeps things separate and ultimately better and easier to work withand read.

Modern Technologies

Many minimalistic designs today use modern technologies to provide their approach or “uniqueness” to their designs. What this means is, they used jQuery effects and the likes, very minimally however, to achieve certain goals such as an auto scroll back to the top of the page or the likes.

Now you may be thinking that this is complicating the design and loses the whole point of minimalism however, minimalistic design is all about using technologies and elements minimally but not eliminating them as a sole factor completely.

With that said, I am not encouraging the extensive use of jQuery effects, CSS3 magic, and the likes, however, using the technologies wisely can set you apart from other minimalistic designs keeping it minimal while introducing new techniques and flavor to the concept.

Registration before Checkout

Many websites will not allow their new potential customers to add products to their basket before registering to the service or site. This is something you want to stay away from at any given point in time as your users or potential customers can go elsewhere to purchase similar products. With that said, leave the registration process for the checkout process where it is more suitable.

Showcase

Now that we have discussed elements and techniques that build on minimalistic design, it is best to see these techniques and methods in action to better grasp the idea of minimalism in design. Furthermore, we showcase four designs that we think are top in minimalistic implementation.

DBushell

This design really incorporates minimalism while keeping modern technologies scattered throughout the design. The color contrast between the white and grey really pulls minimalism to the front while keeping nice touches of color about.

Toy NY

Toy NY is another great example of minimalistic design along with a mix of great animation using flash technologies. It proves precisely that minimalistic design is not all about limiting technology use, but rather how you use them.

Ah-Studio

Ah studio is just an amazing design implementing neat typography with great images and effects while keeping the entire design simple and lightweight. In order to keep it as simple as possible, they integrated all their pages or sub pages within one and using Javascript technologies, they implemented the navigation to scroll through the content to get to each individual page. Another great example that shows off minimalistic design while utilizing modern technologies.

Checkland KindleySides

This design utilizes flash technology to bring its design together. However, it keeps the minimalistic concept in check. It contains nice illustrations and animation effects while browsing about while it alongside keeps a nice lightweight minimal design throughout. A true piece of art that shows off what they do best in simple terms.

Conclusion

To conclude, minimalistic design is all about creativity and the use of technologies wisely in a way where the elements in use have blended in well enough to not make the design busy but rather minimal and modern.

Think of minimalistic design as having a clear canvas in front of you with a paintbrush. You can paint so many things on this canvas but what you choose determines whether your artwork is a masterpiece or whether it is something to set aside in your pile of other paintings. My point is, the amount of color, shades, elements, lighting, and others that you implement into your painting gives your painting a characteristic and classifies under many categories, and minimalistic web design is exactly that.

If you take all the available technologies and “paint” it together in a certain way, your design can be characterized as minimalistic or feature filled, or highly illustrated. It is how you use the available resources is what determines where it classifies. Therefore, in minimalistic design, let your creativity flow, but not exceed the canvas, or in this case, the characteristics or key elements that make minimalistic design what it is.

Grocery shopping, technology shopping, or shopping for living space, it can all be done online, and it is ever increasing in popularity. We all know that you can purchase a genre of items from the internet with new items being available for online purchase every day.

With that said, one of the greatest pet peeves of any online shopper is the difficulty to know what you currently have in your basket or to find the checkout link. Therefore, designing a usable shopping cart is all about usability and simplicity, as your customers need to be able to connect their shopping cart with the items they are obtaining.

Think of online shopping as grocery shopping. Before you walk into the grocery store you generally pick out a shopping cart or basket and make your way through the aisles, and on this shopping trip, you need 12 items.

You easily cruise through the grocery store and pick up the items you need and drop them in your cart or basket. Imagine not having the cart or basket with you or available as an option, you would have no place to put your groceries in which ultimately leads to you shopping less as your carrying capacity decreases dramatically.

This same principle applies to e-commerce. If you are shopping cart is difficult to find or is not really connected with the shopping or browsing experience, your customers will shop or browse less, which leads to less purchases. Therefore, never underestimate the design and layout of your online shopping cart or e-commerce website.

With that all said, we take a look at eight tips on designing usable shopping carts that your customers will appreciate and use more, increasing shopping length.

Mini Me

Online shoppers hate to have to go to a specific area to view their basket or cart to see what items are in it or not. This is like having your grocery basket in one corner of the grocery store and having to frequent back to it to drop in items or check what you already have; it is an inconvenience.

Therefore, creating a mini cart or a cart icon in the header of your website that displays the number of items in their basket that additionally links to the main cart helps customers and visitors feel connected with their basket, improving their shopping experience. With that all said, this mini cart should be disabled across the website where potential shopping can be done.

Simple Checkout Page

Having to fill out a checkout page every single time you make a purchase becomes tedious, however, a needed step. In order to break the step down to a quicker and easier less frustrating experience you need to simplify the checkout process with the following few tips.

Navigational Checkout

With just a continue button at the end of each form, your customers will not know when they will be done with filling out the information which could lead to cancelled orders. With that said, providing a systematic navigation will allow your customers to know where they are exactly in the checkout process, and how much longer they need until they finish. This method sometimes encourages customers to not cancel their order, and rather continue and finish the checkout process.

Remember User Information

Let us face it, we do not change addresses or locations as frequent as we do shop, and asking for the same address for every purchase they make is a tedious process especially for weekly or daily shoppers. With that said, instead of prompting your customers or users for the same information per order, provide them the option to store the information so at a later date, a click of a button can complete their purchase.

Make Things Obvious

One of the things any online shopper hates is having to search for buttons and required selection options. For example, I have used many shopping carts where I am in checkout, and I cannot locate the complete order button or I cannot find the shipping options to choose a suitable option over the “recommended” option.

Not being able to finalize a purchase because your customers cannot find the shipping options or complete order button is not a good sign. Therefore, make them obvious and visible to capture all potential sales and to help prevent loss of customers.

Keep Shopping

Most of online shoppers are not necessarily tech savvy, which means they become paranoid about what to do in certain situations. One of these situations is being in the basket after adding an item to it and no link to go back to the products list. Many online shoppers may assume that leaving the basket by clicking on a link in the navigation will clear their basket, which causes confusion and frustration in many cases.

Therefore, by providing a continue shopping link in the basket somewhere near the proceed to checkout link will keep your shopping cart usable and user friendly.

Registration before Checkout

Many websites will not allow their new potential customers to add products to their basket before registering to the service or site. This is something you want to stay away from at any given point in time as your users or potential customers can go elsewhere to purchase similar products. With that said, leave the registration process for the checkout process where it is more suitable.

Zero is the Magic Number

No, no it is not. Designing and or developing a usable shopping cart is all about usability and the ease to get there. Multiple shopping carts out there do not have a remove item from basket feature but instead confuse their users with just an update button and a quantity field.

This leaves a user guessing to enter zero in the quantity field to remove the item, or having them read a manual on how to use your shopping cart system, which they will most likely not read. Remember, using a shopping cart system should be as easy as putting items on a conveyer belt at checkout at your local grocery store, and not a challenge with a manual on how to fly a plane, if you get my drift.

Designers tend to be perfectionists, as everything they do has to fit in place precisely the way they intend it to be whether based on concepts or imagination. Most browsers tend to default to Times New Roman or the likes, which does not quite blend in with sleek, imaginative, and very creative designs.

With that said, creative designers always search for new fonts and techniques to improve and implement their favorite typography to their websites. Below we’re excited to cover 7 helpful tips on how to improve the typography of your websites.

Contrast and Color

Color and contrast are a very important piece to the typography puzzle. Many tend to keep typography color in the same color wheel as their main design is. For instance, having a dark blue background means they tend to set a light blue typography color. Sometimes this is an issue as the colors may blend too much making it viewable but rather difficult to read causing eyestrain.

For your readers or viewers, this makes them less inclined to read articles or to browse around your website for a longer period of time. Therefore, the color contrast between the background and the foreground text or typography should generally be quite significant to keep things apparent, like black on white, or white on blue.

Font Size

The font size is a very important key to keeping text readable, clear, and precise. A general tip is to keep font in a comfortable cushion where it is not too large that can cause unnecessary used space, but not smaller than a usual textbook font size.

A good way to emphasize your body content from your sidebar or side-focus content is to generally have the font size of the body content larger than the side content as your viewers will spend more time reading the body text than the side text.

Therefore, keeping the side content out of focus from the body content enables the viewer to easily browse and read about, this is also referred to as a hierarchy between content.

Emphasis

Let us look back at the hierarchy concept discussed earlier, by it, we can easily identify between many bodies of text. For example, if the largest text in size on your web page is up top, while other bodies of text are significantly smaller, your eyes will naturally land on the larger object, in this case the larger text size. What this means is, by emphasizing certain keywords or text blocks, you increase its visibility across that page.

With that said, throughout your body text, highlighting or emphasizing key aspects from your text helps keep your long text blocks clear and understandable. Additionally, it gives your design or website a nice touch to the typography, keeping it unique and organized at its best.

Proofreading

Proofreading in this case does not correlate to assuring your text contains correct spelling and is grammatically correct, but rather correlates to tying the misconnection between your design and the typography. Typography is not always about how it looks from a design perspective but also how it appears in clarity and readability when it comes down to actually reading the text.

Many usually tend to post a dump of the lorem ipsum dummy text and make it look good at a design perspective, but do not actually go in depth to the reading level to read the text to understand if their implementation of the typography is actually suitable and comfortable for reading. With that said, do not just style and layout the typography based on what looks good for the design, but also assure the typography is clear, well spaced, and organized for the general audience to easily read through.

Too Many Fonts

I have seen this as a commonality across many websites as if the designer was a kid in a candy store and decided to pick out one of each to put in their baggy. We all have bundles of favorite font faces and we tend to use many of them across many different projects. However, using multiple font faces causes confusion to your reader, as each font face has its own style for each character, making it difficult for them to read through. Instead, stick to one or two font faces across your website, and use your favorites for other projects.

Good Whitespace

Cramming everything together is a viewer’s nightmare, let alone a pet peeve to any designer. Leave a good whitespace gap between sets of text to keep other bodies of text the viewer may not be reading out of focus from what they are reading. This generally helps viewers from running on to different segments of text or from unintentionally skipping lines. Remember, spacing is key to good readability, so use whitespace wherever needed.

Use Font Stacks

You may have a favorite font face and decide to use it on your website, however, you need to understand that not everyone may have that font installed on their system or device, thus, it will not display properly. Instead, use CSS’ font stacks rather generously as a fallback to your viewers that do not have the font you originally intended the website to use.

A good fallback font would be something similar to what you implemented for utilization, and a fallback to that would be a font that is generally used across most platforms and devices. It is a great way to assure your website’s typography does not significantly change across different platforms and devices, leaving your typography exactly or close to the way you intended it to appear.

Overall typography for the web is an interesting topic with many tips and DO’s and DON’T’s arising across the web. The main thing to note is that the way the typography appears should be user friendly as well as compliment your website’s design. This includes color and contrast, size, font face, and the likes. Do not overdo it and complicate it with the typography, but also have it fit in with your design well enough for it to look great as well as be great for your viewers.