Posts Tagged ‘HTML5’

Weekly Tech Roundup for January 6, 2012

Friday, January 6th, 2012

Weekly Tech Roundup

This week’s Tech Roundup includes Google getting into trouble with Google, New Year’s resolutions for designers, and HTML5 and CSS3 cheat sheets.

Google’s Jaw-Dropping Sponsored Post Campaign For Chrome – I don’t know that it’s “jaw-dropping”… maybe “eyebrow-raising”; certainly interesting. If you know anything about how Google search operates, paid links are a big, bad no-no. And now they have their own sponsored links. It’s not okay unless they do it? There are two follow-up articles at the end that continue the story.

Google+ Is Going To Mess Up The Internet – I think this is somewhat related to the previous post. Apparently Google is ranking shared links on Google+ higher in search results than the original article. This is obviously a rant but it’s still an interesting read because even though the author is noticeably angry, he has a very good point.

10 New Year’s resolutions for designers – I love this article! And not just because of these two: “stop stealing crap” and “learn to write,” but also “Stop being your own obstacle,” which is one of my all-time favorites, and “Stop Using Your Mom as an Example of a Stupid Person.” There’s a lot of good advice here and I hope people read it and embrace it. Oh, and these aren’t just for designers…

Test on Real Mobile Devices without Breaking the Bank – Interesting article and a good resource if you’re looking to expand your mobile testbed on the cheap. I don’t know that you really need to own all of these devices. There are enough emulators (yes, I know they don’t do everything – I ran into an excellent example of that this week) out there to get by on and I’m sure you have friends you can hit up to check things out for you occasionally.

Seven things still missing from CSS – The author of this article named some of my favorite pet peeves about CSS. Great stuff!

The Best HTML5 and CSS3 Cheat Sheets of 2011 – Quite a few cheat sheets here. Great if you are still learning HTML5 or CSS3 or to use for quick reference when you’re working on a project.

Have a great weekend!

Weekly Tech Roundup for October 14, 2011

Friday, October 14th, 2011

Weekly Tech Roundup

This week’s Tech Roundup includes speeding up your DNS, mobile development charts, and a sneak peek at WordPress 3.3.

Speed Up Your Web Browsing in a Few Clicks: A Brief Introduction to DNS – This is a handy little tool. My results showed the fastest DNS servers for me are the Google servers, which I already use. Good to know I’m already set!

Stripe – This is very interesting to me. It’s a payment system that does not require a merchant account or gateway. As far as I know, it’s the only one that allows direct credit card processing on your website without them. For those that don’t know, merchant accounts are expensive, particularly if you don’t process a lot of transactions (which is why a lot of businesses go with PayPal and Google Checkout for online purchasing). If you’re a developer, especially dealing with ecommerce, you need to check this out!

Mobile HTML5 comparison chart and Mobile Frameworks Comparison Chart – Developing mobile websites? Unless you have this stuff memorized, you need these charts to keep up with what is supported where when it comes to mobile.

A Look Inside WordPress 3.3 – A sneak peek at the upcoming version of WordPress. I think I’m most excited for the new media uploader and the admin tool tips.

The developer’s guide to browser adoption rates – This article has some cool charts illustrating the rate of new browser adoption (within a browser brand – so Firefox users upgrading to the newest version of Firefox, for example). What is most interesting (but not that surprising to me) is that Chrome and Opera seem to have the fastest adoption rate, with Safari and Internet Explorer having the slowest. If you make websites this is very important information to keep track of – of course, in addition to what your site’s users are actually browsing with.

If you enjoy these Roundups please share with your friends!

Have a great weekend!

Featured Project: MIO Nonprofit Corporation

Wednesday, July 13th, 2011

I recently finished a WordPress website project for MIO Nonprofit Corporation. They provide public education about the benefits of broadband in Washington state. The main focus of the website is to share information by posting featured stories, blogging, and linking to social media.

To keep costs down I used an existing theme, Link, from Theme Forest and customized it to compliment the Move It Online LLC website. The theme uses HTML5, some CSS3 elements, and incorporates Nivo Slider and Timthumb.

Original Link Theme

Original Link Theme

MIO Nonprofit Corporation website

MIO Nonprofit Corporation website

The original theme is pretty dark and MIO was going for a very simple, clean look. So, I lightened it up quite a bit and got rid of most of the gradients and backgrounds.

I kept the main structure of the website and a lot of the functionality, but I changed some key pieces.


Recent Posts -> Information categories

In the original theme, the Recent Posts section just pulled in the most recent posts from the entire blog. Instead, MIO wanted to use this section to highlight four key Information sections of the website: Light the Fiber, Speed Matters, Before & After Broadband, and Benefits of Broadband. I pulled out the original code but kept the image thumbnail functionality. Then I added custom descriptions and linked the heading, image, and “Read more” to each category’s post/article listing.

