Adjusting my Design Approach

This week, while continuing work on the makahiki-rui project, I had an epiphany.  Rather than trying to "create" a decent color palette from scratch, I decided to try another approach.  When creating a palette from scratch, you have to think creatively about how different colors work together, contrast, juxtaposition, etc.  I haven't studied color theory in well over 10 years, so I did not want to go that route.  Instead, I was thinking about how awesome nature looks and the colors out there seem to complement each other very well.  So, if nature's color palette is so darn perfect, why should I try to redesign the wheel?

That's when I decided to pick a series of different Hawai'i and beach related images to work with.  Although the images I found did not have explicit copyright information, they're not all that great.  I plan to take a trip out to the beach to get some pictures with a better camera.  For now, I decided to go with an ocean cliff theme.  Something that would represent the goal of sustainable energy and friendliness to our environment, which the Kukui Cup represents.  I really liked the colors represented in the ocean.  There are lots of blues and greens, which all work well together.  Beaches are particularly interesting, as they have some nice muted browns and yellows to add to the blue sky and ocean.  I will be doing some beach themes next, but for now I decided to stick with an image of the ocean next to a cliff.  This was the base from which I implemented my test of extracting a color palette from a nature scene.

The first step towards integrating a color scheme from nature is to figure out which colors you feel represent the image.  I used a color-picker tool to sample different colors from various parts of the image.  Oddly enough, many of the colors in an image are darker than I would expect them to be.  This prompted me to be deliberate about light versus dark colors, and to get a good sampling of both.  You want some colors to be darker, so that you can use them as shadows for page objects, text, borders, or as part of a gradient effect.  You also want lighter colors to use a backgrounds for your text, and to lighten the page so that people do not feel as though they're in a dark closet when they look at your site.  Once you find colors that you like, most graphics editors have the option to add those colors to a palette, for use later in editing.  From there, you can see the RGB values of each color.  RGB stands for Red, Green, and Blue.  Those are the colors of light which your computer screen uses to mix together for each pixel to produce all the colors you see on the screen.

Now, I realize that you can use RGB values when editing colors in CSS files.  But I am a coder at heart, and I randomly felt like writing a short java app to translate a string of integer values, separated by commas, into a hexadecimal representation.

That can be found here: https://gist.github.com/1900814

After getting the color scheme figured out, I made some changes to the navigation bar, and the header area to homogenize the look and feel.  I borrowed some style inspiration from Gregory Burgess with regards to the header area.

Here's a link to what he did: http://code.google.com/p/kukuicup-rui/source/browse/trunk/CSS-Refactor/theme-2.png

All-in-all, this was a good test.  I learned how to take a better approach to color palette creation and I have some inspiration with which I can move forward to create new themes.

Issues With Design

This last week has been filled with frustration and disappointment regarding a redesign for our makahiki-rui project.  Our team was running into issues working with the current design structure of the site, which we felt was a little cumbersome for responsive design.  We then spent a good amount of time trying to come up with some image mockups for design ideas.  Suffice it to say, I have not used an image program in over 10 years.  I spent hours trying to relearn vector based images and just trying to make rectangles with curved corners proved to be an annoying task.  It sort of turned out decently anyhow, as all my design ideas and "wants" were summarily shot-down by the project leader.  At least I was spared the shame of having to present my shoddy design, since some of the other designs were really terrific.

I'll have to spend some more time in the future to relearn basic design elements and theory.  It is going to be a significant issue when it comes to making user interfaces for just about anything else that I plan to make in the future.  It is definitely a stretch, to put on an artist hat after only wearing a coder hat for the last few years.

Since I decided to leave the design aspects up to those in our team more qualified, I thought about approaching a different problem.  It was suggested that we keep most of the basic structure from the old site, but spruce it up by doing color changes to the CSS files.  The caveat being that we have specific style sheets across the site and so we wanted to have convergence with regards to the colors at least.  Thus, I created a new theme.css file and moved over all the relevant color settings.  I found most of the color settings were found in the screen.css file, which we could just as easily manipulate, but we want to have color schemes in a separate file for now.  If all goes well, we might be able to offer different color scheme which users can choose from whilst accessing our site in the future.

