Style Guides for Web Design and Development

style-guide

Developers, designers and web administrators are always looking for ways to improve how they manage the look, feel and complexity when building a web site. This can be difficult when we have multiple team members or new members involved in ongoing projects. So how can we help maintain global branding and development patterns for sites that all users can utilize? Style guides.

What is a style guide?

A style guide is a document of code standards that details the various elements and patterns of a site or application. It is a one-stop place to see all visual styles of the site such as headers, links, buttons, color pallets and any visual language that is used on the site.

2015-09-15_1518

Check out a few of the other style guides below published by some great brands.

Why should you use a style guide?

Style guides take extra time to develop up front but we have found that they have numerous beneficial factors for developing.

  • Faster build time for new sections and pages.
  • Design consistency is easier to maintain
  • Designers, developers and content owners have a one-stop guide to reference.
  • New team members joining the project can refer to the guide for the exact style use.
  • Keeps both code and design consistent throughout the site.
  • The guide allows us to standardize our code (CSS, JS, HTML), keeping it small and quick to load.

Steps to building a style guide?

Template

Start your guide with the sites foundations. These will include elements like color palette, fonts, headers, body text and grid layouts. These basic elements are the foundation global elements of your site that set the tone for your style guide.

Patterns

Next start adding in your site patterns. These would include buttons, logos, images, icon library, form styles, etc. Any element that belongs on your site should be included.

2015-09-15_1511_001

Documentation

Documentation is essential to make a style guide successful. Your documentation is the key to keeping a consistent style and development pattern throughout the site. Documentation can be done in the code itself with comments or using interactive modals or tool tips in the style guide.

Cascade Implementation

After completing the base code you can start integrating it into your CMS system. Not only can we use a style guide for visual and front end documentation but also for how the content functions within your CMS.

The following elements can be added to help guide developers in with the site setup:

  • Formats
  • Blocks
  • Template regions such as header, footer, navigation, widgets and dynamic feeds for news/events.
  • Build out full examples of your data definition regions. See example below of Cascade Server data definition containing all site content input areas.

2015-09-15_1526

Using the guide

So you have completed building your style guide. Now what? The first step is talking to your team about how to use the guide and what updates should continue to be made during projects to it. As new member join your team reference the guide as a way to introduce them to your site styles and code languages. Utilize the style guide when testing new code or modules on your site or just as a way to present new design elements to the team. The possibilities are endless.

Your style guide will never be complete and should continue to evolve as your site does.

References

 

Keana Lynch
Keana Lynch is the Director of UX Design & Development at Beacon where she has provided leadership and consultation for over 35 Higher Education projects. She specializes in the analysis, design, and implementation of websites. Keana is very passionate about design and development strategies focused on user experience, accessibility, multi-device interactions, and technical best practices. Outside of work Keana enjoys spending time with her three dogs, hiking, kayaking and volunteering with local animal rescue groups.
By | 2017-06-16T12:24:15+00:00 September 17th, 2015|Cascade CMS|Comments Off on Style Guides for Web Design and Development

Is Flat Design For You?

As technology and the familiarity with it grows, designers and developers are now more than ever trying to enhance the website design world. Inevitably, this leads to countless passing trends that come and go much like any design industry. Which leaves us begging the question, how do we know what is more than just a trend and does it fit our website needs?

Flat design has been a fairly controversial topic since the beginning. Industry leaders such as Microsoft, Apple, and Google have all jumped on board lending us to believe there may be something more to this. So how can flat design benefit your site?

Flat Design Is Responsive Friendly

writer-responsive-blog-theme

Image credit to: www.wpexplorer.com/writer-blog-wordpress-theme

More and more we are finding people are using smartphones as a replacement for their computers. In 2012, more tablets and smartphones were purchased than computers. Because of this, responsive websites have now become a necessity. With the simplistic nature of flat design sizing elements down to fit a mobile device or tablet becomes that much easier. By using a lot of white space and large buttons flat design becomes very flexible when considering responsive website.

 

Flat Design Is Content Friendly

The mystery of, “What is more important? Content? Or Design?” has been solved. The answer is neither. Both equally important. Design attracts your users, but your content keeps them on your site. So why would you not leverage your design to showcase your content? Flat design’s clean and minimal layouts provide an environment that allows your content to stand out. Content communicated in a simple and clear manner is more easily digested by the user.

 

 Flat Design is User Friendly

Although minimal, flat design has a high level of focus on aesthetics generally utilizing bright colors and large imagery. This coupled with the elimination of borders and shadows entices the user’s eye to flow across your site with ease. Flat design strips down to the most basic form of design that can be appreciated by anyone.

