Total Pageviews

August 21, 2012

Responsive Web Design – A Dummies Guide

One Design, Multiple Screens

 
 

Sent to you by rak77 via Google Reader:

 
 


Google has officially recommended Responsive Web Design as their preferred method for building mobile websites. If you have a website or a blog, it is time that you seriously consider switching to a responsive design instead of maintaining a separate mobile-friendly (or tablet-friendly) website.

responsive web design

One Design, Multiple Screens

If you are new to the concept of Responsive Web Design (RWD), here's a quick guide that should answer most of the common questions that you may have around this technique. Let's get started.

Q1 – Why should I switch my website to Responsive Design?

A1 – Your website looks great of the desktop screen but the same may not be true when your site is viewed on a smartphone, a tablet or an e-reader (like the Kindle). Once you make the design responsive, the website will look good (and readable) on all screens and not just the desktop.

Q2 – What are the other advantages of switching to RWD?

A2: With Responsive Design, you can create one design and it will automatically adapt itself based on the screen size of the mobile device. This approach offers plenty of advantages:

  • It save time and money as you don't have to maintain separate websites for desktops and mobile phones.
  • Responsive Design is good for your website's SEO (search rankings) as every page on your site will have a single URL and thus Google juice is preserved. You don't have to worry about situations where some sites link to your mobile site while other link to your desktop site.
  • Your Google Analytics reports will paint a better picture of your site's usage since the data from mobile and desktop users will be consolidated.
  • The same will be true for the social sharing stats (Facebook Likes, Tweets, +1′s) since the mobile and desktop versions of your web pages will no longer have different URLs.
  • Responsive Designs are easier to maintain as they do not involve any server-side components. You just have to modify the underlying CSS of a page to change its appearance (or layout) on a particular device.
  • The earlier design methods looked at user agent strings to determine the mobile device name and the browser that is making the request. That was less accurate and with the number of devices and mobile browsers expanding every day, that matrix is very difficult to maintain. Responsive Design doesn't care about user agents.

Q3 – What should I know to get started with Responsive Design?

A3 – Responsive Design is pure HTML and CSS. You create simple rules in CSS that change style based on the screen-size of the user's device.

For example, you can write a rule that says if a user's screen-size is less than 320 pixels, don't show the sidebar or if the screen size is greater than 1920 pixels (widescreen desktop), increase the font size of the body text to 15px. Here are the same rules translated to code:

  @media screen and (max-width:320px) {      .sidebar { display: none }    }    @media screen and (min-width:1920px) {      body { font-size: 15px }    }

Q4 – How do I check if particular website is makes use of Responsive Design? 

A4 – That's easy. Open that website in any desktop browser and resize the browser. If the site's layout changes as you resize, the design is responsive. You can also use these online tools to compare the different layouts of a page in the same tab.

Q5 – Can you share examples of some good websites that are responsive?

A5 – That are quite a few but my favorites include The Boston Globe (news website), Simple Bits (personal blog), Happy Cog (web design agency), Barack Obama (yes, the President's website), Shake Shack (restaurant chain), Nicole & Josh (wedding website), Food Sense (cooking & recipes), dConstruct 2012 (design conference) and Good to Know (Google's site on online safety). You should also check out mediaqueri.es, a curated gallery of websites that use Responsive Design.

Q6 – If I go with the Responsive Design approach, will my website work with older browsers?

A6 – Mostly yes. RWD uses CSS3 media-queries and HTML5 (for better semantics) that are not supported in older versions of IE. However, there are JavaScript based solutions – respond.js and modernizr for example – that bring the power of CSS3 and HTML5  to older browsers including IE6.

Q7 – Does Responsive Design play nicely with advertising networks like Google AdSense?

A7 – If you using ads on your website, you should carefully choose the formats because wide units  (like the 728×60 pixel leaderboard) may not fit on a 320px mobile screen. I prefer using standard rectangular units (like 300×250) on my blog since they easily fit on smartphone screens and widescreen desktops.