Designing with Design in Mind

It has been three weeks of development so far on responsive web design, and it seems like progress on our group site is currently on hold.  Oh sure, we've been able to implement responsive elements such as fluid grids and media specific style-sheets using media queries, but our site does not really look all that great right now.  Instead of wasting time adding all sorts of responsive web elements, only to have the overall design remain a lasting issue, it seems prudent to take a step back and look at the big picture.  As web design incorporates many "cool" technologies and features, it primarily hinges on having a good overall design.  The design aspect of the site is what keeps the feeling of cohesion and purpose.  Without a good design, or a good design plan, changing elements individually or even rearranging existing elements will not bring a site closer to a cohesive and appealing appearance.

In that light, our team has been focusing on brainstorming ideas for overall site designs and styles that would lend themselves easily to a responsive format.  We want a design that doesn't "jump around" or look tacky when transitioning between viewing sizes, but which also looks engaging and purposeful.  We also wanted to bring more of a relevant theme to the energy aspect of the makahiki framework.  This is supposed to be a site that is related to power and energy, and something that is fun and engaging.  So when you think of energy, there are two ways to go stylistically.  We can either go towards the conservation aspect and have a very organic feel with lots of trees and foliage, or we can lean towards a more industrial/technical design, which is what we did.  We decided that having a "Tron" feel might be the better design on two fronts.  It is a very simplistic design, which incorporates a combination of black backgrounds with "lit-up" color panels and lines which give us the feeling that there is energy coursing through the site.  Right now it is still in brainstorming mode, but such a design would be much easier to adapt to a grid layout than something that has a more organic feel.

Our group is still in discussion phase on how it will ultimately be implemented, but I would like the site to also have a game user interface "feel" to the navigation elements.  In this, I'd like to see page links and links to widget pop-ups all collected into a control/navigation bar at the bottom of each page.  We all agreed that this navigation bar should be "stuck" to the bottom so that as someone scrolls down a page it will remain in the same place on the screen so that users can always access it.  We also looked at having a "menu button" for mobile devices which would cause a navigation menu to pop up on screen and allow you to jump to different sections of the site.  This menu would therefore be "hidden" from view until called by the menu button, so that we don't lose valuable screen real estate on mobile phone devices.

We've made a lot of progress conceptually, but we haven't started implementation of these ideas just yet.  Right now, we still need to flesh-out the ideas a bit more and have an overall consensus in the group before we move forward.  Site design is a really interesting and fun process, and I'm excited to see these designs take shape!

First Crack at Responsive Web Design

I currently have a mix of elation and frustration.  I recently joined a team of developers to redesign pages of a website with responsive web design.  First things first, we set up our project site here at Google Project Hosting.  Before you go and checkout the repository, you should know that we haven't officially started the project yet.  All we have uploaded to the repository is a test page and corresponding files needed to render it locally.  Once we get things finalized conceptually, we'll be removing that repository and replacing it with the entire site.

Okay, so after we got our test page uploaded we got to work on changing the design from a standard 960px resolution to one that would be responsive not only to resizing of the browser, but also to specific size of mobile media devices.  Initially, we were at a bit of a loss in deciphering all the HTML and CSS code.  Mainly, we had to read through and understand how the divs, or HTML body divisions, were set up.  In addition, we were looking through the CSS files to see how the page styles were organized.  This took a little while, but then we started to gain an understanding of the elements on the page and how they were controlled via the CSS files.  The Firebug add-on for Mozilla Firefox was extremely useful and made the whole process proceed quickly and with ease.

Initially, we started by looking at tips for fluid grid design.  One of the underlying techniques is to change widths of containers and elements from pixels to percentages.  This had pretty amazing effects, as it allowed objects to "float" around the page and reorganize themselves to fit within the browser after its size was reduced.  Unfortunately, the results were not perfect.  For instance the navigation bar stayed at the same height and overlapped with other elements.  That's when we decided to remove specific object heights.  Instead, we decided to provide the needed spacing between objects on the page by adding margins to the top and/or bottom as needed.

