Tag Archives: html5

5 Reasons to Redesign Your Website with a Responsive Web Design Format

Responsive Web Design

Responsive Web Design can engage your customers more by giving them a friendlier user-interface.

What is responsive/adaptive web design?

Responsive web design (or sometimes referred to as adaptive web design) is the process of making a website that will adapt appropriately to any screen size. From desktop, to tablet, to mobile phone, your website will look and feel appropriate to the device it’s being viewed upon.  As screen sizes become smaller, a responsive website re-prioritizes content and modifies its design on the fly to meet the needs of users on any given device, thereby presenting a friendlier user-interface.

Here are 5 reasons to make your website responsive:

  1. Eliminates the need to create a mobile-only website.
  2. It’s optimized for performance on mobile devices.
  3. No need to update your mobile website and your desktop website when it’s all in one!
  4. The user interface experience is better across all devices.
  5. Helps you rank higher on the search engines! Yes, Google prefers responsive sites!

If you are planning to redesign your website I recommend making the upgrade to a responsive one. Unfortunately, redesigning your style-sheets and updating your current websites HTML to become responsive can be as expensive as getting a new website created. It is much more cost effective to make a new website responsive from the start, and that’s why I encourage all new web design clients to make their site adaptive.

Want to see it in action? If you’re on your desktop computer (or laptop) adjust the size of your browser to different sizes and you’ll see the website readjust according to the screen size.
That’s responsive web design in action. I’ll be recreating my main website (reelWebDesign.com) to be fully responsive soon, so keep an eye out. If you’d like a sneak peak to see what it will look like just email me.

By Peter Marino

How to Modify Images or Backgrounds Across Your Website With Simple CSS Code

CSS3Using CSS, you can add effects to your website’s design to enhance its appearance, such as stitched or rounded borders, shadows, and background images. This can all be done with simple CSS3 coding.

For the sake of example, let’s begin with a blank box that you can add these effects to. After that, we will examine how these can be applied to images. You can start by adding a div tag to your HTML, with class=”customclass”.

It will look like this in your HTML file:

Then go into your stylesheet and define your custom id or class.

Here are some basic attributes to get started:


customclass {
background: #55ccaa;
position: relative;
width: 500px;
height: 400px;
margin: 20px;
padding: 10px;
}

BORDER EFFECTS

Thanks to CSS3, adding rounded corners to your box or image is simple.

