Skip to Content

Sleeper and father by day, designer by night

The Anatomy of a Website – What it should have.

50 Features Small Business Websites Must Have

I some times come across this great infographics that can be very practical or very beautiful. This one is quite the first one because it shows all the different elements to consider when creating a website, both for the designer and the client. I think this “map” is essential in the communication of the designer and the client for establishing the starting point. Well, maybe second point, first is to understand the purpose of the site through the discovery process.

Tech Thursdays 2017

TECH THURSDAYS Chicago is an annual business owners workshop and curriculum series presenting practical technology solutions to help business owners advertise, accelerate and manage the growth of their small businesses.

This year I had the honor of presenting the “Better Website Design & Management” and the “Creating & Managing an Online Store” for which presentation I used the following Info-graphics that you can view here.

Better Website Design & Management

In spite of its relatively short history, web design is now a fully developed science, complete with a vast quantity of information both newbie and experienced designers should learn. Here at Awwwards, we like to think we know a bit about web design, and when it comes to learning, we like to do it visually. Instead of sending you off to battle big boring blocks of text, we’ve gathered some of the most interesting and useful infographics on web design – both theory and practice. So sit back and get ready to learn tons of new things simply by clicking through our selection of colorful graphics.

Creating & Managing an Online Store

Party Boat Chicago graphics for boat

Proposed dimensions:


30+ Sites For Free Images with Commercial Use

Finding images that you can use online can be ridiculous. People throw around the term “royalty-free” and many people automatically believe that “oh, it’s royalty-free. I can use it however I want.”


Royalty-free simply means that you don’t have to pay a license fee every time you use the image. A royalty-free license does NOT guarantee that you can sell it to other people, use it commercially, or use it in printed documents like brochures or fliers.

That’s why I love Public Domain images.
Public Domain, or CC0, are images that the creator has given up all rights to the image and that you are free to use it however you’d like.

You don’t have to give credit, you can use them commercially, you can use it in templates, you name it!

There are several stipulations on most Public Domain websites that you must follow if you use their images:
1. Do not use pictures for unlawful, pornographic, illegal, or other immoral purposes
2. You may not claim ownership of any picture in its original or resized state or grant exclusive rights licenses as they are
3. Pictures may contain additional copyrights, property rights, trademarks, etc and may require additional licenses.
4. Written Model Releases may not have been collected, so it is up to you to find out, if needed.

So, here’s my complete list of image sites that will let you use their images commercially and without having to credit the source (aka attribution)!


PHOTOS (CC0 Section) (Not Public Domain)
SplitShire is NOT Public Domain, but it has a very open license for use in templates, personal, or commercial projects.


Art Websites

Photography Themes:

PANAMA, Fotografia, Heat, Duo, Bedford

Blog Style

TheArtist, BeatStone, Recital.


NewArt, Virtuoso, Wave, Artistas


Artists, OneDesign, Huntt




PILE, Creek

Wall Decal

  Read more

Bullhead Weekly Special Jan 2016




Contract of works for Web Design

Between Designer’s Name at Company Name and Customer’s name


We will always do our best to fulfil your needs and meet your goals, but sometimes it is best to have a few simple things written down so that we both know what is what, who should do what and what happens if things go wrong. In this contract you won’t find complicated legal terms or large passages of unreadable text. We have no desire to trick you into signing something that you might later regret. We do want what’s best for the safety of both parties, now and in the future.

In short

You, Customer’s name, are hiring Company Name located at Company’s Address  to design and develop a web site for the estimated total price of £ Price outlined in our previous correspondence. The agreed payment plan is at the end of the document.

What do both parties agree to do? 

As our customer, you have the power and ability to enter into this contract on behalf of your company or organization. You agree to provide us with everything that we need to complete the project including text, images and other information as and when we need it, and in the format that we ask for. You agree to review our work, provide feedback and sign-off approval in a timely manner too. Deadlines work two ways and you will also be bound by any dates that we set together. You also agree to stick to the payment schedule set out at the end of this contract.

We have the experience and ability to perform the services you need from us and we will carry them out in a professional and timely manner. Along the way we will endeavour to meet all the deadlines set but we can’t be responsible for a missed launch date or a deadline if you have been late in supplying materials or have not approved or signed off our work on-time at any stage. On top of this we will also maintain the confidentiality of any information that you give us.

Details of the works

We will create designs for the look-and-feel, layout and functionality of your web site. This contract includes one main design plus the opportunity for you to make up to two rounds of revisions. If you’re not happy with the designs at this stage, you will pay us in full for all of the work that we have produced until that point and you may either cancel this contract or continue to commission us to make further design revisions at the daily rate set out in our original estimate.

HTML/CSS layout templates

