16 Jul 2013
Off
View Post
19 Examples of Minimalistic Web Designs

19 Examples of Minimalistic Web Designs

16 July, 2013 | Comments Closed | , ,

Minimal websites, when properly designed, are always inspiring. It is always interesting to see how designers approach the minimalistic point of view to create websites that are simple yet effective. Today we gathered some examples of minimalistic web designs to inspire you and to reinforce that you don’t need a lot of elements to deliver a concise website. Check out the examples we have here and share with us in the comments area minimal sites you’ve created.

Mixd

19 Examples of Minimalistic Web Designs

Whole Design Studios

19 Examples of Minimalistic Web Designs

Chris Wilhite Design

19 Examples of Minimalistic Web Designs

Cyclemon

19 Examples of Minimalistic Web Designs

The Gold of the Andes

19 Examples of Minimalistic Web Designs

PH Digital Labs

19 Examples of Minimalistic Web Designs

Manuel Moreale

19 Examples of Minimalistic Web Designs

Nicolas Tarier

19 Examples of Minimalistic Web Designs

Oxydo

19 Examples of Minimalistic Web Designs

Dodge & Burn

19 Examples of Minimalistic Web Designs

Derek Boateng

19 Examples of Minimalistic Web Designs

iErnest

19 Examples of Minimalistic Web Designs

Studio Faculty

19 Examples of Minimalistic Web Designs

Exponent PR

19 Examples of Minimalistic Web Designs

Dickson Fong

19 Examples of Minimalistic Web Designs

Made Together

19 Examples of Minimalistic Web Designs

Aesthetic Invention

19 Examples of Minimalistic Web Designs

Hatch Inc.

19 Examples of Minimalistic Web Designs

Ghostly Ferns

19 Examples of Minimalistic Web Designs

 

Source: http://webdesignledger.com/inspiration/19-examples-of-minimalistic-web-designs

27 Jun 2013
Off
View Post
How to Get Your Web Development Projects Off to a Good Start

How to Get Your Web Development Projects Off to a Good Start

27 June, 2013 | Comments Closed | ,

If you’re anything like my team, you probably want to dive right in head first into a web development project as soon as you possibly can. Because we love our jobs — we’re all very passionate about it.

We’re eager to get started without having to deal with the “boring parts” and we have a laser-beam focus towards the more enjoyable, fun aspects of web development — coding, setting up servers, designing the user interface, you know, the good stuff.

 

Early in my web development agency’s history, this is how we worked: The moment we returned from a project’s contract signing, Photoshop would fly open, databases would be fumbled together, and code would be quickly written. We couldn’t wait to get started with production.

And when that happens, proper planning goes out the window.

The result of insufficient planning and coordination? A project of any size and scope, big or small, ended up becoming a mess quite quickly.

The Secret to a Good Start: Project Kickoff Meetings

To get web development projects off to a good start, we now realize that effective kickoff meetingsare essential.

What is a Kickoff Meeting?

An important component of planning your web development project is the kickoff meeting.

The project kickoff meeting is the initial meeting consisting of the project’s team and the client/decision-makers. It involves getting your team and all the decision-makers in a room to hash out the details about the project.

This meeting is important to web development projects because:

  • It familiarizes all the individuals involved in the project with each other
  • It extracts important details from the appropriate individuals to avoid information silos
  • It gives everyone clarity about the core objectives of the project
  • It gets everyone on the same page
  • It promotes active communication lines
  • It gets the project off to a great start

Let me share with you how I prepare and conduct my company’s web development project kickoff meetings. I promise that you and your client will have a better experience and will come out with a better product if you install a good kickoff meeting as part of your web development process.

The Project Kickoff Meeting Outline

Here is a brief digest of our project kickoff meeting structure:

I’ll discuss each of these items below.

Before The Kickoff Meeting

I suggest having a template for your kickoff meetings to promote efficiency and to ensure that you get the most value out of the meeting.

It’s nice to have a template guiding you for all the things you’re going to need from the client. You can print your template and then immediately start filling it up with information you already know well before the meeting’s date.

If you do several types of development (e.g. mobile app development, web app development, e-commerce site development, etc.) you may have to create a few different versions of your kickoff meeting template.

