Creating Modern, Responsive Websites With Web Standards

Website Standards and Clean Code

It isn’t that difficult to create a modern website based on current web standards. If your website was built using the latest technology, your site will be super-fast, modern, clean and responsive.

Everyone wants their website to cost less, work better, and reach more people in today’s browsers, screen readers, and wireless devices. The inescapable technological advancements that are happening as we speak are breaking websites all over the internet. A modern website built using the latest coding practices ensures that your website will function properly across all devices and help individuals with disabilities who are using special devices to access and interact with the internet – and stand the test of time.

You don’t have to spend money on trendy, short-sighted, proprietary solutions that will end in disaster. No one can afford to piecemeal a website that will ultimately break sooner than later.

Coding several different stylesheets might have seemed like a great idea at the time, but it is not a rational solution to problems that are continuing to plague site owners and builders.

FORWARD COMPATIBILITY

WaSP (www.webstandards.org) advocates standards that reduce the cost and complexity of site creation and ensure simple, affordable access for all. Today, every browser supports web standards as a matter of course. They work with the designers of development tools such as Dreamweaver. You can find a myriad of web standards educational tools and this information can be found in most languages today.

Apple’s latest WebKit based Safari browser, which powers the iPhone’s web browser, Mozilla powered Firefox, Opera, the WebKit based Google Chrome, and Microsoft Internet Explorer 7+ understand and correctly support XHTML, CSS3, JavaScript, and the DOM.
*Internet Explorer 6 does not support many of the latest web standards, and we can only hope that everyone has moved passed this version of IE. Developers know that we can fix IE6 to some degree, but there comes a time when you have to move forward and not look back. We’ve stopped overkill fixes because newer phones are equipped with the latest browsers and it just doesn’t warrant the extra time and expense anymore to work out ALL the fixes needed for IE6 to view properly.

WHAT IS WEB STANDARDS COMPLIANT?

javascript

JavaScript creates action.  JavaScript is the bomb. This language has given us the ability to create action!
In a perfect world, browsers perfect their support for every single standard. Considering that most software doesn’t come out bug-free, and standards are sophisticated and complex, cross-browser support is actually pretty solid enough that we do develop using the latest standards. HTML5, more accessibility, CSS3, structured markup and deeper DOM and JavaScript function calls are becoming the progressive-enhancement that is pushing the internet into the future. All the big companies such as Apple, MSN, Wikipedia, and WordPress have embraced web standards. Of course, they don’t always achieve perfect validation or pure semantic markup, but a trained developer can make these markup fixes very quickly, and let’s face it, modern browsers are lenient.

STANDARDS ARE THE TOOLS WITH WHICH ALL OF US CAN DESIGN AND BUILD SOPHISTICATED, BEAUTIFUL SITES THAT WILL WORK TODAY AND TOMORROW.

OLD BROWSERS ARE INCOMPETENT, INCOMPLETE, AND HAZARDOUS TO THE HEALTH OF THE WEB.

GARBAGE IN, GARBAGE OUT.

More than 90% of all websites are obsolete. They might look good on desktop browsers, but outside of that, the symptoms of decay are starting to appear. Carefully constructed layouts have begun to fall apart, and expensively engineered behaviors have stopped working. As browsers evolve, site performance continues to deteriorate.

Modern browsers are not merely newer versions of the same old thing. They differ fundamentally from their predecessors, and in many cases, they’ve been rebuilt from the ground up. They have a new job: to comply as well as possible with the web standards. As the newer browsers comply with web standards, they are becoming increasingly intolerant of broken code and markup.

THE KNOWLEDGE OF WEB STANDARDS IS A NECESSITY FOR ANYONE WHO DESIGNS OR PRODUCES WEBSITES

BEST WEBSITE NOW ENSURES THAT SITES DESIGNED TODAY WILL CONTINUE TO WORK IN TOMORROW’S BROWSERS AND DEVICES – INCLUDING DEVICES NOT EVEN BUILT OR IMAGINED YET

