Problem:
We recently had an issue with some images on an iPad or iPhone web page where the orientation was displaying incorrectly. However, when previewing the page on a desktop the orientation was correct.

After several tests, we realized it wasn’t coming from the web code, but was an issue with the camera. The camera software was encoding it at a certain direction for mobile devices incorrectly. A normal desktop computer wouldn’t recognize the encoding, since it doesn’t have a gyroscope.

Solution:
To fix the issue we used our image editing software to manually rotate the image to the correct orientation, saved it out and replaced the existing one. This would then remove the camera’s encoding and preview correctly on any browser. You don’t need any specific image editing software, if you happen to run into this issue.

We launched another great site for ITW Texwipe at http://www.texwipe.com! This site seamlessly blends the functionality of Hannon Hill’s CMS (the Products, Industries and Technical Data menus) with a full-featured ecommerce store (the Buy Texwipe menu), with shared navigation and design. This is the first project that integrated both products at the same time and, thanks to hard work by pretty much everyone on the software dev team at one point or another. 

BEFORE

AFTER

Other interesting features of the site:

• Ability to “hide” pages from different geographical regions, based on the “region” selection of the visitor in the footer.

• Transition of transactional applications from old system to new
• Email verification required to place order

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.

I had a hard time finding an answer for this today and thought I’d share the solution. Please see the original article I found that helped me link to original article. My code did turn out to be slightly different given the positioning of the Google +1 in the footer of the Beacon main site but it was based on the code in Danny’s article.

First I needed to find an icon like the one requested. Here are a few more options on where to find good icons:

• IconFinder – I was unable to use the version from here but they do have others
• wplift – I was able to find a good version here
• Designrfix – I found this after but it looked like a good selection

Now on to the code. I used Googles customize your +1 button to get the google parts of the code I needed.

I first placed this part of the code in the head of the document

<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>

Then I took Danny’s HTML code and changed it up a bit to include my unique URL and placed it where I wanted it on the HTML page

<div class="googleplus">
<div class="googlehider">
<div class="g-plusone" data-annotation="none" data-href="https://plus.google.com/u/0/b/112352004720495408285/"></div>
</div>
<img src="images/googleplus.png" class="mygoogle" />
</div>

Lastly I took Danny’s CSS code and also changed it up a bit so that it worked in the footer of the main Beacon site.

.googleplus {position: relative; display:block; float:left; padding-right:5px; width: 35px; height: 35px;}
.googlehider {opacity:0; height:35px; width:35px; position:absolute; top:0; left:0; z-index:3; visibility: hidden;}
.mygoogle {position:absolute; top:0; left:0; z-index:2; top:1px;}

Here at beacon I am a Developer. I have always wanted to be some type of artist but as I grew up found that my technical and problem solving skills for code and programming well outweighed my artist skills. I do however still like to try and learn as much as I can and see if I can get better with practice. I was really struggling with doing things you would normally do in Photoshop in Illustrator. Not that I know what to add or where to add it but I was failing before I even reached that point because I didn’t know how to. Our new Designer Jennifer Calogero sent me a link to some tutorials that really helped me learn to accomplish these things. Seeing them and actually accomplishing them are two very different things and I think for me I actually have to do it step by step to get a feel for what I am doing. After the tutorials I definitely feel more confident in my ability to add some of these small but very important details in illustrator. I have attached my end product after playing around with a few of the items and I encourage anyone learning Illustrator to actually go do some of these tutorials as well.

The article is located at: http://vectips.com/tutorials/creating-seamless-textures/

You can download my ai file by clicking here. Please note I played around with settings after doing each tutorial so the results are not exact.

According to new research from HTTP Archive, which regularly scans the internet’s most popular destinations, the average size of a single web page is now 965 kilobytes (KB), up more than 30% from last year’s average of 702KB.

This rapid growth is fairly normal for the internet — the average web page was 14KB in 1995, 93KB by 2003, and 300KB in 2008 — but by burrowing a little deeper into HTTP Archive’s recent data, we can discern some interesting trends. Between 2010 and 2011, the average amount of Flash content downloaded stayed exactly the same — 90KB — but JavaScript experienced massive growth from 113KB to 172KB. The amount of HTML, CSS, and images on websites also showed a significant increase year over year.

There is absolutely no doubt that these trends are attributable to the death throes of Flash and the white knight, if-only-the-internet-was-a-damsel-in-distress emergence of HTML5 and its open web cohorts. It’s curious that the amount of Flash content hasn’t shrunk, though, which suggests that this year’s 33% increase in web page size is mostly down to a significant increase in website complexity and functionality, and not some kind of wholesale shift from Flash to HTML5.

