Monthly Archives: February 2017

Design Tips for Responsive Websites

Most web designers know about mobile-first design and how it has dramatically affected responsive design. But there is another technique that may be less popular but can solve problems in a clearer fashion.

With a desktop-first approach you can build all the features you want and create them to the highest specs. Then as you test on smaller devices you’ll focus on keeping the interface light while supporting as many “high-end” features as possible.

This workflow is quite different but starting from the desktop can be better for web designers who create feature-rich designs.

Technically “desktop-first” was the traditional way that everyone made websites up until the responsive era.

Nowadays many people talk about mobile first but there are good reasons to stick with the desktop approach. I often prefer starting with the desktop design when I know my site will have tons of detailed features on larger screens.

Here are some benefits of the desktop-first ideologies.

  • You get to see all major features at once
  • It lets you imagine all the largest possibilities for your design first
  • It’s the best strategy if your audience mostly uses desktops/laptops

When you think of modern websites like Twitter you think mobile. But they do have lots of extra features that come along with the desktop experience. These desktop users clearly get a heightened UX which is just as important as any other device.

Granted there’s no denying that mobile is important. Just recently mobile use surpassed desktop so it’s definitely here to stay.

But feature-rich websites often depend on a strong desktop design.

This is perhaps the biggest benefit of a desktop-first layout. You get to see the site as it should look with all the bells & whistles. These extras can(and should) be removed for smaller screens as you test and find certain features just don’t carry over well.

Another way to look at this is through the simplicity of mobile-first design. When you create with mobile first you’re inherently starting with the simplest features, then adding extras for larger screens. But it’s real easy to forget features or just lack proper planning to decide where they should go or how they should function.

With a mobile-first approach it’s easy to consider dynamic features more like an afterthought. But with a desktop-first approach you’re treating these features as the primary display method, then choosing to remove them as needed.

There is no perfect choice so I recommend trying both to see what you prefer. If you’re like me and really adore the rich desktop experience then you’ll probably prefer starting there and working smaller.

Supporting All Browsers

The trickiest part of desktop-first design is handling browser support.

Just a decade or two ago the only market was desktops & laptops. The smartphone revolution changed all of that with tons of mobile browsers for iOS, Android, and other proprietary devices like Blackberry.

Most older browsers lacked support for modern desktop elements like canvas, audio/video, and dynamic inputs. But a lot has changed in recent years.

Nowadays it’s reasonable for all mobile browsers to basically support the same features as desktop browsers. Modern browsers also render most elements the same way so you won’t deal with rendering issues of the past.

The biggest differences are not in HTML/CSS support, but rather in touch-based support.

Mobile screens are much smaller and they also need to be tapped with a finger. Computer mice are more precise compared to a human finger, not to mention desktop screens are far more spacious and easier to look at.

When moving from desktop to mobile it’s crucial to consider how the different browsers work, what they support, and how to handle the user’s touch-based input.

A few good rules to consider while scaling down your desktop-first design:

  • Make tappable elements larger
  • Increase body text size so links are easier to tap
  • Add JavaScript libraries that support swipe motions

You can always check HTML5 specs for all browsers to see which elements are supported on which browsers. But for the most part touch inputs are a universal thing, so desktop-first is a great solution if you pay attention to the mobile experience too.

And you can find tons of free resources like TouchSwipe that add support for touch & swipe gestures to all websites.

You can use JavaScript to check the browser’s dimensions or the operating system like iOS or Win Mobile. With this info you can load extra stylesheets and create a totally different experience with touch/swipe events that only apply to mobile users.

Start with a list of features you know you’ll want on your website. Organize all the newer CSS3 properties, the newer HTML5 elements, and anything that might be iffy with browser support.

Then look up all the browsers you want to support to consider how you can handle fallbacks and polyfills. As time passes older browsers will phase out and browser support will get easier. This makes an even stronger case for desktop-first design because the rendering engines will be close to identical across the board.

To learn more and dig deeper into mobile interactions check out these related guides:

  • Multi-touch Web Development
  • Support Comparisons Between All Mobile Browsers
  • How to deal with :hover on touch screen device

Web designer or developer,

