I am currently working on a new project that involves a home page/landing page that must deliver lots of information without the “overload” effect. What better choice than a nice big slider that allows me to add numerous (I wouldn’t say limitless) slides.
I did my research and concluded that the anything slider jQuery plugin offered the most functionality for what I wanted to do.
Easy Part: Setting up the HTML, a few div tags, an ID selector, etc. The plugins and most of the scripting can be copied from the net and used by inserted your ID.
Hard Part (In my opinion): styling the slider
- Positioning the menu to be inside the slider instead of below it.
- Uses images from my design as the navigation images, including active and hover states
- Removing the numbers from the navigation (1,2,3…)
CSS First: The original CSS sheet looks like this (the original classes and ID before I changed them):
After Editing the CSS:
Lets look at what is going on here:
First, for some reason, the default CSS is set up to add an extra class onto the navigation links that prevented me from changing the active states. All I had to do was delete the class div.anythingSlider.activeSlider .anythingControls ul a, and make sure to the leave the a.cur class (that’s the plugin’s “active” denotation)
Second, by just playing around with the styles of the .anythingControls ul a, you can add images, spacing, etc. The bottom two classes in the new CSS do two things. The first class removes the numbering from the controls links (display:none) the second class gives me my hover image (which in this project is the same as the active state).
That solved all my CSS problems.
Positioning AnythingSlider Navigation within my HTML Slider:
This was just a simple trick that took me entirely way too long to figure out, but all you need to do is:
Set #slider (whatever your slider ID is) to have a greater Height Value than what you will set the anythingSlider Height to.
In my case, my #slider height: 545px;
While my anythingSlider height: 490px;
When it’s all said and done this is my result:
Menu Has Numbers and Is below my slider. Looks gross too.
Looks much Better
So that sums it up. Hope that helps you use the anythingSlider a bit better. Thanks.
Our business recently started using WordPress themes as a means of constructing websites for clients. Using themes provides an time-cost efficient method of producing powerful websites without sacrificing functionality. Since our costs stay down, we can reduce our price for the client and ultimately become a stronger competitor in the marketplace.
But these WordPress “themes” only cost about $45 on average, and we are turning around and charging clients upwards of $1500 for their website. So the ethical question then becomes, “Are we overcharging?” Well I did some research and found out that we are actually quite reasonable. It is common to see some web developers charging up to $8000 for websites built with the foundation of a purchased theme. The basis of the justification lies in the knowledge and tools of a web developer. In the same way a home owner would willingly pay a contractor significantly more than the cost of the materials to renovate a home, so a client is perfectly content with paying a web developer the agreed upon amount so long as the expectations of the project are met within a timely fashion.
So what are these “tools & skills” of the modern-day web developer that allows for such a high mark-up on website projects. Well first, we need to look at the tools in terms of quantitative measure, money for this case. Most developers utilize the adobe creative suite as their basis for developing online content. The cost of the entire package is a whopping $1700, but for a developer, this is an investment in the job and will pay for itself in time.
The creation of a new website entails various steps starting initially with an idea, and (hopefully) ending with an attractive, functional website that communicates the desired message to the correct audience.
Sounds simply enough when it’s described in one sentence, but the above process involves very distinct steps that all add together to create the “pillars” that form a website.
If you are familiar with Web Design/Photoshop, then I’m sure you’ve seen those brilliant, graphic designs, that contain multiple lighting effects and heavy image content to illustrate key points or main features. Well this all looks pleasing to the eye, but when we flip the page to developing the design, problems are bound to occur.
With the current standards for Web Development, quite a few of these “lighting effects” such a nice glow behind an image, are not supported with any of the web languages. The only way to achieve such effects would be to slice certain bits or your PSD file specifically for those lighting/pattern/etc effects and inserting them into the site as background images or some other kind of image.
Now that being said, heavy image based websites require more delicacy in development for the sake of optimization. You should be asking question like, “Do we really want to sacrifice optimization/time for these minute details that only add marginal attraction to the design?” The answer is for you to decide.
So tip of the Week? Design and Development should have some overlap. As a developer, knowing how to use the basics of Photoshop is required (slicing and dicing PSDs for the web) in order to build the design. However, when we look at designers, many of them work solely from the perspective of looks and ignore functionality.
It would be much better, from an optimization perspective, if designers took into consideration HOW their designs are going to be built. Now I know that is the job of the developer, but all I suggest it that designers understand basics elements of what it means to convert a static image to a live website. This is especially critical for web development teams who operate on deadlines to meet client needs.