The goal for any website design is to carry the message of your business across to the user. Your design should always highlight the content and focus on the user’s experience. Here at Beacon, we are constantly researching design trends and movements to ensure that our client’s websites are ahead of their time and solidified as legitimate marketing tools.

 

By | 2016-11-18T14:23:20+00:00 November 25th, 2013|Web Development|Comments Off on Is Flat Design For You?

Progressive Enhancement

I had the privilege of attending “An Event Apart” in Austin, TX this week and feel like I have come home with an abundance of knowledge about leading practices in web development. This conference is an educational session for those passionate about standards-based web design and this year focused heavily on best practices for our multi-device world. Many developers are facing the challenges of 1000s of screen sizes and the multitude of ways people can now access the websites we create. With new devices coming out daily plus fascinating new ways to enhance sites visually and interactively, we sometimes forget that many people are still using older slower browser and devices. That doesn’t mean we shouldn’t be designing our sites without all the bells and whistles, but we cannot forgot about the other users. At the conference, one topic in general really helped explain how we create amazing sites without leaving anyone out. Progressive enhancement!

What is Progressive Enhancement?

“Progressive enhancement is a strategy for web design that emphasizes accessibility, semantic HTML markup, and external stylesheet and scripting technologies. Progressive enhancement uses web technologies in a layered fashion that allows everyone to access the basic content and functionality of a web page, using any browser or Internet connection, while also providing an enhanced version of the page to those with more advanced browser software or greater bandwidth.”

Basically, progressive enhancement allows everyone, no matter what their browser or internet connection may be, to access a web page and view the basic content and functionality. If you are running a more advanced browser or better bandwidth, you will get the enhanced version of the page.

Progressive Enhancement vs. Graceful Degradation

Both graceful degradation and progress enhancement focus on how a site works in all browsers and devices. The focus and how it affects the workflow is the key between these two methods.

graceful

For many years, web designers have been using the principle of graceful degradation to make sure users in older browsers can at least see the content on a site, even if it doesn’t look exactly like the design intended. It allows designers and developers to focus on building the website for the most advanced/capable browsers. Using this method leaves older browsers with poor, but passable experience.

progressive

Rather than focusing on browser technology and support, we can focus on the content and how the user will see this content no matter what they are on. The content of your site is the most important element, it’s what brings users to your site and should always be first priority.

So how does Progressive Enhancement work?

It’s best to think of progressive enhancement as different layers. We couldn’t build a home without a solid foundation, the same goes for our websites. Each layer builds on the previous to improve the interactivity on the website without losing a solid functional base.

Content first! Start with your content, marked up in rich, semantic HTML. Having well-thought-out HTML has the advantage of not needing presentation layers to make sense. This also means screen readers, search engine spiders and those on basic mobile browsers will be able to view your content without any distracting formatting issues.

Visual Enhancements (CSS) Once your base HTML and content is ready, you are ready for the visual enhancement layer, CSS.  The majority of desktop and mobile browsers support CSS, though not all support CSS3. The CSS should enhance the content and make the overall user experience better.

Interaction (JavaScript) The final layer of our web site is JavaScript and should be handled last. JavaScript can contribute so much to the usability and user experience of a website. It has revolutionized the way sites work and how we do things online. However, your website should always work without JS and there should be an HTML or server-side scripting alternative. While most web users have JS enabled, there are still some cases where JS is undesirable and not every mobile browser or screen reader has good support for it.

Once you understand progressive enhancement, the concept of it makes sense and is easy to do. We build for the very basic structure and then build out so that no matter what device or speed someone is viewing the site at, they will always be presented with what is important. The content!

 

Keana Lynch
Keana Lynch is the Director of UX Design & Development at Beacon where she has provided leadership and consultation for over 35 Higher Education projects. She specializes in the analysis, design, and implementation of websites. Keana is very passionate about design and development strategies focused on user experience, accessibility, multi-device interactions, and technical best practices. Outside of work Keana enjoys spending time with her three dogs, hiking, kayaking and volunteering with local animal rescue groups.
By | 2017-08-11T16:23:44+00:00 October 4th, 2013|Web Development|2 Comments

So Many Rights & So Many Wrongs

Some people think there is no ‘right’ or ‘wrong’ way to code. I agree and disagree. I’m not saying there is only one right way and all developers should live by this method. I’m saying that there is a wrong way for anything. People can go about the same thing in many ways and it would be considered right. Each developer has their own style and comfort zone in how they do things and as long as it is efficient, doesn’t bear on page performance and doesn’t fall into the ‘wrong’ category then it’s still considered good code.

