Let’s clarify this so you don’t go into full on panic mode, and then let’s discuss why you should be somewhat concerned. Beginning April 21rst Google will start “expanding our use of mobile-friendliness as a ranking signal”. This means searches made from a mobile device will receive results that will take into consideration the mobile friendliness of your website. If you receive all your searches from desktop users then you have absolutely nothing to worry about right? Well sure, but that is definitely not the case.
We applaud Google for pushing this forward as responsive design and development is at the heart of what we are promoting currently, and have been doing for the past few years. You should be aware of your traffic sources, and use Analytics or at least some sort of service to track your websites visitors. If you do so, you will no doubt notice more and more of your visitors are accessing your site via iOS and Android devices.
If they give you a scary red flare that screams fail (ok it’s not quite that dramatic), contact us and we can take a quick look at your website code and tell you what it will take to get you up to speed. It’s not the end of the world, but it is definitely time for you to start addressing the massive growth of mobile users accessing your content.
This year really flew by for us, busy busy busy. That’s a great thing, we really appreciate the support! After a little over 10 years of running a small business in this rapidly changing field of web design and development, most of the time we are just happy to still be able to do what we love on our own terms. We’ve worked with some great new clients over the year and continue to grow and interact with many of our regular clients.
To keep current in this industry requires one to continually invest time learning and experimenting with new technology and code practices. This year as we continue to work responsively in our development we have added a few wonderful new tools to our development flow, and I’d like to give a few quick shout outs, as most of these are open source, developed and shared by other professionals in the industry! How cool is it that we work in a field that is so supportive and innovative?
Sass – How did we as front end coders ever get by without it! Sass is an extension language for css which makes our css code much more efficient and easier to understand.
Bourbon/Neat/Bitters – Pretty much all of our websites and apps these days utilize these amazing mixin libraries from the Thoughtbot team. Over the year we have tested and deployed sites with frameworks like Bootstrap and Foundation, which are also both awesome, and can be more appropriate in some situations. In the end we find the Thoughtbot mixin approach is more semantically appealing, and leaves us with lighter, more efficient code.
Grunt – Nothing has streamlined out development process more efficiently than the addition of Grunt. While it might have a bit of a learning curve, the time is well spent, and you will be rewarded with things like having all your css and js compiled and minified for you automatically.
WordPress – WordPress continues to evolve as the most flexible open source CMS, with a huge community supporting it. This continues to make it the goto for us when building client websites (We have been working with WordPress for over 6 years, but I still want to give it a shout out!).
GIT – It took us a while to embrace GIT, and work it into our development flow (we’ve been in this business a while and sometimes major changes to the workflow are difficult to implement!). Now it is simply impossible to think we ever had to worry about writing over a fellow developers code on a cooperative project.
That wraps up my little shout out list this year, great stuff one in all! We look forward to a more productive year in 2015 and are excited to see what new technologies are revealed.
Cheers! Eric and Alex
We took a rare weekend vaction out to the Oregon coast! You should visit it sometime it is spectacular.
One of the many annoying things about the IE browser…the disrespect of padding on form inputs! While trying some hacks for this recently (arrgh use a transparent border…really?) I did some testing. If it is an option for you to use display:inline-block; this will seemingly allow IE to respect the padding you add. Hope that helps some poor soul like myself out of a jam.
This is the question on many of our clients minds, and we thought we’d take a second to try and simply explain this new exciting design/development method in layman’s terms. The web design and development field is constantly growing and evolving, as you may be aware. Recently you might have heard about “Responsive Design” and you might be wondering what it is, and does your website do it?
The huge growth of mobile devices has had an impact on how we all perceive and experience this wonderful thing we know as the internet. We are now looking at websites, and using applications on a huge variety of screen sizes. As designers and developers we’ve had to react to this, no longer do we just have to worry about ie8, or the small variety of desktop screen resolutions…it’s a whole new ball field. Traditionally websites were coded at fixed widths, and we would check to see what the widest width was people were viewing sites on using their desktop computers, then we would tailor our designs to that.
When mobile devices took off in popularity, the mobile bowser developers had to figure out a way to show your website, hardcoded to a width of 800px in a much smaller screen. Their solution was to shrink the whole website down to fit (example to the right in the graphic below). The result of this is a nightmarish experience of pinching and scrolling around to navigate through any website. To remedy this in the past few years a few helpful tools have evolved (note my restraint in not using technical terms!) to help us target specific screen sizes and make certain adjustments to the website code which allows us to present a much nicer user experience across multiple devices.
This approach is quickly becoming standard practice for many websites. It is not ALWAYS the right choice, this depends on the needs of your website, and the type of traffic you get. We would be happy to take a look at your website and help you decide if it is the right option for you. You should know this though, mobile traffic is on the rise and will continue to constitute more and more of your visitors. Phone and tablet growth continues to skyrocket, and you want to make sure your site visitors are getting the best possible experience they can from your website.
The graphic above quickly illustrates how much better the phone experience is when a site is coded using responsive techniques. Boston Accountability is just one of many recent responsive websites we’ve designed and built. We’d be happy to show you more, feel free to contact us with any questions you might have on converting your website code to make it responsive.
Yep, we are having a scorching August here in the Pacific Northwest, with what feels like record temps. You know who hates this damp steamy heat? My MacBook laptop. How do I know? Well, late yesterday afternoon my wireless mouse stopped working. Actually the mouse controls seemed to be locked in some sort of right-click nightmare where I could not escape the webpage I was on, nor could I close the page. Initial thoughts: time to change the batteries in my Targus. Fresh batteries inserted. No dice, still trapped in right-click hell. Due to a similar incident earlier this summer, I knew what the issue probably was. Swollen laptop battery. Our PHP developer ran into this exact right-click entrapment during one of the first hot spells here at the studio. Seems the old swollen battery is a known Mac issue, and removing it from my laptop alleviated the right-click hell immediately. Now I am running battery free, which will be fine provided we don’t lose power and all that. Seems it’s past time to replace my MacBook laptop battery.
There is simply no application I use more as a web developer than Panic software’s Coda. It is the cornerstone of our production here at Bitclone, and we are slap happy that the new version is finally out. If you are thinking of getting into the web development industry…I can’t recommend this application enough. They have simultaneously released Diet Coda for the iPad…I can’t wait to give that a spin, once I am comfortable with the new Coda2 interface. It’s been a long wait, but it seems like they have addressed a number of my main complaints.
Well we just pulled the switch here and upgraded to WordPress 3.2. It’s a pretty hefty upgrade, and our Media Temple DV server is always a bit finicky when I run WordPress upgrades, however all went pretty well (You can feel free to contact us if you need help upgrading your WordPress system). The new dashboard is quite a big change, and a few things to note with this upgrade.
The WordPress team has officially dropped support for IE6 (hooray I say) and they now include a little browser check right there in the dashboard to help give you a little poke if your browser is in need of an update (you’ll see in the screenshot my version of Firefox is outdated…yes I know, shame on me, I was waiting for a 1Password update). Next thing of import, your server will now need php5 AND mySQL 5. This will require those of you running older Media Temple Gridservers to upgrade. I’m sure MT support phones have been ringing off the hook, and they have already been addressing the issue diligently. As a matter of fact they just posted a video to Facebook which should help you on your way.
Last bit of advice should always be the first bit of advice. BACK SHIT UP! You’ll feel better about the whole process.
Here is a screenshot of the new Admin Dashboard, pretty slick!
Google is everywhere…it’s true, they have a hungry tentacle in so many cookie jars it is hard to keep track of. One of the more recent and I say exciting evolutions in web design and development has been easier embedding of fonts! Yay! No more just relying on the 18 or so web safe fonts available (let’s face it 6 or so that get used) to all viewers across platforms. Of course you always want to be careful and make sure your cool new embedded fonts will degrade gracefully, just to be sure you have all your bases covered. This of course has opened a new can of worms, and opportunity for font makers…it is of course not legal to just use any font you have on your website.
There are TONS of free fonts out there and I’d say (being generous) about 5-10% of them are attractive and usable…it’s like web design in general these days, almost anyone can design and build a font thanks to computers, but you know there are reasons you hire a professional! We’ll save that for another post. So, moving foreward, once you have found a free font that works for you, all you need to do is head over to the Font Squirrel @fontface Generator and upload your font: convert it, download it, and add it to your CSS! Excellent. Google has made it even easier, they have 182 fonts (as of this post) for you to choose from, and they are all converted and ready to go. they even serve them up for you, all you need to do is add a simple link to your code.
Take this final piece of advice to heart. Keep it simple…don’t use embedded fonts for your content, use them for headers or emphasis, as they can cause some page load issues if you load too many styles or use them for large areas of content.
So I was just trying to update some WordPress plugins and the new automatic update system went all fubar on me. It claimed my ftp info was incorrect and sent the site into permanent “maintenence mode” which might be frightening for someone updating their site obviously as you simply get that nice message above on a blank page…no way to access the admin again. Here are the solutions. First to get the site back, look in whatever directory is your root install for a hidden file .maintenance (note you’ll need to be able to view hidden files in your ftp program). Once you find it just delete that bugger and the site should be back. I found I had to go into the wp-settings.php file and comment out line 50 which runs the function “wp_maintenance();” in order to be able to update the plugins…for some reason it kept not accepting my ftp info and adding that file…wonky.
It’s amazing how fast the world of business, and seemingly the world in general, has changed in my lifetime. This is, of course, heavily due to first the personal computer revolution, and secondly the internet boom. I graduated from Boston University in 1987 with a graphic design degree which gave me the ability to hand-paint fonts! Needless to say, it quickly became obvious to me that unless I started learning how to use computers I would be left behind as an artist and a designer.
In addition to designing and developing websites I also run a small business, which has opened up a whole other area of evolution and education for me. I interact directly with every client, and when I am approached by a potential customer some of the first questions are generally:
“Help me understand the process of building our new website.”
“How long does it take?”
“What are the costs involved in this?”
So let’s hope this post will begin to illustrate one of Bitclone’s basic processes – developing a WordPress CMS-based website. It should provide something of an overview, and help you get started in thinking about your project and some of the questions you’ll need to answer. We feel it is important to point out that every job is different, and part of our goal is to help you maintain your company’s unique identity among your competition. Having said that, there are some common points of focus we have identified through experience, and can discuss here.
So I had been writing this big post about WordPress 3.0 coming out, and how we were so sneaky as to be running a release candidate on our site…Then we got busy and by the time I came back they went and released the final version! The new version 3.0 is called “Thelonious” after the great jazzman and purveyor of awesome hats I assume. I am going to try to do some specific feature updates as I encounter them while upgrading our small fleet of WordPress clients! Some of the most noteworthy additions I have been testing include the merging of MU (multiple user version) into the standard version. That and the new custom post types alone make this a pretty huge upgrade and really push WordPress closer to being the perfect full CMS solution. My only concern is the application will get too bloated, as they continue to add to it, so I am going to also run some speed tests to compare this new version. Results to follow shortly I promise!
If you have not seen “Straight No Chaser” the Monk documentary directed by Eastwood…I’d recommend it.
While WordPress obviously wasn’t initially designed to be a full featured CMS, and it still has a ways to go in competing with Drupal or Concrete, this is a great trick you can use to expand your ability to add content which is editable from the admin area. WordPress Custom Fields will allow you to add data below the post area when you are creating a post (or a page which uses “post” info basically). You can create a Custom Field “Name” and “Value”, the name is basically a key that you can use to call the content in your template…which is the great part of this as it allows you to place editable content outside of the main post area on a page. Here is a screen shot where you can see I have added two Custom Fields, one for a picture (I didn’t add the picture value yet, but you can add a pict via the main content area then just copy the HTML info and paste it in) and one for a quote the client wants to change on each page (click the thumb for full size).
You need to actually edit your templates a bit, but it is fairly easy. Once you have created your Custom Field Name and added some content (value) you can use the get_post_meta() (click here for more detailed info) function as demonstrated below, just swap out Custom Field name where indicated and you can place this in your template-
<?php $key=”YOUR CUSTOM FIELD NAME”; echo get_post_meta($post->ID, $key, true); ?>
You can play around with adding html in the custom field or your template to get styling correct. This is how it looks in my template where I want the quote to show up.
I also recently discovered a nifty plug-in which will add tinyMCE toolbar functionality to the Custom Fields! Very cool.
Here is a small app that addresses the growing problem of web distraction due in some part to all the social media apps. Are you constantly checking email, adding Tweets…or logging in to Facebook to see if you are losing that Scrabble match? Stop the madness! This app will allow you to block certain websites and email for a specified amount of time…beware it is a commitment as it will not allow you to override it until the time is up! Call it a self imposed intervention of sorts. It is only for Mac users…we must need it most…but wait, I love my distractions, they keep me sane, ah well enough of this time sucking WordPress BLOGGING, back to work.
My job occasionally requires a large amount of clipboard action. Cutting and pasting text from one document to another, mostly when formatting content to html for web development and various client website updates. I discovered this small lifesaver of an app which will keep track of recent text clippings you make, and provide access to them. This allows you to have access to more than one piece of clipped text, which can be extremely helpful. The app currently only works for text, not images, but it is free, and hopefully they will eventually offer image/graphics support as well. Once installed Jumpcut adds a scissor icon and drop down in your top toolbar from which you can access recent clippings or configure it’s preferences.
So I have been meaning to post a comparison of some of the major players in the online video publishing and sharing industry, and finally I have found time. This is some footage I shot shortly before leaving Tucson AZ of a demolition derby slash monster truck event at night. The video I am hosting and serving up with the great JW Player was compressed using the basic medium settings in the Flash encoder on2 VP6 codec. The original SD miniDV file for uploading to the online services was edited in FCP and exported using the h.264 codec, high quality, multi-pass. The file is about 2 minutes long and was 50 megs or so. FYI at the time of this post most of the Upload services will only allow you to upload 100megs. I had no problems uploading to any of these sites, the process was smooth and pretty much the same for all of them.
First off this is the source video, hosted by me, not from a flash streaming server. The .flv video source is being played using the JW Player (and a wordpress plugin FLV embed). ALSO of note I am using the embed code from each site as provided, and the window size they put in there. This code in some instances breaks standards acceptability. For a good article on that check out this post from Bernie Zimmermann and read the comments, there is some better code in there to use if you want to stay standards compliant.
[flv:monstertrucks320.flv 320 240]
Ok! let’s move on to the free hosted video options
They are the Google powered heavyweight, everyone knows them, and everyone has seen at least some Youtube videos. They have added some interesting options to their player recently, so you can now add multiple videos from your same account. In my opinion their compression is considerably poorer compared to these others, however they have a HUGE network of users, so if your main concern is to get your video seen…Youtube is probably the place to start.
Vimeo is a newer challenger to Youtube, they have a great looking stylish player, and also offer to host and serve up higher quality HD video. Their compression looks great.
Another new challenger to Youtube is Blip.tv, they have a nice simple clean player, and their compression looks good.
Jumpcut offers the ability to do simple edits to your own video online, which may come in handy if you are away from the editing machine and need a small change made.
In conclusion there are some really good quality challengers to Youtube now, and the better quality of these players means Youtube might need to revisit their compression options. However, many people viewing videos online simply don’t care too much, and are more concerned with speed so it will be interesting to see how it plays out. As far as your choice between using a service like Youtube, or hosting your own videos? The things you need to consider are mostly branding, bandwidth and access to a social network. Youtube type sites have their own branded players, and they link off to their sites…they are “free” obviously. You might end up sending your visitor offsite, by the same token these networks have large numbers of users everyday, so you can take advantage of some built in marketing by posting your video there.
So this has been a problem we’ve all encountered when coding out sites with CSS tableless layouts. When you have divs floated left and right it takes them out of the flow of the page and basically they don’t read as content within a container div. Traditionally I’d been using another div with “clear:both” in one way or another after the floats, or *gasp* a defined height. I was searching for an alternative method when I discovered this article on the Sitepoint blog, which claims simply using “overflow:auto” on the container div will force it to behave. Initially I was skeptical, but I have been using this method for a few weeks in production, and holy smokes, it works! Additionally my comrade Mark Wyner states that “overflow:auto” does not work in ie6, however using “overflow:hidden” will work. So give it a try, you will be amazed…I was. Some report this doesn’t work in ie5 on Mac…but c’mon if you’re on a mac you SHOULD be using Safari at this point!
Mark discovered another thing about this which seems only true in Safari. If you have floats below floats this will not work, you should try additionally adding “clear:both” on your floats below.
Here is a nice CSS tip my comrade Mark passed on to me the other day. Say you have a tag and you already have an ID and a Class…you can actually add another class to it by just separating them with a comma, how handy is that in a pinch! <p id="first" class="red, bold">
If you are a web designer no doubt you have at one point or another been in dire need of some way to enlarge that tiny .gif logo your desperate client provided you with…CS3 to the rescue. Illustrator has the guts from the old Streamline program, which will turn a bitmap into a vector file for you, allowing you to size up without loss in quality…Here is a nice little tutorial which will get you rolling in no time.