To help you get started, you can download my kickoff meeting template for web development projects. It’s a 7-page PDF document. It’s simple, but it serves as a fantastic way to start your projects off. You can look over this template and see exactly what you’ll need.

Be sure and read through the template and add to it based on your own business processes, workflow, and custom requirements.

Gather Basic Internal Information

The first thing you should do before getting everyone together for the kickoff meeting is to gather basic information about the project.

On your end, write down basic project details such as:

  • The project’s primary goals
  • Your project manager’s contact information
  • Secondary contact’s information in case the project manager is unavailable

Gather Basic Client Information

We are going to need technical information from the client such as server info, domain information, analytics data, previous SEO campaigns, and so forth.

Give your client a chance to get some of their information together before your kickoff meeting and send them a quick worksheet to fill out plenty of time before your first kickoff meeting sit down.

If enough time is given (1 week is enough time in my experience) it’s a good litmus test on how responsive and communicative your client is going to be throughout the web development project. Of course, this isn’t always guaranteed, but I like to use it as an indicator.

You should now be ready for the kickoff meeting after this.

Before getting into the specifics of the kickoff meeting, I’d like to first share some basic tips about meetings in general.

Fundamental Kickoff Meeting Tips

Your project kickoff meeting is an exciting time. Deposits have been paid, and the client is ready to get started on their project ASAP.

I find the more prepared I am for the kickoff meeting, the more likely the client will follow my lead and trust my judgment during the meeting as well as throughout the lifecycle of the project.

So, how can we guarantee a great kickoff meeting planning session?

Limit the Number of Attendants

Early in my career, I was working on a project for the board of education for a county near my hometown. We had just won the job and I was told the client’s team was coming into the office to meet with our staff.

When it was time for the meeting, ten people attended. That translated to ten opinions, ten people interrupting one another, ten potential bathroom breaks — ten cooks in the kitchen spoiling the broth.

It was a nightmare and we accomplished nothing but frustrating our brand new client.

When scheduling your first meeting, be sure to indicate that only the decision maker needs to attend. And if ten people make the decision, put your boots on and start walking because you should have never accepted the project under those terms.

I would suggest one or two people max come to your kickoff meeting. You will get more done, have less interruption, and have one or two people accountable for deliverables you will be requesting. Guess what? The finger pointing just got reduced as well.

State the Intended Results and Outcome

Open your meeting with what you’ll be going over, and what the client will be walking away with.

Setting expectations is something you should try to do every time you meet with a client to maintain efficiency and to show that you take their time seriously.

Most importantly, they will understand why they are meeting and be in the right mental state for your chat.

The Kickoff Meeting

Here is my meeting structure for kickoff meetings.

As you work through the meeting structure, you should be assigning responsibilities to your client and to your team.

After each task assignment, you should be asking the person being assigned the task, “When can you have that by?”

What I typically do is have a calendar nearby and I give them a little more time than they suggest. Typically, the client is eager to please and is sometimes unrealistic. Give them a little more time if you can spare it.

I do gently remind clients that if their deliverable is late, all dates are pushed back and we typically will charge extra unless given 15 days notice. It’s harsh, but it keeps people accountable and, in the end, makes them a happier customer because their project is on time.

In general, a good kickoff meeting can be accomplished in 2 hours.

Scope and Goal Review

I like to start my kickoff meeting like a thesis statement in a scientific paper: I state the primary goal of the project and provide a brief summary.

The SMARTer the primary goal, the better. For example, depending on the scale of the project, it might even be as specific as: “The goal of the project is to drive traffic to the site’s contact formand have users fill it out.”

Then I review the scope of work that has been signed by the client. This allows you to set the stage and confirm what it is you are building, while refreshing everyone on what the project is all about.

Mechanical

Get the server, email, and analytics information out of the way early. You don’t want to be two weeks away from launch and have to set up a server.

Technical

Your technical discussion will absolutely take the most of the time.

This portion defines the project and you may need more than just the half sheet of space so have some scrap paper ready.

What you ultimately want to walk away with are three important pieces of information that everyone should agree on:

  • What are the primary and secondary goals of the project?
  • What do we want people to do?
  • What features will the project have to support these goals?

Copy and Media

Content, imagery, and rich media (like videos) is a subject neglected in a lot in planning meetings, but it’s one of the most expensive and time-consuming things to produce so it should be covered as soon as possible.