Right

  • Following the rules that the W3C has defined for creating websites
  • Following Web Standards, Best Practice and the KISS principle
  • All code validates and runs error free
  • Separate content from presentation
  • Semantically correct markup
  • Fully minimized and clean
  • Makes sense

 

Wrong

  • Using things in a manner they were NOT meant for (ex. tables for layout)
  • Hacks that are unneeded (hacks are normally only needed for bad code)
  • Overly complex (adding in some code because it was too simple)
  • Re-writing built in functions (re-inventing the wheel of php)
  • Doesn’t make sense

 

Right

To fully explain things there is the W3C which is an organization that standardizes Web technologies. They are the people who define how the web works in terms of HTML. Following these rules will not only keep the need for hacks at bay but it will also keep your code valid because that is what you are validating against when it comes to HTML and CSS. Yes… you are validating your code against the rules they have outlined for you. So tell me again why we wouldn’t follow the rules?

As for fully minimized and clean I mean can I look at it and point out anything not being used? Did the old stuff get cleaned out? Are there unnecessary things? Are there too many unneeded wrapping divs? Is the programming of the code logical? Can it be done in a simpler way? Basically take the code and remove everything you can from it. Make it as small and compact as you can without losing any functionality. Once you’re done it is minimized and clean.

Overall when I say there is a ‘right’ way I mean when any knowledgeable developer can look at the code and figure it out almost instantly because it is done the way it was intended and follows Web Standards and common sense then it is good code.

 

Wrong

Ahhhh the ‘wrong’ way. Man oh man is there a definite wrong way of doing anything in life. Let’s take going to a grocery store that is half a mile down the road. What is the right way to get there? There are a few ways that would work I mean you could walk, take a bus, ride your bike or even drive your car. All these work and are logical. Well what about walking 1 mile the opposite direction to get on a bus that takes you to the airport where you fly round trip to the furthest destination and on return get a rental car and drive straight to the grocery store. This in my eyes is wrong.

It may seem dramatic to some but you have to admit that’s not the most efficient way to get to the grocery store. You might catch yourself thinking ‘Why would anyone do that?’… And that is a good indicator question that determines bad code.

On a less obvious side there are other things that make it the ‘wrong’ way including invalid, erroneous, weighted, hacked and non-logical code. When people use tables for layout it is actually wrong because it is invalid. If errors pop up or it takes triple the time to load due to controllable factors it is wrong. If you use JavaScript to apply CSS classes or inline styles when there is no JavaScript functionality on the page then it is wrong. If you are re-writing built in functions for any scripting language then it is wrong. These are just a few examples that there are wrong ways of coding things.

 

Conclusion

In conclusion I understand that some developers use floats and some use positioning this is their style and both methods work. There is a difference between that style factor and the just plain wrong or outdated factor.

I know I can’t make everyone a believer overnight, some will just always believe if it runs then it must be good code. However I encourage you to Google the ‘benefits of web standards and best practices‘ and after a few good reads go ahead and try to search for the ‘downfalls of web standards and best practices‘. Since I don’t know of any downfalls please comment below if you do find any.

Also stay tuned for more blog posts about this topic.

By | 2016-11-21T17:44:20+00:00 July 21st, 2011|Web Development|Comments Off on So Many Rights & So Many Wrongs

Illustrator Slices: The best invention since sliced bread?

To Slice or Not to Slice: What’s the Big Deal?

Let me start off by explaining the bigger picture a bit and why this issue is worth writing about in the first place. In the past, I have had to deal with badly organized design files where nothing is in any particular order, nothing is named appropriately, and there are no slices. Trying to sort through it in order to make a simple update is like a guessing game. It wastes a lot of time and can be very frustrating. Just because you know how everything works in the design file, does that mean when the client asks for a change months later that someone else will be able to come behind you, open the file, and be able to clearly discern where everything is and how it’s organized? Will you remember months down the road? I can tell you from experience that if things are not organized and named well in a design file, the answer to that question is an emphatic “No”.  Some design files can have 80+ layers containing hundreds of graphics and things can get pretty complex. Trust me, it always helps to find things in the file if the layers, groups, and slices are well organized and named accordingly… and it helps to have slices. This really isn’t an option, at least it shouldn’t be.

The Old Photoshop “Crop & Undo” Doesn’t Cut It

