How to Plan Responsive Breakpoints

Typically people think about breakpoints in responsive designs in terms of typical screen size, and it usually works out to something like this:

  • 1024 pixels wide—Full desktop and full-size tablets.
  • 768 pixels wide—Tablets
  • 320 pixels wide—Mobile phones

These breakpoints are extremely simplified way of describing what is actually done. In reality, devices come in a very wide range of screen sizes and there are new devices coming out every day. Technically there are no common screen sizes. A website needs to work at all screen sizes, not just at the breakpoints decided upon by looking at what devices make up the largest percentage of your website traffic.

Ideally, a design should be both FLUID and RESPONSIVE so that it is optimized for all screen sizes and not just certain breakpoints. If you grab your desktop browser by the corner and drag it around to resize it, you can see how a website responds to varying screen sizes. When content is fluid, it fills up 100% width of whatever the screen size is. When content within sections is no longer appropriate for that width (the line length of text boxes getting too long to read or the items in a horizontal navigation getting too cramped to be legible, for example) then a RESPONSIVE breakpoint needs to be added so that the layout is altered in a way that makes the content work better. Therefore, the breakpoints are determined by the content and not the screen size.

Ultimately what we get by taking this approach is a website that looks good on all devices.

Our actual real best practice is to work mobile first. We typically do a desktop graphical design first so that we have all of the graphics that are required for the fullest size, but we work mobile first when planning out the content and the responsiveness of the site. If we plan out the content for the small screen of a mobile device then we have tackled the most difficult problems first, and the rest of the design becomes much easier.

 

By | 2016-11-18T14:23:17+00:00 July 8th, 2014|Web Development|Comments Off on How to Plan Responsive Breakpoints

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

Top Mobile Browsers

Within the mobile phone landscape, there are at least ten operating systems (OSs) and fifteen browsers that require consideration when testing. Web developers should concentrate their testing efforts on smartphones. All good mobile browsers run on one smartphone platform or another. To get stats of popular browsers in your country there’s only one source of mobile browser market share information: StatCounter.

Apple, Google, Samsung, and RIM default browsers are among the top browsers because they support touch events and are all based on the WebKit rendering engine. The next level of mobile browsers include Opera Mobile, Palm WebKit for webOS, and MicroB, the Gecko-based default browser for Nokia’s Maemo OS. These browsers do not support touch events, and zooming varies in each implementation. From a pure CSS and JavaScript point of view however, you’ll encounter few problems. Of the three, Opera Mobile is the most important, because it serves as a default browser for many Windows Mobile devices where the vendor decided IE wasn’t good enough. Currently, it’s an alternative for Nokia WebKit on Symbian, the largest mobile OS.