For example, most companies that I work with that produce video don’t do it quickly or cheaply. Get the ball rolling early on any video production needed, as well as reinforce who is purchasing any needed stock photography (it was in your contract right?).

Aesthetic

The look and feel of a site is tough to nail down.

Early in my career, the conversation usually went something like this: “How did you envision your site looking?” That question would be followed by the client mentioning five of their competitors’ websites — all which would typically looked horrible.

You are the professional. You know what looks good and what doesn’t.

Instead of having them start and govern the conversation about the look-and-feel of the website project, ask them a few questions about how they want their site to feel and the general style. They hired you to figure out the rest.

Release

When and how a site will launch seems like an obvious thing you will want to establish as soon as possible. The “when” is usually covered by the contract, but the “how” is sometimes forgotten.

Will there be a beta testing period prior to launch? How about slowly rolling it out to gain interest and test the load on our servers? These are some things to cover in the kickoff meeting.

Support and Revisions

This is a great discussion that can potentially generate recurring revenue for your company.

How do they plan on updating the site after it has launched? What if the web server crashes? What about additional features? What happens if a great idea comes up in the middle of the project that requires augmenting the original scope of work — how do we deal with that?

Marketing

What type of marketing materials need to be prepared for this project? Do social media accounts need to be set up? What about traditional marketing methods? Do any parts of the marketing campaign need assets from our creative department? When and how should these efforts go live?

Review

By this time, your customer (and you) are probably exhausted, but it’s a good exercise to quickly run through the deliverables, due dates, and a summary of the key points discussed in the kickoff meeting.

After the Kickoff Meeting

After the client has left, what I typically do is I will punch in the due dates into our project management software (we use activeCollab).

Then I’ll run a quick report. I’ll send the report to the client via email as a reminder of the things we’ve discussed, along with a note thanking them for the time they have invested into the kickoff meeting.

Source: http://sixrevisions.com/project-management/web-development-kickoff-meeting/

27 Jun 2013
Off
View Post
How to Create Websites Without Learning to Code

How to Create Websites Without Learning to Code

27 June, 2013 | Comments Closed | , , , ,

In May, Scroll Kit, a New York-based startup that lets users create websites without learning a single line of code, attempted to showcase its skills by recreating The New York Times‘Snow Fall, an interactive multimedia report.

Scroll Kit recreated the experience, and said it took only an hour to make. However, The Times eventually asked co-founders Cody Brown and Kate Ray to take down the replica, citing copyright violations.

“We thought it was something [The New York Times] would see as an homage,” Brown explained.

After The New York Times also requested that Brown and Ray remove any mention to Snow Fall from their website, Brown refused, saying their statement on the site reflected a true fact. Despite the legal confrontations, Brown said the incident helped gain a lot of interest and buzz for Scroll Kit.

“The responses were pretty amazing,” he said. “A lot of people wanted to learn about Scroll Kit.”

The startup, which was introduced in 2012 at the New York Tech Meetup, ultimately aims to make the web more accessible. Brown, who has a background in filmmaking, said he and Ray “wanted to enable a new kind of workflow for creating webpages” and facilitate the creative process for those looking to express themselves online.

scrollkit screenshot

Image courtesy of Scroll Kit

“Lots of people are very visually creative,” Brown said, citing Scroll Kit as a solution for many who may have been deterred in the past by their lack of HTML or CSS knowledge.

“The major difference [between Scroll Kit and other web hosts] is that you can start a page or an idea without necessarily knowing where you’re going to end up,” he added.

Scroll Kit allows you to insert images and videos, animate elements on the page, add shapes, change colors, insert links and more. Elements can be moved around, altered or deleted with the click of a mouse. The finished code can then be exported and plugged into hosts such as WordPress.

This freedom of creation is an important aspect of Scroll Kit, Brown said. “You can include so much interactive media, which makes [Scroll Kit] a powerful way to tell a story on the web.”

Ultimately, Brown hopes that the startup’s expansion will make online storytelling easier.

“In normal cases, publishing content on the web for many people feels like filling out forms,” he said, referring to the seemingly formulaic nature of coding. “We want to have more people create more handcrafted stories.”

Currently, Scroll Kit is completely free for personal use, while publishers can access special features for a fee. Voice of San Diego and Public Radio International are among those who have used Scroll Kit for projects.