Separate Blog page

MIO wanted to have three very distinct sections of articles/posts: the Information categories separate from the Communications: Past, Present, & Future section and the blog, which would have more of an editorial feel. I created a separate theme template and page to show only the blog posts. Currently, it is showing blog posts and articles from the Information categories until they have enough blog posts to display on their own. Having a separate page for the blog sounds simpler than it is. The current “Home” page is the blog as far as WordPress is concerned. If you try to configure it otherwise, of course, it breaks everything! So I created a page of posts using a tutorial from #! code as a guide.

Other Changes

I removed the top navigation bar, added social media icons to the navigation, moved the search field from the top navigation to the main navigation bar, and removed some of the widget functionality in the footer. I added Twitter and Facebook feeds to the sidebar on the post/article pages and used Widget Logic to keep the About Us sidebar widgets confined to the About Us pages.

Before/After Slider

One of the key articles on the MIO Nonprofit Corporation website is on the Tulalip Tribe’s success with broadband. It includes a before and after slider to show aerial photos of how broadband increased business growth and development, similar to the one the New York Times used to show the effects of the tsunami disaster in Japan. The before/after slider from Catch My Fame is an easy to set up, lightweight jQuery script.


Click an image to see a larger snapshot of the website.

MIO Nonprofit Navigation & Nivo Slider MIO Nonprofit: Information MIO Nonprofit Communications About MIO Nonprofit MIO Nonprofit Blog Tulalip Before/After

Visit MIO Nonprofit Corporation to view the full website and to learn more about broadband in Washington.

Weekly Tech Roundup – June 10, 2011

Friday, June 10th, 2011

Weekly Tech Roundup

I read a lot of blogs. I subscribe to a lot more blogs than I have time to read. Sound familiar? If you're like me, you don't have time to read everything you want (if you do, please tell me your secret). In an effort to reduce the chaos of life, I do two weekly article roundups: one for technical things and one for small business things.

Here's a roundup of the most interesting tech articles I found this week. Enjoy!

10 useful .htaccess snippets to have in your toolbox – If your website runs on the Apache web server, these are some tweaks you can take advantage of. Unless you run your own web server, double-check with your hosting provider before trying to implement any of these. I know a lot of providers have many of these as options in their control panels.

IPv6 Guide for Home Users and Small Business – This is one of the better articles on IPv6 I’ve seen geared toward home and small business users. If you’re still wondering what the heck I’ve been talking about with IPv6 the past couple weeks, this is the article for you. It talks about the areas you need to look at and briefly describes each one (networked devices, website, mail, DNS). Make sure you also check out Test IPv6, linked in the article, to see if you and your Internet provider are ready to go.

Reader Poll: Is your company ready for IPv6? – These results aren’t good. As of this posting, 40.22% of respondents answered “No,” 38.04% “I Don’t Know,” and only 21.74% “Yes.” For the record, my answer was yes. :)

FontDeals – Smashing Magazine said it is like Groupon for Fonts. If you love fonts, this is a great way to get a whole slew of fonts for cheap. The site says they hope to offer 4-6 bundles per year. I didn’t see any fonts I had to have, but I’ll definitely be watching. There are 13 days left on the deal so you have time to decide. No way to sign up for notifications, though.

Bacon Ipsum – Designers and developers that are familiar with “lorem ipsum” will surely get a kick out of this web tool. It’s the same idea, a text generator for placeholder text. But this has an interesting twist: it’s all about meat! Not quite as versatile as some, but you can choose the number of paragraphs to include and if you want “all meat” or “meat and filler.” There’s also an option to start with “Bacon ipsum dolor sit amet…”

About Obsolete Features in HTML5 – A quick article on how obsolete features are handled in HTML5. Might be a relief if you are taking a rather old website and updating it. You don’t have to worry about the pickiness of XHTML.

If you enjoy these Roundups please share with your friends!

Have a great weekend!

Weekly Tech Roundup – March 25, 2011

Friday, March 25th, 2011

I read a lot of blogs. I subscribe to a lot more blogs than I have time to read. Sound familiar? If you’re like me, you don’t have time to read everything you want (if you do, please tell me your secret). In an effort to reduce the chaos of life, I’m starting two weekly article roundups: one for technical things and one for small business things.

Here’s a roundup of the most interesting tech articles I found this week. Enjoy!

Firefox 4 Review – Firefox 4 officially came out this week. If you’re wondering whether you should upgrade, this review should help you decide.

How to Fix Annoyances with Firefox 4’s New Look – If you’ve already downloaded the new Firefox 4, you’ve probably noticed it’s a little different. Personally, I find it faster (which is great because I’d recently switched to Google Chrome over performance issues with FF 3.6) and I kinda like the new layout. This article gives you some tips to make the new FF feel more like the old FF.

