menu

Slabmedia

Thoughts & Articles

Graphic Design and CSS: Where WYSIWYG went wrong.

slab
Jim Infantino
Graphic Design and CSS Where WYSIWYG went wrong

Way back in the 1980s, some very nerdy graphic designers began to write their designs in code. John Warnock, one of the founders of Adobe Systems had developed a computer-generated, vector-based programming language called PostScript that became the underlying code of much of the design and typographic tools we take for granted today. This very interface still relies heavily on it. Almost every letter in every word you read uses it. Before there was any such thing as Illustrator or PageMaker or InDesign or web pages, there were designers writing code to make a mark on a page. To draw an arc on a page, a PostScript designer would write in a text document: “300 600 20 270 arc stroke” and then adjust the numbers to get the right result in the compiled output. Crazy, right?

I remember reading about this and thinking,

“That is way too much effort. I could never think about my design in code. Give me a pen or a brush and some paper. That form of design is going nowhere.”

Then, along came the graphic user interface. Now everyone who designs writes about arcs and strokes and fills and vector positions on a virtual canvas, only we use a mouse and a computer screen and let the robots do the calculations for us.

So, what is wrong with that? Courses in Design are taught specifically in branded programs like Adobe Illustrator or Photoshop with little to no reference to the underlying code that enabled the process. These programs have enabled us to create increasingly complex designs quicker than we could possibly achieve by hand-coding positions and shapes, and that is, by-in-large a good thing.

Along came the web page, and some designers and non-designers began to code again. This time, the language was HTML. HTML was created by a group of programmers and thinkers lead by Tim Berners-Lee at CERN. Unlike PostScript, it was not a proprietary system, but open to all to use, free of charge or license. It was meant to deliver linked information through a new idea called a browser. The first browsers were run in a terminal, not a graphical user interface (GUI) as we know now, but a stream of text. Design was not a factor, the sharing of linked information was the primary goal. When GUI browsers arrived in the 1990s, designers looked at the gray pages of Times New Roman on their screens and imagined the possibilities of something more exciting and engaging. Programming Designers, like those who had worked in PostScript developed CSS and Javascript and Web Design was born.

CSS stands for Cascading Style Sheets, and was developed by Håkon Wium Lie in 1994. Lie was also working at CERN with Berners-Lee. His idea was to take the structure of the HTML page; the underlying elements like body, h1 (for a headline), p (for a paragraph), img (for image reference), and div (for block elements) and give them design specifications like background-color, width, height, padding, margins, font-family, and more. Early web designers began to code or “script” these modifications to their dull looking, gray pages and things on the web got interesting.

One year later, Brendan Eich at Netscape released the first version of Javascript, based on the same ideas as Lie’s CSS and things got even more interesting. Programming Designers like Jeffrey Zeldman began using it to animate the elements on the page to create dynamic content that changed on the screen due to variables, some of which could be set by the page visitor. At this point, the web page became a living thing, radically set apart from the printed page.

A very limited number of designers adopted these methods. The creative interface was still a plain text editor, usually a terminal program, to write the HTML code, and script the CSS and Javascript to make it look and feel pleasing to the viewer. Companies like Apple and Adobe saw the opportunity and created WYSIWYG programs so that graphic designers could automatically generate the web code without touching it. That was a good thing too, wasn’t it? Yes, of course, it was and no, it wasn’t.

The trouble with web design today, is that each choice or fork in the process has exponential consequences. Modern web design is often reliant on templates and programs that make it easy to get started and generate a design that is balanced and pleasing. Content editors have drag and drop interfaces that allow for placement of elements with a gesture of a hand. The trouble arrives when a designer begins to think outside the parameters of the pre-defined GUI interface and discovers that they are blocked from making creative decisions by the template or program underlying the layout on the page.

When faced with the limitations of the interface, a non-coding designer has a choice:

  1. Start again with another template or platform that seems to better align with their vision
  2. Give up and let the client know that what they want simply cannot be done with the tools at hand
  3. Team up with a programmer that can shoehorn the elements into place with modifications to the constraining template or platform, adding cost to the project and complexity to changes down the road

None of these are good options.

What is needed to do this right is a designer who thinks in code. What kind of designer thinks in code?

