AmberWeinberg.com » php http://www.amberweinberg.com Design, Development and Freelance Articles and Tutorials Tue, 07 Sep 2010 14:30:02 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 XHTML & CSS For Mobile Development http://www.amberweinberg.com/xhtml-css-for-mobile-development/ http://www.amberweinberg.com/xhtml-css-for-mobile-development/#comments Tue, 07 Sep 2010 14:30:02 +0000 Amber Weinberg http://www.amberweinberg.com/?p=3427

If you follow me on Twitter or on Facebook, you’ve probably heard me talk about the mobile site I’ve been developing for Amazon Audible.

The mobile site consists of over 50 mockups that needed to be developed in HTML/CSS and made to work for the iPhone, Android and Blackberry. While coding simple HTML/CSS mockups sounded pretty easy, I found that there were several hurdles and differences from doing mobile HTML and normal HTML.

Doing a mobile site from scratch was a big learning experience, so I’d thought I’d share some of the things I learned, that differed greatly for mobile dev.

Think Small

Doing mobile development means you have to think small and in terms of percentages, not pixels. You can’t have a 320px layout for the iPhone, because if you rotate the phone into landscape mode, you’ll have a skinny site running down the middle. You have to make sure the layout stays consist, while expanding for both portrait and landscape modes on the phone.

CSS3 Wonders

One of the biggest changes that were difficult for me to get over, and one of the best, was the fact that I could use CSS3 freely. I no longer had to worry about Internet Explorer, and al of the prominent mobile devices support it.

When trying to do some tricky styling without adding additional markup, I caught myself remembering that I could actually do it with nth-of-type and not having to worry about it breaking! So feel free to break out your CSS3 and even some of your HTML5 skills.

Special Meta Tags

There are a lot of little quirks in some mobile devices, but since I have an iPhone I’ll mention the ones I found in that device. The iPhone has this neat trick, where it links phone numbers in the browser and allows you to click on them and call them instantly.

This is awesome, except for the fact when it tries to do it on non-phone numbers. It seems to have difficulty sometimes determining what is and isn’t a number, especially when it comes to things like part/order numbers.

The awesome thing about Apple, however, is the fact they came up with a ton of meta tags that allow you to manipulate the way the iPhone device reads the website. I think these tags may also work on the Android, but don’t quote me on that.

To disallow the linking of phone numbers of your site, simple add this in between your <head> tags:

<meta name="format-detection" content="telephone=no">

I also ran across a problem where the iPhone likes to blow up the size of text in landscape mode, which was obviously a no-no and broke our layout. This was fixed simply by adding this style to the body property:

body { -webkit-text-size-adjust: none; }

The IE of Mobile

Of course, there’s always something that has to make a developer’s life difficult, and in this case it’s Blackberry. While it’s not as bad as Internet Explorer, it still became a thorn in my side.

Apparently, some models of Blackberries don’t support CSS3 properties, like opacity. I haven’t had any problems with advanced selectors though, so I’m not sure what is and isn’t supported.

The Blackberry also seemed to interpret spacing and paddings differently from the Android and the iPhone. For the most part, besides a few text differences, the Android and iPhone were quite similar in rendering the site.

Browser-Testing

Browser, or device, testing for mobile is a bit more difficult to do than normal web browser testing. While you can download pretty much al of the web browsers if you’re on a Windows machine (or use a simulator on a Mac), I’m fairly sure most devs don’t have an iPhone, Android AND a Blackberry.

For beginning testing, it was enough to resize my Firefox window as small as possible, but most of the testing I did on my iPhone, especially because the iPhone renders inputs and some backgrounds and paddings quite differently than Firefox.

For Android and Blackberry testing, I had to rely on the help of several of my Twitter friends (thanks guys!). A lot of the simulators you can download, especially the iPhone ones, never seem to actually renders the site like the actual device would. The client also had access to all three devices, so there were a big help in finding bugs.

Teaching the Client

The problem with percentage based designs, is that it’s impossible to have it “pixel-perfect” with the mockups, because you’re not using pixels. This was something I discovered early on, and something I had to teach the client about as well, especially because they had handed me size guides with the exact pixels everything was spaced out to.