The one issue with Responsive Design is that ad slots on your website that are above the fold (ATF) often gets pushed down on the mobile version and clients may not always like that (if they have paid you for a premium ATF slot).

Q8 – There are thousands of mobile devices. What screen resolutions should my responsive website support?

A8. Open your Google Analytics dashboard and choose Audience -> Technology -> Browser & OS. Now switch to the Screen Resolution tab in the report and see the resolution of mobile devices that people are using to browser your site.

I would recommend setting break points for at least the following viewports in your CSS3 Mediaqueries - 320px (iPhone landscape), 480 px (iPhone portrait), 600px (Android Tablets), 768px (iPad + ~Galaxy Tabs) and 1024px (iPad landscape and desktops).

Q9 – How do I get started with Responsive Web Design? Any good tutorials?

A9 – First, read this article by Ethan Marcotte and then buy his book. Ethan coined the term and popularized the technique ever since he wrote that article for A List Apart back in 2010.

Here are more online resources to help you get started:

Q10 – What are some of the disadvantages of using Responsive Design?

A10 – Responsive Design may add some  extra kilobytes to your web page as they will have to download CSS styles and JavaScript files that were otherwise unnecessary. The other problem is around images. You don't want to serve higher-resolution images on your mobile site but that is hard to achieve in responsive design (unless you resort to a server-side workaround like Adaptive Images and Sencha.io).

Finally, there is a learning curve involved and it will take effort to add a responsive layer to your existing website. Sometimes it may make more sense to start from scratch rather than making your existing fixed-width website fluid.

Tweet this Share on Facebook

Digital Inspiration @labnolThis story, Responsive Web Design – A Dummies Guide, was originally published at Digital Inspiration on 08/06/2012 under Web Design, Internet.

Related posts:

  1. Most Common Web Design Mistakes
  2. How to Create a Facebook Page – Dummies Guide
  3. How your Responsive Website Looks on Different Devices?
  4. Digital Inspiration Gets a Responsive Web Design
  5. What is Responsive Web Design?


 
 

Things you can do from here:

 
 
By - No comments:

A World Map of the Most Visited Websites

A World Map of the Most Visited Websites

 
 

Sent to you by rak77 via Google Reader:

 
 


World Map - Most Popular Websites

This world map represents the most popular websites by country. No big surprises here as Google reigns supreme in most parts of the world followed by Facebook. Yahoo is still the most visited website in Japan and Congo while Baidu is the Google of China in every sense.

The data was arrived from the Alexa rankings of websites per country but there are other ways to estimate traffic ranks and they should paint a similar picture. A larger version of the map is available at The Atlantic.

Tweet this Share on Facebook

Digital Inspiration @labnolThis story, A World Map of the Most Visited Websites, was originally published at Digital Inspiration on 08/06/2012 under Infographics, World Map, Internet, Tech Notes.

Related posts:

  1. Popular Social Networking Websites Around The World
  2. Simple World Map Generator
  3. A World Map of Disasters and Accidents Updated in Real-Time
  4. World Map of Top Social Networks
  5. Google Map Captures the Mood of People from Around the World


 
 

Things you can do from here:

 
 
By - No comments:

Hundred Zeros for Free eBooks

Free eBooks on all Subjects

 
 

Sent to you by rak77 via Google Reader:

 
 


Looking for free ebooks? Check the all new Hundred Zeros that went live few hours ago. It's better and much bigger than the previous version. →

hundred zeros - free ebooks

Free eBooks on all Subjects

If you are new, HundredZeros.com is the collection of ebooks that you can read on your computer, your mobile device, your Kindle or inside the web browser itself sans any software.

The site initially launched as Zero Dollar Books but since it may go well beyond ebooks in the future, the site has been rebranded as Hundred Zeros. Here's what's new in this release:

  1. You can now browse free ebooks by subject – like Romance, Cooking, History or Travel.
  2. You can find free ebooks on any topic (or by author) using the handy search box – like Shakespeare.
  3. The site uses responsive design and hence should work on all screens.