Source: http://mashable.com/2013/06/26/create-websites-without-code-scroll-kit/

30 May 2013
Off
View Post
The State Of Responsive Web Design

The State Of Responsive Web Design

30 May, 2013 | Comments Closed | , ,

Responsive Web design has been around for some years now, and it was a hot topic in 2012. Many well-known people such as Brad Frost and Luke Wroblewski have a lot of experience with it and have helped us make huge improvements in the field. But there’s still a whole lot to do.

In this article, we will look at what is currently possible, what will be possible in the future using what are not yet standardized properties (such as CSS Level 4 and HTML5 APIS), and what still needs to be improved. This article is not exhaustive, and we won’t go deep into each technique, but you’ll have enough links and knowledge to explore further by yourself.

The State Of Images In Responsive Web Design

What better aspect of responsive Web design to start off with than images? This has been a major topic for a little while now. It got more and more important with the arrival of all of the high-density screens. By high density, I mean screens with a pixel ratio higher than 2; Apple calls these Retina devices, and Google calls them XHDPI. In responsive Web design, images come with two big related challenges: size and performance.

Most designers like pixel perfection, but “normal”-sized images on high-density devices look pixelated and blurry. Simply serving double-sized images to high-density devices might be tempting, right? But that would create a performance problem. Double-sized images would take more time to load. Users of high-density devices might not have the bandwidth necessary to download those images. Also, depending on which country the user lives in, bandwidth can be pretty costly.

The second problem affects smaller devices: why should a mobile device have to download a 750-pixel image when it only needs a 300-pixel one? And do we have a way to crop images so that small-device users can focus on what is important in them?

TWO MARKUP SOLUTIONS: THE <PICTURE> ELEMENT AND THE SRCSET ATTRIBUTE

A first step in solving the challenge of responsive images is to change the markup of embedded images on an HTML page.

The Responsive Images Community Group supports a proposal for a new, more flexible element, the <picture> element. The concept is to use the now well-known media queries to serve different images to different devices. Thus, smaller devices would get smaller images. It works a bit like the markup for video, but with different images being referred to in the source element.

The code in the proposed specification looks like this :

<picture width="500"  height="500">     
  <source  media="(min-width: 45em)" src="large.jpg">
  <source  media="(min-width: 18em)" src="med.jpg">
  <source  src="small.jpg">
  <img  src="small.jpg" alt="">
  <p>Accessible  text</p>
</picture>

If providing different sources is possible, then we could also imagine providing different crops of an image to focus on what’s important for smaller devices. The W3C’s “Art Direction” use case shows a nice example of what could be done.

For the full article, go to: http://mobile.smashingmagazine.com/2013/05/29/the-state-of-responsive-web-design/

23 May 2013
Off

30 Quick Ideas To Make Your Website Look Nicer

23 May, 2013 | Comments Closed | , , , , , ,

As we launch newer projects, it is easy to forget about updating older blogs and websites. In this article I want to present 30 solid ideas you can quickly implement to make your website just that much more user-friendly. Not all of them are based solely on front-end design. I will also discuss popular HTML5 coding techniques which can help web parsers and spiders to categorize your data appropriately.

Not every website will need to be updated, and not with every technique available in this post. These ideas are here to get developers thinking in terms of design and how to make websites look prettier. It’s now easier than ever before to build scalable responsive website layouts which look good on any digital screen, so let’s get to down to sprucing up our sites.

1. UX Testing

I am guilty of not always running tests on my website launches, but whenever possible this is one of my favorite activities. You can learn so much about typical user interactions by studying how they play with your website. User experience studies may be conducted solely through tools like Google Analytics, or using other 3rd party resources.

custom UX team design meeting board room

The potential benefits you can find are enormous. User experience testing is helpful for web developers to learn which areas of their website are annoying, broken, or could be improved. Consider using not only digital tools but also your friends and colleagues. Listening to some real human feedback on your website may provide results you couldn’t get through a computer screen.

Read Also: Useful Web Usability Testing Tools

2. Whitespace

We can think of whitespace as the amount of room between elements in your page. Some users will not mind a cramped layout if they are already accustomed to this. But consider your target audience, and consider how many of them are not as computer literate as the younger generation.

