Color Schemes

I am developing a new website in .NET using C# and the MVC model to highlight some of the web/coding projects that I have worked on over the past couple of years.  I wanted to share this awesome website I found for developing color schemes.  Check out Paletton – you can choose monochromatic, adjacent 3-color, triad 3-color, tetrad 4-color, and free-style 4-color.  You can also choose the lightness or darkness of the colors.

So, now I have a color scheme for my new site, which I’ll be adding to my CSS this weekend.  And hopefully, I will be able to unveil my new site soon!  Stay tuned.  🙂

Co-op Highlights 14

A couple of weeks ago, a new project has developed at my organization – to remodel a website for our sister organization.  One of the ideas that came up was to remodel this using Responsive Web Design style or techniques.  Although I’ve heard of the term, I didn’t actually know much about what Responsive Web Design was, so I did a little research and thought I would document that here. As an introduction to Responsive Web Design (or RWD), Wikipedia provides a decent definition.

RWD recognizes that we are no longer viewing websites on a ‘normal’ computer desktop or laptop screen, but may be viewing these web pages on tablets, notebooks, smartphones, or even 60″ TVs.  In the past, websites were designed for specific viewing sizes.  As more and more people are accessing websites on a wider variety of electronics with varying screen sizes, it is necessary to be ‘responsive’ or proactive so that the viewing experience is optimized.  The goal is that navigation and easy viewing is accomplished with a minimum of scrolling and resizing. The main way to accomplish this is by using CSS3 media queries (based on the characteristics of the device accessing the website, usually the width of the browser), which is an extension of the @media rule.  Another key piece is using a fluid grid, where page elements are sized and resized in percentages.

Ethan Marcotte first used the term ‘Responsive Web Design’ in a May 2010 article in the magazine, A List Apart.  He also described the theory and practice of responsive web design in his 2011 book, Responsive Web Design.  Giving further credence to this web design style, RWD was listed as #2 in Top Web Design Trends for 2012 by .net magazine with progressive enhancement coming in at the #1 spot.

This website, http://mediaqueri.es/, gives some great examples of what you might see on different viewer/browser sizes, all showing the same website.
 
Infographics is another term that has come up recently regarding the website remodel for our sister organization. In a short definition, infographics is the ‘graphic visual representation of information, data, or knowledge, presenting complex information quickly and clearly.’  This Fast Company article from April 2011 provides some resources for creating infographics using template-driven tools.  This website, Visual.ly, also gives some great information.
 
Quite often, the solution to presenting data was to create a chart in Excel and copy that chart to your PowerPoint slide or your web page.  The result is rather plain-looking .  Infographics and data visualization takes this to a whole new level and will definitely be something to look for in the future.

Web Applications vs. Mobile Websites

As a continuation from Co-op Highlights 6, I wanted to explore the differences between web applications and mobile websites a little further.  Previous to the Database Architect meeting last week, I had a pretty vague understanding of ‘apps’ and mobile websites.  So, I did a little research on the two.

I found 2 great articles about the differences and pros and cons of both web applications and mobile websites.  I’m sure there are 1,000 more articles out there, but these 2 seemed pretty straightforward.

Article 1 – http://www.hswsolutions.com/services/mobile-web-development/mobile-website-vs-apps/

Article 2 – http://www.adaptistration.com/blog/2013/04/30/understanding-the-difference-between-apps-and-mobile-websites-2013/

Here’s what I found:

Web applications and mobile websites are both accessed by a handheld device, most commonly a smartphone (iPhone, Android, or Blackberry), but also tablets.

A mobile website would be very similar to your organization’s website, complete with HTML pages and links between those pages.  These would be accessed over the Internet (for smartphones, this could also be accessed through a data connection like 3G or 4G networks).  Obviously, because of the small screen size, your website would need some modifications to make it user-friendly for a smartphones.  A touch-screen interface is also a consideration when compared with a typical mouse-click on a full-size website.  Mobile websites can contain text content, data, images, and even video.  Another feature would be a click-to-call option or location-based mapping.

One example would be a person who pulls up your mobile website for your organization and wants to call the organization for more information.  With the click-to-call feature, there is no ‘write down the phone number and then call’ type action.  Location-based mapping could use GPS to pick up the location of the person accessing the mobile website and then display the location (maybe a pizza place or the nearest store) based the person’s location.  Pretty handy.

