25 11, 2013

Is Flat Design For You?

By | 2016-11-18T14:23:20+00:00 November 25th, 2013|Categories: Web Development|Tags: , , , , , , , , , , , , , |

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.

 

4 10, 2013

Progressive Enhancement

By | 2017-08-11T16:23:44+00:00 October 4th, 2013|Categories: Web Development|Tags: , , , , , , , , , , , , |

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!

 

20 08, 2013

3rd Party Plugins, A Cautionary Tale

By | 2017-06-16T13:14:25+00:00 August 20th, 2013|Categories: Web Development|Tags: , , |

One of the many questions you’ll have to answer when developing your website will be whether to use custom built in house solutions or easy to integrate 3rd party systems. It’s certainly easy enough to say that the cost of most 3rd party solutions will be lower than custom built software, but lets explore what you might be risking for that decrease in initial cost. When you entrust certain aspects of functionality in your site to a 3rd party system you are suddenly vulnerable to a number of risks that you should seriously consider before making a decision.

If the solution is built the best way it can be for speed then it’ll be something hosted on your own servers. You’ll install it and configure it and might even have an admin panel to maintain it. What you don’t have though is the ability to easily change it. Any changes you want, either for personal preference or because of errors in the software will need to be made by your own development staff (unless the software offers a support package that you’ll undoubtedly have to pay extra for). Your internal developers may or may not be familiar with the code, or it might not be in a language they are fluent in, or it might have been compressed to the point that it’s either a nightmare to edit, or it can’t be edited at all. This means that if the software you purchased utilizes deprecated html, script, or css that it might not work with newer browsers and updating the software you bought and became accustomed to might be more expensive than it would’ve been to have it built from scratch by your in house team.

What if your 3rd party solution is hosted externally, like many of the available google services. That way the onus is on the 3rd party to maintain their services and ensure they are up to date with current standards. The drawback in this case would be that your site’s functionality is now dependent not only on your hosting servers and their maintenance, but also on that 3rd parties servers and maintenance. One mistake on their end could make it impossible to submit a contact form on your site, or change how taxes are calculated, or even bring your whole checkout process to a halt. Even google who many think might be infallible suffered a 5 minute blackout this past weekend where 50% – 70% of all requests received an error. This might sound like a small window, but it doesn’t take 5 minutes for an error on your ecommerce platform to divert lots of revenue to your competitors.

With larger solutions, like tax providers or shipping providers, those might be the only problems you’ll face, but with smaller plugins you might even have a third potential chink in the armor. What if you’ve downloaded and installed a plugin and the original author decides to stop supporting that plugin? This is becoming more and more of a problem with amateur and hobbyist developers writing quick plugins to solve current problems and releasing them without support on the internet. They’ll probably work at first (after all if they didn’t you wouldn’t have bought it), but as browsers update and standards change and older practices become deprecated, you can bet that your un-managed, unsupported plugin has a shelf life, and the more complex the plugin, the closer the expiration date is.

With all the dangers of relying on 3rd party solutions you might be wondering why anyone would ever choose to put their faith in something written by an outsider. The answer is simple. Start up cost. It’s much cheaper to go with a 3rd party solution that’s being used by other sites on the web, and in most cases, the plugins will be in better shape and have more functionality than something developed in house so long as you do your research and ensure that this solution has worked for others before you. Don’t forget though, that when you decide to rely on an external vendor for your own site’s functionality, that your site is now dependent on more than just your developers and your hosting company. It’s now dependent on a network of vendors that you’d be wise to keep track of.

6 06, 2013

How to Override the Max Width of Twitters Embeddable Timeline Widget

By | 2017-06-16T12:22:23+00:00 June 6th, 2013|Categories: Web Development|Tags: , , , , , , , , , , , , , |

According to twitters instructions the embeddable timeline widget has a maximum width of 520px. If you need your widget to be wider than 520px you will not be able to use the width attribute. If you need it wider you’ll need to override the max width using the following CSS (change width accordingly):

16 07, 2012

Forbes Home Page Redesign

By | 2016-11-22T10:22:55+00:00 July 16th, 2012|Categories: Digital Marketing|Tags: , , |

