Tablets and the Future of Graphic Design

Inspired Magazine 22 May 2012, 3:42 pm CEST

This is a guest post by Cameron Tyler from Technected - a site dedicated to helpful tech tips and tricks, and innovations in the industry. We always welcome new contributors, so stop by anytime and become a part of our great community!

When the iPad first hit the streets, both critics and fans were skeptical of its ability to ever become a practical computing solution. Now, years after its release, the device has changed the mobile computing landscape and generated some sophisticated applications in business and everyday use. Some uses are more natural than others, and from the outset it wasn’t much of a stretch to consider the device’s impact on the graphic design and artist community. Due to the touch-based nature of the iPad’s screen, art was clearly meant to intersect with the digital realm in the iOS environment. Graphic designers can now perform complex photo editing, and create intricate compositions on the fly with iPad new mobile-based apps like Photoshop Express and Adobe Creative Cloud.

Why the Cloud Matters to Designers

Graphic and Web designers traditionally had to spend thousands of dollars on high-powered computer systems, as well as industry-standard design software to stay ahead of the curve. As with any computer-based profession, state-of-the-art software requires lots of processing power. Processing is expensive, especially as computing trends and technology changes so quickly. Cloud-based design applications take the processing ball out of the designer’s court by providing processing resources over several shared servers in a cloud-computing environment. Basically, this means that designers can use powerful design applications seamlessly on the Web.

Adobe to the Cloud

Adobe, the premier name in industry-standard design and photo editing software saw the cloud coming and responded in kind. They recently introduced Adobe Creative Cloud. Essentially, you subscribe to this cloud service and you have access to all desktop applications without having to download them all onto one hard drive. Designers can even sync all their design files within the cloud environment and download them on any desktop, laptop or tablet PC (yes, that includes the world’s iPad population).

Cloud Computing, Web Designers and Collaboration

Web design has always been a trade of collaboration. Both major and minor Web development projects require several pairs of eyes to ensure each Web page is functioning at the highest level possible. It’s not uncommon to send big files back and forth, share them through shared network drives or through a specialized email client. Using cloud-based resources allows web designers to quickly and easily share files between devices across multiple platforms and even to open a file simultaneously to collaborate in real time as you might on a Google Doc.

Bridging the Gap: Computer Design and Art

The latest iPad processing technology mixed with the latest in iOS applications re-invents the iPad as a virtual sketchpad for artists. For instance, Nomad Brush is a living, breathing paintbrush designed specifically for the iPad, which essentially transforms the tablet PC into a mobile easel. More and more creative-minded hardware makers are taking the stylus concept a step further to make it something that artists can easily integrate with their design efforts.

Mobile is Always Better

As the world became more mobile, it was evident the designers behind that mobile technology would need like-minded tools. Now designers don’t have to separate their art from the computers they create on. Sophisticated hardware makes the artistic process more fluid than ever. Additionally, artists and designers will no longer have to keep up to date with computer systems sporting inflated hard drives and server-level processing chips. Through a combination of mobile integration and cloud-based application solutions, the Web will shoulder the workload.

This is a post from Inspired Magazine. If you like it, you may want to subscribe to our RSS full feed to be updated on every article we're publishing. Also, it's highly recommended to follow us on Twitter! Tablets and the Future of Graphic Design

Coding a Mobile Web List View in HTML5 & CSS3

DzineBlog.com 21 May 2012, 4:31 pm CEST

Advertise here with BSA

Using CSS3 media queries we can target a host of devices and browser settings. The mobile web has adjusted into a huge market where more people are accessing the Internet via phones and tablets. This trend is not slowing down, and in fact many web designers are jumping on board to see what all the fuss is about.

In this tutorial I’d like to introduce a few of the concepts behind mobile design. We’ll create a basic list view page with a top title bar and some navigation links. This can be coded in straight HTML/CSS and requires no JavaScript to function. Take a look at my demo below, and feel free to grab the tutorial source code as well.

Live Demo – Download Source Code

Default Heading Tags

Each HTML document requires a few different meta tags and other content inside the head element. There are so many interesting tags to include when you’re targeting mobile devices. I’ll go over some of the most important ones that you’ll need.

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="true">
<meta name="viewport" content="width=device-width, initial-scale=1,
maximum-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">