A few more Firefox 4 articles: Firefox 4 Available, 11 Must-Have Add-Ons For Firefox 4, and the very interesting new speed tests from Lifehacker Browser Speed Tests: Firefox 4, Internet Explorer 9, Chrome 11, and More.

How To Choose A Typeface – I love fonts. I’m not good enough to spot one and tell you exactly what it is or anything, but I love them. I collect them. This is a really great article from Smashing Magazine on choosing an appropriate typeface for your project.

Farewell IE6 – Are you one of the 2.9% of Americans still using Internet Explorer 6? (please tell me you’re not!) Apparently only 12% of the world is still using it. I think that means we can finally stop caring about how our websites look in it. Even Microsoft is on board to say goodbye to IE6 for good. If you’re still using IE6 (or even IE7), it’s time to upgrade. Current versions of all major browsers: Internet Explorer, Firefox, Google Chrome, Safari, and Opera.

Ultimate HTML5 Cheatsheat [Infographic] – Excellent HTML5 cheatsheet for designers & developers. It includes everything you need to know and what browsers support which features.

Holmes on Homes of Websites

Wednesday, April 7th, 2010

Holmes on HomesI recently watched a couple episodes of Holmes on Homes on HGTV. My dad told me about Mike Holmes a few years back but I hadn’t gotten around to watching until now. I really like his philosophy of “Make it Right,” as I have a similar philosophy of doing it right the first time.

If you’re not familiar with the show, he comes into people’s homes and fixes remodeling projects that other contractors seriously messed up. These are people that have spent tens of thousands of dollars and have a half finished (if they’re lucky), poorly done project to show for it. He comes in with his team, rips everything out, and does the whole job correctly – and usually throws in a bonus or two. Along the way he points out what was done wrong and why and then shows you the proper way to do it.

Watching the show made me think about how I approach web design and development. When I start on a redesign project, I typically start by ripping out all of the unnecessary code. Then I start from the floorboards, so to speak, and build it back up the right way.

You might be surprised just how much extra HTML, CSS, PHP, etc. you can find in a website. I recently worked on a WordPress theme redesign that started out with over 500 lines of CSS, custom JavaScript, and custom PHP functions – all for the site’s navigation. The same thing could have been accomplished in about 100 lines of CSS. That’s a big difference!

There are a few reasons why you don’t want all this extra code (i.e. website bloat):

  1. Load time – The more code you have on your website, the longer it takes to load. Internet connections are getting faster all the time so you may not think this is still an issue. Consider your website’s users to see if this is really a concern. If you have a lot of dial-up users, you’re going to want the leanest code you can get by with.
  2. Search Engines Optimization – Yes, SEO. Search engines don’t like to comb through a ton of code. The more code you have, the less they like your site.
  3. Errors – If your website has a lot of code, there’s a greater chance there’s something wrong with it. You may not be so worried about your code validating, but those pesky search engines (again!) sure are.

Yeah, there’s more than that, but you get the idea.

OK, so now we know why we don’t want code bloat. How did it get there to begin with? Here are a few different sources of code bloat:

  1. Programs that convert one format to HTML/CSS – Take Microsoft Word for example. You create a beautiful document in Word and you want a web page that looks just like it. So you tell Word to save it as HTML and upload it to your server, right? I will give them a little credit, Microsoft has gotten better with this, but Word still puts a TON of extra code into your file. Code you don’t need.
  2. Old and non-standard technology – As technology advances, it allows us to write more cool stuff with less code. Something that may have taken 20 lines of code 5 years ago may only take one line now. With HTML5 and CSS3 emerging, there will be all kinds of things we can do with a few lines of code that take a ton of CSS, images, and maybe some JavaScript to do now. Most designers and developers are still writing for Microsoft’s Internet Explorer 6, which came out in 2001. And, to put it politely, IE6 doesn’t play well with others. Can you imagine the hacks out there just for IE6? (OK, clearly this is an issue that deserves its own post!)
  3. Website creators – This goes along with the MS Word example above. Website creators also have a tendency to go overboard with their code. The problem is that they have to account for every scenario, so instead of looking at a particular situation and choosing the best code for it, they hack in a lot of extra to make sure it looks good no matter what the situation.
  4. Inexperience – If someone hasn’t kept up on the latest methods and standard or if they are just starting out chances are they are going to add a lot of extra code to get it to look right. For example, they may not know the best way to design a three-column layout so they choose to use tables instead. It’s easy (for them) and it looks this same (again, to them) but it’s not the “right” way to do it anymore.

So I guess at this point it isn’t necessary to mention I code everything by hand, but I do. It’s not necessarily the right choice for everyone, but it’s the best way I know how to do it. And I can tell when someone else does – it’s typically clean and uncluttered. And doesn’t make me want to tear my hair out after 15 minutes of looking at it! ;)