What Responsive web Design?
In Responsive web design the new method of web design is connected to the idea of developing a website design in a manner, that helps the lay out to get changed according to the user’s computer screen resolution. Also it suitably fixes on the mobile phone and tablet or ipad screen. It may be you called reactive web site which is adjust according to you display screen resolution. More specifically, the theory allows for an advanced layout 1200 pixels wide, on a 1024 pixel width screen, that auto-simplifies into any screen size resolution , for example, mobile phone screen, ipad or Tab screen . This particular designing technique we call “responsive web design”.
We better understand this with help of this image below.
Responsive web designing is a wholly different designing version than the traditional web designing, and developers must know about the responsive web designing. Today’s World is now change into MOBILE, everything come into the small device. With the help of internet everything is possible in mobile device which is he/she working on a computer with help of internet. Now personal computer screen size (which we may use screen resolution) is 10 to 20 times bigger than mobile or Tablet device. This blog is a powerful example of the fact that few facts about the uses of responsive web designing.
Here are 3 responsive site for your reference:
http://www.solutiononline.co.in
http://www.greathotelphotography.com/
http://sarbamangalamandir.org/
The basic instinct might be to choose media queries to develop a responsive site.However, the hassle you face with media queries is that new queries can pop up from moment to moment; each time the user knowledge unexpected and extreme changes to the look and organization of the site. Experts suggest using some CSS transitions to ease the jump.
Pages that include data tables pose a special challenge to the responsive web designer. Data tables are very wide by default and when you zoom out to see the whole table it becomes too small to read. When you try to zoom in to make it readable, you are supposed to scroll both horizontally and vertically to look through it. Well, there are several ways avoid this problem. Reformatting the data table as a pie or mini-graph is an approved solution. The mini-graph fixes even in narrow screens.
Images in responsive web designs are called context-aware. Responsive web design images are primarily fluid images that can be replaced by context aware images, an updated version for better designing. This particular technique serves the purpose of responsive designing in true sense as the images serve at different resolutions, ranging from larger screens to smaller ones. The scaled images appear to change fluidly with the help of updated developer tools and coding languages, allowing designs to look sharp in every context. Responsive web designing is remarkably different from traditional designing in terms of technical and creative issues and a careful use of this can do wonder while designing.
Core Concepts
Three key technical features are the heart of responsive Web design:
- Media queries and media query listeners
- A flexible grid-based layout that uses relative sizing
- Flexible images and media, through dynamic resizing or CSS
Truly responsive Web design requires all three features to be implemented.
The key point is adapting to the user’s needs and device capabilities. Suppose a mobile user will be viewing your site on a small screen. Taking the user’s needs into account doesn’t just mean adapting your content to the screen size. It also means thinking about what that mobile user will require first when visiting your site and then laying out the content accordingly. Maybe you’ll present the information in a different order. Don’t assume the user won’t need access to all the site information because she’s on a mobile device. You might need to change the fonts or interaction areas to respond better to a touch environment. All these factors influence responsive Web design.
While mobile devices are changing the display landscape, with the appearance of more and more small screens, don’t forget what’s happening at the other end of the spectrum. Displays are also getting larger and larger. Having to serve both segments shouldn’t stop designers from being innovative on either.
Media Queries
Starting with CSS 2.1, media types were used to apply CSS for both screen and print. You might remember these media types:
- <link rel="stylesheet" type="text/css" href="style.css" media="screen" />
- <link rel="stylesheet" type="text/css" href="printfriendly.css" media="print" />
That was it! Luckily, the W3C improved media queries in CSS3, moving them a big step forward.
Today, you can use media queries to scope styles to specific capabilities, applying different styles based on the capabilities that match your query. You can even combine queries that test for several features by using semantic operators such as AND and NOT). Features include width, height, max-width, max-height, device-height, orientation, aspect-ratio, resolution and more.
There are three ways to implement media queries:
Use the @import rule to import style rules from other style sheets:
@import url(style600min.css) screen and (min-width: 600px);
Put media queries directly in the style sheet, This is the most common approach.
Implementing Media Queries Directly in a Style Sheet
#nav
{
float: right;
}
#nav ul
{
list-style: none;
}
@media screen and (min-width: 400px) and (orientation: portrait)
{
#nav li
{
float: right;
margin: 0 0 0 .5em;
border:1px solid #000000;
}
}
@media screen and (min-width: 800px)
{
#nav
{
width: 200px;
}
#nav li
{
float: left;
margin: 0 0 0 .5em;
border: none;
}
}
Include a query in a linked style sheet’s media attribute:
<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 800px)" href="style800.css" />
Because of the (cascading) nature of CSS, default styles are defined at the top with the media query matching rules and styles below. Styles defined at the top will be cascaded to the matching styles in the rule, or even completely overwritten.
If you are a website owner and try to develop/redevelop your website into a responsive website please contact us.
You may contact us on: http://www.solutiononline.co.in/contact-us
Why you need Logo for your Organization?
A business is starts with planning, organizing …..What is the first planning? Company name…? Then the Company LOGO must come second. The LOGO of a Company or Organization is “IDENTITY”. Look at IBM, BMW, G. E., Nestle, Vodafone, HSBC and many more company LOGO. The LOGO says all about the company. The name, the brand, products everything’s.
These companies have built some of the foundations around which we live our lives:, the staples of our daily lives. Whether we consciously acknowledge it or not, they continually build their brand through their advertisements and campaigns and reinforce the power of their logo on us as consumers.
Design of your company LOGO is very critical because it’s not only picture. There seems to be a fascination with well-designed LOGO. Maybe it’s the attraction of creating something stunning or bold with something that is so often overlooked and working with such a small area to design with.
Whatever the case, here are some LOGO designs that will hopefully inspire you or at least help you appreciate what some people can do with a little canvas to work with.
Let me enumerate chief reasons why small business needs a logo:
- Symbol of Organization.
- Identity.
- Recognition.
- Image projection on Individual.
- Uniqueness.
Why do you need SEO? and things you should know about SEO
Today, the meaning of SEO (Search Engine Optimization) positively cannot be denied or even looked upon as website designer or, especially when you are into an e-commerce small or big business. Every day the market wants a new selling method. In online the market is Whole Wide World, so your market also so big that our old promotion technique is not enough. This is where SEO helps by making your site search engine friendly and taking your website to your potential customers, helping you to achieve conversions.
However, in the SEO work in a way that designers of your site needs to build the site according to modern SEO standards so that most search engines can index the important information of your site very easily. A lot of companies utilize unethical and illegal methods to achieve quick returns, which results very badly in log term as those sites are penalized by search engines for using those methods.
If you have just commenced your website but you are not receiving an excellence appropriate traffic to your website, the first thing you need to do is hire an SEO company who can implement proper SEO techniques. This would help you list your site with the popular search engines like yahoo, Google, MSN, Ask, etc.
Some Points you should know about SEO. 
- Your domain name must be related to what you have in the site
- Your site should have enough related information so that your site is consider a good site, no matter how much tricks and techniques you use, without good content none of the efforts will pay off. So pay for a good content writer to get your sites content properly written and organize.
- Choose keywords based on your industry and location, like if you are selling cycle’s in Mumbai, then your keywords should be “Mumbai cycles” or “the area name + cycle” instead of just “cycle”, as this will narrow down the competition for the keyword and you will have good chance to appearing at the first page of search engines.
- Your domain name must be at least 3-6 months old to get proper recognition form the search engines.
- Hire Professional SEO Company, who will use their expertise to build your site based on the search engines guidelines.
- Most importantly SEO takes time, and it’s a continues process, so you have to be patient for the first 3-6 months before you see big results, and you need to keep working on SEO to get the same results day after day.
To Get Free Quotes for your site’s SEO, Click Here
Welcome to HTML5 – Fundamentals and Advance
HTML5 defines the fifth major revision of the core language of the World Wide Web, HTML. "HTML5 differences from HTML4" describes the differences between HTML4 and HTML5 and provides some of the rationale for the changes. This document may not provide accurate information as the HTML5 specification is still actively in development.
HTML 5 is the next revision of the Hypertext Markup Language (HTML), the standard programming language for describing the contents and appearance of Web pages. HTML, which stands for HyperText Markup Language, is the predominant markup language for web pages. A markup language is a set of markup tags, and HTML uses markup tags to describe web pages.
HTML5 is a W3C specification that defines the fifth major revision of the Hypertext Markup Language (HTML). One of the major changes in HTML5 is in respect to how HTML addresses Web applications. Other new features in HTML5 include specific functions for embedding graphics, audio, video, and interactive documents.
HTML has been in continuous evolution since it was introduced to the Internet in the early 1990s. Some features were introduced in specifications; others were introduced in software releases. In some respects, implementations and author practices have converged with each other and with specifications and standards, but in other ways, they continue to diverge.
In all probability you know about the latest blogging tool HTML5, some have embraced it, while others are sceptical over its use. The dynamic behaviour of the Internet makes latest technology obsolete tomorrow. However, we cannot ignore the fact that yesterday’s technology is the building block of present and future technologies. For instance, when developing a new stable scripting language we usually turn to the native code, as it tends to remain unchanged for a long time.
Fundamentals:
<!DOCTYPE html>
DOCTYPE is a simpler command carried over from HTML, and is embedded in the source w3.org. It is a command compatible with older versions of Internet browser. Meanwhile, if we use <!DOCTYPE html5> it triggers Quirks Mode in IE6, that correlates to backward compatibility, hence <!DOCTYPE html>.
New Elements Introduced:
The W3C community has listened sincerely to suggestions and perceived a future Internet architecture, where abundance of features is essential for its sustainability and growth. HTML5 includes basic and advanced structural elements to offer a rich browsing experience. For instance, with a powerful API, it allows programmers to create more user-friendly applications, and reducing the dependency on Flash for saving data and intense animation.
Header Element:
<header> contains introductory information to a page or section. It can include branding information to an entire table of contents.
Navigation Element:
<nav> retains the links to other pages or other sections of the same page. Primary navigation links are to be contained in this element, only.
Section Element:
<section> represents a generic document or application. It behaves in the similar manner as <div>, separating a portion of the document.
Article Element:
<article> indicates an independent portion of a page like blog post and forum entry.
Aside Element:
<aside> describes the content associated with main area of the document. It can be used to pull quotes, posts and tags.
Footer Element:
<footer> is used for marking the ending of each page. It can also be used for each section on the same page.
Final Thoughts:
At first glance, these new elements seem to replace common DIV Ids. However, further analysis reveals that these behave like classes and normal HTML elements, which can be repeatedly used for retaining semantic structures.
HTML 4.01 and XHTML 1.0 have small syntax differences that can invalidate code. Bearing this in mind, HTML5 has built-in “slack” to make the transition easier.
Google XSS Flaw in Website Optimizer Scripts
This week thousands of system administrators who make use of Goolge products will open their inbox to see an email from Google explaining that their Web Optimizer product contains an Cross-site scripting flaw that allows hackers to inject scripts into their Google Optimized web pages.
A part of this email follows:
“you are using a control script that could allow an attacker to execute malicious code on your site. To fix the vulnerable section of code, you should immediately either replace the control scripts in your affected experiments or stop the affected experiments and start new experiments”
On receiving this notification I quickly scrambled to my web sites to immediately implement the fix recommended by Google. Later on in the day I had time to to dig deeper into the problem and analyse the security flaw in more detail. What I found is a multi-staged attack that relies on cookie injection, improper text parsing and DOM script injection code.
I have documented my research in this article, and I hope that it will be of use to you. There is a lot to learn from other people’s mistakes, especially when those people are Google themselves.
The flaw exists in Googles Web Optimizer, which is a series of scripts that web administrators use to gain insight into how their web sites are navigated by online customers.
Below is a segment of the the flawed code.
<!-- Google Website Optimizer Control Script -->
<script>
function utmx_section(){}function utmx(){}
(function(){var k='XXXXXXXXXX',d=document,l=d.location,c=d.cookie;function f(n){
if(c){var i=c.indexOf(n+'=');if(i>-1){var j=c.indexOf(';',i);return c.substring(i+n.
length+1,j<0?c.length:j)}}}var x=f('__utmx'),xx=f('__utmxx'),h=l.hash;
d.write('<sc'+'ript src="'+
'http'+(l.protocol=='https:'?'s://ssl':'://www')+'.google-analytics.com'
+'/siteopt.js?v=1&utmxkey='+k+'&utmx='+(x?x:'')+'&utmxx='+(xx?xx:'')+'&utmxtime='
+new Date().valueOf()+(h?'&utmxhash='+escape(h.substr(1)):'')+
'" type="text/javascript" charset="utf-8"></sc'+'ript>')})();
</script><script>utmx("url",'A/B');</script>
<!-- End of Google Website Optimizer Control Script -->This Website Optimizer Control Script is embedded within your web page to track it. It will be run on the user’s end, and under a successful attack it will extract a malicious script from their cookie and execute it in their browser.
The code above is standard JavaScript however it is not easy to read. There are two reasons for this; firstly, like most Google client side scripts, it is obfuscated, purposely making it cryptic. Secondly it was designed to work fast and efficiently, and not to be easily understood.
I manually de-obfuscated this code, and whilst doing that, I re-factored it to make it easy to understand. The code below should be easy enough to read by anyone with JavaScript knowledge, yet it fulfills the same function as the cryptic code provided by Google.
01. function AB_Analysis(){
02. var k='YOURTACKINGNUMBER'
03. var d=document;
04. var l=d.location;
05. var h=l.hash;
06. var injectionvector1 = ReadFromCookie('__utmx');
07. var injectionvector2 = ReadFromCookie('__utmxx');
08. d.write
09. ('<script src=http://www.google-analytics.com/siteopt.js?v=1&utmxkey='+k
10. +'&utmx=' + injectionvector1
11. +'&utmxx='+ injectionvector2
12. +'&utmxtime=' + new Date().valueOf()
13. +(h?'&utmxhash='+escape(h.substr(1)):'')
14. + '" type="text/javascript" charset="utf-8"></script>')
15. }
16.
17. function ReadFromCookie(field_name){
18. var c = document.cookie;
19. var start = c.indexOf(field_name+'=');
20. var end = c.indexOf(';',start);
21. return c.substring(start + field_name.length + 1, end);
22. }
23.06. var injectionvector1 = ReadFromCookie('__utmx');07. var injectionvector2 = ReadFromCookie('__utmxx');Both these lines call into the function ReadFromCookie which parses the headers of a cookie file without sanitising the input. The lack of sanitation is on line 21:
21. return c.substring(start + field_name.length + 1, end);
Over here we can see a classic mistake – data is blindly read from an untrusted source. The substring function reads from the start of the field’s data all the way till the fist semicolon. What it reads should be a tracking number, but in this case it is a specifically planted ‘dormant’ script. It is dormant because it resides inside a cookie and not inside the HTML of the web page itself. The lines 10 and 11 are where the real trouble begins to show. The extracted and potentially dangerous script is injected into the user’s DOM:
08. d.write
09. ('<script src=http://www.google-analytics.com/siteopt.js?v=1&utmxkey='+k
10. +'&utmx=' + injectionvector1
11. +'&utmxx='+ injectionvector2
12. +'&utmxtime=' + new Date().valueOf()
13. +(h?'&utmxhash='+escape(h.substr(1)):'')
14. + '" type="text/javascript" charset="utf-8"></script>')
Look at line 13:
13. +(h?'&utmxhash='+escape(h.substr(1)):'')
This code correctly treats the DOM hash (variable h) as untrusted because it can be manipulated in a similar way as the cookie can. The lines before it, however omit calling the escape() function that effectively sanitises code against XSS and similar attacks. Its a typical case of ‘so close, yet so far away’.
For those who find it hard to read JavaScript, I have included a flow chart showing the two functions, AB_Analysis and ReadFromCookie.
AB Analysis Function
The diagram above is a flowchart for the AB_Analysis script. This script is embedded on pages by web developers who are making use of the Google Web Site Optimiser. The red processes are where data is read from the cookie and added to a script, which is in turn injected into the DOM.
ReadFromCookie flowchart
Above is a flowchart for the ReadFromCookie function. There is no actual flaw here, except maybe that there is no limit to how much data is read out of the cookie. Also, the end of record detection is rather crude – simply looking for a semicolon in the data.
Below is how a normal cookie might look. Cookies are not very sophisticated and are generally described as simple text files on the user’s computer. In HTML5 cookies have been replaced by a full blown relational database.
Normal Cookie Example
BEGIN COOKIE
umtx: some_value;
umtxx: some_other_value;
END COOKIE
The compromised cookie below contains script inside the umtx and umtxx fields. This script is not active and therefore not dangerous. However, when the AB_Analysis script is executed, the umtx script gets activated through this XSS attack.
Compromised Cookie Example
BEGIN COOKIE
umtx: <<malicious script goes here>>;
umtxx: <<malicious script goes here>>;
END COOKIE
An attack is two staged; first the malicious script has to be injected into a cookie on the victim’s browser. After that, the user must visit a web page. containing the Google AB_Analysis script. The attack can be summarised in the diagram below.
Attack on Google Web Optimizer
Google was fast to react and provide a fix however this fix needs to be deployed by every web site administrator that uses Google Web Optimiser. This applies to hundreds of thousands of web pages globally.
I hope that administrators are quick to fix this problem as it could easily result in an XSS attack against their site if targeted.
Full instructions on different options on applying the fix can be found on the official Google support page.