You may determine areas which need extra spacing through split A/B Tests and retaining user feedback. Or just wing it and see what you can come up with!

Also Read: 100+ Clean, Simple and Minimalist Website Designs

3. Web Fonts

Dynamic web fonts allow designers to build webpages without being restricted to the typical font families. This trend has become increasingly popular now that most average Internet users are on a decent DSL/T1/Fiber-Optic connection. Including references to 3rd party font stylesheets will no longer produce major lag in your DL speeds.

Google Web Fonts homepage screenshot preview

Quite possibly the best provider of fonts is through Google Webfonts. You can access the application even if you do not have a Google Account, although there are perks to registering. The full setup process takes only 3 steps and you can have custom Google fonts running on your website within minutes.

4. CSS3 Shadows

When I’m talking about using shadows to improve your layout I am actually referencing two distinct properties. The ever popular box-shadow is really cool for divs and boxes within your layout. Appending this effect onto your container, wrapper, or inner page boxes will provide a slimming 3-D effect to your webpage.

Also Read: 10 Creative Techniques Using CSS3 Box Shadow

But it is also worth considering the CSS3 text-shadow property for typography which jumps off the page. Apple is one of the first companies to heavily implement text shadows all around their layout. You can build a daunting effect by adding text shadows which are opposite the color of your fonts (white shadows for dark text, black shadows for light text).

5. Textures & Repeating Patterns

There are plenty of websites which can get by just using standard color schemes. But to have your website really stand out from the crowd you may consider adding textures and repeating tiles into your background. One of the coolest free webapps is Noise Texture Generator which can run on any browser.

Subtle Patterns website design layout thumbnails

Just choose the BG color and amount of noise you want to use, then this app will create a tiled background image dynamically. If you’re looking for patterns and tiles then I would recommendSubtle Patterns. They have a huge collection of usable textures which you can download for free.

6. CSS3 Gradient Backgrounds

While we’re discussing backgrounds I should bring up the ever-popular CSS3 gradients. These provide web developers with an enormous benefit keeping them out of Adobe Photoshop for web backgrounds. And these gradients can work on more than just the body, applied onto navigation bars and footers and other important areas in your layout.

Recommended Reading: CSS3 Linear, Circular, Elliptical and Repeating Gradients

7. Boostrap

Twitter’s Bootstrap is quite possibly the greatest frontend UI framework for web developers. This includes buttons, form inputs, links, columns, and tons of other pre-formatted page objects. The most common use for Bootstrap is within landing pages for new applications.

But open source developers also utilize Bootstrap when building demo pages for the libraries, plugins, or mini scripts they publish.

Twitter Bootstrap Github entry screenshot

I feel that Bootstrap has grown to such a massive extent that it may be applied into any website these days. However developers who find the greatest benefit are using Bootstrap as a quick replacement for rolling out their own UI designs. Consider this frontend library the next time you are launching a webpage with a single concrete purpose: landing page, product demo, mobile app website, etc.

Related:

8. HTML5 Kickstart

Most web developers have yet to hear about HTML5 Kickstart created by 99Lime. This is another frontend UI library which focuses more on nice design aesthetics than common HTML5 layouts. But there are code samples for generating both in spades. You can choose from sets of predetermined elements like gradient buttons and dropdown menus. I wouldn’t say this has the same popularity as Bootstrap, but then again what does?

HTML5 Kickstart 99Lime homepage open source screenshot

If you have the time and patience I would recommend just giving this library a quick test run. Build a small sandbox layout and see if you enjoy the default feeling off each UI element. Kickstart is certainly not for every project, but it can be a major time-saver when caught in a bind.

9. JQuery UI

Animations and sliders and fading elements are usually running off the jQuery library. This is the most common open source JavaScript library for frontend developers, but it also has a companion library jQuery UI. Developers overlook this, thinking it cannot provide very much in return for the extra KB.

But including the UI library means you can update the easing call for any dynamic page animations. This means you may customize the jQuery animation type for any dropdown menus, fading items, scrolling slideshows, and everything else dynamic.

The jQueryUI website has an easing demo page where you can test out the many variations and see if you like any specific animation types.

Related:

10. Extravagant BG Photos

There are countless websites nowadays which have utilized the fullscreen background image effect. If you can find a high-resolution photo sample which would look good as a background image, then this technique may be worth adding into your layout. Large backgrounds do an excellent job of catching your user’s attention while also implying the genre of your website.