We believe in “write once, publish everywhere”. It isn’t wishful thinking. We are proud of the fact that our mission statement is “Because it matters”. Our mission follows some basic rules:

Control layout, placement, and typography in desktop browsers while allowing users to modify the presentation to suit their needs.
Develop and support sophisticated behaviors that work across multiple browsers and platforms.
Comply with accessibility laws and guidelines without sacrificing beauty, performance, or sophistication.
Redesign quickly – reducing costs and eliminating unnecessary work.
Support emerging devices from wireless gadgets and smart phones to Braille output devices and screen readers used by those with disabilities with one website.
Offer sophisticated printed versions of any web page.
Stay educated and ahead of the curve to always use real semantic markup.

PAGE RANKING AND SEO

iStock_000022200278Large

SEO and Analytics go hand-in-hand.  Believe it or not, companies do not have to spend a lot of money for SEO or Analytics. Well thought out SEO makes your website findable. Content is king. Focus on lean, keyword-rich, buzzword-free content that’s relevant to your customers, and use semantic markup. Copy, CSS layout and HTML5’s latest coding practices are the golden keys to findability.

COMPANIES THAT KNOW THE SIMPLICITY OF GREAT SEO ARE PROSPERING. THOSE THAT DON’T ARE FALLING BEHIND.

ACCESSIBILITY – THE HEART OF WEB STANDARDS…

Accessibility makes sure your content can be read and your site can be used by everyone, no matter what device they browse with, and regardless of physical ability. Innovation is the soul of accessibility. Accessibility is legal standard for judging and enforcing the accessibility of sites. This is great news because the world is being pushed into one single standard.

If you use standards-based designing principles, you not only make your content easy for search engines to find, it will also enable visually disabled people who use screen readers to navigate your websites content.

Screen reader users navigate web pages by tabbing from h2 to h2 and from section to section, just like sighted users navigate by visually scanning. When structuring your site semantically, pay particular attention to forms and tables. Provide keyboard access for those who are unable to use a mouse. Keyboards and assistive devices are the gateway to online user experience.

WELCOME MILLIONS OF VISITORS TO YOUR SITE WHO ARE LOCKED OUT – YES – THERE ARE MILLIONS OF DISABLED PEOPLE IN THE WORLD WHO HAVE ACCESS TO THE INTERNET

iStock_000020458543XSmall
Google web crawlers look for relevancy of content when a user types in an inquiry.
Think of web crawlers as blind users – Google is the biggest blind user on the web. Dish out appropriate content, well written and well structured, and you not only serve the blind folks in your audience, you also attract millions of sighted ones.

It wouldn’t be smart to exclude disabled Americans. This demographic would take up a city the size of Los Angeles or New York City. Millions!

If you think blind people don’t buy products online is missing the point and the boat. Don’t be blind yourself to the true nature of the audience you reject – you are still reaching the non-disabled populace this way by conforming to access guidelines and many others who would have ordered your products over the phone if only your site let them.

Section 508

Section 508 requires all websites under its jurisdiction to provide “equal or equivalent access to everyone” to accommodate the visually impaired, the hearing impaired, the physically disabled, and people who have photosensitive epilepsy and it spells out what accessibility really means. This law covers computers, fax machines, copiers, telephones, transaction machines, and kiosks, as well as other equipment used for transmitting, receiving, or storing information. It also covers many websites. Section 508 became U.S. law in 2001 and applies to the following:

  • Federal departments and agencies (including the U.S. Postal Service)
  • Deliverables from contractors who serve them
  • Activities sponsored or funded by the Federal government
  • Activities sponsored by states that have adopted the regulations
  • This is just skimming the surface and you can find plenty of resources to explain what the exact standards are and how to apply them along with specific things to do to make your site 508 compliant.

The bottom line is that if you design with web standards and follow the guidelines, your site should be accessible to screen readers, Lynx, mobile devices, and old browsers as it is to modern, compliant browsers. Standards and accessibility converge in agreeing that one web document should serve all readers and users. Even Flash and PDF’s can now be made accessible.

