Understanding CSS Support for Background

By Vipul Patel

In the last few years, responsive design has changed the way designers build websites and the way design programs work. Many of these programs have now been rebuilt to deliver results cross-platform, for desktop, tablet, and mobile devices.

 

For many years, all you needed was a desktop site but as technology evolved, smart phones began to make an appearance, along with tablets. Businesses began to take advantage of these new technologies, partly because they represented a new marketing opportunity, which continues to grow.

 

Initially, some companies began to cater only to mobile devices. One such company is GoMobi which has created a mobile and tablet web design platform which one can use for 6,000+ smart phones. Other companies formed to build apps which are designed to run on specific smart phones, such as the Android or iPhone.

 

Eventually, some software companies and businesses realized they needed/wanted an integrated solution, where the design could work consistently across all devices. The theory behind it is that you can build one platform which will be consistent across all mobile devices which will need little, if any updating.

 

The reality is something else.

 

In an article by CIO magazine, Scott Shaw of ThoughtWorks Australia said: “People are anxious to create an application that can be offered both on Android and iOS app stores very quickly… If you really want to optimize the experience say on an iPhone or an iPad then you’ve got to be able to use the native controls when necessary.”

 

In a webinar by Mooweb, they state: “Responsive Web Design should allow businesses to create and manage one codebase to deliver consistent branding and functionality across all platforms. The reality is far more complicated and less rewarding.”

 

Another issue is how well tablets and smart phones actually perform. In the article: Responsive Web Design is Not the Future, author Josh Chan presents some important information about web performance on various devices in an extensive report.

 

Here is an example: "Guy Podjarny, chief product architect at Akamai tested 347 sites featured on the responsive web design gallery Media Queries using Google Chrome with multiple devices, and the web-based tool WebPagetest."

 

He found that page sizes and load times were almost identical regardless of device or screen resolution.

 

The bottom line is even with optimizing different page layouts for tablet or mobile, and despite the reduced size, this does not mean that these sites will load faster. You can watch Podjarny's presentation for the full story.

 

Responsive Design Software Programs

As mentioned earlier on, many software design companies have taken up the challenge of responsive design and have built/rebuilt their software to meet the demand. Examples of companies with this design focus are: Adobe, Moboom, Studiopress (Genesis), Volusion, and many others.

 

One of the issues is image optimization, which has been covered in several articles here at HTML Goodies.

 

To address that, one design consideration is the “mobile first” approach. The idea is that you create an effective design for mobile, first then scale the design up to work on tablets and desktop devices. In contrast, if you design for the desktop then reduce the design for mobile, you are likely to run into major issues with the logo, header text, body text, image sizes, etc.

 

Coding Sites Manually

If that wasn’t enough, there is yet another side to the development issues. According Earl Flormata, CEO of Jiffy Software, using software programs is the wrong way to go, partly because these design programs will be slow and cannot match coding by hand.

 

In the article: “How to Build an App in Ten Steps,” here are some things to consider when creating an app:

 

1.      Create the Look and Feel:  According to Earl: “One thing we do backwards from other developers is that we design the look and feel of the app before creating the code. The reason why we build the form first is because everything has to feel natural on a phone. Designing for a small screen isn't the same as designing for a website. It has to fit and feel right. If it doesn't feel right it will end up being a flop.”

 

2.      Custom Designs vs. Templates: “The down side with a template is that it will have that look and feel. If the budget allows for it, build a custom design. Not only will it be yours, but it will set you apart from the completion that makes use of templates.”

 

3.      Coding: “At Jiffy we code in all languages, though when working with iOS, we mostly use Xcode and Cocoa. We don’t code for Blackberry because most people don't like it all that much. One of the reasons for the fall of Blackberry was their environment wasn't conducive to developers.” Earl continued: “When I was a coder working with the old Blackberry systems, this meant coding 14 times, then compiling and testing for each one because of the different code bases.”

 

Conclusion

As one can see by this brief overview, much is happening with cross-platform technologies. And while software companies are rising to the challenge, the idea that one can build all requirements into one software program seems to be a fallacy. In reality, it is likely that businesses will need to make use of several technologies to get the results they seek. The down side is the cost. Each business will have to determine their own best course of action based on their budget and the tools available.

 

Resources

To learn more about how responsive design affects your business cross-platform, check out this video by Adobe.

 

 



Make a Comment

Loading Comments...

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
  •  
  •  
  •  
Thanks for your registration, follow us on our social networks to keep up-to-date