Below is a list of all the current mobile browsers, there special features, operating systems, and devices they can be found on. Some of the browsers do not come default on phones but are among the top browsers used today.

  • Opera Mobile
    • Key Features: Multiple tabs, Zoom-in
    • Operating System: Windows Mobile, Symbian
    • Devices pre-installed with Opera:
      • Nokia N90
      • Sony Ericsson P1
      • Sony Ericsson XPERIA X1
      • HTC Touch Viva
      • HTC Touch Diamond
      • HTC Touch Diamond2
      • HTC Touch Pro
      • HTC Touch Pro 2
      • HTC Touch HD
      • HTC HD2
      • Meizu M8
      • Creative Zii
      • Samsung i900 Omnia
      • Samsung i8000 Omnia II
      • Sendo X
      • Motorola ROKR E6
  • Opera Mini
    • Key Features: Compressed downloads for fast browsing, Zoom-in
    • Operating System: Java
    • Devices pre-installed with Opera Mini:
      • Motorola V980, E2, L7, i1
      • Nokia 2610,3120c, 2700 Classic, 2730 Classic, 3500c, 3600, 3600 slide, 3710 fold, 3720, 6085, 5130, 5230, 5500, 5310, 5610, 3110, 7373, 6131, 6233, 6600 slide, 5070, E65, N95, N71, N73, 5000, 3110c, 6288, 6103, 6080, 6303, 6300and 8800 Arte
      • Sony Ericsson K310i, K530i, K550, W200i, W760i, Z530i, Z550i, Z780i, W910i
      • Samsung X160, E570, E420, F480, X510, X650, E900, E250, U700, ZV60, D900i
      • LG K880, KU250, KE970, and KU311
      • SAGEM My411x and P9521
      • BenQ-Siemens EL71 and EF81
      • BenQ EZ1 fight
      • Orange Rio (ZTE-G X991)
  • Skyfire
    • Key Features: Display rich websites with Flash or widgets like YouTube, customizable zoom feature
    • Operating System: Android, iPhone, Symbian, Windows Mobile
    • Devices compatible with Skyfire:
      • Android 1.5, 1.6, 2.0, 2.1, 2.2
      • iOS 3.1.3, 4.0, 4.1
  • Safari
    • Key Features: Display rich websites like YouTube, zoom feature, excellent touch-based user interface
    • Safari accounted for 62.17 percent of mobile web browsing traffic in October 2011
    • Operating System: iPhone
    • Devices:
      • iPhone
      • iPod touch
      • iPad
  • Google Android
    • Key Features: Display rich websites, zoom feature, touch screen interface
    • Operating System: Google Android
    • Devices:
      • Android powered phones
  • Microsoft IE for Mobile
    • Key Features: Standard browser features
    • Operating System: Windows Mobile
    • Devices:
      • IE Mobile comes loaded by default with Windows Phone and Windows CE.
  • Firefox Mobile
    • Key Features: Mutiple tabs, Awesomebar, password manager, Add-on support, PC-syncing
    • Operating System: Nokia Maemo, Windows Mobile 6.0 (alpha)
    • Devices:
      • Android 2.1 and above devices with an ARMv7 CPU
  • Dolphin HD
    • Key Features: Gesture browsing, Webzine, tabbed browsing
    • Operating System:  Android, iOS
    • Devices:
      • Android
      • iPad
      • iPhone
  • Blackberry Browser
    • Key Features: Standard browser features
    • Operating System: BlackBerry OS
    • Devices:
      • Blackberry devices
  • S60 Web Browser
    • Key Features: Standard browser features
    • Operating System: S60
    • Devices:
      • S60
      • Symbian Mobile Phones
      • Nokia N8
      • Nokia E6
      • Nokia E7
      • Nokia C6-01
      • Nokia C7
      • Nokia X7
      • Nokia 603
      • Nokia 700
      • Nokia 701
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:40:13+00:00 March 22nd, 2012|Web Development|Comments Off on Top Mobile Browsers

7 Factors to Consider When Redesigning Your Website

There are very few, if any, websites on the Internet that don’t undergo at least a minor facelift at some point in their lifecycle. If you own a business with a web presence, at some point, that site will need to be redesigned, whether it’s due to the changing nature of your business, or purely for aesthetic reasons.

Redesigning your company site can be a major undertaking, so we’ve put together a helpful list of things to keep in mind when considering a redesign.

1. Why Are You Redesigning?

This is perhaps the most deceptively complex, yet obvious question of all. Before undergoing any redesign, however, it’s important to understand what it is you wish to accomplish. Are you unhappy with the way your site functions? Do you simply want a better-looking site? Do you need to improve search engine rankings and sales conversions? Maybe the focus of your business has shifted and it’s time for new content.

These are all important factors to consider, so before you start, make a detailed list of what it is you wish to accomplish during the redesign. This will help guide you through the rest of the process and make sure you stay focused on the end goal.

2. What Type of Redesign Do You Need?

Now that you’ve decided exactly why you want to redesign your site, it’s time to decide just how far down the rabbit hole you need to go. Perhaps a small change in visuals and content is all that’s necessary. On the other hand, you may need to add new features or completely redo your underlying code base. Depending on your needs and budget, a large overhaul may be out of the question, or it may be the most cost-effective long-term solution, so take a moment to think about your needs going forward and work with your developer to strike a balance that best meets them.

3. What Does and Doesn’t Work Currently?