MYTH: ACCESSIBILITY IS EXPENSIVE

Most tasks to bring a website to its best take minutes to accomplish. Simple tasks like adding a label to your web form or writing a table summary. Type a brief alt text for each image – which is a no-brainer. High level conformance is going to obviously fall under another category and will cost more. If you want to author closed captions for web videos or to caption live streaming media news feeds in real time see Joe Clark’s “Best Practices in Online Captioning” . (www.joeclark.org/access/captioning/bpoc)

I highly recommend the following cited book for anyone who builds things for the internet. Web Standards is such an exciting concept that ties us all together. Where we go from here who knows, but right now we are accomplishing a great thing using Web Standards, and this book is a must have.

You can find the latest Standards and beta versions of some brilliant new concepts existing on the W3C website. Their HTML5 Validator is a great place to find semantic errors within your page. Go to http://validator.W3.org/ for the latest information.

Jeffrey Zeldman with Ethan Marcotte (2010). Designing with Web Standards, Third Edition. Berkeley, CA. New Riders.

Advertisements

CSS3 – Design with Color Control and Opacity

CSS3 has the ability to control color opacity.

There are many degrees of translucence between total transparency and total opacity.  Web Designers often use opacity for visual appeal in conjunction with mouseover events for pop-up photo galleries as well as drop-down and flyout menus.

hex_colorsColor is a big part of a website, and you can color anything and everything using CSS.

There are 16 valid color names:

black, silver, gray, white, maroon, red, purple, fuchsia, green, lime, olive, yellow, navy, blue, teal, and aqua.

Hex Codes

Virtually all modern screens can show at least 16.7 million colors, and CSS provides several ways to define all those colors.  The most common method of defining colors is to use a hex code.  This allows you to define a color using three pairs of hexadecimal numbers representing red, green and blue.  A zero indicates none of that color.  An ff indicates that color at full strength.  Example: #000000 is black – none of any color; #ffffff is full white – full strength of every color; #ff0000 is red – full strength, no other color; #00ff00 is green – no red, full strength green, no blue.

You can also use a three-digit shorthand syntax to express colors where each pair of digits has matching characters.  The browser actually doubles each of the digits to translate to six digits.  Example:  #000 is short for #000000; #0f0 is short for #00ff00.  The letters aren’t case-sensitive, so you can use uppercase or lowercase.

RGB Codes

rgbRGB is another way to express any of the 16.7 million colors.  Like hex, you define a color using a combination of red, green, and blue, but you use the 255 decimal range of 0 to 255, and you don’t need the # character.  The syntax used is rgb(red,green,blue).  You replace the red, green, and blue each with a whole number in the range of 0-255 to indicate the amount of that color.  Or, optionally, each number can be a percent in the range of 0% to 100%.  You can’t mix percent and numbers though.  Example:  rgb(0,0,0) is black, and it is the same as saying rgb(0%,0%,0%) or hex code #000!  There is no technical advantage or disadvantage to any particular method, it’s your call.

HSL Color

hslAnother way to express any of the 16.7 million colors available to you is Hue, Saturation, and Lightness (HSL) which is based on the concept of a hypothetical color cylinder.  The syntax for expressing color using HSL is hsl(hue, saturation, brightness).

Hue is the basic colors of the rainbow, and all the colors circle the hypothetical cylinder.  The cylinder is round, so 360 degrees around.  Red is at 0 degrees, green is at 120 degrees, blue is at 240 degrees.  At exactly 360 degrees, it goes back full circle to red.

Saturation increases as you move out from the center of the cylinder.  It is how much of the color there is.  Picture a bottle of perfectly red ink.  That would be 100% saturation, near the outside of the cylinder.  Take a drop of that ink and drop it into a glass of clear water.  It’s red, but it is at a low saturation, maybe 1%, near the inside of the cylinder.