All you need is a free Amazon.com account and you can read any of these books even without the Kindle device.

For updates, you can follow HundredZeros.com on Twitter and Facebook.

Tweet this Share on Facebook

Digital Inspiration @labnolThis story, Hundred Zeros for Free eBooks, was originally published at Digital Inspiration on 18/06/2012 under Amazon Kindle, Internet.


 
 

Things you can do from here:

 
 
By - No comments:

Screen Capture Full Web Pages on your Mobile

 
 

Sent to you by rak77 via Google Reader:

 
 


Meet Web Screenshots, an online tool that will help you capture a full-length screenshot image of any "public" web page with a click. →

While the tool will work across all screens, it is a more handy option for taking screen captures of web pages on mobile devices – phones and tablets – where you often don't have the option to install extensions.

web screenshots

Alternatives for Android and iOS

In the case of iOS devices – the iPhones and the iPads – you can use the Home + Sleep buttons to capture screenshots but a limitation is that it will only capture the regions that are visible in the Safari browser. Web Screenshots will capture the entire web page.

There's no standard shortcut* for capturing screenshots in Android devices and sometimes you have to root the phone just for a simple screen capture.

You can however download the free Dolphin Browser with the Screen Cut add-on on Android and you'll then be able to screen capture pages directly in the web browser. This is recommended when you wish to screen capture web pages that require login – like a snapshot of your e-ticket or an online payment receipt.

[*] The Samsung Galaxy series of Android phones do provide a built-in shortcut for taking screenshots. Press and hold the "Back" button and then press the Home key – the screenshot will be saved in your Photo Gallery.

Tweet this Share on Facebook

Digital Inspiration @labnolThis story, Screen Capture Full Web Pages on your Mobile, was originally published at Digital Inspiration on 22/06/2012 under Screen Capture, Internet.


 
 

Things you can do from here:

 
 
By - No comments:

Ten Reasons to Love the New Outlook.com

 
 

Sent to you by rak77 via Google Reader:

 
 


I have been using Gmail since 2004 but the new Outlook.com service looks extremely tempting both in terms of features and also the user-interface which I think is far superior to that of Gmail. I am not switching yet but as an experiment, I have connected my primary Gmail account with Outlook  today and plan to use Microsoft's web mail service exclusively for a week or so. →

Meanwhile, after spending time with Outlook for about a day now, I found several unique and useful features in Outlook.com that you will surely miss inside Gmail.

#10. Sign-in with a Temporary Password

Sign-in Code for Outlook

You can sign-in without entering your account password.

If you have connected your mobile phone to your Hotmail / Outlook account, you can sign-in from any computer without using your actual password. Click the "Sign in with a single-use code" link on the login screen and Microsoft will send you a temporary password in a text message that expires after first use.

This is useful when you are logging from a public computer. Gmail has two-step verification which adds one more layer of security.

#9 Unlimited Storage Space for your Mails and Attachments

Gmail offers 10 GB of storage space for free accounts. Outlook offers virtually unlimited storage that expands.

Microsoft Outlook includes email storage that expands to provide you with as much storage space as you need. Your inbox capacity will automatically increase as you need more space. [Storage Limits]

The maximum size of an email message (including attachments) that you can receive in Outlook is 25 MB which is similar to Gmail.

#8 Easily Recover your Deleted Mails

Recover Deleted Mails

You can recover email that might have been accidently deleted from your Outlook inbox.

Outlook makes it easy for you to recover your deleted messages even if you have permanently emptied your Trash bin. Open the "Deleted" folder in Outlook and click the link that says "recover deleted messages."

I am not sure how long Outlook keeps your deleted messages but this might be an extremely handy feature in case you accidentally empty the Delete folder.  Your Gmail account doesn't offer any sort of message recovery.

#7 Get Disposable Email Addresses inside Outlook

If you are to share your email address will a less trustworthy website, you often use a disposable email address without revealing your primary address.