If the project includes XHTML or HTML markup and CSS templates, we will develop these using valid HTML5 markup and CSS3 for styling. We will test all our markup and CSS in current versions of all major browsers including those made by Apple, Microsoft, Mozilla and Opera. We will also test to ensure that pages will display visually in a similar, albeit not necessarily an identical way, in Microsoft Internet Explorer 7 for Windows as this browser is now past its sell-by date.

We will not test these templates in old or abandoned browsers, for example Microsoft Internet Explorer 5, 5.5 or 6 for Windows or Mac, previous versions of Apple’s Safari, Mozilla Firefox or Opera unless otherwise specified. If you need to show the same or similar visual design to visitors using these older browsers, we will charge you at the daily rate set out in our original estimate for any necessary additional code and its testing.

Text content 

We are not responsible for writing or inputting any text copy unless we specified it in the original estimate. We’ll be happy to help though, and in addition to the estimate we will charge you at £ Hourly Copy Fee per hour, including a free initial consultation, for copy writing or content input.


If needed, you will supply us photographs either in digital or printed format. If you choose to buy stock photographs we can suggest vendors of stock photography. Any time we spend searching for or taking appropriate photographs will be charged at £Hourly Photo Fee per hour, after a free initial consultation to determine if this is the best route to take.

Changes and revisions 

We know from plenty of experience that fixed-price contracts are rarely beneficial to you, as they often limit you to your first idea about how something should look, or how it might work. We don’t want to limit  either your options or your opportunities to change your mind.

The estimate/quotation prices at the beginning of this document are based on the number of days that we estimate we’ll need to accomplish everything that you have told us you want to achieve. If you do want to change your mind, add extra pages or templates or even add new functionality, that won’t be a problem. You will be charged the daily rate set out in the estimate we gave you. Along the way we might ask you to put requests in writing so we can keep track of changes.

Technical support 

You may already have professional web site hosting, you might even manage that hosting in-house; if that’s the case, great. If you don’t manage your own web site hosting, we can set up an account for you at one of our preferred, third-party hosting providers. We will charge you a one-off fee for installing your site on this server, plus any statistics software such as Google Analytics; then the updates to, and management of that server, plus any support issues will be up to you.

We are not a web site hosting company and so we do not offer or include technical support for web site hosting, email or other services relating to web site hosting. If you do require help with anything beyond the design and development of your site, we’ll be happy to help.

Legal stuff 

We can’t guarantee that the functions contained in any web page templates or in a completed web site will always be error-free and so we can’t be liable to you or any third party for damages, including lost profits, lost savings or other incidental, consequential or special damages arising out of the operation of or inability to operate this web site and any other web pages, even if you have advised us of the possibilities of such damages.

If any provision of this agreement shall be unlawful, void, or for any reason unenforceable, then that provision shall be deemed severable from this agreement and shall not affect the validity and enforceability of any remaining provisions.


You guarantee to us that any elements of text, graphics, photos, designs, trademarks, or other artwork that you provide us for inclusion in the web site are either owned by your good selfs, or that you have permission to use them.

When we receive your final payment, copyright is automatically assigned as follows:

You own the graphics and other visual elements that we create for you for this project. We will give you a copy of all files and you should store them really safely as we are not required to keep them or provide any native source files that we used in making them.

You also own text content, photographs and other data you provided, unless someone else owns them. We own the XHTML markup, CSS and other code and we license it to you for use on only this project.

We love to show off our work and share what we have learned with other people, so we  also reserve the right to display and link to your completed project as part of our portfolio and to write about the project on web sites, in magazine articles and in books about web design.


We are sure you understand how important it is as a small business that you pay the invoices that we send you promptly.  As we’re also sure you’ll want to stay friends, you agree to stick tight to the following payment schedule, which will be as follows, but may be revised based on further conversations between us.

50% of total estimated fee upon agreement of initial design: £Deposit Fee

Remainder of fee payable not more than 14 days after receipt of finished product: £Remainder of Fee

Interest accrued if payment is more than 14 days late is 5% of outstanding amount to be added every 7 days, starting from 15th day after receipt of finished product.

But where is all the horrible small print?

Just like a parking ticket, you cannot transfer this contract to anyone else without our permission. This contract stays in place and need not be renewed. If for some reason one part of this contract becomes invalid or unenforceable, the remaining parts of it remain in place.

Although the language is simple, the intentions are serious and this contract is a legal document under exclusive jurisdiction of English courts.

Everyone should sign above and keep a copy for their own records.

Protected: Thought Program

This content is password protected. To view it please enter your password below:

Contrato de website en Español

Contrato de Diseño de un Sitio Web un Sistema Informático

Acordado entre Usted [Nombre del cliente] y nosotros, [Nuestra Empresa]


Siempre haremos nuestro mejor esfuerzo para cumplir con sus expectativas y satisfacer sus necesidades, pero es importante tener las cosas escritas para que ambos sepamos qué es qué, quién debería hacer qué y cuándo y, qué es lo que pasará si algo sale mal.

