Category: Mobile

Categories

Mobile / 12 Dec 2012

Review: The Mobile Book by Smashing Magazine

Smashing Magazine, one of the most significant forces on the web for all things design and development related, is hitting us with another tome of practical and insightful industry knowledge. The Mobile Book is the latest product of Smashing’s foray into publishing, and it just might be the best one yet.

Read on to see what The Mobile Book is, who it’s for, and why there should be a copy sitting on your shelf as soon as possible.

HTML / 21 Nov 2012

Ratchet: Prototype iPhone Apps on the Fly in HTML

Ratchet is an awesome new framework that allows you to quickly and easily create prototype iPhone app layouts using only HTML, CSS and JavaScript. Simply create a container div in your HTML, toss in a few items with preset classes and you’re ready to go.

Follow along as we jump into Ratchet to see how it works. We’ll kick the tires, try out some features and decide whether or not it’s worth a download. (Spoiler alert: it is.)

Layouts / 23 Jul 2012

Think Vertical: The Influence of Mobile Design on Orientation

Mobile design has me sketching more vertically. And I don’t think it is just me.

I am seeing more and more sites across platforms incorporating more vertical components into their overall design. Forget “above the scroll,” let’s talk about going vertical.

CSS / 26 Apr 2012

Are Hover Events Extinct?

Odds are, :hover was the very first pseudo class selector that you ever learned. Heck, it might be the only one you ever learned. We all love this lovely little feature and use it constantly as a way to create enriched user experiences.

My question today could change the way you think about hover forever: “Does the ubiquity of touchscreens render hover events obsolete?” Put another way, did the iPhone kill :hover? Read on to see how iOS handles a CSS hover event, what that means for you as a developer, and how you should or shouldn’t be using hover events in your designs.

CSS / 6 Mar 2012

Use Gridpak to Roll Your Own Responsive Grid

I love finding free tools that are capable of making my job (and yours) just a little bit easier. The web developer community is positively overflowing with talented people who are more than willing to share their creations with the world while asking nothing in return.

Today we’re going to look at one such tool from Erskine Design called Gridpak. With it we can quickly and easily generate our own responsive grid for building web pages that work well on lots of different screen sizes. It’s a little tricky to implement though so we’ll help you figure out how to set up your styles after you grab the download.

Mobile / 28 Feb 2012

5 Quick Ways to Make Your Site More Mobile Friendly

If you’ve ignored mobile platforms in the past, it can be intimidating to finally make the jump and begin to support mobile browsing on your existing sites. There’s so much to learn, a million techniques to choose from and a limitless amount of work that you could potentially put into existing projects.

A question that designers and site owners alike always want to know is, “How can I quickly add mobile support?” Sometimes, you don’t have the budget to start from scratch and yet still desire a modicum of mobile goodness. Today I’ll walk you through five things that you can do to make your site more mobile friendly.

CSS / 22 Feb 2012

Responsive Design: Why You’re Doing It Wrong

Responsive design isn’t a fad that arose because of a cool CSS technique, it’s an answer to a problem. Always remember that and constantly ask yourself whether or not you’re really adequately addressing that problem. If you’re using copy and paste to insert your media query breakpoints, your solution might be flawed.

Let’s discuss why media queries exist and how we can leverage them to truly solve the quandary of the ubiquitous web. Let’s talk about why you should let your content determine the breakpoints of a layout, not hypothetical screen sizes.

Layouts / 31 Oct 2011

Practical Design Considerations for Responsive Sites

Responsive design is our current best solution to the phenomenon of the ubiquitous web. The Internet is being accessed by people everywhere on countless incredibly varying devices and responsive pages provide an easy and functional way to account for these differences.

Today we’re going to take a step back from discussions of media queries and technical jargon and focus on the core aspects of how responsive techniques affect your design process. What major points do you need to keep in mind when approaching a responsive web design project? Read on to find out.

Graphics / 20 Oct 2011

Tips for Designing Sleek iPhone App UI Layouts in Photoshop

Graphic design for the web has been a popular trend for ages. And with the invent of Apple’s iPhone back in 2007 the app store has grown a tremendous amount. Now we have iOS app designers and developers coming together to build some really fantastic conceptions into reality.

But if you’re not fond of learning Xcode and programming Objective-C, Photoshop may hold more interest. Below I’ll offer some of the tips I’ve picked up for designing killer iOS app mockups. And since there are always new trends emerging the design community is constantly redefining how to create apps. Think of this as more of a beginner’s resource guide to designing for Apple devices.

How to Crank Out a DIY Mobile Site in Minutes Flat
Mobile / 30 Sep 2011

How to Crank Out a DIY Mobile Site in Minutes Flat

Huge strides are being made in professional web design in the mobile arena. More than ever, the web is a place that’s quite friendly to devices of all shapes, sizes and operating systems. If you’re not a professional designer, this news can be unwelcome and even overwhelming as you wonder how you’re going to afford or create your own mobile site.

Today we’re going to take a brief look at how mobile websites are becoming ubiquitous, why turnkey DIY services are a necessary part of the web design world and a few of these services for you to check out. We’ll even walk you through the process of using one of these services so you can see how easy it is to have your own mobile site up and running in minutes.

More Than Scaling: How to Make the Leap From Mobile to Desktop
Mobile / 30 Aug 2011

More Than Scaling: How to Make the Leap From Mobile to Desktop

In the last decade, much discussion time has been given to how both interfaces and user experiences translate from desktops to smaller mobile devices. Recently however, the conversation has switched and we’re now seeing trends begin in the mobile environment and make the leap back to the desktop.

This leap is deceptively simple and merits significant inspection as to the fundamental differences between mobile and desktop platforms and how that can and should affect how interfaces and experiences are crafted.

Build a Responsive, Mobile-Friendly Web Page With Skeleton
CSS / 27 May 2011

Build a Responsive, Mobile-Friendly Web Page With Skeleton

Recently we published an article showcasing 20 Amazing Examples of Using Media Queries for Responsive Web Design. These web pages respond extremely well to different browser window sizes, from huge HD screens to smartphones.

Today we’re going to show you how to use a boilerplate called Skeleton to take the headaches out of designing and building a responsive web page. You’ll be stunned at how easy it is!