All you need to do is write this code inside your custom class or id (this can be added to the “customclass” in your css file you just made:

border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;

Your box should now have rounded corners. It is important to note that many of these effects will not show properly in Internet Explorer versions prior to version 9.

If you want to add a stitched look to your box, you will need to add two things: the “border” property, and the “box-shadow” property:

border: 2px dashed #ffffff;
box-shadow: 0 0 0 6px #55ccaa;
-moz-box-shadow: 0 0 0 6px #55ccaa;
-webkit-box-shadow: 0 0 0 6px #55ccaa;

The border property adds a fancy border around your content, which is dashed to give it a stitched appearance. Other border styles you can experiment with are solid, dotted, double, groove, ridge, inset, and outset.

The box-shadow property is used here to create a solid line around the dashed border to help with the stitched look, but it can also be used to add a realistic shadow beneath your box. To add a shadow effect, simply add a second shadow in your box-shadow code, so it looks like this:

box-shadow: 0 0 0 6px #55ccaa, 2px 1px 6px 4px rgba(10,10,0,.5);
-moz-box-shadow: 0 0 0 6px #55ccaa, 2px 1px 6px 4px rgba(10,10,0,.5);
-webkit-box-shadow: 0 0 0 6px #55ccaa, 2px 1px 6px 4px rgba(10,10,0,.5);

IMAGES Let’s say you want to keep your new div but put an image in the background.

First, find the dimensions of the image and use those values for the “width” and “height.” Then, change your “background” property like so:

background: #55ccaa url(‘your.image/location.jpg’) no-repeat;

If you want all the images on your page to use these effects, you don’t need to add a div or any HTML at all. Simply add all the CSS to the “img” tag in your stylesheet like so:

img {

border-radius: 10px;
border: 2px dashed #ffffff;
box-shadow: 0 0 0 6px #55ccaa;
-moz-box-shadow: 0 0 0 6px #55ccaa;
-webkit-box-shadow: 0 0 0 6px #55ccaa;
box-shadow: 0 0 0 6px #55ccaa, 2px 1px 6px 4px rgba(10,10,0,.5);
-moz-box-shadow: 0 0 0 6px #55ccaa,2px 1px 6px 4px rgba(10,10,0,.5);
-webkit-box-shadow: 0 0 0 6px #55ccaa, 2px 1px 6px 4px rgba(10,10,0,.5);
}

There you go, a simple but helpful tutorial about using the latest CSS3 styles to your HTML5 website with only minor effort.

Simple as that!

By Peter Marino, Chief Designer and COO of reelWebDesign.com, an HTML5 Web Design company in NYC.

Will HTML5 Make Apps Obsolete?

Development of HTML5 started in 2009 and was still going under development as late as October 2011. There is a lot of hype surrounding this newest version of HTML. Many game programmers are talking about how HTML5 is going to replace Flash and more complicated programming for gaming. Since HTML5 will work the same on smart phones as it does on a desktop or tablet, the question remains whether smart phone apps will become obsolete.

One thing to consider is whether consumers are still going to need to do what they currently do with their phones. An example would be a Weight Watcher’s application on the phone to calculate how many points are in a specific type of food or meal. A smart phone user that is trying to lose weight will still need to be able to figure out how many points are in her meal.

People aren’t going to want to change how they do things, so you might wonder where that leaves app developers. Just because a developer is no longer programming specifically for iOS or Android doesn’t mean that developer will be out of a job. Instead, app developers will need to adapt to the new HTML5 and CSS3 standards.

Will iOS or Android Stop Movement to HTML5?

Currently, iOS and Android both fully support HTML5 and CSS3. It is probable that these devices will continue to be at the forefront of the HTML5 revolution, though online game programmers will run a close second. With HTML5, programmers can develop full games, including online multiplayer games with graphics and sound that are rendered without Flash. Hard-core gamers will need to seriously consider how well they can play some of the more complicated games without a keyboard.

In addition to better graphic rendering, HTML5 allows for a host of other enhancements. Speed and functionality will be improved. Programs and web apps will work faster and more smoothly. Though not as obvious to the end-user, performance and connectivity will be improved as well.

Adapt or Become Obsolete

Those who currently work with iOS or Android will need to learn how to program with HTML5 and CSS3 if they don’t already know the syntax for these languages. Once a developer is familiar with the new standards, a single developer can devise web apps that work across all mobile platforms instead of programming for one specific mobile OS at a time. This can save time, and allow for more developers to work on more web apps.

There are already moves underway in the mobile developer community to adapt to the new programming standards. Websites such as phonegap.com have sprung up in answer to HTML5 and CSS3. Mobile developers can work with PhoneGap to deploy their phone apps across multiple platforms and operating systems.

Some web developers are embracing the changes to HTML. Many more are using the changes as HTML4 with some parts they don’t use, or HTML4+ where they use more than simple HTML4, but don’t fully embrace all aspects of HTML5. These partial uses are to some degree delaying full deployment of HTML5.

On the other hand, phone apps and game developers are leading the way. With HTML5, you can make all kinds of cool phone and web apps easily. In fact Adobe products like Dreamweaver CS5.5 and the beta release of Adobe EDGE have made it much easier to do so. Doing the same things with HTML4 was much more difficult and gave uneven results. In this situation, HTML5 is the winner hands-down and will continue to be embraced by more and more developers. So although the app and the app developer are both not obsolete, how you develop and deploy them is rapidly changing.

Peter Marino is the Senior Partner of reelWebDesign.com a web design and social media marketing firm in NYC. We make all of our new websites HTML5 compliant.Peter deployed his first Android app on the Android marketplace called ‘Swarm Knowledge’.

HTML 5 in a Nutshell

HTML 5 – What it Is and How it Affects You

HTML 5 is about to completely redefine how websites are created and experienced. HTML, or Hyper Text Markup Language, is the code with which websites are written. With the release of HTML 5, many things that were difficult or impossible to do in HTML 4 are now easy. Read on to learn more about the release of HTML 5 and what it might mean for you.

Graphs, Charts, Complex Graphics – On the Fly
In the past, you had to use outside plugins or code to generate graphs, charts or other graphics. Now HTML 5 will support an element called the Canvas Element that allows you to generate graphics right on the fly.

Embedded Video and Audio

HTML currently supports a rudimentary method of embedding video and audio that nobody really uses. It’s slow, the player is unattractive and is often buggy. HTML 5 is aiming to change that.

Currently, most people use 3rd party plugins like flash to display video or audio. YouTube, for example, is a flash player. Most other players are also written in flash.

With HTML 5, you’ll be able to embed video and audio directly into the browser without using a third-party coding language like flash. It’s designed to be fast and efficient.

Run Applications – Without the Internet

Most web applications don’t work when you disconnect from the internet. Google Docs for example – If you disconnected from the internet, you could keep browsing the doc you’re on, but you couldn’t pull up another document or make edits.

With HTML 5, you’ll be able to run web applications as if they were desktop applications – Without needing to download anything. It’s called “Offline Web Applications” and it works just like it sounds: Web applications that work even when you’re offline.

Accurate Geolocation

Currently, locating someone online is possible by decoding their IP address. However, IP addresses aren’t a sure thing when it comes to location.

HTML 5 will come with its own Geolocation technology to help website owners decode where visitors are located. This will help them tailor web content to the location of the browser. For example, news sites will be able to show you only news stories that relate to you based on where you’re at.

More Styles, Better Forms and More

HTML 5 will feature stylable elements, which can be visually altered with CSS. This means more dynamic and more visually appealing websites

Forms too will be getting an upgrade. You’ll be able to add sliders to forms, pick data and more.

HTML 5 Summary

HTML5 is an upgrade of the very framework that the internet runs on. Once all the browsers adopt HTML 5, you can expect a significant jump in the quality of websites everywhere.

If you’re a website designer, HTML 5 will give you wider range of tools to play with. It’ll speed up and simplify how things are done currently in addition to giving you completely new elements to play with. If you’re a website browser, you can expect certain things to speed up, improved designs and graphics as well as better video, audio and web software.

Enjoy the new and ever evolving internet!

Last updated by at .