En este contrato no encontrará complicados términos legales ni largos pasajes de texto inentendible. No tenemos la intención de hacerle firmar algo que después lamentará. Lo que sí, queremos lo que es mejor para ambas partes, ahora y en el futuro.

En pocas palabras:

Usted ([Nombre del cliente]), situado en [dirección del cliente], nos contrata a Nosotros ([Nombre de la empresa]) situados en [dirección de la empresa] para diseñar y desarrollar [un sitio web, un sistema informático] por el precio total estimado de [cifra total], tal como fue delineado en nuestra proforma [N° xx/xxx].

Lo que ambas partes acordamos hacer

Usted: Tiene la autoridad de ingresar en este contrato en representación propia, de su empresa o su organización. Usted nos proporcionará todo lo que necesitemos para completar el proyecto, en el momento, formato y forma en que lo necesitemos. Usted revisará nuestro trabajo, proporcionará retroalimentación y aprobación, oportunamente. Los plazos funcionan en dos direcciones por lo que Usted también estará obligado a cumplir las fechas que juntos fijaremos. Usted también acuerda cumplir con el calendario de pagos fijado al final de este contrato.

Nosotros: Tenemos la experiencia y la habilidad de hacer todo lo que acordamos con Usted y lo haremos todo de manera profesional y oportuna. Nos esforzaremos por cumplir todos los plazos fijados y además mantendremos la confidencialidad de todo material o datos que Usted nos entregue.

Aspectos esenciales


Nosotros creamos diseños visuales e interactivos (look & feel), son diseños flexibles que se adaptan a las capacidades de muchos dispositivos y tamaños de pantalla. Creamos los diseños de forma iterativa y utilizamos la plataforma WordPress, además de HTML y CSS de manera que no perdamos el tiempo duplicando plantillas como imágenes estáticas. Podremos utilizar imágenes estáticas para establecer la atmósfera del diseño (color, textura y tipografía).

Usted tendrá suficientes oportunidades de revisar nuestro trabajo y proporcionarnos retroalimentación. Nosotros compartiremos con Usted los archivos de trabajo a medida que vayamos progresando en su proyecto y nos mantendremos en contacto regular, si es posible, a diario. Si, en cualquier etapa, Usted no está contento con la dirección que está tomando nuestro trabajo, nos pagará la totalidad de lo que hayamos producido hasta ese momento y cancelará este contrato.

El texto del contenido

Nosotros no somos los responsables de escribir o redactor ningún texto. La producción del texto del contenido es enteramente responsabilidad suya. Si Usted quiere que Nosotros escribamos o redactemos textos nuevos, podemos proporcionarle un presupuesto separado para ese fin.

Fotografías y gráficos

Usted nos proporcionará los archivos de gráficos en un formato vector digital y editable. Usted nos proporcionará las fotografías en formato digital de alta resolución. Si Usted decide comprar fotografías de inventario, podemos sugerirle bibliotecas online donde conseguirlas. Si Usted quiere que Nosotros le busquemos las fotografías, podemos proporcionarle un presupuesto separado para ese fin.

WordPress, HTML, CSS y JavaScript

Nosotros entregamos tipos de página web desarrollados en la plataforma de código abierto WordPress, además utilizamos código marcado HTML5, hojas de estilo CSS2.1+3, código PHP y JavaScript no intrusivo para las partes interactivas.

Pruebas de navegadores y dispositivos

El hacer pruebas de navegadores ya no significa intentar hacer que un sitio web se vea idéntico en navegadores de diferentes capacidades o en dispositivos con pantallas de diferentes tamaños. Significa asegurar que la experiencia de una persona con un diseño sea apropiada a las capacidades de los distintos navegadores o dispositivos.

Pruebas de navegadores de escritorio

Nosotros probamos nuestro trabajo en las versiones actualizadas de los navegadores de escritorio principales, incluidos los desarrollados por Apple (Safari), Google (Chrome), Microsoft (Internet Explorer), Mozilla Firefox y Opera. También haremos pruebas para asegurar que los usuarios de Internet Explorer 9 para Windows tengan una experiencia apropiada aunque, posiblemente diferente. Implementaremos un diseño de una sola columna para versiones antiguas de Internet Explorer pero no haremos pruebas en navegadores más antiguos a no ser que Usted especifique lo contrario; en cuyo caso, si Usted necesita un diseño mejorado para un navegador antiguo, podremos proporcionarle un presupuesto separado para ese fin.

Pruebas de navegadores para móviles

El hacer pruebas en dispositivos de pantallas reducidas es esencial para asegurar que la experiencia de un diseño por parte de las personas sea apropiada para las capacidades del dispositivo que están utilizando. Nosotros hacemos pruebas de nuestro trabajo en:

iOS: Safari, Google Chrome Android 4.x: Google Chrome y Firefox