jQuery Backstretch plugin homepage screenshot

If you’re looking for a quick solution check out the jQuery Backstretch plugin. This only requires a single line of code for your new backgrounds to scale properly and responsively using any resolution. But for developers who are against JavaScript methods I recommend the CSS3 fullpage image technique posted on CSS-Tricks.

11. Menu Icons

To draw more attention from visitors it may be worthwhile to include a small icon set in your webpage. Standard menu links are often enough to function properly and help users navigate between pages. However I am often impressed to see customized icons designed for each menu link. You can find tons of free icon sets which would look perfect in your top navigation, sidebar, or footer area.

12. Updated Color Scheme

I do not actually mean changing your overall color scheme design, but more like appending new colors into it. After running the same layout for months after months it is nice to update smaller areas and catch repeat visitors by surprise. Some items of interest may include anchor links, headers, backgrounds, and toolbars. Consider using online tools such as Color Scheme Designer to improve your trajectory.

updated fresh looking color wheel scheme picker webapp

Recommended Reading: Basics Behind Color Theory for Web Designer

13. Enhanced Browser Support

It is difficult to build a website which is fully supported by all the major legacy browsers. Although very few people are running Internet Explorer 6 it still shows up in a few of my Google Analytics reports. Developers who are looking for ideas may consider doing a small trial of browser tests.

IETester program software debugging Internet Explorer layouts

The more important mainstream browsers include the latest release of IE9, Mozilla Firefox, Opera, Chrome, Safari, and possibly Camino/SeaMonkey. But Internet Explorer 6-8 are also still widely used among businesses and older computer labs. You may run quick rendering tests using the IETester software. Similarly IE8 has a developers tool mode where you can switch into older rendering engines for debugging.

14. Fitted Typography

You may find that your old layouts are still utilizing text styles efficiently, but this isn’t always the case. I feel that large typography will fit into layouts a lot easier. Not to mention it is easier to read and will take up more space on larger screen resolutions.

The idea of “fitted typography” is styling text so that it fits snug in your website. You can go through a few pages and update these styles in 10-15 minutes.

Recommended Reading: Showcase of Web Designs with Beautiful Typography

15. Social Media Sharing

By now I am sure most developers are familiar with the sharing badges used in popular social networking websites. Facebook, Twitter, Reddit, Pinterest, Dzone, and many other external networks provide codes you can embed into your website. Then visitors may share your link onto these networks without needing to leave your website.

On some blogs or web magazines you’ll notice these badges will follow you scrolling down the page. This is an excellent technique since you can often have them hovering just outside the body area where they are not blocking any important content. I also recommend browsing our post on social media toolbars which can have a similar effect.

16. User Discussion

If you are running a CMS like WordPress or Drupal then you have the ability to include comment forms by default. However when creating static webpages you would need to setup your own database system to mimic this functionality. But with the rise in open source technology developers may now implement better solutions such as Disqus.

Disqus comments system homepage screenshot

Using this method you are not constantly dealing with cleaning up spam and junk from the discussion area. Users who do not already have a Disqus account may quickly connect using popular social networking profiles, or signup right from your page. Even WordPress users who are sick of Akismet may switch using the Disqus Comment System plugin.

Recommended Reading: Top 3rd Party Commenting Systems – Reviewed

17. Widen The Footer Area

Most smaller website layouts will be very conservative with the bottom footer section. This may include some basic copyright info and a few main page links. But modern web design trends support the idea of big footers with lots of meta links.

These are commonly seen in startups and big company websites with lots of additional information. Certainly don’t try forcing this into a layout where it doesn’t belong, however it is worth some contemplation if opening up a bigger footer area may improve your website experience.

18. Responsify Images

Dynamic fluid and responsive webpage images have become a trend in themselves. It’s now almost ludicrous to still have your images set at fixed widths, breaking out of the container wrapper as windows are resized. The most common technique is to apply width: 100% using CSS on all img elements.

Responsive Image Plugin jQuery open source download

But you may also consider some other open source methods which may prove useful in a bind.ResponsiveImg is one such jQuery plugin with a very small file size. Just include this into your page and run the single-line code targeting all images on the page. This is an excellent addition to mobile layouts which are still using desktop-based content.

