This post is going to focus on the responsive web design book, since it was more of a hands on book.

With responsive web design, the main technical components that make it “responsive” are percentage based width for the layout, fluid images, and CSS media queries. They are different aspects, but need to work together to make a design fully responsive. This post will be going over the three main technical components to make the design responsive.

Another term that I have heard in the design community is “fluid” designs. Fluid design doesn’t use media queries and flexible images with the tutorials I have read on them, so responsive web design is more of an upgrade to a fluid design.

The best part of the techniques in responsive web design is that you can use them NOW. Browser support is great across the board, so there is no reason to wait for better compatibility. If there is any spotty support, you can use polyfill tools like Modernizr to cover the browsers in question. After reading the book, my paradigm has shifted toward how web pages should built and designed.

This post is a bullet point overview of the Responsive Web Design book. As with most books out there, there is always a lot of “fluff” that isn’t really that great when you read. It makes the page count go up which people use as a value indicator, but in truth doesn’t add much value. I will try to keep to the points that have more direct application in doing designs.

Percentage based layouts

User agents are obsolete in web design.  There are so many new devices coming out that they all have different screen sizes. It is an inefficient model to develop for specific devices. Creating designs that look good and respond at every resolution is the best design solution you can have.

Everything you know about web design still holds true, but using percentages for sizing the width of elements make it fluid. Text automatically wraps in percentage-based layouts, so you don’t have to do anything fancy with text to make the designs work when a browser is resized.

The only dimension that we have to worry about in doing responsive web design is the width. You can modify the height if you like, but people are comfortable with scrolling vertically, so leaving height properties alone with CSS can be perfectly acceptable.

Doing this approach alone can get you pretty far, but you will quickly realize that other media elements like images don’t scale appropriately. Also, the overall design doesn’t hold up when scrunched down to a smaller width. Some items might need to be rearranged to look acceptable.

Use all of ‘ems’

Another important concept in making designs responsive is that the font size needs to be set in ems. Nothing is wrong with pixels, but the font will look bigger or smaller when shown on different devices that have a higher or lower pixel density.

Here is a quick wikipedia post that outlines different devices and their pixel densities. Scanning down the list just for a moment, you can see that pixel density changes dramatically based off of the device. They can range from 21PPI to well ove 300.

Your 14px font size  will look huge on a 480p television (21PPI), but unreadabably small on a HTC Rezound (342PPI). The best way to compensate for this dynamic range is to use the em sizing. For reference, 1.0 em will look like 16px font on most desktop computer monitors ( ~100PPI).

Ems are a relative font size that scales proportionally, much like percentages. The biggest thing to understand about using ems extensively in a design is that they are relative to the parent container.

For example, if you have a container element that uses 1.2 em for the text size, the child element text will also expand in size — even if you specifically set the child size to 1.0 em. You have to counteract this by specifiying a smaller size for the child element.

That would make the child font-size propert close to 0.8em . In the Responsive Web Design book, the author uses a formula, but I think that is too complicated for practical purposes. I use my eyes and make sure it looks right. Dynamically adjusting the font size in a tool like firebug should give you good enough results for most applications.

Flex Those Images

Just as you can set the width of any block level element as a percentage, you can also set the width of image tags in the same manner. A good CSS rule in responsive design is to create a style that makes all images have a 100% width property. This will allow the image to scale based off of its container — just like the containers scale with percentages. Setting the max-width to 100% will stop any pixelation of the image getting stretched.

This brings us to a point about images and how they should be exported. Using this technique, it is perfectly acceptable to output images larger than you would usually use. The performance hit should be pretty minimal in most situations. In this day and age with streaming video and audio, adding 30-40KB of information to the images won’t have too big of an impact on performance.

The first time you see fluid images in the wild makes you jump up and down with excitement. The way the images interact with your browser window makes it feel like a video game. Ok — maybe not that exciting, but it is still pretty cool to see if you aren’t use to it.

There are other customized ways you can display images using the  min-height and clipping CSS properties to scale the images differently.

Media Queries