Web applications, or apps as they are commonly known, are a little different.  An app is an application (a module or object, to use different, but similar words) that is downloaded and installed on your handheld device (smartphone or tablet) instead of being accessed through a web browser.  An app could contain similar information to a mobile website (contact information, location information, general text describing your organization, etc), but it could also contain the ability to track certain pieces of information (maybe calories eaten, steps walked, etc) or it could be a way for the organization to push (send would be another word) information to the end-user.  Interactivity is a consideration, as the web application could allow paths for two-way communication between the end-user and the organization.

Both articles that I read indicated that a mobile website would be a first option or step, while an app would be something possibly added later for a specific purpose.

Mobile Websites

There are a number of benefits to consider with a mobile website.  Some of these pros include:

  • Broad access – instantly accessible using a web browser (while an app needs to be downloaded and installed first)
  • Compatibility – a mobile website can be accessed by many different handheld devices without worrying about developing different versions for different types of devices (the big example is iPhones vs. Androids)
  • Upgrading Content – mobile websites can be updated easily and the new information would be immediately available to the end-user (while an app would need to have an update downloaded and possibly re-installed for the new information to become available)
  • Cost-effectiveness – mobile websites are less costly, both in terms of time and money, to develop and maintain; developing and supporting a web app is much more expensive (considering developing for multiple platforms [iPhone, Android, Blackberry], upgrades, testing, compatibility, etc)
  • Shareability – mobile websites can be shared easily between people, just be sending the URL link in a text message or email (an app cannot be shared in this way)
  • Findability – mobile websites can be easily found because their pages would be displayed in search results (for example – search for the nearest pizza place) while apps are typically found via the app stores.  Another benefit to using a mobile website is that it is available whenever the user requests it, while an app may only be useful to the user for a short period of time.  I’m thinking of the Global Leadership Summit app from the August 2013 Willow Creek conference.  People attending the conference were encouraged to download the app to find additional information about the speakers, order resources, and complete surveys during the conference.  Once the conference finished, there is not really a compelling reason to keep the app on your smartphone.

Web Applications (Apps)

There are some instances when developing a web application (or app) makes sense.  And, maybe, an app for your organization only focuses on one part of the organization (such as a budget tool), instead of trying to represent your entire organization.  Web applications would be most efficient for providing interactivity or gaming, regular personalized usage, complex calculations or reporting (possibly financial, banking, investments), or if you needed to provide offline access to content (no network or wireless connection required).

Additional benefits to developing web applications include the fact that apps use programming code native to the platform and can result in higher performance.  There is also a name/brand recognition associated with the app that could increase distribution (‘it’s an Android app’), and apps can utilize some of the native functionality of a smartphone, such as the camera and gyroscope.  Apps can be an ideal solution if you need to deliver specific content to a specific audience. 

Web Application, Mobile Website, OR Responsive Mobile Website

There is a third option!  A Responsive Mobile Website takes the best of typical mobile websites and integrates the responsiveness

A responsive mobile website acts the same regardless of what device is used, so just one platform is required and is less expensive overall to develop and maintain.  It is searchable to anyone through  a web browser and can be easily shared with others.  There are no manual updates; content is updated and visible the next time a user accesses the mobile website.  Responsive mobile websites can be developed with database-driven capabilities, so that specific content is available to the user based on membership, preferences, or location.

There are a couple of drawbacks to this responsive design, including not being able to access a smartphone’s native functionality (like the camera and gyroscope) and not being able to connect your app with the status or reputation of a third party app distributor (name/brand recognition for Android or iPhone).

Consumers have also displayed a preference for mobile website interfaces for things such as shopping and searching.

Conclusions

At first glance, there appeared to be just 2 choices, web applications or mobile websites.  However, a third option surfaced and seems to be a hybrid of the two – the responsive mobile website.  Considering your goals is an important consideration here.  If your organization wants to share information with a broad audience or enhance your marketing efforts, a mobile website is a good choice.  If your goals are primarily interactivity, complex calculations, or offline content, then an application may be the way to go.

However, if you’d like to provide your audience with robust content that is easy to access and easy to share, regardless of the type of device, and can be tailored to a user’s preferences or membership level, then a Responsive Mobile Website may be the best solution.