19. Menu Accessibility

I wouldn’t say this is something you should constantly be trying to update in your layouts but it is something that developers and designers do not get right the first time around. I feel it is worth looking back at your navigation systems and brainstorming if there are any better ways to implement sub-menu links.

Sidebars and content areas will often hold accordion menus since there is enough room vertically. But think about horizontal navigation bars with dropdown menus or sliding sub-menus. As long as your menu links are quick and easy to access, there shouldn’t be any problems among your userbase.

Recommended Reading: Coding A Graceful Breadcrumb Navigation Menu In CSS3

20. Semantic Microformats/Microdata

Microformats and the newer Microdata specification are used to extend metadata inside your HTML code. These attributes provide extra information about your content and how it relates to other content on the page. And ultimately these results help Google determine your website’s rank for individual keywords, and within other engines such as Image and Video search.

Microformats homepage documentation website layout

The most notably supported documented version of Microdata is called Schema.org. Their website provides all the information you will need to go back and edit your HTML content with semantic schema markup. This Schema syntax is backed and supported by all the major search engines, and will likely evolve into the future of semantic metadata design.

21. Rearranging Nav Links

For some websites, running on fixed content navigation may not be a real problem. But I have found in some larger business websites or portfolios that certain navigation links are given too much precedence. And similarly there are some items which can rarely be found! Take the time to browse your website and behave as if you were any other visitor.

Consider which links you are most interested in, and possibly any links which you’d like to see added. These may include a brief history of your website, information about the team, contact details, privacy concerns, press releases, etc. It may also help to gather user feedback and see if there arecorrelations between their wishes and demand for new or updated pages.

22. Back To Top Link

If your website publishes very long pages of content then this is a must-have element in your layout. The scrolling Back to Top links can be found almost everywhere these days. Users don’t think to hit the Home key and it can be annoying scrolling all the way back up. The best location for this link is floating alongside your container, or seated right in the footer as we have implemented on Hongkiat.

Hongkiat webpage layout footer back to top link

23. Customize Code/Pre Tags

When first creating a website stylesheet many developers will overlook the typical page elements. Headers and paragraphs are very common, but what about pre tags or inline code tags? These are used to encapsulate preformatted source code syntax like you would see in a text/NFO file. Some websites have no need for these elements, but it is still considered good practice to have them styled just in case.

24. Adding Image Width/Height Attributes

Now this task could easily take a while, depending on how many images you would have to go through. But if you find images in your website without a defined width/height it may be worth updating them.

Typically images lacking these attributes will display as a 1×1 px square before loading in full. This will cause your webpages and scrollbar to jump as new images are loaded. Again this won’t be helpful for everybody, but it is worth noting as a quick fixer in some cases. And there are still CSS techniques for responsive images using fixed attributes.

25. JavaScript Notifications

Any developer who has worked in JavaScript knows about the typical dialog boxes. You can setup an alert box which offers the user an OK button, just displaying information. But there are also confirmation alerts with yes/no buttons along with the prompt box which asks for user input.

open source js JavaScript library codes

All of these may be customized using alertify.js. This is a very small open source library for designing your own frontend alert boxes. It is very quick to setup and easy to customize if you need to match your own CSS styles.

26. Responsive Media Queries

This may not seem like a quick bit of code to add, however it really doesn’t take much time at all. Responsive queries can be added into your existing stylesheet or added into a new responsive.cssdocument. Either way you can quickly setup recurring styles to handle various display sizes from monitors, tablets, and smartphones.

dark iPhone 4S mobile safari responsive website layout

Responsive queries do not always need to fully responsify your layout. Sometimes these may just hide bits of content, such as your elongated sidebar or larger footer. You could then display a fully responsive mini footer which is originally hidden in the desktop layout. You can learn more about media queries in our collection of responsive web tutorials.

27. Affiliate Links

There will always be similar websites online building content related to your field. There are very rarely new ideas being created; most of them are offshoots and parodies from existing content. But instead of turning the web into a competition why not create a friendly atmosphere? If you have the extra space in your layout send out a few e-mails to related websites in your niche (search Google) asking to affiliate.

You can exchange links and help bring each other traffic. This opens doors for new users to find your website a lot quicker, and to see that you are included within the community of other websites as well. Plus gaining backlinks from websites with authority in Google can only help your domain’s credibility.