The only real problem with the data is that HTTP Archive only began operating in October 2010 — and so there’s no way to find out the long time growth (or decline) of Flash. HTTP Archive, incidentally, constantly scans 16,000 websites — a list that was cobbled together from sources like Alexa and Fortune 500 — and records the total data downloaded, the number of individual HTTP requests required to fetch all of the content, the size of the JavaScript, Flash, and image content, and a bunch of other metrics. If you’re wondering about the odd spike towards the end, that’s where HTTP Archive increased its sample size from 16,000 to 50,000 — so presumably, the web’s top sites are smaller (or better written?) than the dregs.

So, what’s the actual significance of web pages that are almost 1MB in size? Not a whole lot, when you consider that caching will reduce that amount by 70 or 80% — and the more important statistic, at least as far as latency and rendering times are concerned, “total requests,” only increased from 74 to 85 over the last year (and again, caching will reduce that by 70% or more). One valid concern is mobile 3G and 4G surfers, where carrier data caps certainly haven’t increased by 33% over the last year — but even then, many popular sites have mobile versions that use significantly less than 1MB, and again, caching!

We would now expect the size of web pages to slow down a little, too. 2011 will have been the year in which many developers switched from Flash (or other technologies) to HTML5, and it’s unlikely that their first attempts will have been all that optimized. In 2012, JavaScript libraries will be refined, and cleaner ways of using CSS and HTML will be popularized. Even so, expect more mobile offerings that compress data, like Amazon Silk and Opera Mobile, to emerge as well.

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

Websites designs are always evolving and that’s a very good thing. It’s great for inspiration, engaging customers and can give a fresh new outlook on how the audience views your site.

The 3D effect is a great example in evolving designs. It helps give the illusion of depth to your site and when designed in a certain way can even be interactive and entertaining. There are some

It all depends on what you’re trying to achieve with the 3D effect. It could be for the site’s overall look or even enhance products visuals, that can give the customer a better feel for what they might purchase.

Some effects are drop shadows, 3D rotations, protruding banners, field of vision that has clear focus on an element in the foreground and another element blurred in the background, floating objects and color effects.

These are a few client sites from the Beacon team, that incorporate the 3D effect.

Protruding Banner
www.newbridgebank.com

Rotating Images
www.bassettfurniture.com/quality/explore-wood-furniture.asp

Field of Depth
www.framingham.edu/academics

If you are working in WordPress and are thinking about modifying the core WordPress code I’d like to tell you why you shouldn’t. I’ll start with a reminder that WordPress has created both plug-in and theme capabilities to help customize every part of WordPress including looks and functionality. Given you can accomplish what you need using these tools, hacks shouldn’t be needed and are not recommended.

Reasons why you shouldn’t hack WordPress core files:

• There’s almost always a solution that doesn’t involve hacking core files
• Almost all situations should be handled with a hook or custom plug-in
• Upgrading to the latest version or security patch will overwrite your changes
• Core file changes could cause other plug-ins to not work correctly
• Makes it more difficult for other developers to debug or solve issues

Modifying the core files is a quick fix that will likely end up more costly than doing it correctly the first time or the functionality could just disappear on the next upgrade. It is more likely among amateur and beginner developers that are not aware of the correct way to implement the functionality. I’m not saying you will never have to edit the core files because there is that chance you may find a bug. But in that case you need to report it to WordPress so they can fix it in the next upgrade.

So next time you’re working with WordPress take some time to look through all the WordPress documentation out there and I guarantee you there is a better way of solving the issue that will not interfere with future development and updates.

As for beginners to WordPress I highly recommend the print and PDF version of the book Digging Into WordPress by Chris Coyier & Jeff Starr. It is the best WordPress book I’ve come across and on my top 3 books of all time. I cannot express my love of the spiral binding (I wish all tech/developer books did this), the large and colorful print and screenshots throughout the book and most importantly the content itself covers everything you would want to know in a detailed, accurate and easy to follow way.

We are very pleased to announce the NewBridge Bank redesign is complete.

Here are some highlights of this site:

• Rotating flash piece on home page
• Contact Opportunities – It was important to NewBridge that visitors be able to interact with them in many different ways. To accomplish this we implemented the following:
  • Our Banking Professionals application
  • Contact Us by Email
  • Contact Us by Phone
  • Locations
  • Connect with Us – Social Media
  • Social Media  – Icons in the footer and LHN, as well as a Social Media page showcasing the investment that NewBridge has made in that area
  • Product detail pages — Added additional product detail pages to their site so users have required information at their fingertips
  • SEO-friendly site
  • Integrated product demos into site

BEFORE

AFTER

Many thanks go out to Wendy, who provided a great design. Many thanks to Miral for developing the site and putting it into Cascade Server, Gary for handling all of the database work – specifically for developing the awesome banking professionals application, as well as the locations application, Thomas and Keana for their assistance during the content phase of the project, Nicole who provided Web Marketing feedback and analysis, and last but not least, Wayne, William and John whom all had a hand in the launch of this site – thank you for your assistance!!