After making these changes, the site behaved better, but it was still not very attractive at certain browser sizes.  That's when we decided to do specific media queries which would load separate style-sheets based on browser size.  We decided not to query for specific media types, although that is another valid option.  At the moment, we've decided against querying specific mobile devices because we wanted the page to also adapt when people want to re-size their browser to look at other things.

We started by adding one other CSS file to override the current style-sheet when it detected a browser size that is approximate to that of a mobile phone.  We quickly learned that it was easy to implement media queries, as you simply need to create specific style-sheets for each device's approximate browsing width.  After that, you simply link to those style-sheets in your HTML file.  You can either do the media query in the HTML file, and load a corresponding CSS file, or you can link to a CSS file that has media queries as internal elements and corresponding style coding for each element.  At the time of writing this blog, I have recently discovered that one of my team members had uploaded a media-query CSS file that had attributes for several of these approximate browsing widths.

While a media-querying CSS file is sufficient to make small changes to page elements based on detected browser sizes, I believe we still need to implement separate style-sheets for each mobile device approximation.  The reason I feel this way goes back to basic coding practices.  Just as we do not want to have one method that contains hundreds or thousands of lines of "spaghetti code", it is much easier to maintain separate files of shorter length.  That way, when maintaining or adjusting styles for specific devices we can simply go to the corresponding file, rather than having to browse many lines of code to get to a particular media query's style overrides.  Furthermore, we may want to have completely different interface designs based on the size of the browser, and separate style-sheets would facilitate that better.

Overall, the project started out very well, and we are poised to move on to the next portion of the project, which would be to modify the entire site and not just one page.

At this point you may be wondering where my frustrations manifested.  Well, certain elements of the page seemed to disappear, mainly some of the small navigation bar images.  Also, I ran into a few problems with getting subversion mime-types to work from our project site.  My goal was to be able to see the HTML page render itself straight from the repository, but it doesn't.  While you can easily browse the HTML code, the page doesn't render properly when to you try to view it.  There are still some issues to work out, but we've made a lot of great progress.  I'm looking forward to our next step in the project!

Responsive Web Design is the Future

When we think about how trends in technology have changed over the last few years, we usually think about mobile devices and mobile app development.  More and more, we see people using Androids, iPhone, tablets, etc.  Everyone knows that you can browse the web conveniently on any of these devices, so what does that mean for web based application development?  It means that the future of application development is in web-based applications.  Where iOS and Android developers that develop mobile apps for each device have to write code that is native to those operating systems, web-based application developers can make one product that can be used on every device!  This means you can create an application that is usable on your desktop, laptop, or any device that can browse the web.

The trick to all of this is in creating responsive websites that cleanly adjust depending on the size of the browser.  So when you look at the page on a desktop computer with a massive monitor, you'll perhaps see the most expanded content with multiple columns of text, images, or large movie objects.  The same site viewed on a mobile device would see fewer, narrower columns, and smaller versions of the same movies or images.  This is made possible by using HTML5, CSS3, and responsive designs.

HTML5 is the latest version of HTML, which is the language used to structure and present content on the web.  It marks the end of an era as HTML5 allows for the use of complex media elements without the need for additional plugins like Adobe's Flash or perhaps Microsoft's Silverlight.  Most new mobile devices are compatible with HTML5, which is great news because HTML5 contains markup for application programming interfaces (or APIs).  This makes it easier to develop web-based applications as you no longer need to deal with stand-alone APIs.

CSS3 is the third level of Cascading Style Sheet languages and allows for the formatting and presentation of information in HTML.  It allows for cross-browser compatibility as well as new features like animations and transitions.  As the web evolves quickly, it became apparent that large CSS specifications were unwieldy and so CSS3 is divided into modules that can be changed and updated independently of each other.  You can also do media queries which allows you to detect what kind of device is being used and allow you to adjust the style to work with those constraints in mind.

