Category Archives: Tutorials
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.
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:
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…
[Photo by Diario de un pixel]
I’ll take my applause off the air. Hugs. This one is for you, Terry.
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
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.
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.
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.
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.
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…
(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:
The Step by Step follows…
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.
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.
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.
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.
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.