If you’re a web designer or developer, it’s always smart to keep up with the latest website building trends. That doesn’t mean that you have to be caught up in the “innovation” rat race.  Even though innovative work, ideas, and technologies are what many clients are asking for.

There’s no need to chase after the newest and shiniest innovative technics. They can be a never-ending waste of your time and money. A simpler solution is to take advantage of innovative concepts and designs offered by others. You will find 10 examples of that described below.

All the Innovation You’ll Need is But a Single Click Away

Be Theme is the largest WordPress theme ever, and a Top Five ThemeForest best seller. Be’s 260+ pre-built websites make it easy for you to do quality work, and do it fast.

So, where does the innovative part come in? It’s build right into each of these professionally-designed pre-built websites. They come with a 1-click installer, so these innovative designs are yours at a touch of a button. This cool 40 second video shows you how easy it all is.

It’s a win-win situation for every type of client you’re likely to encounter.

Here, For Example, are the Most Common Types of Clients You’ll Easily Win Over with Be

ThemeYour eLearning clients will be delighted with your ability to produce such an innovative and easy to work with website for their eLearning platform, in such a short period of time. It’s responsive as well, which should make your client’s students happy and always eager to come back for more.

For Clients in the Interior Design & Architecture Business

nterior design or architecture clients often have trouble finding website designers/developers who truly understand their businesses. That won’t be the case if you use this pre-built website to show them a prototype of what you can do for them

For Clients in the Travel and Lodging Industry

Be Hotel2 is designed to impress your clients in the travel and lodging industry. These are clients who expect a great deal, and this is THE pre-built website that allows you to make that happen. Perfectly structured, and with the focus on images, you can easily command a premium fee with this pre-built website.

Consistency in Web Design

There’s tremendous value in consistency of digital interfaces. People browsing the web encounter dozens of websites that all have different styles, yet most feature very similar page elements.

Most designers don’t even think about these features. Page headers, navigation menus, body copy, CTA buttons, the list seems endless.

By designing with consistency you’ll learn how to create interfaces that encourage typical user behaviors. Your layouts will build trust and teach users repeatable patterns that help them work through your site much quicker.

Design For User Expectations

Most users expect websites to work a certain way. It should scroll vertically, links should be clickable, and the navigation should be visible right from the first page load.

How you design these expectations is completely up to you. But when you’re designing for consistency you want to keep a clear uniform design across the entire layout.

This site has many portals linking to their forums, their eCommerce shop, and their online help guides. All of these pages have the same design and the same navigation to keep them consistent with the entire site.

Users don’t want to think. They just want to act and get results. Consistent design helps this happen.

Do the thinking for your user to understand what they need. How would you design a blog page to encourage reading? What about an ecommerce shop to encourage checkouts?

Think about these questions yourself and apply them to your web projects. Which elements should be consistent on every page? This line of thinking always leads to solutions.

The homepage of Sketch is very consistent with certain user behaviors and expectations. The page has two CTAs: one for downloading a demo and one for buying the program.

But not everyone who visits the site wants either of those options. The top nav becomes the obvious next step.

Someone new to the site might care about features or how Sketch works. But an existing user might want to look into extensions or get support.

Intuitive Navigation

Users should understand a lot about your site just from the header. This area should explain what the site does and what it’s about, not to mention the top navigation links.

A well-designed navigation isn’t enough. You’ll also want great copy to sell the pages and let visitors know exactly what’s on your site.

Nav text can be restyled in my ways including font size, writing style, and interface elements like hamburger menus for responsive navigations. The key is to stay consistent and keep these links easy to use

When you browse through any of the top categories you’ll get a sub-menu directly underneath. This can work like a breadcrumbs bar or sub-categories based on the primary link.

The consistent style and multi-link menus are great for big sites and blogs. As users get familiar with those links they’ll have an easier time browsing through content.

Repeat Layout Styles

This technique breeds consistency and it can work on multi-page sites or singular landing pages.

The goal is to re-use similar elements all throughout the page, but with different content & graphics.

By repeating certain styles you’re creating a theme on the site and building comfort with users. Consistency breeds familiarity and this is what you should be going for.

Notice the repeated patterns on the Webflow homepage that alternate between colors and different design styles.