Hotmail and now Outlook, lets you create temporary email aliases that are just regular email addresses but you can delete them or create new ones whenever required. You can also rename an existing alias without deleting.

Email Alias = Disposable Address

To create an email alias, open Outlook Mail Settings and choose Create an Alias under Managing your Account.

Gmail supports periods and plus signs in usernames but these addresses are permanent in nature. You can however find support for email eliases in Gmail for Google Apps.

#6. Use HTML and CSS in your Rich Emails

Both Gmail and Outlook services offer a WYSIWYG editor to help you compose rich-text emails with images, headings, aligned text and other formatting.

However, Outlook also offers an HTML editor where you can write, or rather code, email messages directly in HTML and CSS Styles. While you are writing a new email, or replying to an existing one, go to Options and choose "Edit in HTML."

Your Gmail or Outlook's WYSIWYG editor doesn't support tables or custom CSS sytems but now you can easily add them to your email messages without resorting to any workarounds.

#5. Block Emails from Particular Addresses or Domains

Some people love sending email forwards and other useless messages that do not deserve a place in your mailbox. Your web mail's spam filter won't block these emails as they are most coming from "real" people.

You can create filters in Gmail to block such people (or domains) permanently but Outlook has a simple solution.

block email senders

You can block emails from specific senders or all messages originating from a par domain

Select a message and choose "Sweep" -> Delete -> Block all future messages.

For bulk additions, go to your Outlook setting and choose Safe and Blocked Senders under "Preventing Junk Mail." Here you can specify domain names (like @mail.ru or @com.cn) or individual email addresses and messages from these blacklisted address will be automatically deleted.

#4. Send Large Files and Email Attachments

With Outlook (and Gmail), you can send any number of file attachment provided the overall size of the message is less than 25 MB. The alternative is that you upload the file to Google Drive or Dropbox and include the download link in your message.

Outlook is more tightly integrated with SkyDrive and if you try attaching a file that exceed the 25 MB limit, it will automatically send it via SkyDrive.

#3. Quickly Find the Space-Hogging Emails

Sort Emails by Size

Locate the big emails easily and recover space in Outlook with a click.

This is one feature that Gmail users would love to have – the ability to sort emails by size. You can delete the messages that have big attachments – maybe video files and large presentations – and thus recover space with a click.

#2. Social Done Right

Google has integrated a social network into my mailbox that could be growing but none of my friends and family members use it. On the other hand, Outlook is tightly integrated with Twitter, Facebook and LinkedIn that most of us actually use.

#1. Outlook is fast

The most impressive thing about the new Outlook.com, other than the beautiful UI, is its speed. It feels fast and though Microsoft is calling Outlook.com a preview version, it has been pretty stable for me.

These are first impressions but will have more to share in a week or so. Stay tuned.

Tweet this Share on Facebook

Digital Inspiration @labnolThis story, Ten Reasons to Love the New Outlook.com, was originally published at Digital Inspiration on 01/08/2012 under GMail, Microsoft Outlook, Internet.


 
 

Things you can do from here:

 
 
By - No comments:

Using Outlook.com with your own Web Domain

Guide: Setup Outlook on a Custom Domain

 
 

Sent to you by rak77 via Google Reader:

 
 


How do you setup the new Outlook mail service on a custom web domain so that your email address reads like you@yourdomain.com instead of you@outlook.com? →

If you are on Google Apps, you can leave your existing setup untouched and access your Gmail account from inside Outlook.com via POP3. This is a recommended option if you are just experimenting with Outlook and aren't ready to make the complete switch to Outlook (see: Gmail vs Outlook).

The disadvantage with the above approach is that your incoming mails won't be delivered to your Outlook mailbox instantly. They'll first land in your Gmail inbox, Outlook will issue a fetch request after a minute or two and only then will your messages show up in Outlook.

Alternatively, you can remove Gmail from the loop and let Outlook.com handle all your incoming and outgoing email traffic. Here's how you do that in five easy steps.

Outlook on Custom Web Domain

Guide: Setup Outlook on a Custom Domain