Lightness is how much light is hitting the color.  No light is 0 (zero) and would render it black near the bottom of the cylinder.  Too much light (100) would render white at the top of that imaginary cylinder.

So looking at hsl(hue, saturation, brightness), you replace hue with hue expressed as a number indicating degrees around the cylinder with red at 0 (zero), green at 120, and blue at 240.  You can use any number in the range of 0 to 360.  You can express saturation as a number the range of 0% (no saturation) to 100% (full saturation).  Lightness, too, ranges from 0% (totally dark) to 100% (totally light) with 50% being the standard lighting.

It is important to keep in mind that hex, RGB, and HSL are just different ways of expressing the same 16.7 million colors.  There is no right way or better way.  It is up to you, the developer.

Translucent color expression is made using rgb() or hsl() coloring methods and using a fourth value for opacity.

Opacity, or transparency, and translucency all describe how much you can see through something.   The syntax for transparency is rgba(red, green, blue, opacity) or hsla(hue, saturation, lightness, opacity).  The “a” stands for alpha transparency.  The opacity value is new to CSS3 so some older browsers won’t handle them correctly.  You will want to set a background color as the default for the older browsers followed by the hsla() or rgba() values, including the opacity value.  The newer browsers will read the second value in this statement:

#wrapper {
background: white;
background: rgba(255,255,255,.8);
}

The opacity value is a number between .01 to .99 – the larger the number, the more opaque the color.  Zero is no opacity (transparent) and 1 is opaque.

Opacity property

The opacity property also has the syntax opacity: value;.  The value can be any number in the range of 0 to 1 where 0 is totally transparent and 1 is opaque.  This property is great because is applies to images and entire containing elements!

<td style=”opacity: .1″>
<image src=”images/felix.jpg” alt=”felix the cat” />
</td>

You can give each cell its own opacity value using an inline style.  You can have elements on a page that are completely invisible by using the syntax visibility: value; with either hidden or visible for the value.  It still takes up the space although it is not visible.

Use the syntax display: none; if you want to remove an element from the flow entirely. Use display: block; to make it visible.

By default, block elements are however tall they need to be to contain their content.

So, this has been a great lesson for me and I hope it helps someone else down the road.

Christina Descalzo
Kennesaw State University – HTML5 & CSS3 Certified

HTML5 and CSS3 – Background Image Positions

It’s All Relative

ansley-1-25The viewport you view pages on comes in many sizes.  The viewport is not the page.  You have to scroll inside the viewport to see the entire page.   Setting up the clear difference is going to help understand how background images work.

Top left, top right, bottom left, bottom right and center center can apply to a div, or to the viewport.  You position things relative to either.  These positions apply to the viewport, or to the page.

Here are the values for background-image positions:

background-image: url(…), url(…);                 /* two images if you’d like */
background-attachment: value;                     /* scroll OR fixed which centers it in the viewport*/
background-position:  horizontal vertical;     /* replace horizontal with left, center or right – the vertical is optional – default is center, or specify top, center or bottom */
background-repeat: repeat or no-repeat or repeat-y or repeat-x;   /* default is top left for no-repeat */
background-size: width height; (unit of measure); OR auto; (maintain aspect ratio); OR cover; (no distortion sizes the image to fill the height and width, some clipping of the image will occur to avoid distorting the image); OR contain; (will have gaps around it to preserve proportion)  /* this is the file’s properties set in a unit of measure.  */

CSS3 multiple background images 

body {        /* Four corner images and one background image repeated */
background-image:
url (thefile/imagecorner1.png),
url (thefile/imagecorner2.png),
url (thefile/imagecorner3.png),
url (thefile/imagecorner4.png),
url (thefile/background.png);
/* Their positions followed by a comma */
top left,
top right,
bottom left,
bottom right,
top left;
/* How each repeats */
background-repeat:
no-repeat,
no-repeat,
no-repeat,
no-repeat,
repeat;
background-attachment: fixed;
background-color: #ff0072;
}
It all happens in the CSS….