With clever use of the above technologies, and designing with responsiveness in mind, you can have cross-platform and cross-browser applications that can be used by anyone!  That means you have access to the largest market-share possible, which also means more people will be using your product and hopefully making you more money.

Below are some links that I've found while doing research on this topic, may they be of great use to everyone who is interested.

HTML5:
http://www.w3schools.com/html5/html5_intro.asp
http://www.smashingmagazine.com/2009/07/06/html-5-cheat-sheet-pdf/
http://www.alistapart.com/articles/previewofhtml5/
http://www.thehtml5tutorials.com/

CSS3:
http://www.w3schools.com/cssref/default.asp
http://www.designyourway.net/blog/resources/top-100-useful-and-detailed-css3-tutorials-and-techniques/
http://blog.templatemonster.com/2011/04/08/20-css3-tutorials/
http://css3generator.com/

Responsive Web Design:
http://www.alldesignstuffs.com/2011/creating-responsive-html5-page-using-media-queries/
http://thinkvitamin.com/design/beginners-guide-to-responsive-web-design/
http://www.elated.com/articles/responsive-web-design-demystified/
http://www.catswhocode.com/blog/awesome-tutorials-to-master-responsive-web-design

Issue Driven Management

I recently had an opportunity to develop experience in issue driven management for a software project.  What is "issue driven management", you may be asking?  Well, it is a form of project management where the project as a whole is divided into smaller, more manageable portions.  These portions, or issues, are then much more easily processed.  With this particular project, I was working with a small team of software engineers.  In such a scenario, you can then assign issues to each member in order to spread out the work evenly and ensure faster production.  Giving people smaller, more specific issues to deal with enables the group to work with less confusion and prevents people from doing work on the same tasks.  Each issue can then be broken up into smaller issues and assigned to appropriate members of the team if the issue is initially too large or complicated.

To implement issue driven management for a project, it is best to find a project management solution that allows for communication, issue tracking, and a central repository if you're working with code.  My group chose to use Google project hosting at Google Code to host our project.  This allowed for us to implement issue generation and tracking, as well as giving us a central repository.  Our project was to create a command line interface for the WattDepot application.  This command line interface we developed queries the WattDepot server for information about energy usage for the Hale Aloha building at the University of Hawaii at Manoa campus.  Our team also used a combination of build automation with Apache's Ant and continuous integration with Jenkins.

Our project team was team "tiger" and the project was named "hale-aloha-cli-tiger", which you can find here at "http://code.google.com/p/hale-aloha-cli-tiger/".  All together, the experience was an educational one to say the least.  I learned a great deal about working with other people on a project, but also a lot about continuous integration and how you can have a build work locally but then fail an automated build on Jenkins.  It certainly slammed the importance of running "ant -f verify.build.xml" before every single commit to the repository!  And to make sure that if build directories find themselves in the repository, even if by someone else, you should immediately remove them.  This prevents issues with Find Bugs failing a build when the problematic file has been removed.  Another thing that is key is communication, which can be relatively difficult when people on the team all have different schedules and heavy commitment loads elsewhere that prevent consistent communication.

My group and I accomplished the task for which we were aiming.  It was a great experience, and I enjoyed working with the others.  It was a lot of fun and energizing to meet with each other and toss ideas back and forth regarding solutions to problems.  I hope that I get another chance to work with each of them and I am glad that I was able to have this experience.  We had a few problems, of course as any project might, but my group always came through.  Is our project completely done?  Well there are always areas in which we can improve a system, but yes it accomplishes what we wanted to achieve.  We did a lot of automated quality assurance, but no system can completely account for everything a user can throw at it.  Not without a much more exhaustive system of tests.

Hawaii Has Potential

