Tag Archives: CSS3

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

CSS3, HTML5, responsive web design, SEO, Small Business Marketing, Web Design, , , ,
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

CSS3, HTML5, Web Design, ,

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?

Technology, Web Design, , , , , ,

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’.

HTML5 and CSS3: Wireframing in the final product

Small Business Marketing, Web Design, ,

It’s a classic case of Photoshop versus website. Existing wireframing and prototyping tools are incapable of accurately reflecting the environment of the web.

They produce static designs that can’t be seen through the variable known as the web browser. And when you build the final website, some elements won’t look exactly like their draft counterparts, and the client will notice those minor differences in fonts, positioning, etc.

You may be more comfortable with a graphics program, and rendering the design iterations may seem to take longer if you have to hand-code the HTML.

However, the advantages of creating a wireframe in HTML from the start are beginning to outweigh the alternatives: not only do we have new layout elements in HTML5 and more powerful selectors and styling in CSS3, but by combining them, we can throw together a simple layout quickly.

Read more >>

Last updated by at .