No matter how large or small the redesign, chances are there will be some elements of your existing site that work very well and some that don’t work at all. Now is the time to go through your site and identify these elements. Maybe your content is too verbose or your sales page isn’t very user-friendly. On the other hand, that photo gallery and the blog may be big-ticket items that do really well for your image and bring in lots of traffic. Some elements will need to remain (though possibly given a makeover), some will need to be cleaned up and some will have to go. Break your site down into its key components and then compare those with the goals you decided on in step one and the overall vision for your web site. If something doesn’t fit, it’s out.

4. How Is Your Site Being Used?

Along these same lines, don’t forget to take a look at how users are currently interacting with your site. This will help you identify great content and problem areas. Study your traffic statistics and site analytics for information on things such as entry and exit pages, sales conversions, and search engine keywords. This will help you to understand how visitors find your site and what they do once they get there. While you’re studying those statistics, also have a look at details like screen resolution and browser usage. This will help your developer determine what technical specifications your site should meet and whether a separate mobile version of your site is recommended, among other things.

5. Has Your Brand or Company Image Changed?

If you’ve undergone changes to your brand and company image, those changes need to be reflected in your site, even if the only updates are visual. Keep your logos updated and consider a color-overhaul if the corporate image or philosophy has shifted. Your website is often the first impression people get of your business, so it should grow and mature right along with the rest of your brand identity.

6. When and How Should You Launch Your Redesign?

When and how you launch your redesign can have a big impact on your traffic and in generating buzz about your new site and your product. Maybe you’re simply making improvements and want to slowly roll out changes over time and unannounced. This unobtrusive rollout won’t give you a lot of buzz, but it will still accomplish your goals of improving the site’s performance and the user’s experience. On the other hand, a big relaunch around the holidays or at the start of a big promotion, or when announcing a major change in the way your business operates can both draw traffic and generate more interest.

7. How Do I Make the Transition Smoother?

Most people are a little intimidated by change. If you have a site that gets a lot of repeat traffic, a sudden, drastic change in form and function can be a bit off-putting to some users. Further, you don’t want this drastic shift to damage search engine rankings and suddenly destroy any and all backlinks you may have gathered over the years.

Try and keep vital elements of your site similar to their existing counterparts, such as the main navigation and header. Usually, your redesign should strive to be an evolution of your existing site, not a dramatic replacement. If the change is dramatic, make sure it’s clear and give your users a blog post or news announcement discussing the changes.

Similarly, you want to make things easy for the search engine spiders, as well. Moved content should be redirected via 301 redirects, for instance, and error pages should be helpful and transmit the correct header information and meta data. For human visitors, make sure those error pages contain helpful information that is, where possible, relevant to the content the user was trying to access.

Source: Mashable.com

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 | 2016-11-23T10:22:40+00:00 October 3rd, 2011|Web Development|Comments Off on 7 Factors to Consider When Redesigning Your Website

Eduweb Bound!

As a followup on Patrick’s earlier post, Beacon is gearing up for the fast approaching Eduweb Conference in San Antonio.  It will be Beacon’s first time exhibiting at the conference and we look forward to connecting with many clients, prospects and industry peers.  With hot topics like: mobile, social media and HTML5 on the agenda – I’m looking forward to the conversations that will pour out of the sessions into the exhibit floor, coffee lines, receptions and the other networking events.

Should you be at the conference, be sure to drop by table #5 in the Navaro Foyer and say ‘hello.’  With little time to break off into the sessions myself, it will be great to hear your take on the conference content and the ‘big takeaways.’   Also, please help keep those less fortunate (like the exhibitors, my fellow teammates back at Beacon and the others who couldn’t make it) in the loop via #eduweb on Twitter – we’d really appreciate it!   Have a safe trip and we look forward to seeing you all in the Alamo City!

For those not attending – keep an eye out for Beacon at the upcoming Cascade Server User Conference in late September, upcoming North Carolina Technology Association Events as well as Facebook, Linkedin, Twitter and of course our blog.

Rick Boccard
Rick Boccard is the Director of Sales for Beacon Technologies. Rick is an MBA candidate at UNCG’s Bryan School of Business and holds a Bachelors Degree in Economics from Roanoke College as well as an Associates in Web Technologies from Guilford Technical Community College. Rick spent 4 years with Bluewolf in New York and Greensboro, followed by 2 years as a Territory Sales Executive with Bronto Software in Durham.

