Tutorials

Tips for Designing a Compact Website Layout

It can take a lot of additional effort to build mobile-specific website templates. HTML and CSS have come a long way but there are still plenty of standards and loopholes to jump through. And with the mounting increase of various mobile devices there are more platforms now than ever before.

In this guide I would like to share some of the most common tips when designing for mobile screens. The web is a fluid beast constantly changing with the times. You have to limit your knowledge of building for desktop browsers in exchange for newer compact designs. The learning process is devious but after a bit of practice you’ll pickup mobile design very quickly.

iPhone 4 white model

Read more
Tutorials

16 Must-Read Tutorials for New HTML5/CSS3 Techniques

The year 2012 has kicked off with a booming design and web industry. More developers are entering the web than ever before and it’s the perfect time to brush up on your coding. These tutorials I’ve added below are fresh off the presses and will help you catch up on all the latest HTML5 & CSS3 trends. With just a bit of practice you can pickup on all these skills and really improve the quality of your coding standards.

Create A Minimal Single Page Portfolio With HTML5/CSS3

Read more
Tutorials

Designing a Custom iPhone App Navigation Bar

App development for iPhone and iPod Touch has become a booming industry. Designers from all over the world are jumping at the chance to have their ideas published into the App Store. It’s no surprise more tech enthusiasts are moving onto Apple devices.

It can be tough to build an entire app from scratch and Xcode menus don’t make things easier. In this tutorial I’m hoping to introduce some bare-bones essential ideas for customizing an application’s top navigation bar. There is a bit of Objective-C code required but it shouldn’t be too overwhelming. It’s also worth noting that you will need a computer running Mac OS X in order to install Xcode and compile these apps in the first place.

Featured image - custom iPhone app navigation bar

Download Source Code

Read more
Tutorials

How to Properly Design a Print CSS Stylesheet

Targeting unique CSS styles is a simple process based around media queries. Web designers have been using these techniques for years to much success. Yet in just a short couple of years recently stylesheets have grown in tremendous popularity. Now more than ever it’s important to offer not only mobile but print layouts for your visitors.

I’ve put together this small guide for beginners to quickly craft a print-based design. There are standard concepts and layout techniques you should utilize for quicker loading speeds. You also need to be conscious of page length when the design is printed on paper.

Read more
Tutorials

Animate a Custom Dialog Box with CSS3 and jQuery

I am a particular fan of the jQuery UI library and have been following the team since it’s release. It features dozens of examples of how to pull together the best animations from such a small library of code. However in a lot of websites these days we are seeking to limit dynamic JavaScript blocks. As such CSS3 has become an important staple with building dialog boxes.

In this short tutorial I’d like to go over the process of building a simple fade-in dialog box. This may contain a signup/login form, input buttons, or even just a message to your visitors. The technique is pristine and gaining adoption in the sphere of web developers everywhere.

featured image demo screenshot - jQuery dialog box

Read more