“Now is the time to prioritize responsive design in your budget” – Forbes.com
“With a 55% increase in smartphone subscriptions in 2012 alone, responsive web design is the future of online marketing….” – Moz.com
“We shouldn’t be designing for mobile (specifically). Those experiences should work on all devices…”  Larry Page, Co-Founder, Google.

When I wrote a blog on RWD during November 2012, I mentioned that it would be a long term solution in which companies need to invest on it. When Ethan Marcotte of A List Apart coined the work Responsive Web Design (RWD), he also mentioned that the Mobile browsing was expected to outpace desktop-based access within three to five years based on the study from Morgan Stanley and Mediapost. Ever since its inception in 2010, Responsive Web Design has turned out to be an epiphany of sorts. It has heralded the new mobile-first era that is the dominant trend currently.

The RWD philosophy and practices are increasingly being embraced by businesses who want to target the growing mobile and tablet segment. Here we look at some perspectives from design/development experts and their take on what Responsive Web Design holds for the future of web design.

Brandon Downing at Adage Technologies believes that RWD works wonders when applied correctly. It renders uniform code base that works well across any user or any medium of consumption. Also future changes, updates or revisions become cost efficient. Designers need to worry about just one program/set of code rather than a bunch of codes separately developed for different devices. As for the question of when to go responsive or when to go mobile-only, he advocates progressing as per client needs. If the client requires short-term and cheaper solution, then a mobile-optimized website is a good fit. Responsive design is more for a long term yet more expensive proposition and hence needs careful consideration to ensure that the efforts align to the business need.

 Luke Wroblewski, a digital product leader, believes that designers and end clients need to know when responsive design would serve their needs and when separate sites for separate devices would be a feasible option. He puts forward a few guidelines towards this decision-making process.

Responsive web design is a slightly challenging process that optimizes all content and third-party links across a multitude of device and screen sizes. It provides long-term benefits – one that adheres to the current pack of devices as well as future ones. Go for this approach if –

1. There is minimal access to server-side solutions
2. Layout adjustments need to be carried out across different screen sizes
3. Complete optimization to a particular device is not needed

Device-driven experience comes in when separate interfaces are designed for a separate class of devices. They usually require a distinct front-end design and device detection. Use this approach if

1. Enhanced server-side device detection is needed
2. Separate user experience is needed from different class of devices
3. Complete and maximum optimization to a particular device is essential

Brad Frost and Tim Kadlec of CreativeBloq have an interesting take on keeping RWD as the de-facto design option by web designers.  Brad Frost propagates going responsive by default. However, designers need to ensure that clients clearly understand the difference between responsive and mobile optimized design. This way they can have a factual understanding and help make a better decision about which approach to looking  for. Looking at the current context, a vast majority of sites would perform well with the responsive design and a minuscule number of businesses will need a separate mobile optimized website.

On the other hand, Tim Kadlec feels that growing device diversity is the chief reason to go responsive in today’s times. He believes that server-side scripting too can be handled with responsive elements within a website, albeit with careful planning.

Jay Schwartz of IdeaWorks Studios Inc. supports using responsive design in websites. It works well with grid-based templates. He also advises thinking out of the box with designs that look amazing both on the desktop and on mobile. This is a key challenge that his company looks to address with clients. He advises injecting mobile-centric experience within RWD with options such as –

1. Call-to-actions designed specifically for mobile
2. Do away with load inducing images
3. Hide non-critical text elements.
4. Eliminate long form filling through mobile

Guardian UK – A Real-life Scenario Now that we have had a look at the views different experts hold about Responsive Web Design, let’s examine a real life scenario where a business moved from desktop website to responsive website. Amidst declining sales of print newspapers, the Guardian UK decided to go responsive. Matt Andrews the web developer at Guardian takes us through the steps and the results Guardian achieved with this transition.  

The problem statement the UK news websites received a steady increase in web traffic since May 2011. This meant that most of the readers were moving from print medium to digital medium. While they initially launched a mobile version of the traditional website, this led to problems and prompted Matt and his team to go explore the path of responsive. Some of the problems that led to this shift was –

1. Challenges stemming from dependency on external support for periodic updates
2. Maintenance work on numerous templates and elements became a hassle
3. With around 25% of the Guardian’s subscribers now using mobile for content consumption the reality was too evident to ignore – go responsive or lose customer base

The solution construct

1. The mix of old browsers (25%) and modern browsers (75%) makes it necessary to go the responsive way without burdening the users to download polyfills or JS codes
2. The design team started off by determining what was absolutely essential on mobile while non-critical elements bootstrapped using AJAX
3. They also considered limited resources of mobile by enabled local storage in the form of base-64 encoded strings of web font for future use. They embedded navigation timing API for modern browsers to render pages and content as per the network speed of the user.
4. In a refreshing move, they focused on personalizing based on user preference rather than on device or hardware configuration
5. All external dependencies too were brought in line to their mobile strategy. They also enforced ‘one blocking call per page’ functionality so that the rest of the content / navigation remains undisturbed in case of problems with one image or gallery
6. Since the ability of the site depends on user preference and technology (both of which undergo constant change), the newspaper did not work towards releasing all updates at one go, as they feel that this is an evolving endeavor and will keep undergoing updates in the near future.
7. Also, before actual publishing, a comprehensive and meticulous beta testing was done to gauge server loads and user experience feedback. This means that the go-live day was smooth and free from glitches or nasty surprises.