There are bigger issues than simple file organization and naming. I have had to make updates to websites that required updating the graphics. A basic example of this would be that the company logo has been updated and the new version of the logo needs to replace the current logo image on the site. This should be a simple change and will be if there is a design file with a slice path for the logo graphic. If not, this might not be so easy. This can especially be troublesome if the logo sits on a gradient background. In order to have the gradient line up when the logo is replaced, you need to know exactly where the logo image sits on the background. If you crop the logo out of the design and you’re just one pixel off, it will show because the gradient will not match up. One solution may be to save the logo out as a transparency, but what if that’s not an option? Because in some situations it won’t be an option for one reason or another. This scenario demonstrates the problem with the old Photoshop crop and undo method. Because with that method, there is no record of where the graphic elements were cut out of the design. This can really be a problem when you have to go back to the design file and figure out where and how something was cropped originally, because sometimes it is not so easy to get it to match up.

But What About Slices? What Are They Anyway?

Glad you asked! Okay, so obviously the slices I’m referring to have nothing to do with bread. Instead, it’s a neat tool for cutting a design up in smaller bits. Both Photoshop and Illustrator have a Slice Tool (formerly called “Knife Tool”). Of course, just like with most of the other tools Photoshop and Illustrator have in common, the Slice Tool works a bit differently in Photoshop than it does in Illustrator. I prefer Illustrator slices because in my opinion, they are easier to work with.

In order to make a website, you have to cut the design up in pieces sort of like a puzzle and then cleverly put it back together using HTML and CSS. In Illustrator, using the Slice Tool allows us to cut the design up in the necessary puzzle pieces. Basically, you use the Slice Tool to draw out rectangles (paths) over the graphic area you wish to cut out of the design. That is the sole purpose of slices, to carve the graphics out in rectangular pieces from the design file. The best part is that the slices are saved in the file, so you have a record of it. In Illustrator you can make a Slice Layer and have all your slice paths under that layer. This makes the slice paths easy to find, and allows you to maintain the exact dimensions of all the graphics that were originally cut out of the file. You can hide the slices so that you don’t see all the slice path outlines, show the slices when you need them, and you can lock the slices, which is usually a good thing to do to ensure you don’t accidentally move the slices around. So if you come back to a design file a year later in order to update some of the graphics, you can use the original slices in order to make sure the graphics are cut out exactly like they were when the website was originally developed.

Before You Slice…

Before you create slices it is a good idea to create a new layer at the top of the layer stack and name it “Slices”. The reason for this is that the Slice layer is a “special” layer and you should treat it differently than other layers. Once you make a Slice layer, you can then make slice paths and place them within that layer. I will explain more about this and why they should be at the top of the layer stack a little later on.

During the process of creating a website design there comes a point when screenshots are needed in order to present the design to the client for feedback and approval. This is the point where I always create a Slice layer in the design file. So often times, once I hand a design file over for development, it already contains a Slice layer at the top of the layer stack with a layer named “screenshots” that contains all the slice paths I used to make the screenshots within it.

Name That Slice!

Whenever you make a slice path, Illustrator gives it the name “<Slice>” by default. It is a good idea to rename the slice. To do this, double click on the path in the layers palette and a window will pop up where you can type a name for the slice.

What’s In a Name?

Meaning… names give things meaning. It does not make sense to use a name for a slice that is in no way related to what the slice is being used for. Just like with programming and development, typically it is a good idea to give variables, id’s, and classes meaningful names related to their purpose, so it is with slices in a design file. For example, if you are creating a slice path for a submit button, then a meaningful name for that slice might be “submit” or “submit btn”. Whatever you choose to name it, just be sure it is relative to the graphic that the slice is being used to cut out of the design. The reason this is important is because not only do some website design files contain tons of layers and graphics, but they will also need many slices in order to cut all the graphics out. Again, it is very difficult for someone else to open up the design file months later and figure out which slice goes to which graphic, and it only makes matters worse when there are 80 slice paths that are in no particular order, and they all have arbitrary names or even worse, they’re all named “<Slice>”.

Slices Are Special

Earlier I referred to the Slice layer as “special”. The reason for this is that you can do things specifically with slices that you cannot do with other graphics layers. In Illustrator you can choose to “Show Slices”, “Hide Slices”, and “Lock Slices”. When you choose one of these options, it only affects the Slice layer and slice paths. It does not show, lock, or hide, any other layers. The other thing that makes slices special is that they should be placed at the top of the layer stack in order to maintain your sanity. Trust me on this.

Where Did it Go?

