10 Responsive Web Design Do’s and Don’ts

Responsive web design (RWD) seems very appealing but venturing into the world of multiple screen sizes, media queries, and mobile-first can be daunting. Fear not, however. JDM Digital has put together a list of the top 10 Do’s and Don’ts to guide you through the treacherous waters of modern responsive website and email design.

The Responsive Web Design Backstory
“Make my site mobile-friendly!” It’s a pretty common demand in today’s post-PC world. For the first time in 2014, comScore reported mobile web browser had eclipsed desktop browsing globally.

google-responsive-devicesSure, you could build an iOS app, an Android app, and a Windows 8 app to browse your site, but each of them will cost around $8K and you still require users to download said app. Get real.

Responsive Web Design (or RWD, for short) is all the rage precisely because it’s just good old fashioned HTML with the CSS you’ve come to know and love and a little magic using something called “media queries”, introduced in CSS3. Media queries simply allow you to query the screen size (the ‘media’, if you will) and update the style (CSS) in real time.

That means, you can have two columns that are 50% of the width of a screen floated side-by-side until that screen is smaller than, say, 768px. At widths smaller than 768px, the columns are both 100% wide and stacked one on top of the other. That’s responsive web design in a nutshell.

10. DON’T Do it Because it’s Trendymobile-image
Responsive web design is all the rage, but don’t do it just because it’s trendy. Think about how your user will browse your site on their mobile device and, perhaps more importantly, WHY. Are they looking for your dinner menu, your office location, your phone number, reading your awesome blog, looking for examples, researching vendors?

Whether mobile, tablet, or desktop, your website visitors don’t care about trendy whiz-bang. Get to the point.

09. DO Use Large Fonts
On a desktop, you’re used to reading content in 12-point font on a 22-inch monitor. Mobile users can’t read that tiny font on their phones. You need to use much larger font sizes. In fact, increase your smallest font size to something you think is borderline TOO big. Then, add 1 more point. As a rule of thumb, yourfont size should be no smaller than 16px (if you’re still using pixels for responsive typography).

08. DON’T Hide Content for Mobile
There’s no need to punish mobile users by hiding some of your content or, worse, showing a stripped-down version of your website. Stick to a mobile-first design strategy (design for mobile, THEN scale things up for tablet, laptop, and desktop devices). More on that in #1, at the bottom.

07. DO Keep User Experience (UX) in MindMobile-Vs-Standard-Websites
Just because you “can” do something, doesn’t mean you “should.” Keep the user in mind. Would this functionality be beneficial to THEM? Remember, your visitors don’t give a sh*t that your site is responsive. They may not even know what that means. For a little extra credit, check out Google’s 3 Things.

06. DON’T Clutter the Design
From garbage sidebars to multiple navigation planes, you’d be surprised how much of your website’s UI you can do without. It’s a painful process (trust us, we know), but try to remove HALF of everything on a given page. Then, remove HALF of what remains. That’ll keep you designs clean and clear.

05. DO Keep it Light and Fast-Loading
Even with 4G mobile networks covering most of Canada and the U.S., mobile devices are still far slower and bandwidth more expensive than desktop. You need to keep your responsive site as light as possible. Keep in mind, the biggest problem with responsive is that it’s not (yet) adaptive. In other words, that giant background image on your home page is the same if I’m viewing it on my 35-inch HD desktop display as on my tiny iPhone 5. A truly optimized asset is an asset never downloaded.

04. DON’T Use Tiny Links
A mouse was DESIGNED for great granular control and a finger is a pretty horrible pointing device. Keep your line-height at least 1.4 and your body font size at least 16px. Buttons and navigation links should also have at least 8 pixels of padding and 15px of margin around them, for those of us with fat fingers.

03. DO Test, Test, Test
Designing a mobile site requires prioritization. The only way to prioritize is by measuring and testing your design to ensure they support these critical tasks. Look into User Experience testing for real-world tests on your designs while still on a staging server. One of my favorites is UserTesting.com. They also have a free trial version called “Peek” for those of you a little apprehensive about UX testing.