Actualmente no hacemos pruebas de Blackberry, Opera Mini/Mobile, Windows Phone u otros navegadores para móviles. Si Usted necesita que hagamos pruebas con dichos navegadores, podemos proporcionarle un presupuesto separado para ese fin.

Optimización para motores de búsqueda (SEO)

No podemos garantizar ninguna mejora en las clasificaciones (ranking) de su sitio en los motores de búsqueda, tampoco podemos prometerle el conseguir que su sitio suba posiciones o llegue al primer lugar de Google; sin embargo, Nosotros construimos cada sitio de manera que sea accesible a los motores de búsqueda en un esfuerzo de aumentar sus posibilidades de obtener mejores clasificaciones.


Nosotros instalaremos en su sitio un programa de seguridad de distribución gratuita (WordFence, Sucuri u otro), el cual deberá encargarse de la mayoría de las amenazas comunes en Internet. Si Usted requiere de mayor seguridad, podemos sugerirle la contratación de servicios específicos para ese fin y, de ser necesario, instalarlos en su servidor, para lo cual le proporcionaremos un presupuesto separado.

Soporte técnico

No somos una empresa de alojamiento web (hosting), por lo que no ofrecemos soporte de alojamiento, email u otros servicios relativos al hosting. Quizás Usted ya tenga alojamiento profesional e incluso administre su alojamiento internamente; si es así, excelente. Si no, Nosotros podemos configurar una cuenta para Usted con uno de nuestros proveedores de alojamiento. Podemos instalar su sitio en un servidor, además de cualquier programa de estadísticas como Google Analytics y podemos proporcionarle un presupuesto separado para ese fin. Después, la actualización y administración de dicho servidor dependerá de Usted; si quiere que Nosotros nos encarguemos de ese trabajo, podemos proporcionarle un presupuesto separado.

Cambios y revisiones

Sabemos por experiencia que los contratos de precio fijo pocas veces son beneficiosas para el cliente ya que por lo general lo limitan a sus primeras ideas. No queremos limitar su habilidad de cambiar de parecer. El precio indicado al principio de este contrato está basado (entre otros detalles), en la cantidad de tiempo que estimamos que vamos a necesitar para ejecutar todo lo que Usted nos dijo que quiere lograr, pero nos gusta ser flexibles. Si Usted quiere cambiar de ideas o añadir cosas nuevas no será ningún problema ya que le proporcionaremos presupuestos separados para cualquier otro fin.

Si, una vez entregado el proyecto, Usted o alguien de su empresa o terceras personas por encargo suyo o de su empresa, llegaran a modificar el contenido de este proyecto al punto de ocasionar desperfectos o fallas en el funcionamiento del sitio, la reparación del mismo se cobrará “por hora”, de acuerdo al tiempo que nos tome el realizarla.

Si Usted desea trasladar su sitio a otro servidor Nosotros podemos hacerlo, pero el traslado o relocalización de un sitio web será considerado de manera separada y le proporcionaremos un presupuesto para ese fin.

Temas legales

Nosotros no podemos garantizarle que nuestro trabajo estará libre de errores ocasionados por terceras personas (ej. Hackers), por lo que no seremos responsables ante Usted ni ante terceras personas por daños, incluyendo pérdidas de ganancias, pérdidas de ahorros, reputación, buena fe, ni otros daños consiguientes, incidentales o especiales, aun si Usted nos notificara al respecto. Finalmente, si cualquier disposición de este contrato resultara ilegal, nula o inválida, o por cualquier razón, inaplicable, entonces dicha disposición se considerará separable de este contrato y no afectará la validez o aplicabilidad de ninguna otra disposición del mismo.

Derechos de autor

Primeramente, Usted garantiza que todos los elementos de texto, imágenes y otros trabajos de arte o gráficos que Usted nos proporciona son de su propiedad (o de su empresa), o que tiene el permiso de utilizar dichos materiales.

Luego, cuando su último pago haya sido recibido por Nosotros, los derechos de autor se asignarán automáticamente de la siguiente manera:

Usted será el dueño de los elementos visuales que Nosotros creemos para este proyecto. Nosotros le daremos los archivos fuente y los archivos terminados y Usted deberá conservarlos en lugar seguro ya que no estaremos obligados a guardar copias. Usted será dueño de todos los elementos de texto, imágenes y datos que nos proporcionó, a no ser que sean de propiedad de terceros.

Nosotros seremos dueños de la combinación única de estos elementos que constituyen un diseño completo y le daremos la licencia de uso exclusivo y en perpetuidad, sólo para este proyecto, a no ser que lleguemos a otro acuerdo.

Nos encanta presumir nuestro trabajo y compartir lo aprendido con otras personas, por lo que nos reservamos el derecho, con el permiso de Usted, de exhibir y enlazar su Proyecto como parte de nuestro portafolio y el de escribir al respecto en sitios web, artículos de revistas y/o periódicos y libros o mencionarlo en los diferentes medios de comunicación.


