Posts Tagged ‘CSS3’

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 – August 5, 2011

Friday, August 5th, 2011

Weekly Tech Roundup

This week’s Tech Roundup includes TimThumb vulnerability, a 4-lesson tutorial on building your own PC, and future CSS3 layouts.

Nosh’s 404 page – One of the more interesting 404 pages I’ve seen in a long time.

New in Labs: Preview Pane – Gmail’s added a preview pane. Just follow the instructions in this article to turn it on.

Ever wanted to build your own PC? Lifehacker put together a great series this week that helps you do just that:

The future of CSS layouts – This article takes a look at how CSS3 can and may, in the future, be used to create website layouts. These are really slick and I’m super excited for them. These new elements cut down on code and, if all browsers support them the same, headaches (although they’ll cut down on those anyway). I think even with the browser-specific CSS, these solutions are still less code than current methods. But, even with browser-specific code, you’ll still run into older browsers that don’t support an element at all so make sure you know your users before implementing. If you’re interested in this topic, check out the author’s (Peter Gasston) book, The Book of CSS3.

Zero Day Vulnerability in many WordPress Themes (timthumb.php) – If you use image thumbnails in your WordPress website, check to see if you’re using TimThumb. “The utility only does a partial match on hostnames allowing hackers to upload and execute arbitrary PHP code in your timthumb cache directory.” That doesn’t sound like anything you want to have happen to your website. If you’re using TimThumb, or aren’t sure if you are, and need to update to the latest version, please contact me. Here are the technical details: Technical details and scripts of the WordPress Timthumb.php hack. And for the fix: WordThumb is now TimThumb 2.0.

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.


Changes

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.

Snapshots

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 – May 13, 2011

Friday, May 13th, 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!

US politicians push for ‘do not track’ internet laws – US lawmakers want to protect users’ privacy by allowing them to block companies from tracking them online. The system would be similar to the “Do Not Call” list. Who knows if anything will actually come of these hearings but it is a very important conversation to pay attention to. I know I have some serious concerns about implementation. Here’s another: Online Privacy: Can the U.S. Get Its Act Together?

Top 10 Fixes for the Web’s Most Annoying Problems – This is a great list. I think Lifehacker did an awesome job picking these hugely annoying problems and coming up with excellent solutions. They have fixes for Mac/PC and across browsers, where applicable. Are there any other huge web annoyances you’ve found a good solution for?

CSS3 Generator Helps You Create and Learn New Complex CSS Code – I prefer to do this kind of thing on my own but this is a fun little tool. The preview is so smooth! Great for beginners or if you just need to do something quick and don’t want to think about it.

Google Finally Delivers On Promise Of Admin-Free Chrome Frame Installs For IE – This is excellent news for those folks stuck using IE6 or 7 at school or the office. You can now install and use the Google Chrome web browser without needing administrator privileges on your machine. Use Internet Explorer to download the Chrome Frame plug-in.

For Microsoft, Skype Opens Vast New Market in Telecom – There are a ton of articles on this deal but this is one of the better, with more in-depth coverage. It discusses details and implications. I’m not a big Skype user so while this doesn’t directly impact me I’m curious to see where it goes. If this deal makes you want to immediately find a Skype replacement , here’s a great resource: 9 Great Alternatives to Skype for VoIP and Video Chat. What do you think of this deal?

That’s it for this week. Have a great weekend!

Weekly Tech Roundup – April 22, 2011

Friday, April 22nd, 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!

goosh.org – The unofficial Google shell. This is a command-line interface that behaves similar to a UNIX shell. Quite geeky and fun!

How To Add a Second Layer of Encryption to Dropbox – Excellent how-to article that you may want to consider reading if you use Dropbox on a PC. The article details how to add another layer of security by using TrueCrypt. And while we’re on the topic of Dropbox and security, here’s another article on How to Permanently Delete Old Files from Dropbox.

How to Jump Ship from GoDaddy to a Better Web Host and Registrar – I don’t use GoDaddy myself but a lot of my clients do. I’m also considering finding a new web host, so those two things combined made this article very interesting. It’s thorough so if you currently use GoDaddy and want to switch this should be a big help.

CSS3 vs. CSS: A Speed Benchmark – Great article showing the speed difference between CSS and CSS3 with some case studies. Hint: CSS3 is faster!

Detailed Comparison of Premium WordPress Theme Clubs – Take note designers and developers! This one’s for you. When they say detailed, they really mean it. Everything you’ve ever wanted to know (and many you didn’t know you wanted to know) about theme clubs. Not only is there a side-by-side comparison of 11 sites but there is a detailed breakdown of each one. I’d only heard of a few of these sites and only used one myself, but I’m surely going to check out the rest. Do you have a favorite spot to buy and/or sell your WordPress themes?

Have a great weekend!

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! ;)