Author Archives: Romany

Romany

 

What is a Style Guide?

Imagine if you are working on a large and long-term implementation of an application with many different resources like designers and front-end web developers who come and go, each appending a new portion to the CSS to have the task accomplished. One by one, the CSS goes huge, redundant, inconsistent, non reusable and it takes a lot of effort for maintenance. It will be painful to any new incoming developer to work on applications like that and sometimes there will be a resistance accepting tasks in this type of applications.

 

A website style guide is an ideal way to ensure brand identity, professionalism and consistency across your site.

A style guide (some people call it a pattern library) is a living document of code, which details all the various elements and coded modules of your site or application.

 

Why to use it?

Style guide (pattern library) will save so much time in long term implementation process. It provides a centralized repository for both design and code.

For stakeholders, it makes the designers, developers and the client capable of easily envisioning new website sections and making use of the available components.

 

What’s next?

Looking for style guide generators? Here is a bunch of them at Github. There might be one for your preferred technology (PHP, Ruby, NodeJS, etc...).

Romany

[​IMG]

Responsive design is a concept where you build your website once and then format it so it can adapt to any screen size that accesses it. It is not a trend. But it is how smart your site is!

Being responsive benefits:

1- Your website looks perfect on several devices.

2- Have centralized application appears everywhere. No need to develop additional mobile applications.

3- Good for SEO. Google ranks sites optimized for mobile higher in mobile searches.

4- 91% of US citizens have their mobile device within reach 24/7. And they are checking their phones an average of 150x a day!


http://bangonews.files.wordpress.com/2008/08/bango_stats_mobile_web_brow.gif

 

5- Internet mobiles users are projected to take over desktop internet usage by 2015…or sooner.

 

http://www.hangar17.com/images/stories/responsive-web-04-en.jpg

 

Getting started:

1- Defining the HTML5 doctype and creating head section with the required scripts and CSS files. The doctype declaration in HTML5 is easier to remember compared to previous HTML/XHTML versions.

<!DOCTYPE HTML>

In head section set the charset to UTF-8 which is also easier in HTML5

<meta charset="UTF-8">

2- Add View port Meta tag

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

initial-scale=1.0 fits the viewport to the dimensions of the device (device-width and device-height values), which is a good idea because the size of the viewport fits the dimensions of the device regardless of its orientation.

width=device-width size the viewport to always corresponds to the (fixed value) width of the device, and thus is distorted in landscape orientation because the right value should be “device-height” not “device-width” in landscape (and it’s worse on iPhone5 whose device-height value is 568px, compared to its 320px device-width).

Therefore, It is recommend to use initial-scale alone, not associated width=device-width. Because the combination of the two is problematic, and moreover I think than even only width=device-width is problematic.

You might first try to include both initial-scale and device-width. If that leads to problems in iOS or Android try removing either one of the properties. In case that still does not solve your problems try using the script here (https://github.com/scottjehl/iOS-Orientationchange-Fix) until your responsive design is displayed correctly on all devices.

3- Include CSS files

We will include several CSS files like:

- Reset the styles for all HTML elements by using reset.css (http://www.cssreset.com/)

- Our styling CSS file(s)

- Other plug-ins styles

4- Include jQuery and Javascript  files

We will include several .js files like:

- As we are using HTML5 and CSS3 features we need several scripts to make the features visible in all browsers. The first script we will be using is Modernizr.js, a feature detection library for HTML5 and CSS3. You can find it here [http://modernizr.com/download/] be sure “html5shiv” and “Modernizr.load” are checked.

- Respond.js, a script which enables responsive design in Internet Explorer and other browsers which don´t support CSS Media Queries. That way we can use CSS3 properties by simply adding the general rule (e.g. just box-shadow instead of -moz-box-shadow, -webkit-box-shadow and box-shadow). You can find it here [https://github.com/scottjehl/Respond]

- prefix-free lets you use only unprefixed CSS properties everywhere. You can find it here [http://leaverou.github.io/prefixfree/]

- jQuery

<!-- include extern jQuery file but fall back to local file if extern one fails to load !-->
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript">window.jQuery || document.write('<script type="text\/javascript" src="js\/1.7.2.jquery.min"><\/script>')</script>

Note: You might want to use a minifier script which automatically combines, minifies and caches all your CSS and Javascript files into one single file. One of these scripts is called minify.js and can be found here [http://code.google.com/p/minify/]

5- Add media query inside your CSS

Media queries are used to skip or change CSS rules in minimum or maximum width of devices.

Google officially recommended CSS media query for smartphones is:
@media only screen and (max-width: 640px) { … }

Targeted media queries for smartphones (landscape), tablets (portrait), desktops (narrow) is:
@media screen and (min-width: 480px) and (max-width: 800px) {..}

Targeted media queries for smartphones (portrait) is :
@media screen and max-width: 479px){..}

Targeted media queries to adjust flows and looks on various devices is :
Landscape Mode :
@media all and (orientation: landscape) {…}

portrait Mode :
@media all and (orientation: portrait) {..}

Test how your site looks like on different devices resolutions:

-  Responsive Web design bookmarklet - It lets you view any webpage in multiple screen sizes, simulating the viewport of different devices.

- Traditional window resizing.