Saturday 28 June 2014
Friday 20 June 2014
Slicing images in Photoshop
Before coding, we need to decide which sections of the website should
incorporate images and which can be coded. Let’s use Photoshop’s Slice tool (hidden under the Crop tool submenu) and section off areas like the burrito photo, and Joan’s tacos.
Now, we need to Export our slices — Go to File > Save for Web (Alt+Shift+Ctrl+S). When a particular slice is selected, you can set its Export options on the right side of the window (JPG, PNG, etc.). If you double-click on a specific slice, you will see the Slice Options window pop up — this allows you to name specific slice files.
By default, all images are placed in: subdirectory/images/. If you want to export only the slices you’ve created, then select All User Slices in the Save window.
The images we exported will be embedded into our HTML document using the![]()
<img> tag.
Line 1: Declares that the HTML 5 dialect is the document language.
Line 2: <html> element represents the root of an HTML document. This is an obligatory container that marks the borders of our document.
Line 3: <head> section contains invisible page elements like the meta information, title, etc.
Line 4: <meta charset=”utf-8″> This is the declaration of document encoding — utf-8 is a secure choice — you can learn more about HTML character encodings here.
Line 5: <title>Sample page</title> This is the page title which is visible in the browser title bar.
Line 6: </head> closes the <head> tag from Line 3.
Line 7: <body></body> This body element will contain all the visible content of the page.
Line 8: </html> closes the <html> tag from Line 2. This element marks the end of the document.
There are other possible ways to code the same design. We will use HTML 5 semantic tags (header, nav, article, footer) to create a basic document structure:
This is the layout translated to HTML:
A few things to note :
Line 9: <img src=”"/>![]()
This is an src attribute which contains a path to the image file.
Line 11 and 12: <a> elements are the essence of the Internet as they are used to create hyperlinks. They’re paired with the HREF attribute, and should link a target URL.
Lines 18 to 20: These are a few text formatting tags: <h1> stands for a first level header; <p> stands for a paragraph; <br> stands for a line break.
When you open just the HTML file in a web browser, you’ll see it’s not formatted like our design from earlier. This is because the HTML code is not enough — we need to format it with Cascading Style Sheets (CSS). CSS is a stylesheet language that’s used to format HTML elements.
But why, exactly, do we need to pair HTML with CCS? Some time ago, formatting was achieved by adding attributes to HTML tags. However, this led to an unreadable and unmaintainable code. The solution was to separate document content (HTML) from document formatting (CSS).
Let’s breakdown a simple CSS rule: .
Selector: This is the HTML element you want to style. For example: <article>
Declaration: A CSS rule can have 1 or more declarations. Each declaration consists of a property and value, and is separated by a semicolon. You place declarations between curly brackets { }.
Property: This is the style characteristic you want to change. For example: background color, font size, etc.
Value: Each property has a value associated with it. For example: #ffcc11 (for background color), 16px (for font size), etc.
There are a ton of CSS properties that can be set for each HTML element, but it’s not necessary to write them all yourself. You can rely on your browser’s default settings, or use a base stylesheet that resets your browser to reasonable values. It actually requires quite a bit of knowledge and experience to write selectors on your own.
Let’s take a look at some of the CSS rules necessary to format our simple design.
CSS Positioning Properties: There are 4 different methods (static, fixed, relative and absolute) that allow us to position specific elements in our design. After you set one of these methods, you can position elements using the top, right, bottom and left properties — these will work differently depending on which of the 4 methods you use. In this case, we’d like to position the plate_image using an absolute positioning.
CSS Box Model: This model is a box that wraps around all HTML elements — it includes margins, borders, padding and the content. Margins are an invisible area around the border, and padding is between the border and content.
Now, we need to Export our slices — Go to File > Save for Web (Alt+Shift+Ctrl+S). When a particular slice is selected, you can set its Export options on the right side of the window (JPG, PNG, etc.). If you double-click on a specific slice, you will see the Slice Options window pop up — this allows you to name specific slice files.
By default, all images are placed in: subdirectory/images/. If you want to export only the slices you’ve created, then select All User Slices in the Save window.
The images we exported will be embedded into our HTML document using the
Creating a basic HTML document
We have our slices, let’s create a basic HTML document.Line 1: Declares that the HTML 5 dialect is the document language.
Line 2: <html> element represents the root of an HTML document. This is an obligatory container that marks the borders of our document.
Line 3: <head> section contains invisible page elements like the meta information, title, etc.
Line 4: <meta charset=”utf-8″> This is the declaration of document encoding — utf-8 is a secure choice — you can learn more about HTML character encodings here.
Line 5: <title>Sample page</title> This is the page title which is visible in the browser title bar.
Line 6: </head> closes the <head> tag from Line 3.
Line 7: <body></body> This body element will contain all the visible content of the page.
Line 8: </html> closes the <html> tag from Line 2. This element marks the end of the document.
There are other possible ways to code the same design. We will use HTML 5 semantic tags (header, nav, article, footer) to create a basic document structure:
This is the layout translated to HTML:
A few things to note :
Line 9: <img src=”"/>
Line 11 and 12: <a> elements are the essence of the Internet as they are used to create hyperlinks. They’re paired with the HREF attribute, and should link a target URL.
Lines 18 to 20: These are a few text formatting tags: <h1> stands for a first level header; <p> stands for a paragraph; <br> stands for a line break.
Format with Cascading Style Sheets (CSS)
When you open just the HTML file in a web browser, you’ll see it’s not formatted like our design from earlier. This is because the HTML code is not enough — we need to format it with Cascading Style Sheets (CSS). CSS is a stylesheet language that’s used to format HTML elements.
But why, exactly, do we need to pair HTML with CCS? Some time ago, formatting was achieved by adding attributes to HTML tags. However, this led to an unreadable and unmaintainable code. The solution was to separate document content (HTML) from document formatting (CSS).
Let’s breakdown a simple CSS rule: .
Selector: This is the HTML element you want to style. For example: <article>
Declaration: A CSS rule can have 1 or more declarations. Each declaration consists of a property and value, and is separated by a semicolon. You place declarations between curly brackets { }.
Property: This is the style characteristic you want to change. For example: background color, font size, etc.
Value: Each property has a value associated with it. For example: #ffcc11 (for background color), 16px (for font size), etc.
There are a ton of CSS properties that can be set for each HTML element, but it’s not necessary to write them all yourself. You can rely on your browser’s default settings, or use a base stylesheet that resets your browser to reasonable values. It actually requires quite a bit of knowledge and experience to write selectors on your own.
Let’s take a look at some of the CSS rules necessary to format our simple design.
CSS Positioning Properties: There are 4 different methods (static, fixed, relative and absolute) that allow us to position specific elements in our design. After you set one of these methods, you can position elements using the top, right, bottom and left properties — these will work differently depending on which of the 4 methods you use. In this case, we’d like to position the plate_image using an absolute positioning.
CSS Box Model: This model is a box that wraps around all HTML elements — it includes margins, borders, padding and the content. Margins are an invisible area around the border, and padding is between the border and content.
10 Things Every Web Designer Must Know
1.Coding like HTML and CSS
2.Basic scripting like java script, jquery, PHP.
3.Sense of the movement and proportion
4.Color on the Web
5.Principle of design
6.Graphic design
7.Cross-browser Compatibility
8.Frameworks
9.And application using web and it easy for working
Thursday 19 June 2014
10 Essential Websites for Web Designers and Developers
Here is our list of the top 10 essential websites every web designer and developer should know.
1. Inspriation - nspire inspiration search
Every idea starts with inspriation. This is where nspire, our inspiration search database works. You can upload and browse inspiration added by web designers and developers.
2. Brushes and Patterns - Brusheezy
A good arsenal of brushes and pattersn is essential these days to give your designs that added zest. Brusheezy is probably one of the largest and most comprhensive collections of brushes and patterns online.
3. Textures - cgtextures
I found this site hard to believe. It's a completly free database of high resolution, categorised textures free to use! It doesn't get much better than that.
4. Fonts - dafont
If you are anything like me, you are a font addict. Warning, this site has a very large collection of free fonts for personal and commercial use.
5. Stock Photos - istockphoto
A picture is worth a thousand words. This site much be worth millions then! istockphoto maybe be the largest stock photo website on the internet.
6. Icons - Icon Finder
This site is amazing. It provides a fantastic way to find icons that are free to use and there are new icons added everyday!
7. Themes and Templates - themeforest
When you need a quick job doing and you don't have the time to design a site youreslf, themeforest provides some great professional templates and really decent prices.
8. Tutorials - Tutorialized
None of know everything, even though we like to think so. Tutorialized provides plenty of user contributed tutorials on all aspects web design and development.
9. Code Snippets - snipplr
Why re-invent the wheel? There are plenty of code snippets at snipplr to help speed up your coding.
10. Help - stackoverflow
Getting help has never been quicker or easier than stackoverflow. This simple Q and A website is part of a much larger network of websites which will help you with any question you have about anything!Monday 16 June 2014
How to Build Custom Email Templates
How to Build Custom Email Templates
MailerMailer's template language allows you to create messages
that are instantly editable in our cutting-edge message creation tool,
MessageMaker™. Fonts, colors, borders, and more can be adjusted with the
simple addition of CSS comments. If you're proficient in HTML and CSS,
learning the custom template language will be a breeze.
Background images can be reliably applied to the email body, but not within tables or table cells. The body background image must be assigned to the
HTML and CSS
If you're reading this, you probably already know how to code your designs so they look consistent across email clients. If you don't, here are some things to keep in mind:- Keep your email width under 600 pixels.
- Wrap your email in a 100% width table.
- Use nested tables to achieve your layout.
- Set cellpadding and cellspacing to 0 for each table
- Avoid floats or positioning.
- Apply font styles and background color on the table cell
<td>level. Don't rely on inheritance. - Avoid applying margin to any element.
- To center align elements, apply
align="center"to a wrapping<div>of undefined width. - Instead of paragraph or heading tags, use
<div>or<span>tags with classes - Apply padding and borders to table cells
<td>rather than tables. - Keep in mind that neighboring table cells will always match each other in height.
- If you want padding on one table cell, but not its neighbor, use nesting to "isolate" the padding on an inset
<td>. - Test! Test! Test! Send a preview to all your email accounts. For more thorough testing, use a testing service such as Litmus that shows you a preview of your message across numerous email clients and mobile platforms.
Background images can be reliably applied to the email body, but not within tables or table cells. The body background image must be assigned to the
<body> element itself as well as the
wrapper table of 100% width as mentioned above. For best results, use a
texture or pattern that can repeat in both the x and y directions.<body background="images/example.jpg">
<table background="images/example.jpg" id="wrapper" cellspacing="0" cellpadding="0">Editable Content Areas
Add themm:edit="name" attribute to a <div>
wrapped around text that should be editable. When clicked, areas with
this tagging open the WYSIWIG text editor with a link to your image
gallery.<div mm:edit="name">
<p>Here is some text that will be editable.</p>
</div>Editable Image Areas
If you would like an image to be editable, add themm:image="name" attribute to it. When clicked, editable image areas open your image gallery so that you can populate the area with a new image.<img mm:image="name" style="max-width:260px" src="images/file.jpg" />
You must assign a max-width and/or max-height CSS property in order to define the size of the image area. Larger images will be scaled down in order to fit, but smaller images will not be stretched. Do not include HTML width or height attributes (e.g.,
<img width="100"...)
as those will be generated by the editor. Also, avoid the use of CSS
ids or classes on editable image areas. If you need to add styles to an
editable image area, such as padding or margin, place those styles on a
wrapping element.The above example referenced a default or placeholder image from within the images directory of a template bundle. However, if you want a placeholder image automatically generated for you, simply omit the "src" attribute from your image tag.
<img mm:image="name" style="max-width:260px" />
<img mm:image="name" style="max-width:260px" src="http://www.website.com/image.jpg" />
<a mm:related="name" href="http://link.com">
<img mm:image="name" style="max-width:260px" />
</a>
<div>
with an inline style setting the text-align property. As with the link,
include an mm:related="name" attribute with the name corresponding to
that of the image.<div mm:related="name" style="text-align:left">
<a mm:related="name" href="http://link.com">
<img mm:image="name" style="max-width:260px" />
</a>
</div>
<div>. Do not place other code, such as an editable content area, inside the alignment <div>.
Likewise, do not place an editable image area within an editable
content area—these elements must be separate within your template.Declaration blocks
To define CSS that is editable through the MailerMailer style toolbar, you must include specifically formatted declaration blocks. The names assigned to tabs and sub-tabs can be multiple words but must exclude special characters, such as hyphens and underscores./*
* @page tab
* @section sub tab
* @style heading xyz
*/
The @style declaration pulls font styling into the dropdown of the WYSIWIG editor for easy styling. Font styling preceded by a declaration with the @style should have a single class as the selector, allowing it to be applied anywhere within the document. Without the @style declaration, nested text that is styled by such a class may fail to render properly within the editor.
/*
* @page page
* @section heading 1
* @style heading 1
*/
.heading1 {
property: value /* editable */;
}
- @theme page: defines the background color of the email
- @theme main: defines the background color and text style for the email body
- @theme title: defines the style of headings
- @theme subtitle: defines the style of subheadings
- @theme link: defines the color of links
- @theme header: defines the background color and text style within the header area
- @theme footer: defines the background color and text style within the footer area
/*
* @page page
* @section heading 1
* @style heading 1
* @theme title
*/
.heading1 {
color: #47191C /* @editable */;
font-size: 20px /* @editable */;
font-family: Tahoma /* @editable */;
font-weight: bold /* @editable */;
font-style: normal /* @editable */;
}
Editable properties
Within the styling below declaration blocks, properties that you wish to be editable within the MailerMailer style toolbar should be followed by /* editable */. Insert this tag after the default value, but before the semi-colon./*
* @page tab
* @section sub tab
* @style heading xyz
*/
selector {
property: value /* editable */;
}
- color Value must be hexidecimal (e.g. #FFFFFF).
- text-decoration Supported values include none and underline.
- font-family Supported values include Tahoma, Comic Sans MS, Courier New, Georgia, Helvetica, Lucida, Tahoma, Times New Roman, Trebuchet MS, and Verdana.
- font-size Supported values include 8px, 9px, 10px, 11px, 12px, 13px, 14px, 16px, 18px, 20px, 22px, 24px, 30px, 32px, 36px, 46px, 50px, 64px, 84px, and 120px.
- font-style Supported values include none, italic, and oblique.
- font-weight Supported values include normal and bold.
- background-color Value must be hexidecimal (e.g. #FFFFFF).
- border (also border-top, border-bottom, border-left, and border-right) Color must be hexidecimal (e.g. #FFFFFF). Supported widths include 1px, 2px, 3px, 4px, 5px, 8px, and 10px. Supported styles include none, dahsed, dotted, double, groove, inset, outset, ridge, and solid.
Subscribe to:
Posts (Atom)