With doing percentage based layouts along with some min-width attributes, you can get pretty close to what you need. There might be some instances where you need to really alter the CSS stylesheet that won’t work at other dimensions.  These are called “breakpoints”.

The best way to implement breakpoints are to use media queries.

[show a couple code examples of media query implentations]

Media queries have the intelligence of looking at your web browser window and logically determining if it should apply style sheets. You can do some hocus pocus work with javascript to determine this, but media queries are much cleaner and easier to read.

If the media query meets the criteria( width is less than 450px ), the query will apply the CSS styles. Otherwise the query will ignore the styles that are followed. The width property you set in the media query are where the breakpoint will change the design.  The best way to test it out is to add in a few values in a separate CSS file and test it out in your favorite browser.

Pretty cool!!

It is an additive process when the criteria is met, so you don’t have to worry about copying the other style sheet over. You just have to create new styles for the selectors you want to update. You can add as many media queries as you would like. For maintainability sake, I probably wouldn’t add more than two breakpoints in the design. If there is any way you can use floats or other means to make it work without breakpoints, it will be much easier in larger sites.

Testing in a browser

Every browser out there has some type of analysis tool when you are testing and doing your CSS changes. I always stick with Firebug and Firefox since I think it is the most seamless and easy to use. Analysis tools will automatically update the results whenever the media queries run, so there isn’t anything special you need when fine-tuning your CSS with custom properties.

If you are testing on a web browser, an important thing to note is that different web browsers have different minimum width that that they can work work. If something isn’t behaving  like you think, just remember that it might be the web browser and not your CSS.

I did a little test trying to see how small web browsers would go. The CSS rules are the same on all of the designs, but the minimum browser width is different with every browser. If you would try to make the browser window smaller with firefox, the window would get smaller, but the CSS wouldn’t respond. Chrome appears to have the smallest width that you can work with (as of version 18).

Firefox 11 – 323 pixels

Internet Explorer 9 – 218 pixels

Chrome 18 – 135 pixels

current browser minimum width

I doubt many mobile devices have a width of 135 pixels, but is something to keep in the back of your mind. I was banging my head against a wall for a little bit with Firefox’s inability to make the CSS respond to a smaller size. I started to revise my portfolio site to make it more responsive.  I am still playing with the technical and structural elements, so it should be looking pretty good once I can focus on the creative aspects of it.

Here are a couple great examples that I like. I will definitely be studying them and thinking of new ways to design websites with this new enhancement. You can do a google search and find many examples that large and small companies have already deployed.

Fore Fathers Group

This website has a great creative use of colors and does an excellent job of looking good at every dimension. There is no size that drastically changes the layout. It slowly morphs the layout as the browser gets smaller.

The Boston Globe

Creative websites are good, but what about websites that just have a ton of content like the Boston Globe. Instead of eliminating content, they go the approach of just wrapping the column content into less columns. It works well. You have to scroll a lot to see everything as one column, but all of the content is still presented well and browsing is still enjoyable.

Conclusion

Responsive web design is here and it is only going to be more integrated into the design process as the months go by. Taking a few moments to learn the tricks of making a web design responsive is something every web designer needs to know. Creating websites with specific devices in mind is an outdated model.

I believe framework are great starting point to get designs up and running quickly, but they lack the granularity needed to make a web experience unique and not just like another cookie cutter design. Making a design responsive isn’t a huge task if you understand the basic principles.

Responsive web design is more than just learning a few principles. It is a mindset and paradigm shift that designs are 100% dynamic. Fixed widths should only be used for the smallest and largest dimensions allowed.

Do people not use your website on mobile devices because the “acceptance” isn’t high enough — or is it because the experience is so bad that people would rather not even visit it.

When he recorded the song originally, he actually combined a live orchestra with programmed instruments, so it is going to be pretty hard to reproduce exactly. This post is talking about some of the journey I took in trying to learn the new tool and recreating an existing song from scratch.

