Our Blog

Subscribe you will

Category Archives: Tutorials

Responsive Design is Base

By Phil

all_your_base

Web development changes quickly. It wasn’t that long ago (centuries in web time) that a CMS was optional and only added if budget/time permitted. Responsive design has now moved from “sounds interesting” to “that’s how God intended it.”

Bootstrap has been a key player in making this transition and has some killer tools to help. It is also bulky if you use the entire package. CSS frameworks started popping up as the movement gained steam: Foundation, Skeleton, Gumby, Amazium… So many to choose from. At Paragon we dabbled in all these, rolled our own, went completely custom based on the project and now have settled on a handy bare-bones framework called Base. You don’t know hard it was to not title this post “All your base are belong to us.” I’m a web senior citizen.

We like Base because it keeps it simple. No fancy javascript pieces, sleek components, automagic menu systems. Instead, Base provides a great set of CSS classes for its grid along with basic form/element styling and resets. All the things that a front-end developers have in their toolkit when kicking off a project. It gives you what is needed to start and doesn’t get in the way after that. It also comes LESS’ed out which makes me happy.

The grid system is simple. Containers, Rows and Columns.

Containers wrap content into a given width, based on screen size, and then center it on screen. Rows divide content into groups and clear floats. Columns are, well, columns and can be 1 to 12 units in width.

1
2
3
4
5
6
7
8
9
10
11
<div class=”container”>
	<div class=”row”>
		<div id=”content” class=”col col-8”>
			<p>Lorem is my favorite ipsum.</p>
		</div><!-- #content.col.col-8 -->
 
		<div id=”sidebar” class=”col col-4”>
			<p>My sidebar stuffs go here</p>
		</div><!-- #sidebar.col.col-4 -->
	</div><!-- .row -->
</div><!-- .container -->

And there you have it. A cross-browser friendly sidebar and content area layout. The above is great for desktop and will even work for tablet and mobile. But you can target tablet and mobile independently… which is awesome.

1
2
3
4
5
6
7
8
9
10
11
<div class=”container”>
	<div class=”row”>
		<div id=”content” class=”col col-8 tablet-col-10 mobile-full”>
			<p>Lorem is my favorite ipsum.</p>
		</div><!-- #content.col.col-8.tablet-col-10.mobile-full -->
 
		<div id=”sidebar” class=”col col-4 tablet-col-2 mobile-full”>
			<p>My sidebar stuffs go here</p>
		</div><!-- #sidebar.col.col-4.tablet-col2.mobile-full -->
	</div><!-- .row -->
</div><!-- .container -->

Here we take our example and change how many columns are used in tablet. We also have mobile become full width. You can even change content columns with mobile:

.mobile-col-1-2 is 50% width
.mobile-col-1-3 is 33.333% width
.mobile-col-1-4 is 25% width
.mobile-col-3-4 is 75% width

Even hide elements based on browser size with:
.no-desktop
.no-tablet
.no-mobile

Pretty good stuff. Base is in active development and past updates have changed column classes so later version may not be backwards compatible. All updates have refined Base into a very capable responsive kit.

Because I can’t leave well enough alone, I did create a version of Base that separates desktop, tablet, mobile and print styles, moves sizes, colors, and all sorts of things into a global variables list and created a LESS ready starting point with some useful libraries thrown in. If you’d like to check it out, you’ll find Base-Start on my GitHub.

Finally, when Keep-It-Simple-Stupid meets Base, it looks a little something like this…

gene-simmons
[Photo by Diario de un pixel]

I’ll take my applause off the air. Hugs. This one is for you, Terry.

 

Doing More with LESS.js

By Phil

less_is_more

If you’re a beginner front-end developer and haven’t heard of LESS then sit back, relax, get a nice cool drink and let me make your life a little better. Are you sitting? You’re a front-end developer, of course you are. Let’s begin.

I’ve written CSS for the worst browsers ever. IE 5.5, IE6, IE… you get the picture. I can Ctl+S, Alt+Tab and F5 in my sleep while writing semi-cross-browser compatible code from the first line. When I’d first heard of LESS’ variables, mixins, and nested syntax I thought it sounded interesting and figured if it would save a few keystrokes I’d give it a shot. Best decision ever. Here’s why… Read More

 

