menu

Slabmedia

Thoughts & Articles

Web Design: Why Simple is So Complex

Jim Infantino
sample of simple design version 1
“I just want a simple design. Minimal, nothing fancy. Something that will grab the visitor, but with a clean look. Minimal text, because people don't read – lots of photos and video, but keep it simple.”

We often hear this request from prospective clients, and it makes sense to us. We are inundated with lots of new information all the time, and when we arrive at a site that feels simple and minimal, it is like a breath of fresh air.

So let's start with something truely minimal and simple.

When we start to design a site that is super minimal, we find that it lacks character. More importantly, it lacks branding. The most minimal site conveys the basic information that is on the page but it tends to fall flat. What is necessary is to not only provide a sense of spaciousness and clarity but also to the culture and uniqueness of your brand identity.

Your brand is not just your logo. The logo is part of the brand identity, and perhaps it is the supreme distillation of that identity, but it is not the whole thing. Your brand is a visual representation of your company or project’s total narrative. So, let's see that same simple design with a logo and see what happens.

So, now that we see the site in relation to the existing branding, we find that the overall look doesn't quite live in harmony with it. More than anything else, your website needs to be an eloquent expression of your brand, so we need to make sure the typeface and color scheme agrees with it.

Also, although the hamburger nav is, indeed a very simple way to show the site's navigation, it can often be too confusing, requiring the visitor to memorize what was in it the last time they clicked it and keeping the visitor from browsing around when they are on their desktop. On mobile, it is a necessary evil (if, it is at all evil) because of the limited real estate of phones, but on the desktop, you may want to provide a visual reminder of which section you are in and provide clues to where the visitor might click to find out more, without a click.

So, the next step in this fictional design process, we will choose new graphic imagery to fit better with the brand, and change the typeface for the header and the text. We will also open up the navigation so that visitors can get around better. This is not, in any sense the final step in the creation of our minimal design for this process, but will get us a little closer.

So, leaving the design there, for now, we might expect the client to argue for a header that is less tall, perhaps using only their logo mark, or having the tall header minimize when you scroll down. The overall look so far maintains the simplicity of design but incorporates some of the key elements of the brand.

Creating a simple, minimal design requires balancing many elements:

  • Whitespace balancing in multiple browser sizes
  • Harmonizing with the brand
  • Typeface style and weight choices
  • Placement of elements
  • Ability to grow the content without making the structure of the site too confusing.

There are also SEO concerns to consider.

  • Word count should be high. (Google likes pages with 1000 words!)
  • Titles should be to the point and align with key search terms targeted by the company.
  • Content should not be overly optimized for SEO (Google can tell when you are kissing up too much)
  • Images should have good alt-tags and image names.
  • Subsections should have clear, hierarchical sub navigation for content clarity.

When you think of consumer products that feel simple, reflect on the amount of work it took to get it to feel that way. Often these items feel simple because they are intuitive and pleasing to use, not because their design process was quick or easy.

So the path to a simple website is a complex one. The bad news is that simple is never simple. The good news is that a great designer can help you by creating a website that feels simple, minimal and unique. That’s our passion.

App development: Hybrid, Native, or JS (React Native)

Jim Infantino
App development Hybrid Native or JS React Native

There are 3 types of apps we can create for you at Slabmedia. All of them have upsides and downsides, and all of them have different price ranges.

1. Hybrid App.

This type of app is a set of code on the phone or tablet that serves as a wrapper for a mobile optimized web site - accessed through a special url. This website carries all your content. When it is created correctly, it grabs content from a website and displays it like it would any app. The app would have an icon on the device and be available in the Apple Store and Google Play, just like any other app, and modifications on the website would automatically be available on the app without re-coding and reissuing a new version.

Upsides:

  • The speed of roll out and flexibility of changes makes this approach attractive, as does its price point.
  • These are the least expensive apps to develop.
  • Many popular apps like Uber, Facebook and Twitter started as hybrid apps.
  • This format can be a good place to begin because it lets you test your user interface and make quick changes without having to rework the code.
  • Access to special features like geolocation and the camera of the phone are all available in the latest builds of these hybrid apps, but newer features such as force touch may lag behind in availability.