This is a bit difficult to explain to a client who wants the mockups to look exactly the same in portrait and landscape mode, but with a little persistence and documentation, it wasn’t impossible for them to become relaxed in their layout expectations. You just have to be a bit more fluid when it comes to the mobile world.

Progress

I haven’t completed all the mockups yet, but you can check out the progress on the mobile site I’m working on for Audible for the next week or so before it’s taken down to become live.

Your Thoughts

What are some of the differences and difficulties you’ve experienced while coding for mobile sites?

Related Posts You Might Like

]]> http://www.amberweinberg.com/xhtml-css-for-mobile-development/feed/ 9 Hijinks: A WordPress Basic Theme http://www.amberweinberg.com/hijinks-a-wordpress-basic-framework/ http://www.amberweinberg.com/hijinks-a-wordpress-basic-framework/#comments Thu, 02 Sep 2010 14:30:57 +0000 Amber Weinberg http://www.amberweinberg.com/?p=3415 A lot of people have been asking if I use a framework for WordPress. I use my own custom blankish framework that allows me to quickly get started on projects.

I’ve recently cleaned it up with the launch of WordPress 3.0 and thought I’d give it to you guys for free. It’s basically the core files, cleaned up, with all the nonsense divs removed, a basic structure and some basic CSS.

Have fun!

Download Hijinks Version 1.0

Features in V 1.0

  • XHTML 1.0 compliant
  • CSS Reset
  • Stripped Loops, Divs
  • Custom search form w/ javascript text remove on click
  • Built-in functions: Multiple excerpt lengths, except removed [...], custom menu support, sidebar

Any requests or bugs? Let me know and I’ll get on it :)

Related Posts You Might Like

]]> http://www.amberweinberg.com/hijinks-a-wordpress-basic-framework/feed/ 20 Contribute Fridays: Web Platforms http://www.amberweinberg.com/contribute-fridays-web-platforms/ http://www.amberweinberg.com/contribute-fridays-web-platforms/#comments Fri, 27 Aug 2010 14:47:19 +0000 Amber Weinberg http://www.amberweinberg.com/?p=3391 Which web platform do you prefer to use and why? My choice is obviously…WordPress!

Related Posts You Might Like

]]> http://www.amberweinberg.com/contribute-fridays-web-platforms/feed/ 41 35 Books All Freelance Web Developers Should Read http://www.amberweinberg.com/35-books-all-freelance-web-developers-should-read/ http://www.amberweinberg.com/35-books-all-freelance-web-developers-should-read/#comments Fri, 30 Jul 2010 14:30:59 +0000 Amber Weinberg http://www.amberweinberg.com/?p=3215

If you follow me on Goodreads, you know that I absolutely love to read. I’ve always been a big reader, but since I’ve become a freelance I’ve made sure to read even more than usual, in the field of business, development and the web in general.

Reading is essential to any developer’s improvement. While blogs and magazines are great to read for a quick update, nothing replaces a good informative book. Even though web development isn’t the most interesting topic to read about, I’ve been able to find a lot of interesting and informative books over the years that have helped me to improve both my dev and business skills.

Read the rest of my post on FreelanceFolder »

Related Posts You Might Like

]]> http://www.amberweinberg.com/35-books-all-freelance-web-developers-should-read/feed/ 0 Awesome Free Design & Developer Resources http://www.amberweinberg.com/awesome-free-design-developer-resources/ http://www.amberweinberg.com/awesome-free-design-developer-resources/#comments Tue, 06 Jul 2010 14:30:55 +0000 Amber Weinberg http://www.amberweinberg.com/?p=3064

I’ve had a ton of people asking me where to find great resources, and have actually come across a ton of them lately. I’d thought I’d share them all with you in one post. :)

If you’ve got some other resources, let me know in the comments!