How I made my first iPhone app… or, how not to make your first iPhone app

By Phil

FieldTrip, my first mobile app offering, is complete and, boy, the learning curve was sharper than Steve Job’s acid washed jeans. Here is a brief look into my development process, what I’ll never do again, and what I will do for the next one. Hopefully it will help new app developers get started.

Nerd up!

As this was my first app, I did not hit the ground running. It was more of a slow crawl with frequent, whiny breaks. About a year ago I purchased a book titled “Beginning iPhone 3 Development: Exploring the iPhone SDK“. After reading and working through the first few chapters, I realized that the book required a basic knowledge of Objective-C which I did not have. Learning a language is much different than learning a platform so the book was shelved in hopes that I’d soon have time to come back to it after figuring out Objective-C. Much like John Travolta’s 3rd wind acting career, I never happened. It was my Battlefield Earth.

A few months later I began to experiment with web based iPhone app development. With this method, an app is essentially a web view and the code is similar to a website. This lead me to PhoneGap and jQTouch. Both worked pretty well, especially in combination, but could not create a truly native application as they were webkit based. Webkit also meant that apps couldn’t take advantage of the phone’s hardware. No camera, push notifications, accelerometer, GPS, etc. All smoke but no fire. A point driven home by Apple when they began cracking down on non-native apps.

Courtesy appcelerator.com

Another few months more and I found Appcelerator. With Appcelerator, applications are created with javascript (a familiar language to us web devers) and compiled into native applications using their magic application and xcode. The brain of the app remains javascript but the application UI and database is fully native and you get access to all the phone’s hardware. Booyah! With this new toy, I set off to work.

New to Appcelerator, and forgetting all 10 years of real world practice, I started out in code to create my app. I knew more or less what I wanted. What could go wrong. Bad, bad move buttercup. I knew better but was drunk with Javascript power.

This type-happy start led to 7 complete rewrites as I delved deeper into Appcelerator and its best practices. It was yet another reminded that planning trumps passion. Rockstar.

Here’s how it went down:

  • 3 rewrites before realizing, maybe I should wireframe this mother.. like all other projects I work on.
  • 2 rewrites after actual testing a fully functional wireframe prototype, on a few users. Again, stupid move on doing this so late as holes in functionality and usability were uncovered which made rewrites necessary.
  • 1 rewrite after deciding to design based on the wireframes and mash it into my code. I plead temporary insanity.
  • 1 final rewrite to consolidate my code, properly create my views and elements to account for all functionality, and incorporate design systematically instead of the french press method. Side note, French Press sounds like a really badass wrestling move.

The end result is an app that works great and I’m very proud of. The lesson is this. Figure out what you’re doing before you start doing anything. With that little tidbit I could have cut development time by a month.

For the next app, my process will be as follows:

  • Define the feature list up front. Figure out what the app does before starting. If not, the app will take on a life of its own in development and I’ll find myself adding sound effects, hardware vibration and unicorns.
  • Sketch wireframes in pencil to sort out how a user will navigate and interact with the app. This will also define how many templates are needed. Remember to use pencil as it will allow for continual refinement of the experience and, as the ideas keep coming, keep me from worrying about alignment, fonts, and how large a certain field may be.
  • Take the refrigerator worthy sketches and create refined wireframes. Check them to make sure all necessary views are accounted for then test them. Either create a quick clickable website, use MockFlow, or open Photoshop and let someone pretend to touch.
    While someone is reviewing the wireframes, I’ll keep my mouth shut and will not explain to them what they should be doing. A user should be able to use the app without being told what to do.
  • Take the feedback, make adjustments and repeat the wireframing step. Expect to change how the views look and connect to one another at least once. If there are no updates, either I’m a user experience god or didn’t really listen to feedback.
    Don’t design until the wireframes are completely locked down. Developers tend to see things in ways that real users do not so I need to build for a users and not for myself.
  • Make those wireframes into the best damned designs I can muster. If I suck at design, get help. While it does matters how fast a table loads or how streamlined database queries are, if a potential customer looks at the screenshots on the App Store and throws up a little, they’ll never see the results of all that coding awesomeness.