The shorthand property – easy on the code, but doesn’t work in older browsers:

The syntax for the shorthand property to specify the different stylistic values on a single line using spaces to separate the values:

background: url (path) position / size repeat-style attachment color;   /* the syntax */

background: url (path) center / contain no-repeat fixed black;      /* an example */

Remember:

1.  the default size of an image is the actual size of the image as defined by the dimension in the image file.
2.  Default tiling is set to repeat in all directions.
3.  If you don’t specify the background-attachment file or have no content yet (which means the page has no height), center will put it at the top of the viewport in the center.
4.  You position images relative to the page OR to the viewport.  Background-attachment: fixed; along with background-position: center and no-repeat will contain the image in the center of the viewport – even if the page is empty.
5.  Get the perfect image background when you say background-position: left top; when used with background-size: cover, and the image size you’d like (ie., 1024 x 729) set in pixels at 72  pixels per inch (dpi).  You can set your styling and positioning anyway you’d like.  You can also set the opacity for images and I have covered that in my article Design with Color Control and Opacity.

Play with the different positions – that is how you will get good at it.

Christina Descalzo
Web Design and Development

How can you keep your clients happy?

524755_4649866659031_810800089_nUnderstanding what it is that your client is trying to portray is the first step in designing a website.  It is the same thing when you are on a photo shoot.  Once you understand your client, then you can move into his/her space and work toward giving them a product that is even better than they imagined.

Find out whose opinion matters and try to find out what they envision.  Work with them to prototype the look and feel with colors and font.  Let your client see how much work goes into this step of the design process.  It can be a time consuming task.  Imagery is as important as everything else you do.  Do they have images already or do you need to set up a photo shoot?  Let them in on the process and tell them what you need from them.  What do they dislike?  Find out their personal preferences.

Your clients should tell you about their competition, their business, and the future of their brand.

Stay in touch with your client throughout the process and let them know if your schedule includes a vacation which might make it hard for them to get in touch with you.  Let them know where you are at.  Be approachable and always be at ease.

Try meeting your clients at a relaxing location where you might enjoy having some coffee over your design discussions.

People remember when they felt comfortable with someone and they also remember when they weren’t too impressed.

Always be upbeat, even when you have to say “no”.  Explain why something you know won’t work and offer an alternative idea.  You will have to gauge each client and try to do the best you can.  Things like time limitations and difficult personalities are just part of the real world.  You have to deal with these things no matter what you do, and thank goodness most times it’s a really, really fun process.   Again, be upbeat even in the face of adversity – why not?  There will always be more happy clients.

I am always extremely happy to be challenged with a new project and I hope that my client picks up on that.   Together, we can make something awesome, modern, responsive and web 2.0.

Good Planning – The Secret to Developing a Great Website, Program, or Application

Good Planning is critical to the success of any project.  Start off a project by creating a simple purpose statement.  This is just a one sentence description of the problem that needs to be solved.  An example would be something like this:

“Our website will engage visitors to learn about the products we sell through great content and images, and ensure an easy purchase through our secure shopping cart.”

Just like submitting a screenplay to movie producers, you have to produce a one-sentence description summarizing the plot of the script.

This design is approved!

Approved!

Once you get a concise idea of what it is you are going to develop, you can then write a program specification (or spec) which is very detailed.  It forces you to think through a project from start to finish before you write a single line of code.  This is where you interview anyone with an opinion about the project happens.  Requiring your customer or employer to review and approve your spec before you start writing code will help to avoid errors, misunderstandings, and conflicts down the line.  It might include the history and what problems the program is intended to fix, what existing processes are being replaced (if any), what the program is expected to accomplish, and what benefits the new program will bring.

The program spec goes further in detail with important assumptions about the project, including the languages it will be written in, who will be the audience, what level of security is needed, who will be using the program, and perhaps what components might be divided up and to whom.  Of course, depending on the size of the project, it can be a few paragraphs or many pages.