Podcasts

  • The Big Web Show – Hosted by Jeffery Zeldman and Dan Benjamin, The Big Web Show podcast invites different guests on each show and features a wide range of web topics.
  • Boagworld’s Audioboo – Boagworld Audioboo’s are only a few minutes short, but are on several different design, development and usability topics.
  • Boagworld Web Design Advice – Even though Boagworld is taking six months off from this podcast, it’s still a great resource for anything web design.
  • Boagworld Bites – Boagworld bites are pieces from the larger Web Design Advice show. These will continue to be published.
  • The Dev Show – The dev show guys are kind of silly, but they’ve got great dev topics and resources. Just wished they’d stop talking about Ruby and MongoDB.
  • Freelance Radio - Not necessarily about development, Freelance Radio from FreelanceSwitch still offers great advice on running your own web business.
  • OnMacDevelopment – OnMacDevelopment caters specifically to Mac, iPhone and iPad development.
  • The Pipeline – The Pipeline also isn’t specific to web development, but is an interview show that features some of the biggest names in the design and development world.
  • SitePoint Podcast – The official podcast of SitePoint.com, they offer news and opinions on design and development.
  • Think Vitamin – Think Vitamin is Carsonified’s official podcast about web and development.
  • 37signals Podcast – 37signals talks about the design and development of web apps. Great stuff.

E-Books

Blogs

image by hashmil

Related Posts You Might Like

]]> http://www.amberweinberg.com/awesome-free-design-developer-resources/feed/ 5 Creating Custom Taxonomies in WordPress http://www.amberweinberg.com/creating-custom-taxonomies-in-wordpress/ http://www.amberweinberg.com/creating-custom-taxonomies-in-wordpress/#comments Thu, 17 Jun 2010 14:30:58 +0000 Amber Weinberg http://www.amberweinberg.com/?p=2899 I had a client this week that wanted to install WordPress on the CoreCommerce site I recently did for her. When I was checking out the mockups, I noticed a strange section in their sidebar. Basically, they wanted to have four different tag areas with different sections, one for “Materials”, “Colors”, “Country” and one called “Labels” that would house all of them.

My first instinct was to write an email telling them that this couldn’t be done.

Then, I realized that WordPress offers custom taxonomies, so that my next instinct was to tell them they could all be done, except for “Labels”, as WordPress doesn’t actually have a native way of showing all the tags at once. After some thought, I was able to find a solution for that too.

So what, exactly, is a custom taxonomy? The “Tag” feature of WordPress is a taxonomy, or way of categorizing and organizing your site. You can actually add as many taxonomies as you want and they’ll show up in your sidebar when adding a post.

Adding Multiple Taxonomies to Your Posts

Simply add this code to your functions.php file, changing the names of the tag types:

add_action( 'init', 'create_my_taxonomies', 0 );
 
function create_my_taxonomies() {
	register_taxonomy( 'country', 'post', array( 'hierarchical' => false, 'label' => 'Country', 'query_var' => true, 'rewrite' => true ) );
	register_taxonomy( 'colors', 'post', array( 'hierarchical' => false, 'label' => 'Colors', 'query_var' => true, 'rewrite' => true ) );
	register_taxonomy( 'materials', 'post', array( 'hierarchical' => false, 'label' => 'Materials', 'query_var' => true, 'rewrite' => true ) );
}

Displaying The New Tag Clouds In Your Sidebar

Displaying your new tag clouds has to be done manually, but is super easy to implement:

<?php wp_tag_cloud( array( 'taxonomy' => 'country', 'number' => 45 ) ); ?>

Displaying Custom Tags In Posts

To display your custom taxonomy in your posts like you’d normally do at the bottom, simply add this:

<?php echo get_the_term_list( $post->ID, 'materials', '', ', ', '' ); ?>

Displaying All Tags Together

I couldn’t really figure out a way to display all of the tags together, because calling the default the_tags function would only display the tags that were added via the regular taxonomy. Instead, I sort of “hacked” my way into making it work. (If anyone knows a better way to do this PLEASE share!)

<?php the_tags( 'Labels: ', ', ', ''); ?>, <?php echo get_the_term_list( $post->ID, 'materials', '', ', ', '' ); ?>, <?php echo get_the_term_list( $post->ID, 'colors', '', ', ', '' ); ?>, <?php echo get_the_term_list( $post->ID, 'country', '', ', ', '' ); ?>

As you can see, I ended up just manually calling each taxonomy, and separating each with a space and comma. It actually ended up working quite nicely.

Related Posts You Might Like

]]> http://www.amberweinberg.com/creating-custom-taxonomies-in-wordpress/feed/ 2