Downsides:

  • When created correctly, the app will feel like any other app, but some people notice slight lags in screen loads, or button behavior, although that is usually due to an older, slower device, or a slow internet connection.
  • All of the data with the exception of a homepage splash screen, static pages, and "please wait" spinner require an internet connection to access the information online, however, in most cases, even in a native built app (option 2), your information will load from a remote server.
  • The code the wraps the mobile site can sometimes lag behind the latest iOS or Android release causing the app to behave poorly until the wrapper software is updated.

Cost range to develop and deploy: $10K - $20K (avg)

2. Native App.

This type of app is created twice, once in Swift for iPhones, and once in Java for Android phones, a third app would need to be created for Windows Mobile, but that is hardly ever done anymore. A native built app makes use of all the native processes of the phone at the time of the app's release. This type of app may also make use of calls to a server for the latest information, but the layout of the app, and basic features will be stored in the app itself. These apps appear as an icon on the phone and are available in the app stores (same for all options here) but unlike the other methods, they can make use of the widest variety of special features of each phone because they run in the phone's native environment directly, without a wrapper.

Upsides:

  • The performance of native apps is optimized for the device environment.
  • The speed of launch and load will be better than other methods, though some will argue for the Pure JS method below.
  • These apps will always have the best user experience just for the fact that most of the functionality in them runs directly from the device itself.

Downsides:

  • When you want to adjust the features of the app, you need to go back to the developer and add them in a new release.
  • This adds cost beyond the basic starting cost, as each new feature you add will need to be coded in twice; once for the iPhone and once for Android.

Cost range to develop and deploy: $25K - $50K (avg)

3. JS App.

This is a newer method of app development that uses a different sort of wrapper so that it can be developed in the javascript languages of Node and React Native. They are faster than hybrid apps because the wrapper simply allows the use of these javascript languages in the coding. They can be developed once for both iPhone and Android, and updated once as well. They can allow for content that streams from a server, and have native functionality that does not require an internet connection.

Upsides:

  • JS apps have combined advantages of the Native and Hybrid methods, allowing for optimal user experience, without double development and updates.
  • They also rely upon a growing library of scripts to access advanced functionalities for new device features such as force-touch.

Downsides:

  • These apps are still very expensive to develop and require revisions and new releases to add functionality, like the Native apps.

Cost range to develop and deploy: $80K+ (at the time of this article)

Video, Videmus, Vident: How to use Video to create a better User Experience

Jim Infantino
Video Videmus Vident How to use Video to create a better User Experience
With the growing competition to getting better SEO results, more and more businesses are turning to professionally created video to grab and convert your visitors. Google now values professional video as part of your overall user experience strategy. To this end, Slabmedia has recently partnered with bostonvideoproductions.com to help our clients create compelling stories for their brands. Contact us for more information, or visit their site.


A professionally produced video helps to

  1. tell your story
  2. increase shares and likes
  3. increase your visibilty online


1. Video helps you tell your story

A well scripted, clean short video on your home or about page can do wonders communicating a compelling message about your brand. What is the history of your company? What is the vision and mission in the company owner's words? Seeing these things spoken, and delivered can greatly increase their impact. Perhaps you have some loyal and happy customers that can come and evangelize on camera for you. That goes even further. There is a sense that you have met the customer, and that they are real people and that they really care about what you have done for them.

Keep it short and sweet. Remember most folks can only tolerate 1-3 minutes (closer to 1-2 minutes) of your message, but you can communicate a lot of emotional information in that time. A professionally edited and shot video of that message is key here, as no one has time to watch back-lit people getting in and out of chairs in front of an iphone.


2. Video helps increase your social media reach

Social media loves a meme. When images and words are combined, they communicate more than plain text. Moreso, social media loves video. Try to create something surprising, unique and with broad reach to gain more shares and likes. Combine text layover with the footage to hammer home your key points. Google actually reads that text, so it helps with SEO as well.