I enjoyed the following article “Inside Forbes: ‘Aha Moments’ From Our New Home Page” this week and thought I’d share a few thoughts/observations:

  • Social media (“The breadth and depth of our home page changed dramatically with the addition of the Most Popular stack“)– We at Beacon are seeing social media become of vital importance in virtually every software development project we are now starting.  If you aren’t considering social media in every customer touch point, particularly your corporate website, you are missing critical opportunities to engage your customer!  Beacon can help, particularly with our “Social Media Marketing” services.
  • Writer profile information (“Accomplished by including the journalist’s photo under all home page headlines. Then, upon roll over, you get an enhanced “info card” about the writer“)– Very cool!  I’m not exactly sure where I’ll recommend this to my non-media clients, but I’m keeping it in mind for just the right opportunity…  Perhaps a roll-over balloon on a university site whenever a professor is mentioned in an article or news that shows their expertise, contact info, etc?
  • De-clutter the home page (“It invites engagement, not the brain freeze caused by home pages with a sea of 400-500 links“)– AMEN!  Though I recognize the politics of the home page are very delicate, it is so important to engage your visitor to click deeper into the site rather than presenting them with hundreds of links and gobs of text content to choose from on the home page.  The writer says that the comments have been 100% positive on this “clean and simple” approach, and I applaud them for accomplishing it!

 

What are your thoughts about Forbes new home page?  Please share!

16 07, 2012

Summer Internship Update

By | 2017-06-16T12:20:23+00:00 July 16th, 2012|Categories: Beacon News|Tags: , |

I officially have 1 week left at Beacon Technologies. So far everything is going great! I am really excited about the Beacon NetCafe website. The website is coming along nicely. I am very impressed by the website and I would like to publicly thank Jennifer for her hard work on the website. I know everyone is busy right now and I appreciate her work on the website. The big thing this week is having a test run of the Beacon NetCafe. I am really excited about this event. All my hard work will come to a big finale with the test run. The test run will be short but it will show us how this event will happen in the future. Hopefully, the video feed will work and we will be able to utilize Twitter with the video. There are still many things to be done before the test run and many things to be done after I leave but I think this is a positive step towards having a monthly event for the company and its partners.  I am confident that I can finish the projects I am completing for Beacon Technologies. After this week, I will hand off my responsibilities to Richard but still answer any questions if need be through email. It is a bitter sweet feeling to be ending my internship at Beacon Technologies. I am ready to get back to school and ready to complete the Beacon NetCafe test run.

9 07, 2012

Beacon NetCafe Second Update

By | 2017-06-16T12:20:19+00:00 July 9th, 2012|Categories: Web Development|Tags: , , |

My internship at Beacon Technologies is coming to a close but there are still many things to be done before I leave to go back to school. The previous week I completed the requirements and wireframe documents. I submitted the documents to the web designer of the Beacon NetCafe website. So far, the website is going along very well. The designer has setup a test website and it is taking shape. This week I have been working on the content for the website. This is just mostly writing up the various sections of the website. It will be important to finish completing the content for the website and giving this information to the web designer. I can’t help with the design of the website but I can help with the content. The next major step after completing the website will be a system test. With a system test, we will try to crack the website in every possible way. This is important before ever releasing a website to the general public. After the system test, a user acceptance test will be completed by Mark. The system test is from the developer’s side while the user acceptance test is from the user’s side. After all the tests are completed, we will complete a test run of the event or Beta test of the event. The website is coming along nicely but there are still many things to do. I am very excited to complete this project for the company. The website is starting to look complete and every day it looks even better.

22 06, 2012

Sitemaps and More!

By | 2017-06-16T13:11:25+00:00 June 22nd, 2012|Categories: Beacon News|Tags: , , , |

I only have 4 weeks left for my internship at Beacon Technologies. I am still learning a lot about the process of creating a website. We have decided on a template for the Beacon NetCafe. Richard and I are going to start pushing this website through and have the pilot run before the end of my internship. I look forward to completing this project in the near future.

 