Dealing with a lot of different tracks and instruments can get messy fast. I found it is best to really start organizing your instruments and put them into groups. I separated the instruments into brass, woodwinds, percussion, and strings sections. Using different articulations with instruments required separate tracks, so it I always tried to put the articulations of an instrument in the name if there were multiple types. I also color coded the instruments to visually be able to tell what the sections were.

The light blue tracks were my master fader and the guide track. The guide track was the original song that I could toggle on and off to see how my version compared sonically.

I am starting to develop a process on composing/studying songs.  The main steps I am using are the following:

1. Time/key signature
2. instrument pitch recordings (emphasis on pitch)
3. mixing (emphasis on volume and emphasis) – screenshot below

How does an Instrument Sound?

If you aren’t familiar with the quality of this pack, you can check out their website. Some great sounds.

go to Demo section to see playlist

http://www.soundsonline.com/Symphonic-Orchestra

Ouch – $50 bucks for a USB drive! I smell high profit margins.

The deliverables all arrived (East West Sofware Box and iLok). When I opened up the software box, there was 5 dual layer DVDs along with a piece of paper. The piece of paper had a big “ATTENTION” on it, so I thought I better read it. The company doesn’t keep up to the date software on the DVDs, so you have to download them online. I thought having two videos explaining how to download something over the internet is a bit overkill, but whatever.

At this point, I knew this was going to be an epic install. This post talks about the install process and what I did to get the software working. I am not an expert installer, so I won’t be able to help people with other configurations. I am running a 64-bit version of Windows 7 and usting Pro Tools MP9 as my DAW (digital audio workstation).

iLok install/register/configure/activate

I won’t bore you with all of the steps and frustration I had trying to get it all set up. I will just provide information on what you need to do if you would ever want to install the East West Symphonic Orchestra (Gold edition in my case).

Probably the best thing you can do at the start is go over to iLok.com and register your USB drive. If you aren’t familiar with iLok, it is a new serial key process where you can put serial keys on a USB drive and install your software on any computer you want. It is kind of a cool concept, but the execution of the idea is a pain. Download the driver install and the client install to get your system to recognize the USB stick. The client install helps connect the iLok to the website.

For web browsers, you should use Internet Explorer if you aren’t. The iLok website uses ActiveX technology to connect the iLok to the website, and only Internet Explorer can use that. Maybe there is a way to use other browsers, but I didn’t have luck when I tried.

Now that you have your iLok.com registeration done, go over to soundsonline.com where you need to register your iLok account with soundsonline. If you login to your account under soundsonline.com, you can go “My Account” where the last option will be to enter your iLok.com username. Entering that links the two sites up somehow.

There is a little more to the iLok process, but that takes care of most of it.

East West install

I installed my software on a Windows 7 machine, but I am sure a Mac set up wouldn’t be much different. On the first DVD, there are multiple installers depending on what product you bought. I got the Gold edition, so you I used that installer file.

What this installer does is put the player on your computer. It doesn’t take very long to instsall since it is just a shell that the music will be playing from. I imagine it installs any VST or RTAS drivers along the way to work with you digital audio workstation (DAW). I will be calling the audio player “PLAY” software from here on out, since that is what East West seems to call it.

For you to use PLAY with software that you buy, you need to install an “authorization” program that updates the PLAY software. The DVD doesn’t have an updated version if you are on a “newer” OS like Windows 7 or Lion, so you need to go to the soundsonline.com website to download the software update. While you are there, you might as well update the PLAY software as well that contains some fixes.

After you get done installing the authorization software and PLAY update, you will probably have to restart your computer. That should take care of all of the installation pieces.

Whew…

Authorizing your products and adding to iLok device

If you open up the PLAY software, you will have absolutely no idea what to do if you haven’t used it before. For it to work correctly, you need to activate different products you bought. This is where the iLok stuff comes in.

Plug the iLok in now if it isn’t already.

If you are on a Windows 7 machine, type “Authorization Wizard” in the start menu search. A program will come up where you can enter your serial number(s). It will have a East West logo in the application background, so you know it is the right application if you see that. The authorization program asks for your soundsonline.com account as well as the serial that is located on the pack of DVDs you got. When you enter the serial number and hit the authorize button, it will connect to the internet and add the serial number to your iLok. If you have multiple iLoks installed, it asks which one to put it on.