02. DON’T “Build the Lily”
Something as beautiful as a Lily doesn’t need to be recreated. Try to adhere to certain design conventions whenever possible. That’s what people are used to seeing and interacting with. Google, for one, came up with their own UI design convention they named “Material Design.” Not that “Material Design” is the end-all and be-all. Just stick to the classics, unless you’ve got a really good reason to depart from those conventions. Even then, remember, the Lily was perfect before you tried to improve it.

01. DO Design “Mobile-First”
We’ve mentioned this before, but I think it bears mentioning again. Don’t start designing your new mobile-friendly site for desktop and then try and cram it into a mobile device. You need to do it in reverse, ergo, “mobile-first.” Start by designing a full-featured responsive website for mobile and then scale it UP for tablets, netbooks, and desktops. As you move up, your images could get larger (loads a separate, larger image src), your page could get a little heavier (if it must), and your navigation could return to something a bit more “mouse-friendly.”

love your website

4 Steps to a Seductive Website

Make visitors love your website by using these 4 expert tips

Illustration by Ben Jordan: https://twitter.com/benjordan

Illustration by Ben Jordan: https://twitter.com/benjordan

The arts of seduction and interaction design go hand-in-hand. Your goal, after all, is making the user fall in love with your website or application.

The same principles of courtship apply: trying too hard repulses the user, while not trying enough will make them pass you over.

In this article, we’ll show how to take advantage of human psychology and emotional design to create an alluring charm to your interface.

1 – Create an inspiring flow

An alluring interface is designed to put the user in a state of flow — a mindset in which they are so focused on interacting with your product, they forget the rest of the world. Mihaly Csikszentmihalyi, in his book Flow, explains that this is the optimal experience because the user focuses on their work, and the interface becomes only an invisible hand guiding them along.

The way to inspire flow is to constantly and rewardingly engage the user — “seducing them,” in other words. To create such an experience, at least two factors are needed:

  • Control — The user must feel in control the entire time. This is why seduction favors subtlety over aggressive approaches.
  • Achievement — Obviously, the user needs a purpose for using your product, whether business or pleasure. Beyond the main goal, the sense of achievement can be bolstered by positive and well-placed feedback from the system.

While a simplistic viewpoint of the much more complex field of interaction design, creating this “flow” in your users is a nice, simple goal to chase throughout the rest of the design process.

2 – Understand your users

banking_misconception2The first step is understanding as much as possible about people.

This list of observations about individuals as a whole leads the way to interaction designs that give people what they want. From this list, we can derive a list of elements that will make your website or app more attractive to the common person.

  • Social Proof — Most people follow popular opinion, so if your product seems popular, its perceived value increases. If you don’t have the numbers to parade openly, even a few considerate testimonials will help.
  • Scarcity — Just like an exclusive club, scarcity adds the allure of something not everyone can have. Offering limited promotions or even a private, invitation-only beta version of the product can generate more excitement from non-users than the users themselves.
  • Recognition over Recall — As we explained in Interaction Design Best Practices, the more the user must think, the less they’ll enjoy the product. Design your interface with recognizable patterns so users don’t need to relearn basic controls. For example, link text should be labelled the same as the headlines of the linked content.
  • Sensory Integration — Stimulating more of your users’ senses will engage them deeper. Aside from visuals, this can only apply to audio effects/music, or some creative use of gesturing in mobile devices. For example, the Wunderlist app plays a pleasant bell chime when you complete a task.
  • Visual Superiority — While sensory integration is welcome, vision remains the dominant sense. Design your interface along a solid visual hierarchy so that it looks as good as it functions.

Because so much of interaction design concerns human experiences, you must design for what the brain cares about (which is different than what the conscious mind cares about). To design for a brain that’s evolved over a long period of time, you’ll need to incorporate beauty, visual variety, and of course emotion.