The result Constant monitoring has reported a boost in a number of page views and visits to the responsive site that were launched in December 2012.  Since this period, it has regularly breached the 15+ million hits in terms of page views. Enough said. If you own one of those websites, which still needed responsiveness or mobile friendliness this is the right time for investing in making it screen friendly. Leave your feedback if you have your opinion on why or why not RWD. We at Macronimous, have started designing Responsive Web Design from our Indian office since late 2012, and delivered over 80 Responsive websites using Custom CSS frameworks, and popular frameworks like Bootstrap, Less, Zurb etc. If you are interested in our services, Or if you like to build your website responsive, contact us for a reasonable quote and continuous support. 

The post What experts say about Responsive Web Design and why? first appeared on Macronimous Blog.

Web development is an art. A website which is designed well will yield repeated visitors and in the case of a business website, good customers too. Apart from a good design, a site should be developed with clean coding with all necessary semantics followed and the overall site structure should be organized. To sum it up, the way a website is developed and designed decides the future of the website.

When you code, make it ready for search Engines

Any website is to create business opportunities. There are many ways to promote your website. And SEO is one of the primary techniques to promote your client’s website, even if you did no task  to make it SEO ready.

Not just for the sake of the look and usability of the website, even for the effectiveness of SEO, your website needs to be designed and developed with some basic aspects which are necessary even before your site is actually optimized for SEO.

301 permanent redirection:

This is something people tend to forget and all it needs is to add a simple line of code in .htaccess file. Search engines consider these as two separate URL:

(Example) http://www.example.com and http://example.com . But we all know its the one and the same site.

This is an SEO killer!!!!!!!!!!!!!!!

Once the link promotion starts the domain popularity will go to only one URL, which is the key for organic success.

So while development, make sure redirection is done to a single URL.

It’s recommended to be redirected to http://www.example.com. Apart from this, you can set the preferred URL in Google webmaster tools.

2. No more Underscores, Just Hyphens from now on. Please.

This is official from Google itself. Underscores acts as a joiner and hyphens act a separator. So it’s the hyphens that will provide the correct meaning of key phrases to search engines.

Please use Hyphens for inner pages and no underscores for the sites to be developed in future.

For Example:

http://www.example.com/buy_cameras_online

Google considers this as “buycamerasonline”, single word.

Whereas http://www.example.com/buy-cameras-online , here Google understands this as “Buy Cameras Online”, which is exactly what a site owner needs.

Most of the Opensource platforms will allow SEO friendly URL’s and they are easy to setup.

3. No follow , No index for sites under development:

Sometimes DEMO sites get cached in search engines and the site may get penalized for this. Please make sure DEMO sites are shielded by a <no index, no follow > or you can have a robots.txt file uploaded in the root folder which clearly says search engines not to crawl them.

And once the site is made LIVE, these tags can be removed in the website’s pages. But in the demo URL’s let these no follow tag be permanent.

<META name=”robots” content=”noindex, nofollow”/> (This is the tag to be added permanently in the pages of the demo / sites under construction).

So, next time when you show your milestone based updates from your’s or clients production server use No Index and No follow – AND Do NOT forget to remove it when you make the site live.

4. No Duplicate META tags:
Please add the page name or product name in the META titles, till that page is optimized with keywords. Kindly do not copy the METAs of other pages.

Sometimes developers forget to change the META tags while creating a new content page since most of them copy from a previously created page. This is not going to take much time.
5. Never change or rename the URL names before crosschecking:

URLS are the backbone of SEO. For long term SEO campaigns and if a site is doing very well its only because of the domain popularity and that’s the reason  many websites still retain their old sites.

The URL names of a website should not be changed before checking whether the site is optimized for SEO. Even if a client insists, make sure you warn the client  stating that the traffic will be lost, before making the change.

This could be a DISASTER and may spoil the entire online  efforts a business puts in.

6. Contact Forms:

In terms of development it may be the small thing but from the business perspective of a site, this is the MOST IMPORTANT FACTOR. We should make sure the forms work perfectly with the client’s email ID and crosscheck with the client. Especially when a client has involved a costly advertising campaign this could become a catastrophe.

7.  No Egos 

Ask questions with your SEO team. Consult them and make sure that the site complies with SEO standards. You do not need to do Keyword  research, But make sure that the code you make is clean, Even if the client isn’t ready for SEO, remember that they might come to you in future.

These are some main factors and more good practices are coming up in part 2.

The post SEO for Designers and Developers (2016 updated) first appeared on Macronimous Blog.

View more documents from Andy Budd.

The post The Future Of CSS first appeared on Macronimous Blog.

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:
   • Fixed width or Fluid Design?
   • 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.