This is what I’ll do next and I hope it helps you get out there, make that first app, and lose less hair in the process. Leave a comment with your thoughts or experience. I’d love to hear them.

 

The Iso50 Field Guide to Color Management

By James

iso50_banner_color

I am always brushing up on my technical knowledge of the printing process and color management, so I obviously have found this little field guide to be most helpful. Alex Cornell and Scott Hansen of ISO50 have put together an impressive and definitive Field Guide to Color Management.

Though there are literally thousands of guides on the web like this, ISO50’s is not only replete covering everything from lighting to print settings but also comes from a trusted resource plenty experienced with color management and printing.

Read More

Filed under: Design, Tutorials

 

Mind-Numbingly Easy Waterfall effect in After Effects

By Andrew

Whenever you see the Paragon blog go quiet for a while you know it’s because we’re really busy. But I wanted to share a quick tutorial that came in handy last week for one of the projects that’s been keeping us busy.

We needed to create several natural effects like snow, sand, fog and a waterfall and use them as transition elements for this project, but we were also on a tight deadline so trying for photo-real wasn’t an option. CC Particle World to the rescue!

I’ll tackle the waterfall in this post and share the other natural effects in a separate post.

Here’s the effect we ended up with.

Simple huh? I bet the seasoned pros can already tell how this is done. But for the rest of you, here goes…

Read More

Filed under: Tutorials

 

Unreasonably Easy Action Movie 3D Text in Cinema 4D

By Andrew

(Beginner’s Level )

Some time back I had the opportunity to create some artwork for an indie film shot by Epic Image Entertainment’s, Justin Lutsky. The  idea was to create something that looked big budget Hollywood circa 1990′s Action movie, but the director needed us to turn things around REALLY quickly.  So, of course, I turned to my go-to 3D software for all things awesome: Cinema4D.  I’d been introduced to the world of C4D last year when looking for a simple program to create some 3D text for an album cover I was working on, and since then I’ve been constantly amazed at the results you can achieve in a short space of time, and with a very shallow learning curve.

So here’s the equation:

theequation1

The Step by Step follows…

Read More

Filed under: Tutorials

 

Simple Tips for the PHP noob

By Phil

When I first started web coding a few years back, I did some really really strange things. Self taught from books, cereal boxes and decoder rings meant code was jumbled with misused “if statements”, “for loops” and various bits of hackery. I often think of the simple “ah ha” things that would have helped me get through those bumpy first few years and thought I’d share a few.
Read More

Filed under: Tutorials

 

Photoshop Tidbit 3: Smart Object Use

By Andrew

PshopTidbit3.jpg

I remember learning about this one from the Photoshop Guys some time ago, but recently I’ve been using it a lot in some web designs so I figured I’d share it in case you could find it useful as well. It involves using smart objects within Photoshop to keep a layer’s resolution intact even after resizing it.

If you’re as indecisive as I am when you’re designing then you like to make sure your changes are reversable as much as possible. And if you’ve ever tried to scale an image up after scaling it down you’ve realized that that’s not exactly reversible. Unless you use Smart Objects.

Read More

Filed under: Tutorials

 

Photoshop Tidbit: Alt Dragging

By Andrew

PshopTidbit2.jpg

I discovered this little gem of a time saver completely by accident. Thanks to a former co-worker of mine I knew about the benefits of Alt+ dragging a layer’s layer effect icon to copy that layer’s style onto another layer.

AltDrag_effect.jpg

But what I didn’t know was that you could do the same for the layer’s mask. Just make sure the cursor’s over the layer mask icon.

Read More

Filed under: Tutorials

 

Photoshop Tidbit: Compound Vector Shapes

By Andrew

PshopTidbit1-title1.jpg

As my first attempt at writing a tutorial I figured I’d start small and share a simple little tidbit using shape layers.
I used to try and achieve this effect by using masks but that was too final for me. I wanted the freedom to play around with the shapes, and come back later and mess with them some more if I wanted to.

Read More

Filed under: Tutorials