Be sincere. There is no reason to shout in the world of social media, it doesn't get you more attention. Try to be less the car salesman shouting out in the parking lot, and more like a friend you might meet at a party. Play it cool, but be on point and friendly. Focus on what problems your company solves for people, and how you can help them. Honesty and directness will go further in selling your brand than overtly trying to sell your brand.Create moving content to motivate them to share it. Don't bother telling them to share, that can be a turn-off. When you have it right, people will find a message in it that will help someone they know and they will spread the word.


3. Video helps increase your visibility

Video can be shared either from your site or from YouTube, Vimeo, Dailymotion or anther site. If you embed the video from one of these sites, it plays from both locations. People may find you on YouTube and want to know more about your brand. Make it easy to find your site either in the overlayed text in the video or via a link below it or both. Generate curiosity. Draw people in slowly like a steady stream of air to a funnel.

Present questions to engage their minds. The more you get them thinking about what you do, the more likely they will remember you and seek out your services. Remember that it is a commitment for people to press play. You are asking them to stop multitasking and focus on your message for up to 3 minutes. Use relevant text above your video or in the video title that speaks to a need they might have and one you can help them with. During the course of any day, people are dying for a distraction from their workload. Provide them with a good one, and they will seek you out.


User Experience is the future

The web is moving away from SEO and User-Interface concerns and towards the world of User Experience (UX). Creating fun and compelling video for your site takes you a long way towards a greater user experience for your brand. Invest wisely in video communication for the web and reap the rewards.

Using Stock Photos? Here's What You Need to Know First

James O'Brien
Reviewing Images

If you listen to experts on website design, they'll likely tell you about the value that great content provides to your visitors. And part of that conversation will be a discussion of great artwork. In some cases, the photos (and other graphics) with which you illustrate your site may well be your own creations. But what about when you turn to the vast libraries of stock photography and images out there on the Internet?

The rules surrounding stock photos might seem straightforward — but, buyer beware. To help clarify the stock-photo and stock-image landscape, let's turn to some key tips — four details to look for the next time you're looking at photos for your site.

Stock Rules: What You Get When You Get Stock Photos

"I would caution against anybody ever using content that they merely stumble across online," said David Reischer, attorney and co-founder of LegalAdvice.com. "It is important for a user to have a valid licensing agreement to avoid any claims of copyright infringement."

Perhaps that's a given, but when one wades into the realm of licensed stock photos, there are still gray areas into which even the good-intentioned downloader can stray. If we assume we're starting with with a provider that offers a proper license for an image, what does a site owner and/or designer need to pay attention to, next?

  • RF vs. RM. Not every stock photo is licensed for every kind of site — especially when you're using the image for marketing and sales. That is, some licenses let you reproduce what you download over and over and in numerous ways, all for one price. We call those royalty-free (or RM). Others are restricted. You might only be able to host the image for one year, or in certain regions or on a site within a certain business type. These are rights-managed images. Know the difference. Check the license details of the image you're acquiring to make sure it conforms to your needs (and you to its as well).
  • Image resolution. Uploading a licensed stock image at a resolution higher than the display capacities of the device(s) on which it's intended to be viewed can land a designer in hot water. The problem is that the upload can be construed as an attempt to redistribute the photo — offering it at a high enough resolution that can be downloaded and reused by others. In some cases, higher-res uploads are allowed, but you'll need to buy an enhanced license to do so.
  • Buyer renewal. Unlike a magazine subscription, the onus to keep track of license renewals for RM images — and the responsibility for making good on them — is typically in the buyer's court when it comes to stock images. So, keep a list of all applicable expiration dates and send out a renewal notice to the sources from which you've purchased licenses as the end of license periods approach.
  • Details, Details. Here's another thing: you might license an image in completely the right way, but the photo itself contains a trademark or likeness for which the supplier has neglected to secure proper rights. Examine your stock: if you see a restaurant sign in the background, ask the seller if that logo/trademark has been cleared. The same attention should be given to any paintings, sculptures, and the like within the shot. Note that larger stock-image vendors, such as Shutterstock, often offer protection to the customer against claims regarding trademarks and model releases.

"Navigating the web for photos to populate your website, company newsletter, or other marketing tools can be like tip-toeing through a minefield," said Bonny Clayton, owner of Your Web Chick. "You might emerge on the other side completely unscathed, but one wrong step can blow up into a legal morass."