When designing a website, it is important to create a sitemap. I have already learned this fact. You shouldn’t pick or design the website before creating a sitemap. This would be counter-intuitive. Never use a website to create your sitemap. After creating the sitemap and better understanding the needs of the website, we were able to find a template much more effectively. Now that we have the sitemap and the template, our next step is to create a wireframe for the website. A website wireframe is a framework of the website design. I am learning more and more about the process of designing a website. So far, I have been using Paint to complete the wireframe for the Beacon NetCafe website. Using my master Photoshop skills that I don’t really have, I have been copying and pasting images and words to a screenshot of the template. Although anybody can see the boxes from copying and pasting on my wireframe, it will get the job done. I also enjoy messing around with pictures on Paint so this part of the project is turning out to be pretty fun. I will also start to work on a requirement document next week to plan out everything needed for the website. After about 6 weeks of researching and planning, I am actually starting to see how this website is going to turn out. So far, it has been exciting and I can’t wait to have a demo website up and running in the near future. The process has had its ups and downs but I am confident that this website and event will turn out to be great for Beacon Technologies.

4 01, 2012

Flash is Officially Not Being Supported on Mobile Devices

By | 2016-11-18T14:24:47+00:00 January 4th, 2012|Categories: Cascade CMS|Tags: , , , |

Flash is officially not being supported on mobile devices anymore. It’s a good thing for performance and battery life. It also opens up the door for more interesting ways of introducing techniques and effects to your audience.

So, that brings up the question on what people and clients ask. Should we update our site to be mobile friendly? In a short answer yes for the best reach of audience. The amount of people using mobile devices is growing and continues to do so at an astounding rate.

Here at Beacon, we have a team of professionals that can update your Flash site or Flash elements with cross browser and mobile device friendly code. Your site will feel more refined and can even be implemented to work with our great Cascade Server (CMS system). Staying ahead of the curve and keeping your site fresh will keep the visitors and customers coming back for more.

19 12, 2011

Greensboro Housing Authority Site Launch

By | 2017-08-15T15:53:10+00:00 December 19th, 2011|Categories: Beacon News|Tags: , , , , , , |

We’re proud to announce the release of the Greensboro Housing Authority redesign!  As always, Beacon was right on-time with our deliverables, which is always our goal.  The client chose a soft launch date of December 1, 2011 because they wanted to show the new site to their Board of Directors at their annual meeting that day.

Their Web site was designed and constructed in-house several years ago, which meant that it was time for a completely new look.  The site also had content that was very out-of-date, so the client took it upon themselves to do a complete rewrite of the content, and restructure the site to be more intuitive.  Also, they wanted to get away from having to update the site by-hand using HTML, and wanted it in a content management system.  Finally, they wanted a new Web hosting partner.

Enter Beacon:

  • We provided them with a brand-new graphical design;
  • Developed it to display perfectly in multiple browsers;
  • Implemented the new site into Cascade Server (content management system) to allow multiple users to update the content with an easy-to-use solution;
  • Incorporated a new search feature;
  • Imported approximately 60 pages of content, including 20 fact sheets about each of their properties;
  • Transferred their Web site to a shared hosting package here at Beacon.

Several Beacon staff members made this project a success:

  • Wendy:  Without much direction from the client, Wendy put together a design that they liked on the first try, which is phenomenal.
  • Stephanie:  She was instrumental in getting the project off the ground, attending the initial meetings and providing meeting notes, the business requirements, and proposed site hierarchy.
  • Zed:  He was thrown into the fire, as this was his first development project here.  He developed the front-end HTML/CSS/jQuery, and implemented the site into Cascade Server (which he picked up on very quickly), and entered most of the content.
  • Tiffany:  Provided assistance and training to Zed.
  • Justin:  Project Management and Cascade Server documentation & training.
  • Beacon’s Technical Support Group (TSG):  And finally, no site hosting transfer is complete without the efforts of TSG, specifically Caleb and William, for setting up the hosting and troubleshooting some DNS issues over a weekend.

This is another high-quality design to add to our portfolio, and another non-profit site we can be proud of.   Thanks to everyone involved!

Before

After

Load More Posts