Estamos seguros de que Usted entiende lo importante que es para una empresa pequeña que los pagos sean hechos de manera temprana y oportuna. Como también estamos seguros de que Usted desea mantener nuestra relación contractual en términos amistosos, por lo que Usted se compromete a ajustarse al siguiente calendario de pagos:

[Calendario de pagos]

La letra pequeña

Lo mismo que con una factura, Usted no puede transferir este contrato a nadie sin nuestro permiso. Este contrato está vigente y no necesita ser renovado. Si por cualquier razón alguna parte de este contrato fuera inválida o inaplicable, las partes restantes continuarán vigentes.

Si bien el lenguaje es simple, las intenciones son serias por lo que este contrato se considerará un documento legal bajo las leyes bolivianas y la jurisdicción de las cortes del Distrito Judicial de Santa Cruz, Bolivia.

Nos reservamos el derecho de contratar los servicios de empresas de cobranza en caso de ser necesario.


Firmado por [Nombre de la persona] en representación de [Nombre de la empresa]

Firmado por [Nombre de la persona cliente] en representación de [Nombre de la empresa cliente]

Fecha [la fecha]

Todos deben firmar el documento y mantener una copia en sus archivos.


Creative Commons LicenseUsamos este modelo de contrato de Stuff & Nonsense bajo licencia de Creative Commons Attribution-ShareAlike 4.0 International License.

A contract is just another point for us to communicate

Killing Contracts: An Interview With Andy Clarke

Top 10 Open Source Apps

A look at the top 10 free open-source apps available on all of the major platforms including Windows, OS X, Ubuntu, and all other forms of Linux.
Download links are found below!

1. Chromium
2. Thunderbird
3. Pidgin
4. Gimp
5. Handbrake
6. VLC
7. qBittorrent
8. Clementine
9. LibreOffice
10. Audacity

& Everpad




Barra Ñ – Halloween

Image 1


Image 2


Image 3


Image 4


Image 5


The Anatomy of a Perfect Landing Page

10 Key Landing Page Features That Draw In Users

The best landing pages are simple, speak to the right audience, and are well designed. Take your landing page designs to the next level with these 10 tips on creating the perfect landing page. This guide will show you how to leverage color, placement, headlines, and ultimately how to design the perfect landing page.

the anatomy of a perfect landing page

Headlines, Copy, and Trust Indicators

1. Page Headlines and Ad Copy

The landing page headline and advertisement wording should compliment each other. Your AdWords score allows a site to discover the cost-per-click. This score can be improved by having consistent content between the ad message and landing page text.

2. Clear and Concise Headlines

Being one of the first things a visitor will read, the landing page headlines should not confuse or bore, but compel a visitor to take a closer look. Addressing a specific point that is related to the content of the website will catch a reader’s attention more than having a vague and uninteresting headline.

3. Impeccable Grammar

Not just landing pages, but all website grammar needs to be flawless. Always double and triple check your copy, and have someone else read it through. In the example of an online retailer who is asking for visitors to purchase and provide personal and billing information, the trust of the customer will be risked if there are spelling errors and sloppy grammar.

This page has one small grammar error, but that one error can make a difference in conversions. You’re asking visitors to trust you. Grammatical errors are not a good introduction.

spelling mistake

4. Taking Advantage of Trust Indicators

For an effective way of building trust, incorporate testimonials, reviews, press mentions, guarantee seals, and 3rd party trust and security certification (Better Business Bureau, VeriSign, etc.). When the eye glass and lens company ACLens began using VeriSign, they saw a 41% increase in conversions and a 58% increase in revenue per transaction. The same can happen with any online landing page.

This landing page from Mayflower uses the company’s average rating to display trust in their service.

trust indicator

Call-to-Actions and Buttons

5. Use a Strong Call-to-Action

After a visitor reads the landing page headline, is is crucial that they know what to do next. In the case of Mozilla Firefox, when they changed their call-to-action from Try Firefox 3 to Download Now – Free, it outperformed the original call-to-action by 3.6% and had a confidence level of over 99%, resulting in 500 more downloads during the time of the test.

Blue Apron has a strong call-to-action on this page. It’s clear what the user should do and even highlights a per person price.

call to action

6. Buttons & Call-to-Actions Should Stand Out

Identify the keywords people interested in your service might be searching for and use words such as free, new, buy, ordownload now. A conversion button should stand out and be placed right below a call-to-action or have the call-to-action as the button. Nonetheless, the button should be big, bright, and above where a user would have to scroll to it.

Placement and Content

7. Keep It Above the Fold

The space a visitor sees without having to scroll is where the most important parts of the webpage should be. Place the call-to-action button above the fold and in a location where the viewer’s eye will scan to. Never have the button or form in a place where it has to be searched for.

above the fold

8. Always Be Testing