Prior to the term being co-opted by the startup community, a Unicorn used to refer to a designer who was also a programmer. The belief was and is today, that the ability to design precludes the ability to write code and those who did both are as impossible to find as a mythical beast with a horn growing out of its forehead. People who have these talents are now sometimes referred to as hybrid designers for disambiguation.

For too long, the design curriculum has ignored code as an essential interface for creating graphic layouts. The focus has been on the WYSIWYG interface, rather than what it generates. All GUI interfaces for design have limitations in application. A page created in photoshop is, by its nature non-responsive to screen size. It lacks any accessibility elements. It ignores user-input. A website built with templates will always be limited to the parameters of that template, no matter how flexible it claims to be. A designer who wants to rise to the challenges of how layouts are presented on the web must have some understanding of the underlying elements of HTML and how to modify their appearance and behavior to create durable, compelling work.

I can sometimes find examples of educational courses that teach design with code. I hope this is a trend. It is not, as has been asserted, the job of two very different brains to write code and create beauty. One brain will do, so long as we begin thinking of design from the perspective of rules and behavior, rather than fixed elements on a page. The interface is radically different from those based on the ancient modes of paint, brush, line, and type. The interface is the code itself.

Designers still need to understand color, form, and typography, but the tool to create their work is the script they write, not the compiled output of a program created to mimic the methods of the past.

Great web designs are built from the ground up without compromise. Web designers paint on an ever-changing canvas governed by an evolving set of rules. Without a deep understanding of these rules and materials, work created with easy to use but constraining tools will always come up short.

Are you a coding designer? Drop me a line.

– Jim

Don't Get Trapped In A Box: The Pitfalls of Design by Template.

slab
Jim Infantino
Don039t Get Trapped In A Box The Pitfalls of Design by Template

There is a reason we recommend custom web design for our clients.

We have worked with templates extensively in WordPress, Squarespace, Shopify, and others and we know the actual ups and downs of a pre-formatted design for your online identity.

Yes. Templates have become more flexible.

The promise is you see in advertising lately is: “We offer thousands of professionally designed templates that are so flexible that you won't even know it's a template.”

So, you upload your logo, fill in the forms, select a template and bam! You are done. Sort of. Actually, you need to change some colors and backgrounds and reconfigure the width of some sections of your site. Then you need to check the mobile treatment, which may not be exactly what you want. So, you change what you can for that, and then... you are done. For now.

The problems arise a little down the road. You get feedback from your clients or other members of your team, and they want to see something a little different. So do you. So you go in and try to reconfigure something, and it doesn't work with the template you chose. So, maybe you need another template. You choose one that will work with the feedback you got and tweak it again to get it to look right. A month or two later, you want to feature some new content on your homepage, or show only excerpts on the first page of your blog and you find out that you can't do quite what you want with your new template.

Finally, you see another website, maybe a competitor's website, and it all looks vaguely familiar. That is because:

Web design is as much about structure and behavior as it is about design.

So you go back to the template and try to tweak it again to help your business stand apart from the other sites that use the same template, but you don't have the expertise and/or time to get the results you want. So you hire a professional company, like ours. They tell you:

“This is going to be a lot of work because we have to fight the pre-existing template. It just wasn't made to do what you want it to do, but there is another template that might work, or we can build you a custom template for more money.”

Does this sound familiar?

The truth is, templates are a quick and cheap route, and ultimately, you get what you pay for. They are not a substitute for professional design. They might be your new website version 1.0, but that version will need some work before you have a website that optimally showcases your brand.

Our process is different.

We do not start with a template. We start with a blank slate (or slab). We build out your site on top of a simple, basic and flexible framework that can be tweaked and customized to get the results you really need out - of - the - box.

We understand how websites change and evolve. We have decades of experience building websites and that means we can see into the future of your site and anticipate aggravators for your visitors and the true flexibility you need. Down the road, when you need to modify or re-envision your site, we are not limited by a pre-conceived idea and structure. We can redesign and rework from the ground up.

That is the difference of Slab.

Brought to you by the nerds here at Slabmedia. We are recognized as a Top Massachusetts Website Design Company on DesignRush.

Web Design: Why Simple is So Complex

slab
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)

slab
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

slab
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

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.