The iLoks use some type of hexadecimal ID, so if you have multiple iLoks and are unsure of which one you want to put the license on, go to the iLok.com website where you can see what iLok is associated to what ID.

Now that you have authorized the software, you can now use the PLAY software for those products.

If you open the PLAY software (called EWQLSO player on my desktop) , you will see the product you purchases on the lower right (not shown in screenshot below). You need to hit the browser button on the top right to see which products you have authorized.  You still need to transfer all of the files for it to work though.

Transferring Content

The way the PLAY software works, the player is independent of the actual sound files. That means the sound files can be put anywhere you want and there is no install process for them. They are just files that you will navigate to in the player.

I put all of my files in a plug in folder in my Pro Tools directory. There are other files on the DVDs that look like install files, but you don’t need those.

Confusing I know. They probably have/had some use.

The folders that are labelled either “instrument” or “samples” are the ones you want to copy over. This can take a while depending on what package you got. The Platinum version has something like 20 DVDs that need to be installed. Each one being 7-8 GB.

For each product, you should have a instruments folder and a samples folder. My final directory looked like this when everything is copied over.

• Gold Samples
• Gold Instruments
• Silver Samples
• Silver Instruments

You can start up the play software now and navigate to the Instrument folders where you can select an instrument. It should load up and you can start playing away with your favoriate MIDI controller/keyboard!

Conclusion

Without question, this has been the most complicated install process I have ever experienced. Like everything, once you understand what you need and what you need to do, it isn’t that bad. The process for me took about 5 1/2 hours from start to finish. About 70% of that time was just waiting for the 33GB of content to transfer from the DVDs.

There was a lot of old documentation and online articles that made this process pretty confusing. If someone stumbles upon this and find it helpful. Let me know.

With the epic install out of the way, I am starting to exclusively do MIDI recordings with Pro Tools. I am doing a study right trying to reproduce a song I like. It is pretty crazy with a lot of instruments, so it will definitely be a challenge. Hopefully I can get it finished and get a blog post together with what I learned.

It was a heated battle with some great comments for the books that were being given away. Sadly, though, only six people could be randomly chosen.  Thanks again to everyone for participating and giving their time and energy. For the random number generator, I used the random.org website to pick out the winners. Names are as they were listed in the comments

1. Neil Michalares
2. Brett K.
3. Alan F.
4. David W Robinson
5. Jaimi
6. Laura

I will be notifying the winners via email how to claim their books or e-books. I hope the winners can learn a lot and show some of their hard work in the comings months!

Readers will be pleased to know that we have teamed up with Packt Publishing and are organizing a Giveaway for you. Six lucky winners stand a chance to win a copy of the best-selling books on Unity. Keep reading to find out how you can be one of the Lucky Winners.

Unity 3.x Game Development Essentials:

• Kick start your game development, and build ready-to-play 3D games with ease.
• Understand key concepts in game design including scripting, physics, instantiation, particle effects, and more.
• Read more about this book and download a free Sample Chapter.

Unity iOS Essentials:

• Learn key strategies and follow practical guidelines for creating Unity 3D games for iOS devices.
• Learn how to plan your game levels to optimize performance on iOS devices using advanced game concepts.
• Full of tips, scripts, shaders, and complete Unity3D projects to guide you through game creation on iOS from start to finish.
• Read more about this book and download a free Sample Chapter.

How to Enter?

All you need to do is head on over to their respective book pages ( Unity 3.x Game Development Essentials book page, Unity iOS Essentials book page) and look through the product description of these books and drop a line via the comments below to let us know what interests you the most about these books. It’s that simple.

Product description for Unity 3.x Game Essentials book:

http://www.packtpub.com/unity-3-x-game-development-essentials-with-c-and-javascript-will-goldstone/book

Product description for Unity iOS Game Essentials book:

http://www.packtpub.com/unity-3d-essentials-for-ios-games/book