Optimize a landing page for conversion over time. Run A/B tests, change copy, images, and call-to-actions to see what resonates most with users. In addition to A/B testing, testing two completely different site designs against each other will be beneficial in the long run. (A/B testing is where a baseline control sample is compared to a variety of single-variable test samples in order to improve response rates.)

9. Use Images and Videos That Relate to Copy

Implementing motivational speeches, videos of user testimonials, and product images into a home page can have a positive impact on viewers, as well as give shoppers an extra push to look further into a product.

Bellroy uses great imagery and videos on many of their pages. Every product page has a great video and multiple images of that wallet. This makes selecting the right wallet extremely easy for buyers.

images and video

10. Go Easy on the Links

Links connecting the user to a bunch of other sites or pages will distract them and have a negative impact on conversions. Lots of links may make sense on a regular home page, but on a landing page, simplicity is key.

This landing page is designed well, but look at all those header links getting in the way of the message! Reduce the distraction level on your landing page by removing excess links.

too many links

What Colors Are Good for Different Sites?

Colors that entice a viewer will vary among different sites. Applying the right colors might draw in traffic, bore viewers, or scare others away. They set the mood of a landing pages and influence a viewer’s actions.

colors in design


Halloween Poster Ideas











Party Boat Chicago – Business Card

BC-City01 BC-Poseidon01

New Wix website for Robert Johnson


El Metro Catering menus




with no priceCateringPrintNOPrice4

With Price


Catering Menu



Approximate Conversion from Points to Pixels

Approximate Conversion from Points to Pixels

(and Ems and %)

Here’s a chart that converts points to pixels (and ems and %). It’s an approximation, which will depend on font, browser and OS, but it’s a good starting point.

Points Pixels Ems Percent
6pt 8px 0.5em 50%
7pt 9px 0.55em 55%
7.5pt 10px 0.625em 62.5%
8pt 11px 0.7em 70%
9pt 12px 0.75em 75%
10pt 13px 0.8em 80%
10.5pt 14px 0.875em 87.5%
11pt 15px 0.95em 95%
12pt 16px 1em 100%
13pt 17px 1.05em 105%
13.5pt 18px 1.125em 112.5%
14pt 19px 1.2em 120%
14.5pt 20px 1.25em 125%
15pt 21px 1.3em 130%
16pt 22px 1.4em 140%
17pt 23px 1.45em 145%
18pt 24px 1.5em 150%
20pt 26px 1.6em 160%
22pt 29px 1.8em 180%
24pt 32px 2em 200%
26pt 35px 2.2em 220%
27pt 36px 2.25em 225%
28pt 37px 2.3em 230%
29pt 38px 2.35em 235%
30pt 40px 2.45em 245%
32pt 42px 2.55em 255%
34pt 45px 2.75em 275%
36pt 48px 3em 300%



Source: Approximate Conversion from Points to Pixels

Ultimate Restaurant Website Design Guide: Forget About Diet Constantly

