Jump to content

Dark Knight

  • Content count

  • Joined

  • Last visited

About Dark Knight

  • Rank
    Dedicated Member
  1. Merry Christmas All, I'm using good ol bootstrap to build a fictional website at the moment, so far all the structured content is in place, at least for the home page design anyway and I have the full screen menu overlay working nicely, the only thing that is not working for me at the moment is that i want the header which contains the logo and nav to disappear from view when the user begins to scroll down the page, (although this is the default behaviour) but if the user changes scroll direction (as in scroll up) then I want the header container to kick in and slide in from the top, so it is easily accessible. (but in all viewport sizes, not just on desktop) I know to pull this kind of thing off that you would need to use a bit of jQuery but I am a complete novice when it comes to JS/jQuery, and so my failed attempts at getting this to work have been heavily reliant to this tutorial: https://codyhouse.co/gem/full-screen-pop-out-navigation/ - I have also uploaded the demo files to go with this tutorial. The only difference in my ''main.js'' file compared to their 'main.js' file is in the first couple of lines, reason being is that i have used a slightly different method for coding my hamburger menu and how it animates, don't know if this is anything to do with breaking the scroll in header? like I say, I know nothing about jQuery so forgive me if there are any glaring errors in the file. I have also used different class names to what they have used, so in most but not all cases I have just removed the 'cd' prefixes in my css and then tweaked my main.js classes to match accordingly. I know I am incredibly sad for posting this 2 days before xmas when most of you are probably indulging in food and alcohol, and rightly so! but if there are any of santa's little helpers out there still reading this, would very much appreciate some help. Thanks DK project_launchpad.zip codyhouse -tutorial files.zip
  2. Marks for my Mark up?

    Thanks NOCK, in the words of Tesco, every little helps :-)
  3. Marks for my Mark up?

    What you mean put all four of the meta tags I have used BEFORE the <title> element? (including the viewport one?) Would doing this have any meaningful impact on my web page?
  4. Marks for my Mark up?

    @@Nillervision ok, so to interpret what you have suggested over your last two posts, am I right in thinking the below markup would be a more "semantically correct way of marking up my content, taking into account your suggestions. (keeping the focus on just the main containers for now) *<header> <!--jumbotron content--> </header> <main role=main> <div> <!--intro--> </div> <section> <article> <!--Branding and Strategy--> </article> <article> <!--Web design and Development--> </article> <article> <!--SE0 and Online Marketing--> </article> <article> <!--Print and Graphic Design--> </article> </section> <div> <!--testimonials--> </div> <div> <!--call to action--> </div> </main> <footer> <div> <!--this div would wrap the first 3 items below--> <!--"New business", "Our Address" and "Newsletter sign up" should these 3 items also be wrapped into their own individual divs?--> </div> <div> <!--this div would wrap the second row of footer contents below--> <!--Social icons and copyright also to be nested into thier own individual divs?--> </div> </footer> Is this interpretation an improvement?
  5. Marks for my Mark up?

    Thank you both so far for replying. What do you mean by thematic grouping as opposed to visual grouping? Could you explain the difference please. Also what do you mean by using a unique heading as a child element?
  6. Hi Could the viewers of this post assess the attached index.html file please and provide some feedback on if I have marked up/coded each of the content containers correctly?, given the type of content that will going into each one.. Thanks DK archive.zip
  7. Request for help finding some images

    While I am here, is there a similar kind of site where I can purchase free vector logos at large resolutions? that I can drop in over the top?
  8. Request for help finding some images

    @@Jane B Thanks for your suggestion, that was a great post. Lots of fantastic and most importantly very natural looking ipad screens to choose from )))
  9. Evening Peeps, I'm working on an fictional web design agency project and as part of the home page I want to include a portfolio section showing product photography shots of websites, apps and branding that this made up agency have "worked on". I know this is a made up agency project but I want to make the design as realistic looking as possible as a project to put in my portfolio in doing so I have wrote the content "voice" for the site in my own words as though it was for real, so no tacky lorum ipsum text to pad out the site on any of the pages. Likewise same mindset for the images, I don't want to use any tacky "lifestyle" photography or cheap looking stock imagery of smiling business men in suits to use as filler images for the portfolio section. This brings me to my question, where can I find images of fictional looking digital products that have people interacting with them, be it on a laptop/desktop or on a smart phone, similar kind of thing to what is attached (which has been taken from the portfolio of a real web design agency) is there a reputable image website for this kind of imagery where I can purchase from? The closest thing I have found to this is to buy a few "bootstrap" agency templates that are tailored around the theme of a web design agency business website and then to extract the portfolio product shots that they have used of fictional websites and app design, but it seems like overkill to buy a few of these templates only to make use of the images and nothing else, in any case the imagery they have used are only tiny product thumbnails, I need larger product imagery that is high resolution so it can scale up responsively for desktops and scale down for smartphones and tablets. Kind Regards DK
  10. ​Hi Guys This post represents an update to the way I will be approaching a certain web design project to how I was previously. If you have not already done so, you can read it from here: Need help deciding what my content stack is going to be Unfortunately, I did not get any replies back to that post in this particular forum but I I got some great advice back from other members of other forums in which I posted the same question As I result of that initial post, the general consensus from across the board of replies was that my brief and target audience was not focussed enough to begin with, through the wonders of hindsight I can see now why I was struggling with my content decisions because I only had a wishy washy amount of information to begin with. So since then I went back to the initial brief and fleshed it out with a lot more detail as though I was the client writing it (don't forget this is a fictional brief so I don't have a real person to answer to) I have attached is a summary of that brief. I now want to create some user personas based on that information along with some user stories. Once I have those done, then I will feel a lot more confident about diving into creating a solid site map plan for the website which I will then use to create my individual page by page content. So I guess you could say I am taking two steps back on this, in order to get back to the point on where I was initially my first post, but this time with more clout going forward. But I have never worked on creating some user stories or user personas before, can someone help me come up with putting one together based on the information that is attached in the brief. I realise that it will be based on mostly "guesstimations" but that does not matter, as this project will be used as a means to an end for my portfolio. As long as it sounds convincing with enough detail that is ideally what I am looking for. Thanks for reading people, I look forward to your replies. DK brief-summary.pdf
  11. Hi Peeps This is a request for help on being more decisive on deciding what my content should be for a website I am currently working on. The client is only fictional but that's not important, the point is I am using it as a brief that I can eventually use to showcase in my online portfolio. So in terms of what the actual project is about, it revolves around a website redesign for a fictional web development and design agency. Here is a snippet taken from the brief that lays out what the task is: "You work for a design agency whose portfolio does not reflect the caliber of work it can do. As a result, the agency keeps landing projects that don't especially intrest them, much less help them move to the next level. The agency wants to attract better clients with a marketing campaign that includes a website redesign. My job : Design responsive, portfolio-centric website that inspires potential clients to call your agency." For me personally, my natural starting point was to take a ride into "googlesphere" and bookmark a ton of cool looking modern and current looking web agencies that are real and already in business. It made sense to make that my first step because I have never worked on redesigning a web agency website before, so by gathering inspiration from other web design agencies meant that I could get more familiar with the types of content these types of websites were presenting to potential clients, after looking at a ton of them you naturally start to see familiar patterns. For instance on the home page you often see the agencies portfolio of work as one of the first and highest stacked sections of their home page ( this makes sense because in order to attract more clients, they want to let there work do the talking and for a potential client looking for an agency to work with, he/she too is arguably going to be most interested in the standard of that agency portfolio more so than any other of the marketing babble on their website. My point is I can clearly see why the portfolio section is almost always one of the highest stacking pieces of content across any design agency website. The stage I am at now with the project is deciding on what content sections to include for the agency site I am working on. After I have bookmarked a high number of website inspiration, and which are similar in terms of the industry I am designing for (otherwise known as the competition) The next step I like to take is to always start with a content first approach starting at a macro high level, as in "types of content" what will those content blocks consist of in a general sense etc, and then moving slowly into the micro level of each of those content blocks as in deciding on what the actual content is going to be for each of those content blocks in the stack, text, images etc, once that is all down in black and white only then am I happy to move onto the actual "look and feel/branding" of the site, once all the content arrangement and actual content has been decided upon. Where I am starting to get really stuck with this is that when I was scanning over the many agency websites that I had bookmarked, I come across so many arrangements and inclusions of similar content sections that all looked great and "correct" so to speak but I still could not decide what would be right for my project. A project lets not forget who in the real world would have the same business goals as all these other websites. That was my first dilema, when so many arrangements seem right, how do you begin to narrow down the stacking order of content? Here is an example of a content stack I have come up with so far for the home page: (from a high macro level) Top Container (this would include the logo and the navigation) Large Hero/Jumbotron Area ( this would act as the typical attention grabbing element that you see on most websites looking to sell such services) Company Blurb/Intro Portfolio Who we are Client Testimonials Call to Action Footer This to me looked like a strong candidate for a content stack, because it did state in the brief that the company were looking to attract start up business as their ideal client. Here is another one I come up with: Top Container (this would include the logo and the navigation) Large Hero/Jumbotron Area ( this would act as the typical attention grabbing element that you see on most websites looking to sell such services) Core Services Portfolio Client Testimonials Client Trophy cabinet (this is typically a section where agencies slap a load of well known logos on there home page, to build up a reputation of trust of who they have worked with) Blog Articles Call to action Footer The is kinda where I am stuck at with this project, which I why I wrote this post so I can get some advice and help on moving it forward. The sections I am confident on including so far are the top container which holds the logo and navigation, this is a given for most websites as most include navigation and a logo, including it at the top of the pile seemed like an obvious decision as well, I have even gone as far as deciding that on desktop the links will be a presented as a horizontal row of links and then on a tablet and mobile those links will collapse into a classic hamburger menu that when clicked will display as a full screen modal overlay. The large hero area is also a given certainty for these types of websites as its generally the first part of the page where you really get to make a striking visual impact on the user, so like the top container, this is also a pretty consistent element in terms of its inclusion and placement in the stack. All I have to decide now is how my jumbotron will behave, will it be a looping video reel, a slideshow, a static image or a looping illustration animation, most agency hero elements fall into one of these four categories. still not sure which one to pick yet though. I will come back to sections that would fall around the middle zones of the stack as that is where most of my indecision lies. The footer like the top container is also another given for most websites so that again is a no brainer. I do like the idea of a nice large call to action block towards the bottom of the stack, this was another common feature that I noticed on most of the agency websites that I bookmarked and it make sense from a business perspective to have this as a must have inclusion and to have towards the bottom as a hook point to encourage potential clients to call your agency for new business. So like I said above most of my indecision lies in the middle areas, not really sure if I should include things like "core services", "client testimonials", blog articles, things like that, these kind of items are all up for debate and seem to be optional given the variety of arrangement and inclusion configurations the other sites have used, ie: does core services really need to be spelled out to clients on the home page, or could I get away with just tucking this information away somewhere on a separate services page on the website but still expect them to find and click on the section of the website to find out more for themselves? Other content sections that I have noticed on other web agency home pages include things like "why choose us" "fun agency facts" "our process" "meet out team" I could potentially include all these things on the homepage but then that would just make the webpage really really long and would just dilute the overall message. Plus throwing all those things on the homepage would just make it feel like a cheap bootstrap template for web design agencies, and the last thing I want to look like is a cheap template design, I want it to look like a real company design even if it is not. Below are links to quite a few agency websites, you can see from all of them how they include most of the content sections that I have already mentioned above, some only include a few of them, some include 6 or 7 of these content blocks but all of them arrange them in different manners. Like I say this dilemma brings me back to my original question of if they all seem to work successfully and attractively, and all of them have the same business goal of attracting new clients, how should I go about deciding on what that content inclusion should be for my fictional agency homepage and in what order that should be? http://daro.de http://www.hyperquake.com http://couleecreative.com http://teambrightly.com http://www.etecc.com http://www.adoratorio.com https://digital.scotch.io http://weareadaptable.com http://urbaninfluence.com http://demodern.com https://www.interactivered.com http://www.wideeyecreative.com http://designlobby.co.uk http://expect.agency http://www.veltenmedia.nl http://bluecadet.com http://liechtenecker.at http://www.plugandplaydesign.co.uk Thanks for reading peeps, I look forward to your advice and opinions. Kind Regards Dark Knight
  12. My stress in LESS

    Hi Gibbs So are you saying that if you unpack the attched zip file in its attached state, and only make custom edits to the var-bootstrap.less file, do those edits show up your end in the index.html file? if the answer is yes, did you make edits to any of the other files to get this to work? In order to apply my own custom edits and protect the original bootstrap styles, the "var-bootstrap.less" starts out as an exact clone of the "bootstrap.less" file and this is the file where the book was instructing to start making your custom changes, but so far nothing happens when I edit this file.
  13. My stress in LESS

    Ok, but the point at which it does not work is when it goes on to customise the site with it's own styles. It then instructs you to start making the custom LESS style changes inside of the var-bootstrap.less and var-jasny.less files but when I do that, nothing happens. One example is changing the heading font from the default helvetica to a custom google font: As you can see I have added the google link tag inside the head of my document: <link href='http://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'> then I opened up the "var-bootstrap.less" file did a search for "@headings-font-family" and changed that to "Varela-Round" refreshed the browser, but none of the headings updated. Another custom change the book instructed to make was to the the variables "@brand-primary" "@brand-success" again inside of the "var-bootstrap.less" file, but when I changed those variables within my version of "var-bootstrap.less" that I had created, again nothing happened?
  14. My stress in LESS

    Ok, well bear with me on this one, but I will need to make this a detailed reply in order to explain what the issue is. So like I say, I am following along with this ebook tutorial which teaches you how to build and customise a portfolio using Twitter bootstrap, I have already built the index.html page as instructed in the book, and all looks well and good even though the page has no styles applied to it. The book then begins a new section on how to add styles to the page by way of making a copy of the existing LESS files that bootstrap is built on, and then manipulating that copy to apply your own custom styles to your own design. The point in the book in which I am stuck at is when it comes to compiling those LESS files into CSS files, by running the framework.less and styles.less (you can inspect these files in the working directory folder I have attached to this post) files through the compiler of your choice, you are supposed to get the equivalents of these files in a .css format ( This stuff is all new to me, but I'm sure this is all stuff you already know) So anyway, the problem occurs is that when I run my versions of framework.less and styles.less through the compiler, yes I get the css outputs as expected but when I opened up my outputted version of styles.css that the compiler generated there was nothing in it, it was a blank file, but I don't know why this is happening? Prior to this, I had carefully crafted all the necessary LESS files and prepared them with all the necessary variables and imports as instructed in the book so they were ready to put through a compiler. The styles.less file contains important variables and import tags that are being stripped out of the css version which probably explains why any customs styles that I apply beyond point don't register in the browser. So my best guess is that I know where the problem is occurring (the blank styles.css file) but I just don't know why this is happening. Like I say, the project working directory that is attached is an exact duplicate of the one on my computer, so if there is any files that you need to poke around in to trouble shoot this issue, feel free to do so. portfolio.zip
  15. My stress in LESS

    Hi I am currently working on a bootstrap tutorial and during the ebook tutorial the author makes a copy of the bootstrap LESS files in order apply his own custom changes in LESS and then apply these to the website, is anyone on here an expert in trouble shooting LESS files? My attempt at this tutorial is not going to plan even though I have carefully followed all instruction as printed in the book, very frustrating, but I am determined to find out what is making my attempt go south, can anyone help?