While we’re on the topic of the human element, let’s explore emotion in interaction design. First we’ll explain the difference between usability and enjoyment, and then we’ll discuss some practical tips for designing emotional experiences.

3 – Balance usability and enjoyment

Emotional stimuli make the difference between a product that’s loved, rather than simply usable. Anders Toxboe, Designer for Bonnier Interactive, makes the case that, while usability will satisfy your users, the satisfaction will be short-lived. To be loved, an interface requires more than functionality.

As you can understand, a homeless person who comes into some money will likely spend it on food or shelter instead of a psychologist appointment — physiological needs hold more weight than self-actualization needs.

Evidently, usability goals are still core to interaction design. But once they are fulfilled, there remains a lot of room for improvement.

Don’t make the mistake of designing only for usability. Make sure you design experiences that also fulfill the user’s emotional needs.

4 – Focus on delight

One of the reasons a lot of designers miss the top part of the pyramid is because it’s difficult.

JoyfulSliderLeftFaceKnowing whether something is usable is relatively easier — a test can determine if it works, and some troubleshooting options can solve the problem if it doesn’t. But how can you determine if your interface creates an emotional response or not? That’s a little trickier to test.

Here are a handful of helpful tips discovered by the experts that can guide you into developing the UX your users want:

Appealing Visuals — While a delightful mascot may seem cheesy to some, its appeal to users is well-known.

Discoverables — People generally enjoy surprise treats more than expected ones.

Trust — This should go without saying, but if users don’t trust you — i.e., product pictures don’t match descriptions — they will turn off emotionally. It’s best to be honest with your content and media, albeit with your best foot forward.

Reciprocation — When the user feels like they were done a favor, they’re more likely to return the favor. If your design permits, try to give away small gifts (like a sample chapter for a book).

Personalization — When your interface responds to a user without them disclosing information, you can create an immediate rapport.

sifi-vs-fantasyNovelty Surprises — The core functions themselves should be predictable (e.g. a popup form shouldn’t redirect users after clicking “OK”). Surprise only works to your advantage when it adds delight rather than affect the function.

Just as with human interaction, the more personality you show, the more it will polarize you. This means if you make a statement like, “Fantasy is better than sci-fi,” fantasy fans will love and appreciate your site much more, but you will lose some sci-fi fans.

While eliciting an emotional response can occasionally backfire, it’s better to stir something in your users than nothing at all.

Conclusion –

Seductive design isn’t about tricking your user into behaving a certain way. It’s about getting them to want to behave that way on their own.

You shouldn’t be deceitful or manipulative — it’s just a matter of creating an interface that’s enjoyable enough so that users want to use it. Words and phrases like “engaged” or “in the flow” are just synonyms for “having fun.” If you want users to keep coming back, you need to incorporate the foundations of any good human relationship: be helpful, reliable, understanding, and interesting.

Our goal is to help you understand that interaction design isn’t just about creating interfaces. It’s about mastering human-to-human design, because your goal is to make the black box of technology feel as empathetic and alive as possible.

 

 

WordPress Cloud Hosting

Let me start by discussing WordPress: Most everyone is familiar with this popular blogging/CMS platform. After all, it is one the most widely-used platforms in the world for website building and blogging. The reason WordPress is so popular is because it offers complete customization and gives full control to the user.

With WordPress, you can easily customize and code pages as you need to: you can add new blog posts, approve or remove comments and install a lot of plugins. Whether you are a web developer or a total beginner, getting started with WordPress is extremely easy.

What’s So Awesome About Cloud Hosting?

“Cloud hosting” is the new, hottest trend (and a very popular marketing buzzword) in the hosting industry. The reason for it being such a trend is because cloud hosting has major benefits over the regular shared server, virtual private server (VPS) and dedicated hosting server.

“In the cloud” means that a website is not hosted on just one server but spread across multiple servers, which act as one system. So instead of relying on just one machine for resources (such as RAM, disk space, bandwidth, etc.), in cloud hosting, you can pull resources from multiple servers—empowering you to scale your website as you need to.

