Responsive Web Design frameworks that we like and use – responsive web design framework review

April 3rd, 2013 Macronimous Posted in 4 series, Best Practices, Frameworks, Mobile development, Opensource 1 Comment »


Responsive web design becomes unavoidable, due to the rapid growth of tablets, smart phones and smart televisions with different screens; it’s no wonder responsive designing has gained the attention of web site owners. One website that could display well on every screen is an inevitable option, since it eliminates the tiresome job of creating web pages for each device independently. Responsive designing also facilitates user experience by way of ruling out links that should be selected based on user device and its display conditions.

Having said that, we never fall behind the curve and our developers utilize a range of Responsive Web Designing (RWD in short) Frameworks to create user-centric websites. The following are the 4 RWD frameworks that we utilize skillfully. You might take a little while to get around these tools, but believe us it’s just awesome! Here is our responsive web design framework review.

Zurb’s Foundation 3 and now 4 (in 2013)

Foundation 3/4 is all the rage for it is an open source front end framework with extensive documentation and killer features.  Its 12 column flexible grids, rapid prototyping, and multi-device mobility allow responsiveness to a great extent. Less tho

blog_foundation

ugh in number oftools, the framework certainly allows creativity than any other. The best part is it has

not changed much in terms of syntax thus reduced learning or upgrade hassles for existing coders. Its clean codes have leveled off several implementation setbacks too.

There is one disadvantage though with Foundation 3 is lack of support for IE7 and Foundation 4 doesn’t support IE8 which still a large numbe

 

r of screens use.

The Semantic GRID SYSTEM

Based on LESS.js this pre-processed CSS is another popular front-end tool utilized widely in designing adaptable websit

blog_semantic

es.

You can now design fluid lay-outs using

LESS.js which is later compiled with CSS. Modifying gutter/ column widths, choosing the number of columns, and flipping between percentage and pixels are some key features offered by this system. The ultimatum is you can’t use CSS more efficiently than in semantic.gs.

 

 Bootstrap from Twitter

Nothing can beat Bootstrap in the numbers game as it offers a la

blog_bootstrap

rge set of tools and options to developers. And you need not download all the elements when you download Bootstrap. If you think something won’t work for you, you can easily ignore. No clustery codes and the look and feel of the UI forms and buttons could be made perfect with minimal changes. In short, bootstrap is an intuitive framework that eases the process of web design and development.

In our experience Bootstrap has better browser support and this could be our first choice.

Response JS

blog_response

 

This is one other lightweight jQuery plug-in used to build cross browser compatible, responsive websites. The strategy is simple. Here we focus and build websites for mobile devices first which could render optimized performance and user experience. Later this is used as a base and tweaked further for desktops and other devices.  The dynamic action hooks and HTML 5 dataset ensures responsiveness and ease in designing.

Each of the above listed frameworks is unique and efficient in their own way. Not to mention, there are some flaws and implementation difficulties as well. Choosing the appropriate one is tricky and it solely depends on your specific requirements. Responsive designing is seeing a steady growth and so does the tools of this space. So, get set and go the responsive way!

Other reads:

Responsive web design to make your site mobile ready – Is it worth doing? (http://blog.macronimous.com/responsive-web-design-to-make-your-site-mobile-ready-is-it-worth-doing/)

 

Why You Need to Prioritize Responsive Design Right Now (http://www.forbes.com/sites/work-in-progress/2013/03/26/why-you-need-to-prioritize-responsive-design-right-now/?goback=%2Egde_4025191_member_226513082)

 

AddThis Social Bookmark Button

Getting started with PhoneGap development – What a developer needs?

January 29th, 2013 Macronimous Posted in iPhone Development, Macronimous, Mobile development, Opensource, Outsource to India No Comments »


Phone DevelopmentDriven by smart phones, mobile and web based app development has gained momentum, though, for a novice, it is getting trickier day after day. With diverse gadgets accessing the web, developers across the world face challenges pertaining to multiple use cases like varied screen sizes, pixels, screen mode (landscape or portrait), user convenience, etc. Today, all of these need thorough consideration during an app development process since it is practically impossible to write codes on and on for every new device hitting the market.

Here comes PhoneGap, an open source mobile development frame work to ease the process. PhoneGap takes advantage of the webkit rendering instance, a common characteristic of all the latest gadgets like iPhone, Android, Blackberry, Windows Mobile, etc. In addition, the developer need not learn new codes nor is he expected to have a thorough knowledge of the device SDK, but be capable of using web standards. Simply put, PhoneGap allows you to create web apps using Java script, HTML5, and CSS3. And it’s exciting because it harmonizes with the device API and allows you to package the web app like a native app getting access to the phone’s unique hardware/ services.

So, let’s get started!

PhoneGap for iOS

  • Get xCode and PhoneGap installed.
  • Once done you will find a number of folders relevant to various OS. Click on the iOS folder as we are creating for iOS. This will install PhoneGap features into xCode..
  • Run xCode and create a new xCode project. Opt for the folder “PhoneGap based application.” This would allow xCode to create parts required to develop an iOS application. Compile these assets in an iOS folder on your computer.
  • Thereafter name the demo project and decide on options like the application name, screen mode, app icon, etc.
  • Subsequently, launch xCode in the project navigator and open file named “www.” This contains all parts related to PhoneGap.
  • Click on indexfile.html. Here you can modify codes as required.
  • Now run the demo app on any preferred simulator (iOS versions). Once the demo app is successfully run you are all set to create real time apps of your choice for iOSusing PhoneGap framework.

PhoneGap for Android

  • Install eclipse and Android SDK.
  • Download ADT plug-in and restart eclipse.
  • Launch PhoneGap for Android and run Eclipse.
  • Create a new project on Eclipse and name the project. Select the appropriate Android version.
  • Check “create activity” and go to Android project folder. Build folders like www, libs and res and drag in assets including cordova 1.5.0.jar, cordova 1.5.0.js, and xml to the appropriate location such that it has all parts and pieces required for the demo PhoneGap app development.
  • Finally, create index.html file and put in the required HTML codes. Choose the respective emulator and check for the output.

All said, it takes a little while to get around the framework plus the run time for any PhoneGap app is quite high in comparison to a native app. However, developers could easily bridge the gap for it is a great tool to build effective and innovative mobile applications.

We at Macronimous provide PhoneGap development as part of our wide range of mobile development services. Please check here for further details.

AddThis Social Bookmark Button

5 must do validation check for every website

May 29th, 2012 Macronimous Posted in Best Practices, Mobile development, Web Testing, Web tools 3 Comments »


If you are serious about your website, you can not just settle with what you see, remember your visitors are worldwide, and they use different screens to access your site – they use even their LCD TV, in 50 inches. The following are  must have validations that you should insist your web site developer to check.

1.W3C Markup Validation Service

http://validator.w3.org

2.FEED Validator

http://validator.w3.org/feed/

3.W3C CSS Validation Service

http://jigsaw.w3.org/css-validator

4. Link checker

http://validator.w3.org/checklink

5. Mobile compliance

http://validator.w3.org/mobile/

Believe this, its worth spending those extra hours and money. !

AddThis Social Bookmark Button

Web design: To be responsive or not?

December 14th, 2011 Macronimous Posted in Best Practices, Mobile development, web design, Web2.0 2 Comments »


Did we ever anticipate mobile phones to battle computers? On the contrary, it is a well observed fact today. What it basically means is that with technology you should “expect the unexpected.”  Through innovative gadgets like tablet computers, smart phones, netpads, etc we can access websites anytime, anywhere as and when required.  As a result, responsive web designing is gaining momentum and web designers across the sphere have started to track and emphasize its importance.

Responsive web designing in its simplest form is how your website adapts and responds according to user environment, namely his device and actions. Bearing this in mind, we suggest three major factors that every web designer should mull over while aiming to design a responsive web page.

Fluid grids:

Conventional fixed layout designing was appreciated a decade ago, but today the scenario is different. The extensive range of screen resolutions in diverse gadgets is a matter of concern, when it comes to delivering quality user experience. To obviate this concern, the concept of fluid grids has been propounded which is based on proportions rather than on pixels. Counting the screen size, the layouts automatically adjust and resize in relation to one another. The process of responsive web designing is drastically refined by fluid grids however, on the flip side it is not easy to interact when the screen size is thin involving multiple columns.

Flexible images:

One more important feature in responsive web designing is flexible images. Scaling down huge images in a small browser is definitely a trying task for designers. In addition, optimizing load time is also crucial. Popular techniques that are frequently used to crop images are utilizing CSS and storing multiple image versions on server in varied sizes. If this doesn’t solve the purpose you can conceal unnecessary images, employing media queries. Web designers increasingly recommend sites with minimum image loads.

Media Queries:

Media queries are logical expressions that check for media features like height, width, colour, etc in relation to the device’s screen size. Eventually, with the aid of media queries you can discover the minimum/ maximum width and apply the corresponding CSS3. Crafting a media query is simple, yet to implement an efficient one, it should be thoroughly understood.

It can either be embedded within a style sheet or made external, stacked or overlapped. Besides there are other concerns like what your default CSS style is, minimum/maximum width considerations, orientation, breaking point units, etc.  As you can imagine, each condition has its own advantages and disadvantages. Consequently as a designer, you should know the what, why, and how depending on the project and its users.

Mobile browsing is expected to overtake desktop browsing in another 3 or 4 years which means that websites should capably handle a multitude of browsers and screen resolutions.  Moreover, it is impossible to create compatible versions for every new device launched. Responsive web designing is therefore, the one and only option!

Further reading: Fluid Grids, Responsive themes for Drupal designers,

AddThis Social Bookmark Button

iPhone SEO book launched.

July 19th, 2010 Macronimous Posted in Best Practices, iPhone Development, Search Engine Optimization, Search Media Optimization, Web tools No Comments »


Our popular E-Book Practical Search Engine optimization techniques is launched for the iPod Touch/iPhones. You can carry this simple iBook  in your iPhones and use it as quick reference. Its available at iTunes to download now. Practical SEO Techniques- Download free SEO E-Book

AddThis Social Bookmark Button

Getting started with iPhone application development

March 27th, 2010 Posted in iPhone Development, Mobile development, Web business 3 Comments »


There  1.4 million free and paid applications already exists in the iTunes app store. Though this count is very high, there is still plenty of scope for more applications to be developed and it will only stop when we humans quench our thirst for creativity.

More than a mobile phone, iPhone is looked upon as a lifestyle accessory, which is fun and exciting to use. The main strength of iPhone would be its retaining capability. Similar to most MAC users who would find it difficult to work in other platforms like Windows, most iPhone users will find it difficult to use other mobile phones. This will make the device and its applications to grow for a long time.

iPhone application development is unique in a way that it is not mandatory to have a group of people working under an organization to create iPhone applications. It is also well suited for individuals to unleash their creativity and earn a handful of money and fame too. There are applications like tossing a coin, which has attracted a lot of downloads- Kudos to the thought.

Why not you be a part of this revolution? All you need to do is a MAC machine, an iPod or iPhone preferably, Internet connection and Click here to view our first part of the article – “Getting Started with iPhone Development

AddThis Social Bookmark Button

Mobile applications: Browser based or Native or Hybrid?

January 29th, 2010 Macronimous Posted in General, Mobile development 2 Comments »


In late 1990s, and also during the initial few years in the last decade, developers (and users as well) were confused. If they needed a solution, say an invoice management system, how did they get it?  Two choices – (1) An installable PC based software or (2) a Web application. (By the way, why don’t we ever call it Web software??? – that’s what it is!). Web applications (AKA Web software) was the unpopular choice for a few reasons – among them, Bandwidth limitations and a general insecurity about how safe using a software on internet would be.

But as the years passed by, the requirements too changed. When people started working collaboratively, (which was made much easier with the internet and with bandwidth growth) people slowly started moving into web based applications. Web based Emails are possibly the first web applications we used. Software companies started developing cross-browser compatible web applications. At a point, We stopped application development with Visual Basic and started focusing only on ASP and then ASP.NET. Now Web 2.0 has changed the perspective of ’software’ totally. And Hybrid applications became possible with APIs etc.

Likewise, in Mobile development, there are two ways to create  applications. (1) Mobile browser based applications – which are websites optimized for Mobile browsers and (2) Installable (or Native) Mobile applications.

They both have advantages and disadvantages.

Why Mobile Browser based applications and why not?

Mobile Brower based applications are slow due to the bandwidth limitations and will eat up your data usage in your phone plan. Also, the user needs to remember the URLs and type it, which every cell phone user knows is just plain  hard. One advantage is that the development cost is low since the developer only needs to consider how to make it compatible with most mobile browsers, and not each type of cell phone. Also, now that many Mobile browsers support HTML and smart phones come with bigger screens to see full sized websites, and users can zoom in and out. We have keyboards too to manage this. But, if you want to browse websites, you can do that in your tiny Netbook, which you always carry with you, right?

So, in short: The advantage of a mobile browser based application is the low development cost, and the disadvantage is the bandwidth limitations and the limitations of Mobile websites, which does not access your Phone’s components like your Address book, Camera, etc.
Mobile Brower based applications are slow due to the bandwidth limitations and will eat up your data usage in your phone plan. Also, the user needs to remember the URLs and type it, which every cell phone user knows is just plain  hard. One advantage is that the development cost is low since the developer only needs to consider how to make it compatible with most mobile browsers, and not each type of cell phone. Also, now that many Mobile browsers support HTML and smart phones come with bigger screens to see full sized websites, and users can zoom in and out. We have keyboards too to manage this. But, if you want to browse websites, you can do that in your tiny Netbook, which you always carry with you, right?

So, in short: The advantage of a mobile browser based application is the low development cost, and the disadvantage is the bandwidth limitations and the limitations of Mobile websites, which does not access your Phone’s components like your Address book, Camera, etc.

Why Native mobile applications and why not?
Native (installable) applications resides in your cell phone, and you  launch it directly from there, with whatever search parameters  are stored within your mobile (Eg. The names of the 50 states in the USA, your favorite locations, daily weather, etc). Except for free text search, all of  the search parameters can be stored in the mobile – OR they can be updated just one time.  The communication between the Data/Web server and the mobile phone could be drastically reduced. An application like a stock portfolio can be created within your Phone and stored. Every day you just need to update the stock prices. You need not download the entire portfolio each day. Also, the application resides within the phone, and can access your phone’s features such as your camera, phone book /contacts, etc.

It has also quickly become clear that another  hidden advantage of native applications is brand loyalty. If a customer installs a mobile application which you supply, he or she will rely on your application and trust it. For Example, I use Viigo for regular information updates (News, weather, etc) but a site called Justdial.com or Google local for local address research. If Justdial comes with a Blackberry solution, they captured me as their user.

The disadvantage is obviously the development cost. No two mobile platforms can share the same mobile application, and there are too many Mobile operating systems (or platforms) existing in the market. If you develop a mobile application to market it widely, you need to develop that in J2ME (for phones that support only Java with no loaded OS), Symbian, Mac iPhone, Android, RIM, WebOS( for Palm pre), LinMo and Windows mobile. Though J2ME (or Java ME) is widely used, it has  severe graphic limitations, and I am sure it won’t be pretty  in my Blackberry Bold! If a developer does not have expertise in more than one technology, then you need to use various mobile developers, and finding them all under one roof would be difficult.

So, in short: The advantage of native mobile applications is quick access and less data transaction, and the disadvantage is the cost of development.

Hybrid mobile applications?

No, “Hybrid” applications are not ways of  ‘going Green’ or developing applications to be ‘environment friendly!’ :-)

They are Applications that use BOTH browser interfaces and native mobile components. With HTML5 and JavaScripts, now the browsers are becoming capable of accessing a phone’s built in features like contacts, camera etc. We started developing applications using PhoneGap and I believe solutions like this should, hence the name, fill-in this gap.  Platform free mobile solutions are what we need now and the gap between the browser based applications and native mobile applications is getting narrower.

Finally, what would be the disadvantages of  hybrid mobile applications? Two things comes to my mind…(1) Application security, and (2) the learning curve for the developers. Mobile developers need to know HTML and Web developers need to know mobile phone APIs. Right? Let us see how these obstacles are overcome.

Proof reading courtesy: Anthony Passeri, NYC Data Systems. USA
AddThis Social Bookmark Button

Mobile web development and Standards.

June 26th, 2009 Macronimous Posted in Mobile development, Web standards 2 Comments »


Here is a nice presentation which talks about the standards for Mobile web development.

 

AddThis Social Bookmark Button

Access our Blog from your Mobile (browser)

March 26th, 2008 Macronimous Posted in Macronimous, Mobile development 1 Comment »


Accessing this blog from your Mobile browser is now enabled. Thanks to Alex King of alexking.org. Its a simple WordPress plugin, Its called WordPress Mobile edition. Just follow the instructions, activate the plugin, The blog is up for the mobile now, just call blog.macronimous.com from your Mobile browser..and Yes.. you got it! :-)