To prevent the kind of outcome about which Clayton cautions, start with the four steps we've just outlined. Beyond those, carefully read the rights and terms conferred for every stock image you use — and ask questions of the seller every time you're unsure about using a photo or artwork that you didn't make yourself. Diving deeper into specifics is also easy, online. Bookmark this FAQ from Stock Photo License.

Managing your business is hard enough. Managing your website should be easy. Slab offers high quality, custom designed, easy to edit websites. Talk to us about building your site, one that you can update yourself with ease. E-mail office@slabmedia.com, or call us at 617.566.3433.

How to Drive External-Video Viewers to Your Landing Page

James O'Brien
How to Drive External-Video Viewers to Your Landing Page

Creating immediate and compelling arguments for your brand is one of the key values of video. Getting that content in front of millions of potential viewers is another.

Some 1 billion viewers click their way through YouTube's offerings, each month. Vimeo has earned some 100 million unique monthly visitors itself. By volume alone, when brands do video right, their external campaigns stand to drive what's been measured to be an average of 20% more traffic, according to a recent Unbounce report.

So, let's say your team is starting to see a healthy number of visitors on your external video platform — that is, viewers are coming to your content at, say, YouTube. Now, how can you weight their experience so that it most often leans toward a click-through to your landing page — and then a conversion?

Strategies abound, but we've talked with brand leaders and marketers, breaking out a number of key approaches to making the video-to-website pathway a consistently attractive route for your audience.

  1. Tell a compelling story. Concept number one: you're not making a commercial. Engaging viewers and driving traffic from an external video platform are similarly dependent on a common factor: you must have something useful and interesting to say. If you're an artist, your story lies in the process and challenges inherent to creating your work. If your company brings gourmet spices to the market, your audience is primed to learn what delicious recipes those ingredients will help enhance. Understanding the stories that bring value to your viewers' experience — ones that prompt them to ask more of you, and visit your site to do so — is key to making the next three strategies relevant.
  2. Frontload the reason to watch (before the link to click). Does it seem counterintuitive to not lead with your link? Consider that experts say visitors to a platform such as YouTube typically decide within the first 15 seconds whether to stick with what they're watching. "Whatever the style of the video, webisode, webinar, etc., there should be a narrative," said Joseph Somerhalder, CEO of Ascently, a digital marketing firm. "This narrative should start from the beginning so that the first few seconds of the video are effectively a call to action. If the first few moments of the video are compelling, then the viewer is more likely end up on the landing page." In other words, begin with the payoff of your product or service, not a link to your website. Then, take the viewer into the story that circles back to that promised end result. Give them opportunities throughout the experience to make their decision. More on this in the next step.
  3. Provide links within the context of narrative. Interstitial title-cards with links can interrupt the all-important narrative and end-title links often come too late to capture a viewer. Instead, if your story includes parts, ingredients, or other items, annotate these details right on the screen — YouTube is an example of a platform that allows for just this option. The idea is to provide clickable notes such as "organic truffle oil (available at our site)" as that product appears in the video. Now, your audience can click through to your landing page right at the moment when they've visualized how your brand fits into their immediate future. "I’ve seen the greatest success when using internal nested buttons on the actual video itself," said Michael Lazar, a "growth hacker" at TrueShip. "When strategically placed at certain intervals, I’ve found that the placement of such a button has generated the most substantial results on my video tracking … resulting in a healthier click-through ratio."
  4. Incentivize the visit. The example of "organic truffle oil" in the preceding tip is more enticing still when there's a reward packed into the viewer's experience of clicking-through from it to your landing page. "Give something to your users so that they have a reason to click," said Brian Nickerson, co-founder and CEO of Chippmunk Rewards. "Coupons are a great way to do that" standing to "increase CTR by 3–5 times as compared to a static link."

Finally, sew your landing page call-to-action into the video experience. In other words, reference it. It could be our friend, the "organic truffle oil", presented as a still from the video, and then a button that says "get your ingredients for the recipe here".