This snippet handles much of the blunt upfront work for us. X-UA-Compatible is designed specifically for Internet Explorer rendering engines. I set the value to “edge” which uses the most recent IE engine for HTML/CSS. Similarly HandheldFriendly is a proprietary tag for Windows Mobile and Blackberry devices.

The meta viewport tag is super important for every mobile environment. In this scenario I’m setting the website width at the same value as our maximum device width. This can adjust for Android and iOS devices. Additionally the initial-scale will keep a steady aspect ratio of 1:1 for graphics and text on the page.

<!-- APPLE TOUCH APP ICONS
<link rel="apple-touch-icon" sizes="72x72" href="apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="114x114"
href="apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" href="apple-touch-icon-57x57.png">
-->

The mobile web app capable meta tags go hand-in-hand with these app icons. I have commented out the HTML because for this example we don’t need iOS icons. But if you wish to run your website like a mobile app you can include images and settings for your home screen.

The Page Skeleton Markup

I have kept the whole page simple and easy to follow in the HTML. The top heading band is using an HTML5 header element set fixed position on the screen. This means as you scroll down the title bar will always appear on top.

<body>
  <header>
    <h1>Mobile Web App</h1>
  </header>

  <section id="content">
    <!-- home featured image credit: http://dribbble.com/shots/118515-Device-Icons -->
    <center><div id="home-feature"></div></center>

    <nav>
          <ul id="nlists">

The other inner content is held inside a section element with a top image, mainly for aesthetic purposes. The full navigation is contained inside an unordered list with an HTML5 nav tag wrapper.

If we are looking at the list view on a desktop or laptop screen we can adjust the width for some extra padding. This may also work on Tablet PCs if the resolution width is greater than 700 pixels. This small responsive feature looks a lot better than spanning the entire screen.

Styling a List

Many of the background gradients for links I have created using CSS3. This saves us time developing images and moving them over onto the server. Although even with newer CSS3 gradient properties it’s still difficult gaining full browser support. Below is a snippet from the header properties list:

header {
  background: #6d83a1;
  height: 44px;
  width: 100%;
  position: fixed;
  top: 0;
  z-index: 9999;
  border: 1px solid #2d3033;
  -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.40);
  -moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.40);
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.40);
  text-align: center;
  border-left: 0px;
  border-right: 0px;
  border-top: 0px;
  border-bottom: 1px solid #554761;
  color: #fff;
  font-weight: bold;
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#afbacd), color-stop(0.5, #869db7),
  color-stop(0.505, #7992ae), to(#6482a6));
  background-image: -webkit-linear-gradient(top, #afbacd, #869db7 50%, #7992ae 52%, #6482a6);
  background-image: -moz-linear-gradient(top, #afbacd, #869db7 50%, #7992ae 52%, #6482a6);
  background-image: -ms-linear-gradient(top, #afbacd, #869db7 50%, #7992ae 52%, #6482a6);
  background-image: -o-linear-gradient(top, #afbacd, #869db7 50%, #7992ae 52%, #6482a6);
  background-image: linear-gradient(top, #afbacd, #869db7 50%, #7992ae 52%, #6482a6);
}

Now down below in this same stylesheet I’ve put together special link styles inside the unordered list. All anchor elements are displayed as blocks and given extra padding on all sides. We need to set the box-sizing: border-box; property so this padding doesn’t add extra space on the side and create a horizontal scrollbar.

nav ul#nlists { list-style: none; font-family: "Calibri", Arial, sans-serif; }
nav ul#nlists li {
  border-bottom: 1px solid #d9e2eb;
  background: #fff;
  display: block;
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ffffff) to(#ecf1f5));
  background-image: -webkit-linear-gradient(top, #ffffff, #ecf1f5);
  background-image: -moz-linear-gradient(top, #ffffff, #ecf1f5);
  background-image: -o-linear-gradient(top, #ffffff, #ecf1f5);
  background-image: linear-gradient(top, #ffffff, #ecf1f5);
}

nav ul#nlists li a {
  position: relative;
  display: block;
  box-sizing: border-box;
  width: 100%;
  padding: 15px 0px;
  padding-left: 10px;
  text-decoration: none;
  font-size: 1.4em;
  color: #787878;
  font-weight: bold;
  overflow: hidden;
}
nav ul#nlists li a:hover { color: #999; }

The containing list items also have a small white-to-gray with a defining bottom border. My goal is to mimic some of the same styles from all the natural iOS applications. It keeps visitors interested in using your mobile layout time and time again. Plus when running as an HTML5 app it fits perfectly onto your iPhone or iPad.

Designing the Right Arrows

Those of you acute to detail may have noticed the arrows off on the right-hand side. This is actually a border element generated using CSS3 rotations. We could make this effect using icons and keep support for older browsers – but this option works better as a fallback method.

nav ul#nlists li a::after {
  content: '';
  display: block;
  width: 9px;
  height: 9px;
  border-right: 3px solid #adb46b;
  border-top: 3px solid #adb46b;
  position: absolute;
  right: 40px;
  top: 50%;
  margin-top: -5px;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}
nav ul#nlists li a:hover::after { border-color: #c3ca80; }

The width and height of this element define how it appears to the side. We’re using absolute positioning to keep the arrow on the right side. Through the border-width property we can make it thicker or thinner adjusting for the text size. This works so well because we don’t need any extra HTML markup on the page, and this icon is still included inside the anchor link.

Other Responsive Properties

I’ve only added a few media queries inside the attached responsive.css file. The first query limits if we are using a screen with more than 700px and appends some extra padding to the center list. But there are two other important mobile queries for fixing up the layout.

/** designs for iphone **/
@media only screen and (max-device-width: 480px) {
  #content nav {
    padding: 0px;
    border-radius: 0px;
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px;
  }
  section#content {
    padding: 0;
    width: 100%;
  }
  nav ul#nlists li a {
    font-size: 1.2em;
  }
}
/** retina display **/
@media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min--moz-device-pixel-ratio: 1.5),
  only screen and (min-device-pixel-ratio: 1.5) {
    div#homeimg {
      background-image: url('images/devices-icon-home-feature@2x.png') no-repeat;
      background-size: 290px 250px;
    }
}

In the first section we’re checking for a maximum device width of 480px. This is limited to iPhone displays in portrait and landscape mode – plus other devices with a similarly small screen. I’m removing all the extra padding from the list and content section. Also I’ve toned down the text size a bit, because ems seem a lot larger on mobile phones.

The second piece is looking for retina screen devices. So far this will only apply to high-DPI Android screens and retina iPhones/iPads. I have supplied a double resolution image which we can rearrange using the background-size property. This is a necessary step for any mobile website with images, or else they will appear very blurry to the average iPhone 4/4S users.

Live Demo – Download Source Code

Conclusion

There is so much to cover for building a mobile web app. I’ve touted a lot of the mainstream ideas which are circulating the web. But there are dozens of other resources in Google to get you moving even further down the path of mobile web development. As I mentioned earlier my source code is free to download and open for edits on your own projects. If you have any ideas or questions feel free to respond in the post discussion area below.

Advertise here with BSA

Most Inspiring Web Design Events to Come

Inspired Magazine 21 May 2012, 3:12 pm CEST

Being a successful web designer meanings honing your creative edge in order to stay a step ahead of your competition; as is the case in any creative profession, a lack of inspiration inevitably leads to a lack of productivity.

When keeping your technical design skills honed and your heart and mind focused on the steps leading to your next work of creative genius are a must, consider attending one or more of these most inspiring web design events to come!

Creative Exposure Baltimore (Monthly)

Creative Exposure Baltimore

Web development and photography can be linked closely and present an opportunity for ultra creative and beautiful works of design when they are. With this thought in mind, consider the benefits of attending the monthly Creative Exposure meet-ups in Baltimore, Maryland in order to collaborate with some of the most creative minds the city has to offer.

Always boasting a varied and dynamic group of attendees, these meetings aim to inspire and educate photographers and web designers alike, bringing together creative minds and offering a good dose of inspiration to all in the process.