TOTAL MEMBERS: 202,145+1stWebDesignerNumber One Community For People Who Design The WebSTART HEREBLOGSERVICESABOUTCONTRIBUTEADVERTISEPEOPLECONTACTUltimate Restaurant Website Design Guide To Make People Forget About Diet ConstantlyFacebookTwitter+Get a large mug of coffee and brace yourself for a guidebook that you will be forced to bookmark. Dining out with families or friends has jumped up exponentially with the growth of working eggheads. And all of us are aware of the reach of Internet in our day-to-day lives. It is this reach of Internet into the life of customers that has forced restaurants to rethink their online strategies. I won’t be surprised to see a restaurant with its own social media marketing team. After all we proudly spend more time on social media instead of sitting down with our families and watching T.V. Anyways, let us leave the social media debate for some other day.Today, we are here to ripoff the restaurant website design trends and make sure that this guide will be all that you will need if you plan to have your next restaurant website design. I will present with every possible details and resources that a webmaster would require while kicking-off the next restaurant website design. So, gear up!As I indicated before, this is going to be a lengthy article. So, here is a quick Table of Contents so that you are on track all the time:Why are Restaurant Websites Scary?Astonishing Statistics.Your Own Jaw Dropping Design!Single Page Restaurant Designs.Restaurant Website Builders.Awards for the Best Restaurant Websites.Who would want to see the photograph of a chef on the home page of a restaurant website? Are you, as a customer, interested to know how the staff of a restaurant looks like? Of course not! We jump onto a restaurant website to find out the menu of the restaurant, get an idea of the ambiance of that restaurant, the prices, location and similar features. Who wants to know if the chef of a restaurant can give good autographs?Visitors can tolerate a website that has not been designed for over 5 years if the current layout is already helping them find out what they are looking for.Facts (that should be strictly ignored) that a usual restaurant website shouts out loud to its visitors:How the chef sniffs the oil.How they hire their staff.How the surroundings of the restaurant better than the restaurant.How the manager is the most friendly human being on this planet.Hot models (tagged as customers) busy stuffing food into each other’s faces.A letter from the owner that no one ever wants to read.Address or phone number is present in flash format so you cannot copy it.A soothing background music on the website that plays forever usually forcing the visitor to fall asleep.Facts (that should be pushed on the website) that are usually ignored on restaurant websites:The menu in detail.The price.Ongoing offers.Original (and latest) photographs.The location (with a link to Google maps).The timings.Parking information.Advance booking options (that works).Do you understand what I want you to understand? Restaurant websites try their best to look “cool” and in between all this they tend to forget whatever their website visitors are looking for.Website visitors look for information NOT for flash. They want to know how your restaurant looks like not how your chef looks like. Show some sense, please!To start with I will let the numbers do the talking. In no time you will understand how restaurants are leveraging on the advantages of a website and how there is still more room for improvement:Founder of Happy Tables reveals the importance of mobile optimization and the percentage of visits that restaurant websites get from such mobile devices.According to the Direct Marketing Association, email marketing delivers a $51.45 return on investment (ROI) for every marketing dollar spent.Consumers from North East and Pacific Coast between the age of 25 to 45 are said to take lead in researching a restaurant online before opting for the same.A research done by Palore explains the percentage of restaurants that have a website as per various major cities. Boston with 33% leads the chart.Over one third consumers prefer to read online reviews before opting for a restaurant.Around 50% of consumers use search engine to find a restaurant. (via AIS Media)Around one third of the consumers want pricing to be precisely correct on restaurant websites. (via Dining Grader)Enough text to prove the fact that the restaurant website designs of today are lacking that spark which will twinkle in the eyes of the visitor the moment the website opens. Now, I will list down some of the imperative pointers that must be taken care of while working on a restaurant website design. Read these carefully. These pointers can make or break your restaurant website design!Turn OFF the background music – Oh please! I know your taste in music is simply awesome but do you realize that it might not match with the rest of your visitors? Moreove

Source: Ultimate Restaurant Website Design Guide: Forget About Diet Constantly

Branding Your Busines

La Vaca – Chorizo Night Flyer




La vaca – Brunch Party



La Vaca – Taco tuesday




How to Style Each WordPress Post Differently

Have you ever came across a site that style their posts differently? Some sites have different sticky posts highlighted whereas others have each category post styled with a different color, or some may even have a totally unique outlook altogether. Well, that is exactly what we are going to cover in this article. We will share how you can style different WordPress posts in different ways. So what are we going to use? We will use a function called post_class. Post Class function prints out different post container classes which can be added, typically, in the index.php, single.php, and other template files featuring post content.

Note: This tutorial requires that you are somewhat familiar with WordPress theming, and know fairbits of HTML / CSS.

When you open your index.php file, or another file with a loop, you will normally see something a div with post-id, but we are adding a new variable post_class to it like shown in the example below:

1 <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

By adding this function in the div, each of your posts will get specific css classes added to them which will allow you to modify the looks of your WordPress posts via CSS. The following classes are added by default:

  • .post-id
  • .post
  • .attachment
  • .sticky
  • .hentry (hAtom microformat pages)
  • .category-ID
  • .category-name
  • .tag-name

An example output would look like this:

1 <div id="post-4564" class="post post-4564 category-48 category-dancing logged-in">

So if you open your style.css file and add the class .category-dancing, you will be able to make your posts from the dancing category look different in the post.