The requirements part of the spec is the most important.  This is the painstaking, step-by-step detailed explanation of how the program will work and what it will look like. What is the overall feel, look and objective of the company?  What will the user be presented with and what will they need to provide, what information will they get, how the input is transformed to the output, how the information will be stored, how it will be retrieved, and what to do if there are problems.  This is also where you nail down imagery, font choice, color scheme, and layout.  List the information you need and the feedback you require and interview those individuals who will be giving the feedback.  Nailing down the design and function details is critical.  You don’t want this part of the process to drag on – which it can – but changes to the design or layout after you’ve started developing can become very problematic.

The importance of a detailed spec is what will determine the timeline and cost.  Depending on the project, you may need to set milestones.   Milestones are dates that you expect major pieces of the program to fall into place.  Give yourself plenty of leeway because things might not work out as expected, which can often be the case.  Milestones are great because they help the developer plan his/her work and monitor the timeline.  This can help with documenting any further changes beyond the agreed upon spec.  Unforeseen changes will affect the timeline and the overall cost of development.  This is a vital component for designers, developers or programmers.  Changes made to the agreed upon spec are fine as long as they are approved or there is appropriate compensation for changes affecting your scheduled timeline.  It is paramount that everyone with an opinion agrees to and understands the purpose of the spec and the timeline.  If you are a freelancer or contractor and find yourself in a position where a project is going longer than anticipated or agreed to without compensation, this can spell disaster.  This is serious business and your time and effort shouldn’t be dismissed.

You need to be thorough and keep your explanations simple and clear.  There is no right or wrong way to write a spec.  You are creating a blueprint that you and someone else can understand and work from.  Don’t leave anything open to misinterpretation.  Use graphics, illustrations, tables (wireframes) to clarify the details because you really don’t want to be derailed in the middle of the project after you’ve started writing the code.

An important thing to remember – your client or employer expects you to do the job you were hired for, and you expect them to trust your judgment and ability to do the agreed upon project as stated in the spec and timeline.  Any changes to the spec are pretty big issues and shouldn’t be taken lightly.  Respect is a two-way street.

If you write an accurate, detailed, and easy to understand program, application or design spec that your employer or client approves, your project will just about write itself.   Happy coding!

JavaScript polyfill for HTML5 and CSS3 (aka shim or shiv)

Modern Responsive and Responsible Design using HTML5, CSS3 and JavaScript

Web developers are commissioned to build websites for modern browsers today for every type of computer, including phones and tablets.  This is an exciting time to jump on board with a variety of developer tools and learn how to design for the future.  The problems arise when a designer looks at  the website with older Internet Explorer browsers including IE8, IE7 and especially, IE6 because  of the way they respond (or actually do not respond) to HTML5 and CSS3.  It is very important for web designers and developers to understand the problems and to figure out how to work around these issues.  We all want to build for the future, but lets not forget about the viewers who haven’t received the message about the rich internet experiences they can get from Chrome, Safari, Firefox, IE9, etc.

It is easy to forget when you have upgraded equipment and use Windows 7 and several Apple products used for development.

Of course IE9 is the default browser for Windows7 (which you have to purchase), but it also gives developers the ability to view websites in IE8, IE7 and IE6 by using the development tools found in the F12 console.  If you use Dreamweaver CS5.5 or CS6, you can also view your designs in the IE browsers as well as a variety of phones, tablets, Chrome, Safari, etc. by using the Adobe Browserlab developer tools console.

The PhoneGap framework allows developers to build apps and convert the web files into code that runs as a native app on the mobile operating system of your choice.  Dreamweaver comes with the PhoneGap kit and makes packaging apps and testing them simple.  You can compile and test Android, iPhone and iPad apps!