Each section features a screenshot of the app listed alongside main site content. This style is beautiful and it’s one of the cleaner ways to craft a consistent design.

Note this style is predominantly found on the Webflow homepage but it could be repeated elsewhere. That’s why consistent elements are easier to use across the whole site.

But aside from page elements you can also repeat styles in your design. Take a look at Algolia for one example.

This site uses heavy diagonal lines between page sections along with darker background colors. Headers all have a small underline and the text all follows a similar size & thickness.

If you dig deeper into the site you’ll notice the box shadow effect is replicated throughout. This is a small touch but it’s one of the easiest ways to build visual consistency.

Try not to get too lost in repetitive page elements.

Instead think about how you can make the interface easier to use and what that might entail. Most of the time you clone what you’ve already done and keep using those patterns.

Keep Branding Consistent

You also need to consider page colors, textures, typefaces, padding, and icons/elements related to the brand. There are no right or wrong ways to brand, just some ways that work better for some websites.

MailChimp does this by repeating their branded monkey friend everywhere. The site has a fixed top navigation which includes this logo on every page.

But you’ll also notice similar typeface designs and colors with similar text styles. This may seem like an obvious thing to do, but some designers underestimate how much this can impact branding.

 

Protect Design Work on the Internet

As a web/graphic designer, it can be disheartening and frustrating to see your work published without ever receiving the notoriety from it. Those images and designs are your babies and they deserve proper respect and attribution, not to mention stealing them is a direct violation of copyright law.

What do you do when you notice someone stealing your work?

Fighting copyright issues can turn into a huge mess. Thankfully, simple communication can thwart a potential battle, especially if the offender was unaware of copyright laws. However, in other more serious cases, designers will simply throw in the towel due to a lack of money and resources to fight.

Protect Your Work

Do you have a team of legal experts ready to prosecute people who steal your work?

Unless you have the budget of Amazon.com, this is not a likely scenario. Most freelance web designers do not have thousands of dollars to spend on legal assistance should anyone steal their content, so they must devise ways to protect their work and prevent it from misuse.

There are many actions you can take to protect your work online. While not all will be 100% successful, they will definitely tip the scales in your favor.

Consider posting a notice of copyright or “all rights reserved” on your website where visitors can see it along with a statement describing the illegal nature of stealing your work. It may not stop every perpetrator, but it will notify those who are unaware of copyright laws about stealing content and also scare others into submission. It’s similar to posting an alarm sign in front of your house to deter thieves from entering. Even if you don’t have an actual alarm system, the thought of possibly getting caught is enough to deter them.

 Watermarks are a good deterrent and can prevent people from stealing your images. Designers typically do not like changing the look of their designs with watermarks, but many feel they are the best deterrent to theft. Some resort to a small signature and website logo on the bottom of the design as well.

1. Do you want to allow people to use your work for commercial purposes?

The definitions for commercial vs. non-commercial are still somewhat confusing. The technical term for “commercial” involves using images for the purpose of selling or to gain profit. Non-commercial refers to using images for personal use and not to gain profit.

The definition becomes ambiguous when a publisher wants to use an image for his blog that includes advertisements. Is the image used to draw in revenue? Some would say “yes” since it is part of the blog and the blog contains advertisements, which relates to commercial usage. Others would argue that the image isn’t directly involved in any for-profit activity and is, therefore, noncommercial usage. The jury is still out on this one and Creative Commons is actively taking surveys on the subject to further define the terms.

If you do not want your images used by companies seeking to gain profit from them, stick to the non-commercial licenses.

2. Do you want to allow people to create derivative works?

A “derivative work” is a work based upon one or more preexisting works, such as a translation, musical arrangement, dramatization, fictionalization, motion picture version, sound recording, art reproduction, abridgment, condensation, or any other form in which a work may be recast, transformed, or adapted. A work consisting of editorial revisions, annotations, elaborations, or other modifications which, as a whole, represent an original work of authorship, is a “derivative work”.

The derivative work is a piece created from the original. If you want to maintain your original graphic and keep the image unchanged as it is copied, choose the NoDerivs licenses.

Creative Commons has this helpful License Chooser which will also supply you with code to put on your website. Here are some tips you should know before licensing your work.