The major benefit of cloud hosting is that it enables you to add and remove resources when needed, and you can pay as you go.

wordpress in the cloud

WordPress + Cloud

WordPress cloud hosting means that your WordPress website is scalable, with all the benefits of cloud hosting. The important thing here is to realize why WordPress hosted on the cloud is better than a WordPress site hosted on a dedicated server or a shared hosting plan. So, let’s look at some of the features WordPress cloud hosting offers:

WordPress Optimized Server:

All the cloud servers are fully optimized to run WordPress successfully. Moreover, your hosting company has a technical team that is familiar with WordPress, so they can handle any server-related issue. Each cloud server is thoroughly tested by running different versions of WordPress and fixing any issue that could arise.

Managed Hosting with WordPress Experts:

WordPress cloud hosting solutions are fully managed by system administrators, database admins and technicians. WordPress related issues are solved by a team of WordPress experts; these experts have various tricks up their sleeves to successfully run a WordPress site on a cloud server.

The team of experienced WordPress experts takes care of automatic WordPress updates, plugin updates, speed optimization backups, server monitoring, maintenance, etc., so you can sleep sound knowing your website is in good hands.

Scalability:

Cloud hosting for WordPress offers the capability to scale the server resources (RAM, disk space, CPU cores, bandwidth) as per the website requirements. So, if suddenly your website or blog sees a spike in traffic that your server can’t handle, you can easily add more resources to it. This comes in handy during peek business seasons because you can add resources to handle your site’s increase in traffic—and then scale down again as traffic declines.

Reliability:

Every server crashes at least once, which will cause your website to go down. However, with the cloud that’s not the case as your WordPress website is hosted on multiple servers: If one server crashes, the other one kicks-in, ready to keep your website up at all times. Cloud hosting greatly increases reliability by reducing server downtime.

Security:

WordPress (being an extremely popular CMS application) is also one that is attacked most by hackers. Secure WordPress cloud hosting is offered with:

[list style=”list1″ color=”blue”]

  • Redundant Firewalls
  • DDoS Protection
  • Custom Firewall Rules
  • Automatic Core/Plugin Updates
  • Malware Scanning
  • Admin Access Controls
  • And much more

[/list]

CDN (Content Delivery Network):

A CDN is used for fast and efficient delivery of content over websites. Users today lack patience, and they need content to be delivered to them fast. A CDN can help achieve this.

With a CDN, a website is replicated over multiple different locations, like throughout Asia and Europe. So if somebody from Japan accesses your website, a CDN server from Asia will deliver that request, and if somebody from Spain wants to look at your site, the server for Europe will serve that user.

Conclusion

WordPress cloud hosting is the best, most cost-effective way to host a website. Cloud hosting is a trend that’s here to stay because of the many benefits that it has to offer. If you have a WordPress site and are in the market for an ideal hosting solution, then hosting WordPress on the cloud should be your choice.

Get Started with WordPress Hosting

Launch Your WordPress site on the Cloud with Fully Managed WordPress Cloud Hosting!

The Relation between Web Design and Online Success

A company that is looking for a way to launch their business in a sure hit way should consider building a strong presence in the worldwide web. And why is this vital? The answer is simply because the internet has become a great equalizer in the field of marketing and communications. It has paved the way for almost anyone to easily market their offers to a wider audience without having to pay much on advertising and marketing fees.

Now the first step towards achieving this goal is by having a website that is appealing and could catch the attention of the readers quickly. Site building involves a lot of steps; one of them involves web design which plays an important role in order to draw an audience to check out your website. With a carefully planned and well executed web design, internet users can easily be attracted hence it will generate more traffic to the site.