Alex has written it the Mobile site as a separate theme, with XHTML/CSS with less or no graphics (Logo is not coming up, you need to tweak the code a bit if you need). Otherwise the job is done. We are planning to write some Themes based on Alex, with bit more graphics – optimized for the mobile!

AddThis Social Bookmark Button

Wild ideas – Nokia Marph!

March 24th, 2008 Macronimous Posted in General, Mobile development No Comments »


Do you want your phone looks like your wristwatch?, Pen? or even like your arm band? Do you like a phone which never need to charge its batteries? :-) Nokia is working on making this into reality with the support of Nanotechnology. Recently at Design and The Elastic Mind” exhibition in the Museum of Modern Art, Nokia Research Center (NRC) in collaboration with the Cambridge Nanoscience Centre (United Kingdom) released its Morph concept technology.
01_phone_and_sensor_lowres.jpg
Nanotechnology enables materials and components that are flexible, stretchable, transparent and remarkably strong, and Nokia believes this can be applied to making Flexible, Changing, Self-Cleaning communication devices with Advanced Power Sources (such as solar power utilization). Your device will also will be capable of – Environment sensing. It can measure analyzing air pollution, to gaining insight into bio-chemical traces and processes.

Tarmo Virki of CNET Says “The market for Internet services is approaching 100 billion Euros, and Nokia is the first big mobile phone manufacturer to embrace the Internet media business. Close rivals Samsung and Sony Ericsson could follow, but are a couple of years behind”. While Forrester Research says mobile Internet users to triple over next five years to 125 million just in the Western Europe, Nokia confirms their wild ideas like Apple and Google succeeded with many such ideas. Nokia now has its global device market share was about 40% in Q4 of 2007, so reaching their customers with innovative products is something they are working hardly now.
Nokia Morph
Changing new directions is not new to Nokia. They started as wood-pulp manufacturer in 1865 (Nokia wood Mills), after acquired by Finnish Rubber Works, they entered in to telephone and telegraph cables manufacturing. They were also involved in producing telephone and telegraph cables, and finally they entered in 1967 into commercial and military mobile radio communications technology.

Click here to see the official web page to read more on Nokia Marph.

AddThis Social Bookmark Button


Macronimous web blog

Popular Tags


Macronimous web blog

Sites we Like


Macronimous web blog