Mobile device development has challenges and opportunities.  Progressive enhancement using CSS3 and HTML5 allow leading designers to build a rich website for tomorrow’s browsers and devices while making sure the older browsers are rendering presentable and enjoyable pages.    It is not enough that a website designer can use Dreamweaver (or any CMS for that matter) to design websites but never look at the code.  The magic is in the code.  The days of copying and pasting are over if you expect to build unique, customized websites.  You have to know what issues surround the different browsers and fix problems as they arise.

 There are two JavaScript codes that have been crafted to help developers work around the Internet Explorer problems.  

1.  A fast & lightweight polyfill for min/max-width CSS3 Media Queries (for IE 6-8, and more).  Here is the link:  https://github.com/scottjehl/Respond.  It works like a charm.

  • Copyright 2011: Scott Jehl, scottjehl.com
  • Dual licensed under the MIT or GPL Version 2 licenses.

The goal of this script is to provide a fast and lightweight (3kb minified / 1kb gzipped) script to enable responsive web designs in browsers that don’t support CSS3 Media Queries – in particular, Internet Explorer 8 and under. It’s written in such a way that it will probably patch support for other non-supporting browsers as well (more information on that soon).

If you’re unfamiliar with the concepts surrounding Responsive Web Design, you can read up here and also here.

Demo page (the colors change to show media queries working)

2.  A frequently used common method is to use the shiv:
<!–[if lt IE 9]> <script src=”html5shiv.js”></script> <![endif]–>
To use this script, download the html5shiv and roll it in to your own code (ideally minified).

Full original, uncompressed source available here: https://github.com/aFarkas/html5shiv

This source code adds new HTML5 elements (which is simple code), but also supports printing HTML5 elements and includes the default styles for HTML5 elements, like block on article and section.

Getting it to work in the browser was easy, @jon_neal and afarkas made IE actually print HTML5 elements – these guys are to take all the credit. Please take a moment to thank them!

Whichever one you use must be included  in the <head> of your file but doesn’t matter if it appears before or after the CSS – but for the sake of performance, it would make better sense to include the CSS first then this script.  Of course, you have to upload the file with your website, or refer the code to an outside source.

shiv or shim?

Common question: what’s the difference between the html5shim and the html5shivAnswer: nothing, one has an m and one has a v – that’s it.  It’s all just polyfill.

What is Responsive Web Design?

Modern web design has gone to a whole new level and thank goodness the look is all about simplicity. Designing a simple looking fluid website is not easy, but web developers have to catch this wave because it is now the future.  Gone are the days of the static websites that try hard to look to same in every browser.  They should look different in differing devices!

Why not have your site look great on a phone?  It doesn’t have to be too tiny to read.  Additionally, as more and more people use tablets – this is yet another easy-to-design-for device.  Keep the navigation down on these devices – this is a tested and a proven usability issue.  No one want to flail around navigation.  Keeping it simple has never looked so good.

Think in terms of a page layout built for tomorrow.  That is what a modern website developer does.  The developer creates a website that is optimized for each platform, both in navigation, readability and load time, a.k.a., the user experience.  The modern website is appealing because of how it functions and how simple it looks.  Simplicity is where it’s at right now because we are bombarded with information and keeping it simple is like a little zen for your site.

If you respect the process for progressive enhancement,  reach for building websites that offer a great user experience by ensuring websites have been built that can be responsive and scale to all various devices.  Your website should be built on a solid foundation of the newest, cleanest code which will ensure people can view your site in other languages and people with disabilities will be able to make any adjustments available to them, such as speech recognition and the ability to have websites read to them.  Technology has really come a long way for anyone who has a visual impairment, can’t type, or several other disabilities that are being overcome due to the latest code and technology.

Modern websites should be viewed in modern browsers for the best experience. Everyone should keep their browsers updated – it’s free and makes all the difference in the internet world.  Unfortunately, you have to buy Windows 7 which offers up the latest Internet Explorer, but it’s worth it.  If you can’t get that right now, Chrome, Firefox and many modern browsers are free and have great tools.  I recommend avoiding Internet Explorer 8 and below.  It’s just not that great of an experience and you don’t have to suffer! You just don’t!

Here’s looking to the future.  What’s next?