Coming up with an excellent web design brings a company a step closer to online success. Here are some ways on how your company could utilize web design as a way to reach your goals:

  1. Design a site with a clear header and sub headers. Well defined titles are not only part of web design but are also a way to enhance the site’s SEO. Now every company is aware of the keywords that they need to use in order to increase their presence and land on the first page of various search engine results. The use of such keywords in a manner that is consistent to the entire content is also a good way to engage to your readers.
  2. Keep your articles and other information interesting. Placing them on various sections and carefully organizing the home page does not only make the site look pleasing but it also provides the customers with an easy way to access your website. Set some guidelines when it comes to the content. An article that is too long could make readers lose their interest while a short one might seem to be lacking relevant information.
  3. An efficient web design is one that is user friendly. Remember that not everyone ever tech savvy and only has limited knowledge about how to use the internet. In order to draw more prospective clients, a company’s website should be easy to understand and use. Any reader should immediately have a clear understanding as to what your company offers and the links to click in order to get more information.

Web design is not only for a site’s aesthetic purpose but it should also help in maximizing its SEO potential and aid in making your business an online success.

5 Ideas For a Successful Website

A website acts as an image for your business and hence it is essential to portray a good picture of yourself by creating a good looking and functioning websites. In this blog we will give some tips that you should follow in order to have a successful website.

1. Most Important: A clean and professional website
When a user visits your site, they should immediately understand that your website means business. Imagine yourself visiting some website and noticing a bad design, broken links and difficult navigation. What will you do in such a case? You will exit the browser or switch to another website. Hence, having a website with great design, professional look and feel is very important. Visitors should be able to navigate easily and find the information that they are looking for. Having a good looking website also helps increase the conversion rate. Believe it or not, looks do matter on the internet.

2. Update content regularly
People constantly look for information over the internet and want to read good articles and blog with latest news and updates. Apart from content, having an old phone number or an office address might also cost you dearly. Your customers may be trying to reach you by looking at the old phone number on your website. This creates a bad name for you as the customers will complain about poor customer service. Hence, it is necessary to keep the updated information on the website and help your customers achieve what they want to do.

3. Establish clear calls to action
Every website should have a desired objective for the visitor whether it is selling a product, signing up a news letter or completing a contact us form. Call to action is not only limited to ecommerce site but every website should be able to engage the audience. A visitor on the website should get an idea of what your business is about and what you want them to do on the website.

4. Use analytics for your website
A analytic loot helps you measure your performance, gives you a better understanding of which pages are performing better than the other. With the help of analytic tool you can determine what changes you need to make on the website. If you realize that your visitors are exiting the website from a particular page more often, you need to make that page more interactive, include a call to action or change that page completely.

5. Making a website search engine friendly
Search engines ranking are very important as that is one of the key ways your users are going to find you on the internet, The internet has millions of website including yours, and search engines is a way by which you users will find you site. Having a good search engine ranking will increase the number of visitors you get on your site. Make sure everything from your content and URLs to your code is targeting keywords correctly. Search engines are taking page load times into account now, so make sure yours loads as fast as it possibly can.

6. Bonus Point…Have a fast loading website.
Slow loading pages can be very annoying. They are a test of users’ patience. Move your website onto Coast Internet Publishing’s high speed servers for fast loading times.

Web Design – 5 Things You Need To Avoid!

Developing a website is no simple task. And there are a slew of considerations that you need to consider and employ in order to make sure your web presence is a success. However, in addition to that, there are also some key things that you need to make sure that you don’t-do in order to ensure the same.
Here are some common elements that you should best avoid in your website design:

Can Design Make You Rich?

Like a famous saying goes, the first impression is usually the last impression. And this very statement holds true for a website too. If the web design of the site has been done well, it will work wonder if not, then people will go to the next site! When people view your website, not only do they get an idea about your business, but at the same time they form a mental impression about you! And in most cases, speaking in terms of economics, the relation of the impression made by your website and the impression formed of you is directly proportional.  Therefore, the better the design of your webpage, sunnier would be the chances of your products selling better. Therefore, a good design can definitely make you rich.

Read more