Winners from the U.S. and Europe can either choose a physical copy of the book or the eBook. Users from other locales are limited to the eBook only.

Deadline

The contest will close on 02/15/2012 (Pacific Time). Winners will be contacted by email, so be sure to use your real email address when you comment!

Doing audio was probably one of the most enjoyable game jams I have been to in terms of the work. I put in a lot of hours in, but since I used my ears as much as I used my eyes, I didn’t have that blurry, disoriented feel when I was strolling out at the end of the night.

I recently purchased Pro-Tools MP9 a couple of weeks and have been fervently learning it to use. The hours spent paid off pretty well as I composed audio sounds and music for a few games. I felt some of the ways I did things were inefficient, but didn’t want to spend more time figuring out more buttons. Mixing and mastering was an area that I wish I was more familiar with. Recording sounds with differnet output levels and messing with automation and signal processing can adversly affect the song when it get longer. Certain parts end up being quieter than you want, while other parts are abnormally loud or out of place. Turning the mix setting on the interferce could have helped to really hear all of the abnormalities with the song.

I will probably do audio again for at least one more time. I will make an effort to be significantly better and more prepared for the next one.

If you haven’t heard of the Global Gam Jam, it is an event that is held every year that takes a whole weekend where you get together with a bunch of people and make games!!  Groups are best if there is only 3-5 people, but sometimes you can work on multiple groups depending on your skill set.

Audio and music is generally need of help, so I helped out with three games this year. Hear are a few songs that I composed this weekend.

Note: If the music doesn’t have any sound when you are playing, try to adjust the volume on the player. It worked for me using Firefox.

Title/Theme -  Copperhead Jack and the Cave of Snakes

Level Music – Towel Fight of the Gods

Background Music – Ra: Eternal Fire

Here is the illustration that I did for the modeling. It took me about 20 hours to do. Most of the time was spent dealing with the character details and balancing the different aspects of what I think is in good character design.

One of the parts that gave me the most trouble was the scarf, which had a texture and feel that I really struggled with. The first few rounds of trying to paint it, I was taking a pointillism approach to simulate the fibers. The approach was making it too detailed, and gave too much attention to it. I later started creating custom brushes that took woven crocheted patterns. This created some of the feel that I was going after. I later emphasized the highlighs and shadows using more of the pointillism approach. I tried making the color stripes fairly soft along the edges to help it be consistent with the rest of the scarf.

I really liked the original example and how it shows the details of the arms. Showing the arms at different positions and angles is better than showing the classic “T” pose you see in other work.

Adding a painted concept art pose with the character sheet seemed to give the character more life, and helps give the modeler a feel for the personality and demeanour of  the character.

One thing I noticed near the end of doing this was the amount of digital painting functionality that doesn’t work in the 64-bit version of Photoshop CS5. The mixer brush and new brush engine photoshop has only works in the 32-bit version of it right now. Would have been good to know when I started. Oh well…

To make me feel better I spent some money buying a new character development book using Blender 2.5. I have never actually read a book on modeling and rigging a character before, so I am hoping it will give my next characters some much needed polish. I have only taken one 3D modeling class in college, so I am pretty excited to take my modeling skills to the next level.

As for witch training, I still have all of the code and I really liked the direction it was going. I might make a new witch character (a sexy one!) and start rebuilding it and refactoring the code.

Creating a whole game was really feeling overwhelming with all of the different aspects to it. There are so many skill sets you need to do a good job. I might just focus on the art and interactivity of everything for now. I will see what happens. Just have to take one day at a time.

By the way, if you get the Kindle version, it is easier to read if you make it display horizontally. The code examples are really hard to read if it is in vertical mode.

I have read through most of the other Unity books as well as going through most of the tutorials on the Unity website, so I have a decent understanding of what’s out there. After reading the whole book, here is my assessment.

Topics and Critique

I think it is best to break the book apart into sections, as each section seems to be written differently and it teaches concepts in a different way.

The main topics the book goes over are the following:

• implementing a 2D sprite character  in a 3d world
• framework for character  stats, inventory, and GUI system for RPG game
• importing a 3d character and configuring animation states
• Writing surface shaders and CG
• Going into depth with how a 3d character controller and camera works
• creating and implementing a rocket launcher
• creating basic AI
• destructible environments (using triggers and PhysX rigidbody controls)
• setting up a ragdoll
• Optimizing tools (Statistics and Profiler)
• high scores using local and web technologies
• Appendix (this is better than you think)

Certain topics were very engrossing like the 2D sprite character, RPG GUI system, writing shaders, and creating high scores on the web. Other parts such as the 3d character controller, ragdoll, importing a 3d asset, and the rocket launcher section were less interesting. I have seen a few rocket launcher things out there, so I was surprised a section like that was chosen for the book.

Some topics I haven’t seen before were the RPG GUI system and the sprite animation system. They are both pretty code heavy, but I thought they were particularly interesting. I haven’t seen many “sophisticated” GUI system examples or tutorials, so it was nice to see how the writer architected the code to make it readable and flexible with the different screens.

screenshot from GUI RPG system

The first chapter that goes over the 2D sprite framework was also pretty good – especially the engine that managed all of the different states of each animation.

As odd as it sounds, I thought the appendix was a great section at the end of the book. So good, that I thought that some of the content should have been used in the chapters — especially the shaders section. I usually think of appendixes being API references, but there was some good explanations about the more intricate parts with how Unity works. I imagine the writer put it at the end because he probably didn’t write some of the content. I still think the content is too valuable and informative to just stick it at the end in an appendix.

For the improvement areas, I wish the writer would have covered less topics and went into more detail. Some concepts were mentioned, but then just referenced the Unity website for more information. A little more information on CG scripting and  AI programming would have made my day. What was written about each section was pretty informative, so the sections still felt complete on there own .

Most people that are “advanced” probably know about the Unity website for the API reference, so it would have been a little more helpful to give book references to learn more about a given subject. The books probably wouldn’t have “Unity3D” in the title, but I am sure most “advanced’ users would understand that the concepts would carry over.

One of the things that is good to know going into this book is that some sections are VERY code heavy. With some of the other books that I have gone through, I usually write all of the code. I feel like it helps me understand some of the nuances of the concepts better. For this hotshots book, when I got about 40% done, it felt like it would be  better to use my time analyzing the finished code – so that is what I did. The book felt less cumbersome taking this approach.

Conclusion

For the price, I would recommend the book highly. I am sure you will have a different experience based off what you already know about Unity3d. If some of the topics he covers pique your interest, it is worth the money to grab a copy.  Speaking of topics, knowing what topics are covered in the book is essential to know if it will be a good fit for you. I don’t do 3d programming for my job, so there were plenty of concepts that were new to me. My criteria for a good book is based off how much I learn — and I think this book did a pretty good job.

Final Score:

Dang! I am excited.How did I not know about this earlier? How can a book like this just pop up out of nowhere?

I am tired of learning about how to use the terrain tool or create materials from beginner books. I don’t know what the HOTSHOT means in the title, but I guess it is like only bigshots can handle this book. Bring it on!!

Here are a couple of links to descriptions and one review so far on Amazon. You can do a search on it just as easily as me, but I am a proponent of being lazy with just making a link available.

Amazon Link  Pakt Link

I had to buy it of course. Read and worked through the first chapter today. Here are some points about my first impression of what to expect.

• Advanced – Goes right into the meat and potatoes without any explanation of basic concepts.
• Kindle version is hard to read the code and no bolding (a little more challenging to sift through code to see what changed).
• A few bugs in the code, but I kind of like it because it makes you think about it. When you have to fix something, you take more time to understand how the code works.
  
• Little to no fluff! I hate fluff and all of the superfluous chatter that some books have saying things in round-about ways. Great for marketing, bad for learning.

Just by clicking through the book (I have the Kindle), the book is looking very rich in good content. Can’t wait to read the rest.

Has anyone else read this book? I would love to hear what their feedback is on it. It seems to be pretty good so far.