Step #1: Go to domains.live.com and click the "Add Domain" button to add your custom web domain that you would like to use with Outlook. You may have to sign-in with your Windows Live / Outlook / Microsoft Account / Hotmail ID to access this Windows Live Domain section.

Step #2: On the next screen, you'll be provided with a list of custom DNS records that you will have to add to your domain. The following two records are essential:

  • MX record for handling your mail traffic
    •  It usually reads like abc.pamx1.hotmail.com
  • SPF record to authenticate your outgoing Outlook emails
    • It has a fixed value v=spf1 include:hotmail.com ~all

Related reading: Prevents your emails from getting marked as spam

Step #3: While you are on your domain registrar's page add these custom DNS records for Outlook, create an additional CNAME record if you wish to access the Outlook.com website as a sub-domain of your main website.

For instance, if your website is yourdomain.com, you can setup a CNAME record called "mail" and you will then be access to access Outlook.com from mail.yourdomain.com. The value of the CNAME record should be set as "go.domains.live.com." (no quotes but period at the end).

Step #4: Once you have created all the DNS records, wait for 30-60 minutes as it might take a while for the DNS changes to propagate through the Internet. To verify, open the command prompt in Windows and run the following command (replace yourdomain.com with your own own domain):

C:>nslookup -type=mx yourdomain.com  C:>nslookup -type=txt yourdomain.com

If these records show the recently added Hotmail entries, proceed to the next step.

Related reading: How to Verify any Email Address

Step #5: Go back to the Windows Live Domains site and refresh the page. Once the domain and DNS records have been verified, click "Member Accounts" and add a new user. This will be your new email address powered by the Outlook service.

Outlook Mail on Custom Domains

Configure Outlook Mail on your Custom Web Domain

You can now go to outlook.com or even mail.yourdomain.com (remember the CNAME record you added) and sign-in with the new email address you just created.

Unlike Google Apps which allows you to create a maximum 10 users in the free edition, the limit is 500 users in the case of Outlook / Hotmail. Also, Microsoft hasn't mentioned any storage limitations for your Outlook mailbox as of now.

If you are making a switch from Gmail or Google Apps to Outlook, you can either use the POP3 option to import existing email into Outlook. Alternatively, there's a free service called TrueSwitch that can automatically copy all you Gmail messages and contacts into your new Outlook account.

Tweet this Share on Facebook

Digital Inspiration @labnolThis story, Using Outlook.com with your own Web Domain, was originally published at Digital Inspiration on 09/08/2012 under GMail, Google Apps, Microsoft Outlook, Internet.


 
 

Things you can do from here:

 
 
By - No comments:

Dictation – Speech Recognition in the Browser

Dictation – Speech Recognition in the Browser

 
 

Sent to you by rak77 via Google Reader:

 
 


Dictation for Google Chrome →

Ever noticed that microphone icon on some web pages?

The newer versions of Google Chrome include an impressive speech recognition engine that even works offline but with one limitation – the feature is only available to text input fields (like the Google search box) and you can't use Chrome's speech recognition to write longer pieces of text (say a message inside Gmail).

Meet Dictation, a speech recognition app powered by Chrome itself but one that is not limited to text boxes. Here's a quick getting started guide:

  1. Use the keyboard shortcut Ctrl + Shift + . (period) or click the big microphone icon to activate dictation mode and talk.
  2. If you make a mistake, or if Chrome makes an error in transcription, simple click the incorrect word and edit it inline.
  3. You can say "new line" to insert a new line or "delete everything" to make a fresh start.

Dictation requires the Google Chrome browser. The full source code is available at ctrlq.org and what follows is a brief video demo.

Tweet this Share on Facebook

Digital Inspiration @labnolThis story, Dictation – Speech Recognition in the Browser, was originally published at Digital Inspiration on 10/08/2012 under Google Chrome, Speech Recognition, Internet.


 
 

Things you can do from here:

 
 
By - No comments:
Subscribe to: Comments (Atom)

h