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!
At this point of time it would be superfluous if to say that Flash is the most prominent and widely utilized multimedia platform on the cyber space. It has substantially demonstrated its mark in several areas of games, banners, applications, and videos. However, given this fact, several IT enthusiasts across the globe accentuate that the launch of HTML 5 will supersede Flash and sound its death knell. In today’s context, is this relevant? HTML 5 will obviously take some more time to hit the market officially, yet subsets of HTML 5 are already employed in popular websites like YouTube, Google, Vimeo, etc. While anything can happen in future, it is certainly not possible for us to predict if HTML 5 and browsers will end the Flash era. By all means, future is unexplained and we do not know who our competitors are, for tomorrow!
The chief pros and cons of HTML5 and Flash are discussed here and we hope that it would help you to some extent in choosing the right platform for your projects.
Significant Facts on HTML 5:
• HTML 5 is an open source platform and hence developers can work based on their preferences.
• It is extremely adaptive.
• HTML 5 is supported well by desktop browsers, mobile browsers, and IOS.
• HTML 5 applications runs by own, without the need for plug-in
• With HTML 5 simple interface enhancements can be implemented effortlessly.
• As of now, it is not suitable for advanced video features like streaming, video effects, interaction etc.
Flash: The Crucial data
• Flash on the other hand is a fully proprietary concern.
• The technology is time tested and a bulk of the websites use Flash. With its goliath presence in the online world, it is simply difficult for everyone to learn and switch over to a new technology like HTML 5.
• Complex applications perform better with Flash and they are amazingly user friendly. Flash tools are highly powerful.
• It is faster and has minimal technical limitations when used for multifaceted interactive applications.
• Flash does not perform as expected in MAC OS. Mobile browsers do not support Flash. According to Steve Jobs, it is not compatible with touch screen devices and it is a CPU hog consuming huge amount of battery power.
• Moreover, Rich Internet Applications using Flash are Plug-in based.
HTML 5 is a comprehensive collection of technologies and there are still several discrepancies in features when used in different browsers. There is no single methodology deployed to enhance cross browser compatibility and even HTML 5 does not back IOS Safari in many areas though it is compatible. Nevertheless, the mobile browser market is growing rapidly and Flash not supported by IOS Safari and others is indeed a matter of concern. Google affirms HTML 5 as a great platform, however it banks on Flash for Google map street view and multiple file loads in Gmail. While HTML 5 strives hard to perform efficiently on light interface enhancements, Flash concentrates on advanced applications and features. On the flip side, we have encountered countless powerful user interfaces in the market that have failed miserably. Ultimately, the bottom line is that developments have to be user-centric aimed at endowing quality user experience. Technologies that follow this simple yet critical rule will surely succeed despite facing hitches in a few domains when employed.
Like any other year for a web development company, 2010 went with lot of learning. Not even a single day left without the impact of technology advancements and new techniques to learn. At Macronimous, we always try to let our clients know what we learnt: jQuery/HTML 5 instead of Flash, Ajax driven forms, Mobile and Tablet interfaces for websites, Security for WordPress blogs & sites and social networking integration are some of the key considerations for improving the deliverables. Few things were challenging and few attempts didn’t turned up well. At the end of the year, it’s a summary of things will help any business to focus or rethink to make 2011 better for us and most importantly for our clients.
1. Social Marketing: Facebook and twitter will rule next year (or next few years too). Every SEO company which helps their client to succeed online, should help them by letting them to consider these technology giants, which might take them to next level. Social media optimization will not replace Search Engine Optimization, but social media optimization should go in parallel with SEO.
2. Cloud applications and hosting: We started using invoice applications first (Freshbooks) and it ended up with cloud hosting. We moved our sites to cloud. Also helped clients to taste the flour of clouds. Web hosting with Amazon web services was a very different service we offered to our clients. Setting up their sites and web applications with EC2 were initially needed some learning with Amazon, but it became an expert service at the year end. In 2011 we will be providing setting up applications in cloud as a key service.
3. Social Media integration: We learnt FBML, Facebook SDK with PHP and started offering business pages and applications with Facebook , which will continue next year. Marketing those pages is another fruit to reap. Similarly Facebook Like button integration and Twitter API integrations are two important promotional services clients will require in 2011.
4. Blogging: Is blogging dead? No, it has come out in different format. Twits and Facebook status updates are micro blogging and People who do not want to write much, or those who like to share instantly use them. But, still business blogging isn’t dead. Macronimous helped serveral clients to start blogging. WordPress helped us much. We provide SEO friendly WordPress blogs by adding SEO plugins and basic SEO readiness setup as a mandatory feature along with every blogs.
5. Search Engine friendly coding: SEO readiness is no more a value addition. Every site we develop should be ready to for Search Engines. It begins with light weight coding and ends with Keyword setup. Making dynamic sites such as CMS driven content, ECommerce sites and Flash sites with PHP and .NET are offered by us as an expert SEO service.
6. HTML5 for Flash: We started offering HTML5 based presentations and sites. Flash was replaced by jQuery for many clients and they were happy too. By 2011, HTML 5 should be the standard, and Flash will move for interactive applications. The test results made at RWW in March 2010 was an eye opener. With full fledged CSS3 and HTML5, easy to create interactive web applications without Flash should be feasible.
7. Rich Internet Application – Flex was used much in few projects this year. We look forward to work on RIA based frameworks, such as Sencha.
8. PHP Frameworks: We used Codeigniter very much. But MVC is still not very popular, and framework based applications are relatively lower then non MVC based solutions like WordPress etc.
9. Smartphone and Tablet applications: We did much with iPhones this year (including 2011 World Cup Cricket app), moving to iPads. Android development for Smartphones and tablets will be our important strategy for 2011. By the end of this year, we see more Tablets, and thanks to iPad, which regenerated the new platform of business. Building portable applications for the mobile and tablet browsers is another channel. By providing mobile friendly websites we help clients become accessible everywhere. Sencha Touch nd dhtmlx’s JavaScript mobile UI APIs will be a part of the development in 2011.
10. Security for Opensource applications: Many of us believe that Opensource application based development cost is almost nil. This is a lie. The initial cost of a WordPress or Joomla based application/site development might be relatively lower than a closed, custom application development. But the real cost of ownership is affected by the security issues that comes with the Open standards, mainly when they are affected by Security attacks. We will work hardly on providing secure web applications when we develop them with open source in 2011. Even at this year end we have an important announcement with a major security fix from WordPress.
11. Remote project management: Managing projects across the globe was a real challenge a decade ago. Using standards and web based project management tools we provide hassle free project management. Tools like Basecamp, dotproject and Eventum helped us much, and we are working with few cloud based PM and collaboration tools, github etc. Apart from this our agile based PM methods have had some customization. Part of that is a project closure questionnaire.
Overall, many easy and hard ways of learning helped our team to build the next year strategy very much. Leave your comments if you had such learnings to share with others. Looking forward to another technologically challenging year which helps us to help our clients.
Not all the web clients are tech or web savvies. Many times you should pave them their success path online. Here are few a list of 4 important things which you should let your client know, if they trust your web development skills.
1. Flash: When they ask for a fully flashed website, let them know the adversity it might make. By doing this you are helping them to establish the right online presence. Unless your client is Coca cola or Burger King ( I mean, :-), an establish brand), they will really want to establish better Visibility to the Search Engines.
2. SEO – If a client just wants a website, let them know what SEO is and how it is going to help them. Make the site SEO friendly within the design scope (Eg. Image tags, XHTML validations, designing without tables, etc). Most of the clients will not say NO to make their site ready for SEO.
3. CMS – Ask how frequently they want to change the content, and if they do, let them do know how to do it themselves with a CMS. You may also need to let them know the advantages of fresh content. I believe instead of providing them a static site of 20 pages, you can introduce them Joomla and how to use it, for some additional but onetime investments.
4. Advantages of Opensource - Do they need a CMS or Ecommerce, You can justify why you charge less. Let them know that you can cut cost by using WordPress or Magento and still make their site professional. By doing this you are introducing standards – if your client goes to some other developers, it would not be difficult for them to take up the work.
I recommend you to keep a short write up (with some references) or articles on the above mentioned (you may keep that under your client section of your website) and ask the client to refer them. It also helps them to understand that you know what you tell them.
Do you work on CSS and like to know more about what you might have to learn to keep you up in the phase?. This slideshow gives you an intro to make you ready.
Today I revived few questions from Carl Williams of Odin Jobs for a blog entry. I believe every designer should ask themselves to keep the answers with them always.
1. When and how did you get started in web design?
2. What is the single most important attribute/skill a good web designer must have?
3. What hard and soft skills should a web designer have? Should he/she have a degree or can you be self taught?
4. Your opinions on:
a. Fixed width or Fluid Design?
b. EMS, percentage, pixels or points?
5. What tools are a must have in a good web designer’s arsenal?
6. Any advice to budding and beginning web designers?
I am sure you will find yourself interesting in your job, if you have the right answers.
I welcome your answers as comments.
Following the best four series, this time I have chosen 4 sites to find wonderful and useful Photoshop plugins and filters. Though there are thousands of sites offering free Photoshop plugins and filters, searching through the sites and choosing the ones required could be a tedious affair. Am sure this list would prove to be a quick reckoner for all your Photoshop plugins and filters needs, because I have chosen them after trying them out myself. All these sites offer free downloads of filters and plugins, with a huge variety of options to choose from.Â
Filter FactoryÂ
This site has a huge accumulation of filters and plugins as well, that impart varying levels of effects in photographs and images. With more than 350 filters and plugins available, this site definitely contains a vast and excellent collection to its credit. With detailed explanation of what plugins and filters are and how to download them are clearly explained in the site as well.
A site with both free and paid versions, VanDerLee has an impressive collection of Photoshop filters and plugins. Along with latest news in the field of website designing and releases of various new versions of plugins and filters, the site also has a dedicated Support section that assists with useful FAQs and a list of Compatible applications that work with the site’s plugins. Â
This site has separate windows for both freeware and commercial collection that can be downloaded at a specified cost. Wonderful, amazing and varied collections of plugins and filters are available in the freeware section as well. A must checkout site for all Photoshop plugins and filters seeking fans! Â
A great site for Photoshop plugins, this site has a colorful and eye pleasing layout in itself! Not only does the site has a large collection of plugins, but it also has clear explanations as to how to use the particular plugin and also how to customize them in order to make it the way you need it. I have used this site for many of my plugin needs as well. Excellent site indeed!Â
Apart from these four, I also happened to see a site called Virtual Photographer. A very useful site for creating special effects on photos, downloads are available in zip format as well. A site worth checking out for the photographer in you http://www.optikvervelabs.com/default.asp
WordPress is a simple and handy platform that is highly used in creating blogs and is also one of my favorite blog platforms, WordPress plugins that are used along with it can create excellence to sites. Out of many WordPress plugins that are available, I have chosen 4 that are my darlings, from the Multimedia point of view. These plugins are highly useful with regards to creating Multimedia-rich websites and blogs, and I also am of the impression that they are simple to use, without any complications or hassles.
This plugin is quite apt to make the videos in your blog more interactive. With facilities like uploading, importing and recording of videos into your blog posts,  modify videos with the help of an online video editor; this plugin is definitely a hit! What I like the best in this is that it this plugin also supports a huge variety of codecs and audio/video file formats along with video sharing options. In short, complete management and administration of videos is possible with this wizard!Â
I would say a “must-download plugin†for the Podcast freaks; this plugin is called the MTR Podcast recorder that allows all the recordings to be saved in MP3 format. It is saved in the same server as that of WordPress. The best part that I like in this plugin is that it allows handling the records and musical selection lists from the WordPress administration itself. This helps in easy playlists management and overall blog site administration.Â
One of my most favorites, this photo gallery plugin is very useful, especially for those interested in creating and sorting their own image collections. This plugin has a tinge of Web 2.0 and jQuery JavaScript library, all packed in one. The users can also upload images that have watermarked text or images. The best thing is that various JavaScript effects like Thickbox, Lightbox and the likes can be used.Â
So you want to embed flash based movies into your blog, then Kimili is the best choice! A very flexible plugin with many features attached to it, the Kimili also complies with the standards. It is very useful for search engine optimization of blogs, as the plugin itself is search engine friendly. What’s more, this plugin also gels on well with other plugins in its 1.2 version, and hence is definitely the best pick for WordPress.
I have found these plugins to be remarkable and of great use to me. There are many more great plugins from WordPress, and if you feel anyone or more of them have stirred your web designing senses, then do not forget to suggest about them in my comments section.
This post is written based on the requests seen in forums. I still found most of the surfers don’t have clear picture about the “difference between Normal design websites and Web2.0“. So thought of writing a brief note on Web2.0
Hopefully people who try to know Web 2.0 design standards should be knowing about normal design, so not much explaining here to bore
Starting, Web 2.0 websites allow visitors to do more than just retrieve information what we see in normal design. They can build on the interactive facilities, allowing users to run software applications altogether through a browser
Below are the attributes that can be followed for Web2.0Â
Clean & simple style
Pastell colors
Center aligned with 2 or 3 columns
Bigger Logo
Bigger Buttons
Bigger font size
Descriptive HTML (XML style)
Bold text introductions
Vibrant colors with gradients
Visible header
Content as Feeds
Rich and interactive user interfaces
Users active participation
Video sharing
Social Networking
Get ready to start furnishing a Web2.0 site
We have developed some Web 2.0 sites, for more clarification you can mail us for website names to get a clear picture
Twitter
Friendfeed
Technorati
Delicious
StumbleUpon
BlogCatalog
Feed Agg
MyBlogLog
reddit
digg
Posts