The Slice layer containing slice paths should reside at the top of the layer stack. As a best practice, nothing should ever be placed on a layer above the Slice layer. This is because slices should always be above the graphics they are meant to cut out. Imagine trying to carve a space out of something located on a shelf above your head, but you cannot see it because you are unable to look up, you can only look down. That is sort of the way slices work, they cannot see what’s up above them very well, only what’s below them. Thus, the graphics you want to cut out should always reside below the slices. As a matter of fact, Illustrator sort of does it for you.

If you have a graphics layer selected and switch to the Slice Tool in order to create a new slice path, by default Illustrator will create a new slice above your current layer (the one you had selected before you made the slice path). That’s a neat trick and it’s great Illustrator does that for you, right? Sure it is. But it is also a great way for you to lose track of where your slice went. So keep track of where you create your slice paths in the layer stack and if you happen to accidentally create a slice path while you have a graphics layer selected, grab that slice and move it up under the Slice layer. If you don’t, you may encounter some puzzling side effects of buried slices. I’ll refrain from telling what those side effects are, I’ll let you figure that out on your own. If the problem ever presents itself you aren’t likely to forget it again. The best way to avoid it altogether is to make sure all your slice paths end up under the Slice layer!

Saving Sliced Images

With slicing, you can either save each slice as you go, or you can wait until you have all the slices done. When saving out slices, slice order matters, really matters. Generally it is a good idea to move the slice path you want to save to the top of the stack in order to make sure there are no overlapping slice paths above it. If there are overlapping slices, the topmost slice wins and this can produce some strange results. So put the slice you want to save on the top, that way it will win every time!

When you are ready to save your slices, you will need to use “Save For Web & Devices” instead of the traditional “Save” or “Save As”. When Saving For Web, you will be presented with various options. Different people like to set their Save For Web options differently. You can have Illustrator write out HTML for you (I don’t usually use Illustrator’s generated HTML), you can choose the file type (.jpg, .png, .gif) and specific settings for each type, have Illustrator save out multiple slices at a time, specify a naming convention for slices, a naming convention for the saved images, and also choose to have Illustrator save all the images to a specific place automagically. Feel free to explore all the options and decide which ones work best for you.

Extra Tips & Tricks

Now that you know how to use slices, below you will find some extra tips for a few of the peculiarities I have experienced when using slices.

Dealing With Decimal Pixels

Depending on how you look at it, or rather how you use Illustrator, one downside can be that Illustrator allows for decimal measurements and placement of graphics. This can be a problem with web graphics because in HTML and CSS, there is no such thing as a .5 pixel. If you make a slice and its x-position on the Artboard is at 100.725 pixels and its width is 200.256 pixels, well that does not compute in HTML and CSS. In order to resolve that issue, Illustrator forces the slice to use whole numbers instead of decimals when it is saved out. You will see your slice path outline, and then a second outline showing the actual size and location of the slice. This second outline is Illustrator compensating for the decimal numbers, and it always rounds up and chooses the ceiling of the decimal number for width and height values. So if you have a slice path 200.256 pixels wide, Illustrator will make the actual size 201 pixels. Also, if the slice has an x-position or y-position that includes a decimal, Illustrator will force the positions to be whole numbers as well. Again, you will see your path outline and a second outline showing the actual location/size of the slice.

In Illustrator, one of my favorite tool panels available is the Transform Panel. The transform panel makes it very easy to measure and place elements to the exact pixel needed. The thing I love the most is that you can do math right inside the Transform Panel. If you need to move an element to the left or right 20 pixels, then you can just add or subtract 20 pixels from the x-position. You can add, subtract, multiply, and divide in the Transform Panel.

The Transform Panel also works well with slices. If you create a slice and you see the slice path and a second outline showing the actual size and location of the slice, then you already know that the slice dimensions are not whole numbers, or the slice x & y positions are not whole numbers, or all of the above. You can use the transform panel to size the slice correctly and put it in the exact place you need it. In the transform panel, choose the registration point that coincides with the top left corner. Once you have done that, you can set your x-position, y-position, width, and height to whole numbers and the slice will adjust accordingly.

Missing or Blank Images

Sometimes you may try to slice out a graphic but when you save it out, either nothing is saved, or the image that was saved is blank. If this happens, try turning on the Artboard and see if the graphic you are trying to slice out is positioned outside the Artboard area. If it is, you can adjust the size of the Artboard to include the graphic you are trying to slice out. This should fix the problem.

By | 2016-11-22T09:55:24+00:00 October 11th, 2010|Creative Design|Comments Off on Illustrator Slices: The best invention since sliced bread?
Load More Posts