28. Icon-Based Fonts

Recently I was reading an article on 24ways which discussed icon fonts and data attributes. This got me thinking about the future of web design and how HTML/CSS has dramatically affected frontend coding. Icon-based fonts are perfect for a number of reasons including navigation menus, ordered/unordered lists, and even basic page content.

Icon Fonts are Awesome article CSS-Tricks website

Many of these fonts can be quickly added into your website using @font-face. This means you don’t need to rely on a 3rd party service like Typekit for hosting your fonts. It also means a more semantic design style rather than just using PNG icons.

29. Image Box Shadows

If you want to keep visitors on your page longer then you need to offer some real quality content. This may already be the case for your website, however if your styles are bland then people will look elsewhere. Atmosphere and aesthetics are huge in good web design.

I recommend building a quick image class which wraps a border around your page images. This may include a small box shadow along with borders and padding, too. Anything to help your images jump off the screen and stand out in the paragraphs of text.

Recommended Reading: 10 Creative Techniques Using CSS3 Box Shadow

30. Alternate Stylesheets

Consider all the various media styles you have to include when building a single website layout. This would have to look good on desktop monitors, laptops, tablets and possibly even smartphones. And don’t forget projection and print media, which is not always supported.

If you have a large audience who uses these obscure types of media, I recommend styling your own alternate stylesheets. These can be labeled based on the media type such as print.css, or added into your existing stylesheets. If there is enough demand then your visitors will be eternally grateful. And it honestly doesn’t take a whole lot of time to edit your default website layout for common printers.

Final Thoughts

Creative designers and especially frontend web developers will hopefully find some useful techniques among this list. Most of these ideas shouldn’t take more than 1-2 hours to implement, while many can be be accomplished in as little as 15-30 minutes.

Reevaluating your website layouts and updating with new trends from time-to-time is often a good idea especially with newer releases of CSS3 properties which allow native browser shadows, animations, and rounded corners. This is an excellent collection of ideas worth a glance if you are in need of some quick updates.

Source: http://www.hongkiat.com/blog/ideas-to-nicer-websites/

22 May 2013
Off

Migrating A Website To WordPress Is Easier Than You Think

22 May, 2013 | Comments Closed | , , ,

Now powering over 17% of the Web, WordPress is increasingly becoming the content management system (CMS) of choice for the average user. But what about websites built with an outdated CMS or without a CMS at all? Does moving to WordPress mean starting over and losing all the time, energy and money put into the current website? Nope!

Migrating a website (including the design) over to WordPress is actually easier than you might think. In this guide, we’ll outline the migration process and work through the steps with a sample project. We’ll also cover some of the challenges you might encounter and review the solutions.

About This Guide

Before we get to work, let’s establish some context. First, this guide was written primarily with beginners in mind and will be most helpful for basic websites. Some of you will likely encounter advanced aspects of WordPress migration, but they are beyond the scope of this guide. If you’re tackling an advanced migration and get stuck, feel free to share your difficulty in the comments below.

OBJECTIVES

The objective of this guide is to help you with the following:

  • Plan an effective migration to WordPress.
  • Walk through the technical steps involved in migrating.
  • Get ideas and resources to solve common migration challenges.

ASSUMPTIONS

I assume you have basic familiarity with WordPress. Previous development experience with WordPress would be helpful, but not necessary. I also assume you have an existing website and design that you want to migrate to WordPress.

BASIC STEPS

Here are the basic steps that I recommend you follow for a typical WordPress migration:

  1. Evaluate website.
    Work carefully through the pages on your existing website, identifying all of the types of content (standard pages, photo galleries, resource pages, etc.) and noting any areas that need special attention.
  2. Set up environment.
    Set up WordPress and get ready to import.
  3. Import content.
    Bring over and organize your content, whether via an importing tool, manual entry (for a small amount, when no tool is available) or a custom importing process.
  4. Migrate design.
    Incorporate your existing design into a custom WordPress theme.
  5. Review website, go live.
    Carefully review the import, making adjustments where needed, set up any URL redirects, and then go live.

With this outline in mind, let’s work through each step in detail.

For more check the orignal article on Smashing Magazine: http://wp.smashingmagazine.com/2013/05/15/migrate-existing-website-to-wordpress/