We live in interesting times.  Many people notice when things get rough and they have to shell out tons of money at the gas station.  Those same people look at the rising prices in food and amenities, most likely with sighs of frustration and growing concern.  In Hawaii, these things may have a heavier impact than that which would be felt by people living in the mainland United States.  Much of the food and oil we consume everyday is shipped from sources outside our state.  There is also another issue that many families in Hawaii have most likely noticed, issues with power.  We see rising costs in our electric bills, and at the same time we perceive waning security with regards to consistent power availability.  It doesn't seem to take much to cause 'brown-outs' or temporary 'black-outs' in various neighborhoods throughout the year.  Well, there are some interesting possibilities here for those that are willing to look.

As I've mentioned about the growing costs associated with oil and how it affects different areas of our lives such as food and fuel, it also affects our power!  Oil based power is prevalent in Hawaii, more so than on the mainland, and increases in oil prices across the world affect the cost of our electricity.  If we want to move into the future and embrace growing concepts like clean energy and sustainability, Hawaii's power solutions need to be changed. 

In addition to the problems widely known about fossil fuels, Hawaii's power utilities are also having a rough time keeping up with growing power consumption.  It may surprise people that Hawaii's power grid is actually comprised of several small isolated grids, especially separated from different islands.  If there is a power surplus from another island such as Lanai or Maui, Oahu may not be able to benefit from that power.  What will it take to get clean sustainable power for everyone on each island?

One thing that is both promising and at the same time frustrating, is the fact that Hawaii has just about every current clean and sustainable source of power at our finger tips.  Those sources remain currently untapped for the most part.  We have solar power, wind power, geothermal power, ocean currents, you name it!  Why is it that with all this raw power surrounding us, we still rely on oil primarily as a power source.  If Hawaii is spending around six billion dollars each year to buy energy from external sources, imagine what opportunities exist for people who can find that power right here in Hawaii!  That's right, six billion dollars a year could be funneled back into Hawaii creating jobs and opportunities if we can meet our energy needs independently. 

Of course, simply maintaining the same power production and consumption does not address all of our power issues.  It is apparent that we also need to find the means to track and monitor power usage so that we can cut expenditures.  This has the double advantage of making it easier to switch to less developed sources of power by creating a smaller load, or demand, but will also allow statewide needs to be met consistently when the switch has been made.  Tracking features such as 'smart meters' that can electronically monitor power consumption and send that data via wireless connection to the power utility companies will certainly help.  This will allow such companies to analyze and monitor consumption habits and patterns.  Through incentives, power companies may gain remote access to shut down air conditioners briefly across sections of the island in order to reduce load during peak usage, creating a more stable power grid and reducing the fuel consumed to generate power.

Those of us with interests in software and technology know that information is already a large area of development and opportunity.  This certainly applies to our power situation when you realize that power companies will be generating massive amounts of data, without necessarily having software infrastructure to manage all of it.  There are potential areas of opportunity in developing database structures and systems, as well as analytical software to glean useful information and trends from all of the raw data.  When we add in the potential to one day have all of our power produced locally, that could mean six billion dollars of opportunity for those with an interest in developing power alternatives, but also for those who wish to help manage the information generated in that field.

This is especially true when we realize that solar power is a growing source of independent energy and all of the power generated from homes equipped with that technology needs to be measured and understood.  For people whose job it is to balance and maintain a steady power grid, it is vitally important to be able to look at and account for all the power being generated via solar power.  This will enable them to redistribute power appropriately.  With this also comes a need to track power usage or generation for each home, and with that comes even more data.  Software and technology solutions to manage data for each home in Hawaii will not only aid those attempting to move us forward to clean and sustainable energy, but it will provide valuable information and needed transparency to the consumer.  It will empower people with the knowledge of how they can reduce wasted energy consumption and lower their electric bill each month.  It will also allow people to be a part of and understand Hawaii's power related issues. 

If we make changes towards clean, independent energy, and people in the technology field get behind those changes, we can see some wonderful opportunities in the future.  Hawaii can generate less pollution, preserve paradise, produce jobs, provide power, and reduce costs in other areas of our lives.  What a great potential we have!