Connect with Rick on Google+

By | 2016-10-12T15:10:18+00:00 July 21st, 2011|Beacon News|Comments Off on Eduweb Bound!

The Benefits of Using jQuery

Recently I have had the opportunity to make really exciting and interactive web pages using jQuery. Before working on these projects I had very little understanding of jQuery and what all it could be used for. So I decided to do some research on what the benefits are of using jQuery over other applications such as conventional JavaScript and wanted to see what all I can build using it. Basically you can do almost anything with jQuery to make effects and animation on your site and still be SEO friendly and cross browser compliant.  But those aren’t the only benefits….

What is jQuery?

“jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.” http://jquery.com/

Benefits of using jQuery:

  • Search Engine Optimized – While search engines are getting better at being able to read content within some Flash, everything within jQuery is setup as text. This means it is completely readable to all the search engines, exposing all your keyword rich content.
  • Save Time – Five lines of jQuery are equivalent to 25 lines of conventional JavaScript code. This means smaller files and faster loading web pages.
  • Plug-ins – There are an abundance of plug-ins on the web that make creating special effects simple and fast for web developers.
  • Help? – With an abundance of plug-ins comes with an abundance of help. There is a large helpful support community on the web to help you quickly remedy any bug issues.
  • That was easy! – jQuery has easy implementation for web developers in comparison to other applications.
  • Cross Browser Friendly – jQuery is currently the most popular JavaScript library and works in all browsers.
  • FREE! – free, open source software.
  • Mobile Devices – jQuery is supported by any mobile device whose web browser supports JavaScript. A lot of mobile devices like iPads and iPhones don’t run Flash at all.
  • Simplifies AJAX
  • Wow Factor – Web developers use jQuery to make web pages more exciting, interactive, cleaner, and more user friendly. Make your users go WOW!

jQuery in action! A few examples of jQuery Usage

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 | 2016-11-22T10:57:29+00:00 May 24th, 2011|Web Development, Creative Design|Comments Off on The Benefits of Using jQuery

The Younger Generation and Mobile Device Addiction

 

 

I took a  look back in history from when the telephone first arrived to the mobile devices of today.  Making communication easy spawns an addiction to the facilitating platform and an addiction to it will always will be rampant among the young.

 

 

 

 

“The telephone has been accepted without hesitation by the younger generation, but it has suggested uneasy questions to older persons who have not been accustomed to it all their lives.” -1903

1903 – “It’s Appalling”- Phone accepted without hesitation by younger generation

1948 – The teenagers have tied up telephone communications

1963 – Telephonitis is a disease of adolescence

1972 – For six years my son ate, slept and lived in a small phone booth

1989 – Younger generation has phone addiction!

2009 – Too Much Texting Taking a Toll on Teenagers

2011- Young generation addicted to mobile phones

What are we in for next?

Click here to see.

The rise in popularity of Facebook has similarities.

Mark Zuckerberg stated that:

“In fact, in some ways Facebook is like a telephone conversation, with all your friends on the same call. But on this call, your friends can share photos, text, political summons to action, video, and music, or can click to make purchases.”

By | 2016-11-18T12:10:25+00:00 April 21st, 2011|Social Media|Comments Off on The Younger Generation and Mobile Device Addiction

The Rising Importance of Flexible Web Layouts

To read the full article: http://www.onextrapixel.com/2011/02/04/the-rising-importance-of-flexible-web-layouts/

“Just a few years ago, creating a fixed-width design and the coding to stick to that width was practical, as long as it could accommodate a wide range of users. However, just a few years ago, having the Internet on a cell phone was a luxury, netbooks were rare, and the convenient tablet device, such as an iPad, didn’t even exist. Now, a fixed-width design is almost inconvenient.”

Image credit: almekinders
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 | 2016-11-29T14:23:33+00:00 April 4th, 2011|Web Development|Comments Off on The Rising Importance of Flexible Web Layouts
Load More Posts