This has the additional benefit of offering website-first visitors the opportunity to discover your video channels. They see the call to action on the landing page, and then reverse the process to see the recipe episode. The video then prompts them come back to the site via your wisely placed link to fill up their shopping cart.

The point is that your external video and your landing page can can exist in a state of synergy. Build them to do so and you could well be on your way to joining that YouTube club — earning 20% more traffic and enjoying the conversions that come with it.

Photos Matter: 7 Tips for Sharper Website Images and Design

James O'Brien
Man holding a photo of trees


Marketers spend a lot of time talking about content as a kind of end result — meaning the whole of the story that's being told, the message that a brand delivers. Within that end product, however, in every example of compelling content, there are key components. And one of those components is the photo.

The images we use to illustrate, enhance and even generate the core ideas of our websites demand at least as much attention as the writing and calls to action that can drive conversions. Miss out on the chance to make your online visual landscape the best that it can be, and you're missing opportunities to engage your audience.

Luckily, getting to a better-looking site is a task with which designers and site owners are engaging all the time. Reaching out to them, we've culled seven steps toward sharp image-based design. Read on, and start thinking about your own approaches to photos and layout.

  • Size for the user's reality. File size can be paramount, especially when everyone's point-and-shoot is able to take 3,000-by-2,000-px, 3–5MB photos and an increasing amount of website traffic is mobile. "Most of the time your viewers don't want or need to view a photo that large," said Raymond Selzer, co-owner of Interslice Designs, a firm that helps develop brands. "The average computer user has a monitor around 1,400-px wide, larger monitors average around 1,920-px. With this in mind you can save a lot of file size by resizing your photos to a maximum 1,900–2,000-px wide." If you still insist on offering the full resolution image, provide an extra download link, so at least the high resolution image doesn't load automatically for every user.
  • Strike the balance between quality and file size. "Often photos are saved at their original resolution and quality which is unnecessary," said Gerald D. Vinci, owner and author at Vinci Designs. "Using a photo-editing program you can usually set the quality to around 70% of the original 100%. This will still give you a clear and crisp photo but will greatly reduce [load times]. Photoshop for example, in the save-for-web settings, allows you to play with the quality and see the file-size results right in the save window."
  • Never 'size up'! As a newspaper designer once told your humble blogger — you can't add information to the image. A .jpg file (and a .png, for that matter) is rasterized, meaning that it has only so many pixels of information per inch. Enlarging it will create a fuzzy effect: pixelation sets in. Bottom line is, you can size and image down but not up.
  • Arrange images with equilibrium in mind. "Image placement within websites should be about balance and equilibrium," said Leon Roy, graphic designer at Bring Digital, a marketing agency. For example, try three images in a row with equal spacing between them. "Or just two," Roy suggested, "again with equal spacing and the equivalent amount of text in the third position, where the photo would be."
  • Your photos and text can create interactive context. If you want to draw attention to something on your website, use visual cues by having the subjects in your images positioned so that they’re looking or pointing towards the most important detail on the page. "Humans naturally follow sight lines of others, even in images," noted Kim Herrington, founder of Bear & Beagle Creative, "and this can help direct viewers’ attention to where you want it to go."
  • Keep stock photos to a minimum. "I know it's easy, you can just buy them on the fly and they look great, but they also look incredibly fake," said Gael Breton, co-founder of Authority Hacker (a consultancy helping owners to build expert-level content on their websites). And, he adds: "Nobody thinks people in your company are that good looking."
  • Approach visuals differently, desktop to mobile. Finally, remember that the mobile experience can be more sensitive to load times than that of the desktop. Don't burden your potential customer's device with too many images — it can lead to a slowdown, which leads to a bounce, and that's an anti-conversion kind of event.

And so, go forth and bone-up on your photo work and layouts, getting your pages into fantastic visual shape. When you think you've got your site just right, send us some examples. We'll include the best submissions in a future best-of article — showcasing stellar designs, images, and content that your site interweaves.

Managing your business is hard enough. Managing your website should be easy. Slab offers high quality, custom designed, easy to edit websites. Talk to us about building your site, one that you can update yourself with ease. E-mail office@slabmedia.com, or call us at 617.566.3433.