Advertisement
Latest Posts
  • Web Design
    Javascript
    Responsive Design, Retina Images and Debugging for Google Maps APIGoogle map rwd retina
    This final part of the Google Maps API For Designers series rounds things up by looking at responsive design, retina images and a range of testing and debugging tools which make life a lot easier.  It gives a whistle-stop tour through a whole range of areas, which you can explore further in your own projects.Read More…
  • Web Design
    HTML/CSS
    Linking Up the Google Maps and Flickr APIsGoogle map flickr retina
    Imagine you've made the beautiful map a client requested; adding all sorts of interesting markers, pop-ups, custom overlays and photos.  But then the client mentions they want to be able to add their own photos without either troubling you, or doing any coding themselves. This is where the Flickr API comes in very handy.Read More…
  • Web Design
    HTML/CSS
    The Google Maps API and Custom OverlaysGoogle map overlay retina
    In our previous tutorial we looked at how you can add markers and customize the colors and menus of a Google map using the service's API. This tutorial takes things a step further, explaining how you can create your own custom map and overlay it onto a Google map (such as my 1896 map of Portsmouth).Read More…
  • Web Design
    HTML/CSS
    Getting Creative With the Google Maps APIGoogle map retina 1
    You’ve designed a shiny new website; carefully selecting the colors, typography and photographs to perfectly reflect the company's branding.  Then your client asks you to add a map. Sure, you could use a map building ‘wizard’, such as the one that comes with every google account. But, let’s face it, their functionality is limited and they look pretty generic!Read More…
  • Web Design
    Javascript
    Build a Multi-Step Form InterfaceForm sideways retina
    Form usability is an incredibly important topic in web design. As one of the primary input interfaces provided to users, the usability of a form is essential to a good user experience. Today, we're going to build a multi-part form, complete with validation and animation. We'll cover a lot of ground, so buckle up!Read More…
  • Web Design
    Site Elements
    Reveal Content When Needed With an Expanding FooterFooter retina
    During this tutorial we're going to build an expanding footer; a user interface pattern which allows the user to click on expandable footer regions if they wish to see more content. The end result is comparable to the accordion effect sometimes applied to lists and you can find it used on sites such as seesparkbox.com. Additionally, we're going to be using Emmet to help us write our HTML at lightning speed.Read More…
  • Web Design
    HTML/CSS
    Quick Tip: Implement a Sticky "Back to Top" ButtonGo to top preview
    In this quick tip screencast we're going to implement a feature which you may have seen on websites with lots of page content. This button appears when the browser window is scrolled beyond a certain point and will allow our users to easily navigate "back to top". The implementation is pretty straight-forward; first we'll create our link with HTML and CSS, then we'll use a bit of JavaScript to enhance the behavior. The Screencast Alternatively, Download the video, or subscribe to Webdesigntuts+ screencasts via YouTube Read More…
  • Web Design
    Javascript
    Create a Sticky Navigation Header Using jQuery WaypointsPreview
    In this tutorial, we'll be creating a navigation bar that stays with you as you scroll down — and we'll also throw a gimmick or two into the mix to polish it off.Read More…
  • Web Design
    Javascript
    Writing a Flexible Grid Script for PhotoshopPreview
    Being a capable web designer means having a solid grasp on grids, especially if you want to pursue responsive web design. In this tutorial we'll take a look at a Photoshop script for generating your own custom grids, plus we'll open the hood and look at how the script is actually made.Read More…
  • Web Design
    Complete Websites
    Create a Parallax Scrolling Website Using Stellar.jsPreview
    One of the biggest trends in recent modern web design is use of parallax scrolling effects. In this tutorial I'm going to show you how you can create the effect on your own website, with a bit of imagination and a little help from Stellar.js.Read More…
  • Web Design
    HTML/CSS
    Quick Tip: A Handy Grid Overlay ToolbarPreview devbar
    Today I'm going to walk you through using a handy tool to help you when building grid-based web pages. It's a toolbar which I've built, and it comprises two links which lay different kinds of grids over your design whilst in the browser. Try it out!Read More…
  • Web Design
    Javascript
    Design and Code an Integrated Facebook App: PHP + jQuery Preview
    Welcome to part three of “Design and Code an Integrated Facebook App.” At this point, I’m assuming that you have created the HTML and CSS for your app. If not, then refer to the first entry in this series. In this part, we’re going to take our app to the next level! Read More…
Advertisement