1 .category-dancing{background: #97c3e1; border: 1px solid#84aac4;}

This will make your dancing category posts have a blue background with a dark blue border. You can further this by adding a different link class for .category-dancing etc. You can use the same technique to make posts with a specific tag look different.

But for someone who is looking to really customize the look of their site might need additional controls in terms of classes. Well, you can specify the classes if you wish like so:

1 <?php post_class('class-1 class-2'); ?>

But, how will this work on a dynamic platform like WordPress? So let’s look at some examples of how you can add classes to make your posts look different.

Style Posts Based on Authors

Often you will see that blogs highlight author’s comment differently. Well for multi-author blogs, it might be a good idea to give each author’s post a different style altogether. So in this example, we will give each post it’s own styling based on author’s first name. So in your index.php or another file (archive.php / category.php etc), lets get the author’s first name value by adding this code BEFORE the loop:

1 <?php $author = get_the_author_meta('display_name'); ?>

The code above is getting author’s display_name which can be selected in user’s profile area, and it is assigning the value with $author variable. Now that we have a dynamic class value created, we can add it in our post_class code like this:

1 <?php post_class('class-1 class-2 ' . $author); ?>

Note: You do not have to keep class-1 and class-2. That is just if you want to add static classes. So your code should output something like this:

1 <div id="post-4564" class="post post-4564 category-48 category-dancing logged-in class-1 class-2 Syed">

Notice that Syed is added in final output. The name will be different on each post based on the author’s display_name. You can then style each class in your CSS like so:

1 .Syed{border: 1px solid #000;}
2 .Zain{border: 1px solid #d88b3d;}
3 .Dronix {border: 1px solid #4781a8;}

Then each post in the loop with these authors will be styled differently. You can further the individual styling using the technique above for other authors on your site.

Style Posts Based on Popularity using Comment Count

You have seen sites with popular posts widgets, which are mostly based on comment counts. Well in this example, we will show you how to style posts differently using the comment count. First thing we need to do is get the comment count and associate a class with it. To get the comment count, we need to paste the following code INSIDE the loop:

01 <?php
02     $postid = get_the_ID();
03     $total_comment_count = wp_count_comments($postid);
04         $my_comment_count = $total_comment_count->approved;
05     if ($my_comment_count <10) {
06         $my_comment_count = 'new';
07     } elseif ($my_comment_count >= 10 && $my_comment_count <20) {
08         $my_comment_count = 'ermerging';
09     } elseif ($my_comment_count >= 20) {
10         $my_comment_count = 'popular';
11     }
12 ?>

In the code above we are adding classes based on a scale. If the post has less than 10 comments, then the class ‘new’ will be added. If the post has greater than 10 comments and less than 20 comments, then the class ’emerging’ will be added. If the post has greater than 20 comments, then the class ‘popular’ will be added. You may change this scale based on your site’s average comment rate.

So your post_class code will look like this:

1 <?php post_class('class-1 class-2 ' . $my_comment_count); ?>

Then you can create the following classes in your style.css file:

1 .new {border: 1px solid #FFFF00;}
2 .emerging {border: 1px dashed #FF9933;}
3 .popular {border: 1px dashed #CC0000;}

Notice that we are only changing the border colors, but you can go in much more depth with this including adding a custom background image, background color etc. This will spice up your theme and make the blog page stand out.

Want more control over the CSS classes? Well then we can look at a way that you can assign classes via Custom fields.

Style Posts based on Custom Fields

You can add specific classes via post custom fields. So for example, it is your blog’s anniversary and you want the anniversary post to look different. You can create a custom field and give it the name ‘post-class’ and then add the value ‘anniversary’. Once you add this custom field and save the post, this value is stored in your database. Now we can pull it from our loop using the code below:

1 <?php $custom_values = get_post_meta($post->ID, 'post-class'); ?>

Make sure you paste the code above INSIDE the loop. Then you will add the $custom_values variable to post_class function.

1 <?php post_class('class-1 class-2 ' . $custom_variable); ?>

Now you can go to your style.css file and add the class such as:

1 .anniversary{YOur Styling Goes Here}

This is by far the most control you will get with post_class function in terms of CSS styling. But sometimes, you want even more control. CSS classes lets you change the background and other stylistic elements, but you cannot change the entire structure this way. So let’s look at something a little bit more advanced which we like to call THE SUPER LOOP.

01 <?php if (have_posts()) : ?>
02 <?php $count = 0; ?>
03 <?php while (have_posts()) : the_post(); ?>
04 <?php $count++; ?>
05 <?php if ($count == 1) : ?>
07  Add your Custom Post Divs Here for the 1st post.
09 <?php elseif ($count == 2) : ?>     
11  Add your Custom Post Divs Here for the 2nd post.         
13 <?php elseif ($count == 3) : ?>
15  Add your Custom Post Divs Here for the 3rd post.     
17 <?php elseif ($count == 4) : ?> 
19  Add your Custom Post Divs Here for the 4th post.    
21 <?php else : ?>
23  Add your Custom Post Divs Here for the rest of the posts.
25   <?php endif; ?>
26 <?php endwhile; ?>
27 <?php endif; ?>

If you notice that we just created a loop above that lets you style each post based on count. This is very helpful when you want your first three posts to look different from the rest. For example, your first three posts can be one column posts whereas the rest will be smaller and in a two column list. You can accomplish almost everything with the super loop. You can add your own queries and much more. If you are a developer, then this will be worth taking a stab at to push the limits.

Hungry? This Map Shows Best Ethnic Eats By Neighborhood – Downtown – Chicago

Check out the historical ethnicity and Yelp-preferred restaurant of each ‘hood.

Source: Hungry? This Map Shows Best Ethnic Eats By Neighborhood – Downtown – Chicago

Sports Bar Marketing | Sports TV Schedule, Sports TV Listings, Sports Bar Business, Sports Bar Promotions, SBMX, Sports Bar Marketing, Restaurant Training, Restaurant News

Source: Sports Bar Marketing | Sports TV Schedule, Sports TV Listings, Sports Bar Business, Sports Bar Promotions, SBMX, Sports Bar Marketing, Restaurant Training, Restaurant News

WEBSITES FROM $600 free domain & 1 year hosting