The post Questions for Web designers. first appeared on Macronimous Blog.

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 a detailed explanation of what plugins and filters are and how to download them are clearly explained in the site as well.

VanDerLee plugins and filters 

A site with both free and paid versions, VanDerLee has an impressive collection of Photoshop filters and plugins. Along with the 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.

http://www.vanderlee.com/plugins.html

DesignShack filters and 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 check out the site for all Photoshop plugins and filters seeking fans!

https://www.getcloudapp.com/blog/photoshop-plugins

Mehdi Plugins 

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!

http://www.mehdiplugins.com

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

[Update 2018: optikvervelabs no longer seems to be existing]

The post 4 places to find great Photoshop plugins and filters first appeared on Macronimous Blog.

Forget boring forms. The real difficulty in getting feedback is to push the visitor to leave behind little information.  The fun to use guestbook from Macronimous tempts your user to enter and record his visit to your website. The exciting new guestbook gives you the feel and effect of a real book by allowing you to flip pages. Whatever information the user gives looks cool on the guest book, which automatically inspires him to leave an impression behind.

You can also get the freedom to delete unwanted entries. Change textures and colors with the slightest possible effort. Customize the guest book to your taste and need.

The new flash guestbook is easily integrated with your website. The annoying coding can be done away with. A few clicks will get the new guestbook right into your website. You don’t have to be a computer geek to get your guestbook fixed.

Please look at flash guestbook screenshots below,

Flip to open pages:

The flash powered guestbook is totally secure giving you 100% Spam protection. It is XHTML based, so you get the complete guestbook on any browser. The coding is minimal, so you can still retain your web page lightweight.

Macronimous also goes a step further in making sure to get your feedback precisely by maintaining your guest book for you.

Get this cool new flash guestbook from Macronimous and send your feedback to us. Download it for free, click here.

The post Download our new free flash guestbook, easy to integrate with your website first appeared on Macronimous Blog.

(1) Kaltura Video recording and management – http://wordpress.org/extend/plugins/kaltura-interactive-video

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 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 are possible with this wizard!

(2) MTR Audio and Podcast Recorder 

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.

(3) NextGEN Photo Gallery – http://alexrabe.boelinger.com/wordpress-plugins/nextgen-gallery

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.

(4) Kimili Embedded Flash (Tool no longer exist)

So if 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, 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.

The post 4 WordPress plugins to create Multimedia rich websites and blogs first appeared on Macronimous Blog.

When we offer consultation for Opensource CMS selection, it is not an easy job always. Building websites with the CMS our clients like and to make it work with our own custom design might become a nightmare if we aren’t considering and planning the UI design in advance.

We have customers who supply design for their web sites (as Photoshop source files – if they know Photoshop) since they have good sense of designing and they know how their site should look like. We can happily accept it and build HTML/XHTML and CSS based Static pages without any issues or provide a Custom written CMS easily. The real challenge starts when they want to make their site CMS enabled with an Opensource CMS framework such as Joomla, WordPress or Drupal.

Most of the opensource CMS applications strictly adopt some design standards, and they give clear instructions for UI designing. Your design will not work well with the CMS, if it does not obey their design rules. The primary reason for these strict rules is to help with the CMS applications for design-content separation and for easy user interface maintenance. You can easily change the design without changing the programming sections and vice versa. But can you easily fit your custom design which is created as your mind wishes to an Opensource CMS application? Most of the good CMS applications does not allow you to create an unique site with your own custom design, custom graphics and custom XHTML.

Simply configuring an Opensource CMS application along with a template design (meant for that CMS application) may ease your job, But it will not give your client an user interface, which is unique for them. It will look like one another site made with that particular CMS. I have seen several Ecommerce sites with similar structures; I can easily identify them as “made with osCommerce without added efforts”.

So, how do we deal with this situation?

Take the case of WordPress. If you start designing a site without keeping WordPress in mind, and wanted to enable WordPress CMS at later stage, I am sure you need much experience in XHTML coding  you may have to give up WordPress in order to keep your look  unchanged.

Few months earlier, we did an Ecommerce web site design with Cubecart; with the help of Programmers and good HTML scripter, we were able to make the user interface which is very unique and no template look. Yes, good PHP and HTML programmers will have to give hands to change the way the application works and to fit your custom design with the CMS. If you need a decent design which does not offer you a standard template based site look, you need an experienced team’s support to make it possible.

Cost is one key factor why people like to use opensource applications and in most of the cases we almost get a free solution. Installing Drupal or Joomla with a pre-existing design, will only help you to offer a cheaper solution, But to give a unique look and feel to your site, you must be ready to invest in application customization too. Your CMS theme or template will need your programmer’s support to provide coherent CMS driven website, which is exclusive for the customer.

Opensource CMS applications are excellent tools for professional web solutions. No objections!. Opensource CMS applications will not cut the cost of custom development completely and making a design which has an exclusive and aesthetic look to your customer will need the time/cost of your developers and designers.  Don’t leave the CMS application to decide your site user interface by cutting the customization efforts.

The post Is your opensource CMS flexible enough to accommodate your custom design? first appeared on Macronimous Blog.