• Hey, guest user. Hope you're enjoying NeoGAF! Have you considered registering for an account? Come join us and add your take to the daily discourse.

Web Design and Development |OT| Pixel perfect is dead, long live responsive design

Okay, after looking into this a bit more, would I be right in saying I could do the following:

Using my background image as a guide, make an SVG with the same dimensions, plot out my sections over the frames.

Make my fullscreen div have the background image, then have another div fill this 100% 100% and use the SVG file as a background image with the same CSS as the background image, so Cover etc. This should scale the same way as the background image.

Then, target the specific sections of the SVG using CSS?

I am going off this information by the way: https://svgontheweb.com/#css
 
Okay I think I am getting somewhere. I have basically layered the divs as follows:

<div id="outer">
<div id="frame1>
<div id="frame2>
<div id="frame3>
</div>
</div>
</div>
</div>

I have set the #outer background as by main background image. I then made a separate SVG file for frames 1, 2 and 3. I set those as background images to corresponding divs. Then set them all as "background-size: cover" and the seem to be in sync.

Now is there a way I can change the colour of the SVG fill for each to only show up when hovered over?
 

WanderingWind

Mecklemore Is My Favorite Wrapper
Okay, so here is a quick and dirty example: http://gamesandbeer.com/SVG/frames.html (When I say quick, this took me about 5 minutes, give or take)

Code:
<!DOCTYPE html>
<html lang="">
<head>
  <style>
    #puppy {
      cursor: pointer;
    }
    #puppy:hover {
      opacity: 0.5;
    }
  </style>
</head>

<body>
  <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1495 979.65"><defs><style>.cls-1{isolation:isolate;}</style></defs><title>frameTest2</title><image id="frame" class="cls-1" width="1309" height="858" transform="scale(1.14 1.14)" xlink:href="frames.svg"/><image id="puppy" class="cls-1" width="1601" height="1007" transform="translate(362 338) scale(0.17 0.17)" xlink:href="puppy.svg"/></svg>
</body>
</html>

What I did was take the two .pngs; the main photo with the frames and the photo of the adorable puppy, then turn them into SVGs with Illustrator. This is important because it keeps the file size small without losing any resolution. I then just slapped the puppy SVG into a layer in a new SVG file, then placed the frame SVG into its own layer below it, then exported that file as an SVG. Each layer will export as its own ID name, which you can then manipulate with CSS (you can see that in my example).

Now, this is quick and dirty. To make it look real good, you're going to want to cut out the frames in Photoshop have have them sitting on a transparent layer. So, your final SVG would be

Picture frame layers
Staff Photo layers (each with their own layer in SVG so you can target them as need be for your lightbox/modal and CSS)
Bottom Layer SVG (wood paneling or whatever)
 
Okay, so here is a quick and dirty example: http://gamesandbeer.com/SVG/frames.html

Code:
<!DOCTYPE html>
<html lang="">
<head>
  <style>
    #puppy {
      cursor: pointer;
    }
    #puppy:hover {
      opacity: 0.5;
    }
  </style>
</head>

<body>
  <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1495 979.65"><defs><style>.cls-1{isolation:isolate;}</style></defs><title>frameTest2</title><image id="frame" class="cls-1" width="1309" height="858" transform="scale(1.14 1.14)" xlink:href="frames.svg"/><image id="puppy" class="cls-1" width="1601" height="1007" transform="translate(362 338) scale(0.17 0.17)" xlink:href="puppy.svg"/></svg>
</body>
</html>

It needs to be responsive though.

I am beginning to think, even if it is achievable, it will likely not be very cross compatible with many browsers.
 

WanderingWind

Mecklemore Is My Favorite Wrapper
It needs to be responsive though.

I am beginning to think, even if it is achievable, it will likely not be very cross compatible with many browsers.

That is 100 percent responsive. Resize your browser window.

EDIT: And I just tested it on IE9, Edge, Chrome, Safari iOS and FF. Works perfectly.
 

Somnid

Member
SVG shouldn't buy you anything other than the preserveAspect flag which you don't seem to be using. You will have more trouble with the overlays and such as SVG doesn't handle text content well and IE doesn't support foreignObject. WanderingWind's example seems pretty spot on though.
 
That is 100 percent responsive. Resize your browser window.

EDIT: And I just tested it on IE9, Edge, Chrome, Safari iOS and FF. Works perfectly.

My mistake, for some reason when I first resized the window after loading the link it didnt resize, but then when I refresh it works great, thanks. I am using Mac Safari in case you are curious.

Okay, so here is a quick and dirty example: http://gamesandbeer.com/SVG/frames.html (When I say quick, this took me about 5 minutes, give or take)

Code:
<!DOCTYPE html>
<html lang="">
<head>
  <style>
    #puppy {
      cursor: pointer;
    }
    #puppy:hover {
      opacity: 0.5;
    }
  </style>
</head>

<body>
  <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1495 979.65"><defs><style>.cls-1{isolation:isolate;}</style></defs><title>frameTest2</title><image id="frame" class="cls-1" width="1309" height="858" transform="scale(1.14 1.14)" xlink:href="frames.svg"/><image id="puppy" class="cls-1" width="1601" height="1007" transform="translate(362 338) scale(0.17 0.17)" xlink:href="puppy.svg"/></svg>
</body>
</html>

What I did was take the two .pngs; the main photo with the frames and the photo of the adorable puppy, then turn them into SVGs with Illustrator. This is important because it keeps the file size small without losing any resolution. I then just slapped the puppy SVG into a layer in a new SVG file, then placed the frame SVG into its own layer below it, then exported that file as an SVG. Each layer will export as its own ID name, which you can then manipulate with CSS (you can see that in my example).

Now, this is quick and dirty. To make it look real good, you're going to want to cut out the frames in Photoshop have have them sitting on a transparent layer. So, your final SVG would be

Picture frame layers
Staff Photo layers (each with their own layer in SVG so you can target them as need be for your lightbox/modal and CSS)
Bottom Layer SVG (wood paneling or whatever)

Thanks for the help, I will give this a shot and see how it goes.
 

WanderingWind

Mecklemore Is My Favorite Wrapper
No problem. I added some text so you can see how that works, too. You'll have to media query it or find a suitable font type that is more readable on mobile, but again, did that in an extra minute I had.

Code:
 <!DOCTYPE html>
<html lang="">
<head>
  <style>
    #puppy {
      cursor: pointer;
    }
    #puppy:hover {
      opacity: 0.5;
    }
    
  </style>
</head>

<body>
  <?xml version="1.0" encoding="utf-8"?>
  <!-- Generator: Adobe Illustrator 19.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
  <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
       viewBox="0 0 1495 979.7" style="enable-background:new 0 0 1495 979.7;" xml:space="preserve">
    <style type="text/css">
      .st0{fill:none;}
      .st1{font-family:'MyriadPro-Regular';}
      .st2{font-size:48px;}
    </style>
    <title>frameTest2</title>
    <image style="overflow:visible;enable-background:new;" width="1309" height="858" id="frame" xlink:href="frameTest21.png"  transform="matrix(1.14 0 0 1.14 0 0)">
    </image>
    <image style="overflow:visible;enable-background:new;" width="1614" height="1025" id="puppy" xlink:href="frameTest22.png"  transform="matrix(0.1682 0 0 0.1682 362.3735 337.409)">
    </image>
    <rect x="149" y="247" class="st0" width="349" height="49"/>
    <text id="testText" transform="matrix(1 0 0 1 149 281.0796)" class="st1 st2">This is some text. </text>
    <rect x="698" y="744" class="st0" width="274" height="121"/>
    <text id="neogaf" transform="matrix(1 0 0 1 698.499 778.0801)"><tspan x="0" y="0" class="st1 st2">NeoGAF.com.</tspan><tspan x="119.8" y="57.6" class="st1 st2">Believe. </tspan></text>
  </svg>
</body>
</html>

SVG shouldn't buy you anything other than the preserveAspect flag which you don't seem to be using. You will have more trouble with the overlays and such as SVG doesn't handle text content well and IE doesn't support foreignObject. WanderingWind's example seems pretty spot on though.

Curious about both of these points. I've never had any issues with CSS overlays or text when using SVGs. What are the typical pitfalls of both?
 
How feasible would it be to use it with this image? As they quite like this one now instead :/

stock-photo-black-and-white-office-at-home-modern-creative-workspace-250425880.jpg
 

WanderingWind

Mecklemore Is My Favorite Wrapper
How feasible would it be to use it with this image? As they quite like this one now instead :/

stock-photo-black-and-white-office-at-home-modern-creative-workspace-250425880.jpg

The base image doesn't really matter, tbh. You can theoretically use any image you'd like. In fact, now that I think about it for a bit, you don't even have to layer anything if you make it look nice in Illustrator or whatever you're using to make the SVGs. Just make sure the staff photos are on individual and named layers so they're easier to find in the code.
 

Somnid

Member
Curious about both of these points. I've never had any issues with CSS overlays or text when using SVGs. What are the typical pitfalls of both?

It's not the overlay but that SVG doesn't have flow-based layouts, it's like working with html but absolutely positioning everything. SVG is when you want to draw shapes and that's what it's good at for everything else use HTML.
 

theecakee

Member
You think it would be weird to ask a local business if they want a website redesign? This local game store near me hasn't updated their site since 2012, and the design is fairly dated. Plus I feel like making a site for a video game store would be neat. I don't know them or shop there that often.

I kind of want to start freelancing more as I'm in college, so far I've made one painting companies website and am working on an entertainers portfolio site.
 

Afro

Member
Really quick HTML noob question!

I made a template (.jpg) in Photoshop for my eBay listings. It's about 1000x3000 px. Will this image scale to fit the buyers' screen no matter what res they're using or do I need to add some type of "scale 100%" code?

Right now I'm just using:

<img src="http://abload.de/img/blah.jpg"/>

This is all I need to use? Thanks, I appreciate it greatly!

bump
 

Copons

Member
Speaking of SVG, does anyone know about a sort-of WYSIWYG SVG editor, where I can edit real-time both the code part and the visual part? (or, if there's a way to do this in AI without having to export the SVG and open it in a text editor)
 

Somnid

Member
Speaking of SVG, does anyone know about a sort-of WYSIWYG SVG editor, where I can edit real-time both the code part and the visual part? (or, if there's a way to do this in AI without having to export the SVG and open it in a text editor)

Not aware of any.

I hesitate to put this out in the state it's in but I do have a currently very janky and experimental web-app that does it: http://somnid.github.io/svg-pad/. nearly all of the features have been broken by a massive overhaul to integrate code-mirror but if you just need to edit text and see an svg in real-time it'll work. Drag-and-drop files and download saves should still work too.
 

Copons

Member
Not aware of any.

I hesitate to put this out in the state it's in but I do have a currently very janky and experimental web-app that does it: http://somnid.github.io/svg-pad/. nearly all of the features have been broken by a massive overhaul to integrate code-mirror but if you just need to edit text and see an svg in real-time it'll work. Drag-and-drop files and download saves should still work too.

Thanks, that looks exactly like what I need! I'm gonna check it out as soon as I get home tonight!
 

Copons

Member
Quickly checked out Somnid's SVG tool and it seems it really looks perfect for what I'll eventually need to fine tune my game's board!


Also, it's been a couple of weeks after I started rewriting it in React/Redux, and while I had a really really hard time (and I still have it, to be fair) switching my mindset from Angular to vanilla ES6 to React, I'd say it's shaping up nicely.
I started following the patterns and structure suggested by Redux, but eventually I decided to change it into several services that handle all the various state subsets.
I'm noticing that, compared to the vanilla ES6 version, now I have a much more solid and cleaner structure (that took me a LOT to build, but it seems it's paying off), with much less spaghetti going on, and rendering via React (which I'm still learning "on the go") is such a huge relief.

But most importantly, I'm having such fun while learning so many new things!
 

Casanova

Member
How is everyone feeling about Atom?

I think it's a wonderful text editor. It's highly functional, and has a beautifully fluid, intuitive, and customizable UI.

It's probably taken over Sublime as my go-to.

Also, Sass is bae.
 

Copons

Member
How is everyone feeling about Atom?

I think it's a wonderful text editor. It's highly functional, and has a beautifully fluid, intuitive, and customizable UI.

It's probably taken over Sublime as my go-to.

Also, Sass is bae.

Atom is my current editor and I'd say I love it.
Fully switched over from Sublime several months ago and I just can't look back.
except two use-cases:
1) I still have Sublime as default editor for everything, because it's just too much faster than Atom and if I have to quick-edit something, I'd rather do it in a fraction of second in Sublime than wait for Atom to start up;
2) the software I'm working on at work has a nonsense 10K-lines php file that Atom just cannot handle without screaming in pain.


Eventually, I should try again VSC, as the last time it was a very early build, but it looked good.
And Bracket too, even though, well, I'm honestly very happy with Atom right now (way happier than how I've been during the years I've used Sublime), so I just don't feel the need to try something else.


My only gripe is that I've never been able to set up the Git Plus extension, but oh well, I've got enough git clients installed on any computer I use to code, that I can live without it.
 

Somnid

Member
Only thing I hate about Atom right now is that it locks files. If I change branches I sometimes get errors and have to close and open it otherwise it will keep old content in the editor and if I accidentally save it will clobber the changes.
 

imBask

Banned
I tried about 20 times to switch from Sublime to Atom... I just can't, it destroys my workflow, Atom is way too slow and clunky... it's not a bad editor but I feel like it's inferior to sublime in every way
 

Copons

Member
I tried about 20 times to switch from Sublime to Atom... I just can't, it destroys my workflow, Atom is way too slow and clunky... it's not a bad editor but I feel like it's inferior to sublime in every way

Imho it's just much, much, much, much slower than Sublime, but everything else is better or just need a bit of time to get accustomed to.
I didn't have any Sublime function that I couldn't recreate with Atom (vanilla or plugins), with the only exception of a markdown to html converter that has better css on Sublime, but well, it's not like it broke my workflow. :D
 

imBask

Banned
Imho it's just much, much, much, much slower than Sublime, but everything else is better or just need a bit of time to get accustomed to.
I didn't have any Sublime function that I couldn't recreate with Atom (vanilla or plugins), with the only exception of a markdown to html converter that has better css on Sublime, but well, it's not like it broke my workflow. :D

The speed is unacceptable though, I just can't stand it... and that's coming from a person who still uses Firefox as his main browser ;)

talking of browsers : I've been using Vivaldi for about 3 weeks now and I just dropped it... I like some of the ideas but overall it's still really rough
 

Zakalwe

Banned
Re-designed my site /again/.

Every time I learn something new/more efficient, I get this urge. It's never ending.

Anyway, it's a little more minimalist. I wanted to try to design something that stood out a little but remained intuitive, I think I managed that. Let me know if you agree.

----

It's not finished yet. The projects need uploading and new pages created for them, the designs section needs pages, and I have a few little edits to apply to the mobile level.

The foundation's done though, project one links to the old site for comparison.
 
Hey guys,

I've been having some issues with clients in how they are sending over content. I use basecamp but its been a slow struggle to get the client to always use it properly. They send updated content docs, but sometimes they will ask for an update in a comment, sometimes in an email string they will make a request. I typically am able to catch them and add them to my queue, but there have been times where I will be in a meeting and someone will be say, 'This hasn't been updated, I sent this over a few days ago' etc.

I have a good relationship with my client and they've never really gotten upset about it, but it can be embarrassing. I've been thinking of just having word docs that specific people on their team can continually update instead of sending multiple 'final docs' and trying to piece together all of their request.

Do you think this sounds like a good idea? Can anyone else advise or offer incite in their own process? Thanks guys!
 

Somnid

Member
Hey guys,

I've been having some issues with clients in how they are sending over content. I use basecamp but its been a slow struggle to get the client to always use it properly. They send updated content docs, but sometimes they will ask for an update in a comment, sometimes in an email string they will make a request. I typically am able to catch them and add them to my queue, but there have been times where I will be in a meeting and someone will be say, 'This hasn't been updated, I sent this over a few days ago' etc.

I have a good relationship with my client and they've never really gotten upset about it, but it can be embarrassing. I've been thinking of just having word docs that specific people on their team can continually update instead of sending multiple 'final docs' and trying to piece together all of their request.

Do you think this sounds like a good idea? Can anyone else advise or offer incite in their own process? Thanks guys!

Use bug tracking software like Jira. These give definite owners and status to tickets so you know exactly where it is, if it's not in there the rule is it never happened.
 

Popparoks

Member
So i recently got offered a position on as a designer/developer for this ad firm. They really liked me for some reason. They mostly use WordPress. They want me to know CSS but i feel like i don't know nearly enough as i should right now, but i did let them know that in the interview. I mostly do Graphic Design. I am brushing up with Rob Percival's Web Udemy course and Codecdemy this weekend.

You guys think i will be alright? What are some tips or essentials i should know?

It doesn't seem that difficult, maybe i'm overthinking it.
 

imBask

Banned
So i recently got offered a position on as a designer/developer for this ad firm. They really liked me for some reason. They mostly use WordPress. They want me to know CSS but i feel like i don't know nearly enough as i should right now, but i did let them know that in the interview. I mostly do Graphic Design. I am brushing up with Rob Percival's Web Udemy course and Codecdemy this weekend.

You guys think i will be alright? What are some tips or essentials i should know?

It doesn't seem that difficult, maybe i'm overthinking it.

unless you're in a situation where you CAN'T afford to lose a job, take the chance. You'll learn more about web dev in a week of work than you will in weeks of tutorials
 

Popparoks

Member
unless you're in a situation where you CAN'T afford to lose a job, take the chance. You'll learn more about web dev in a week of work than you will in weeks of tutorials

Why do you say that?
I guess the best way the learn is by doing huh?

The place seems pretty laid back, the web designer that is there now said i knew a little more than she did...
She said she was backed up on tasks, so I'll probably be taking on a lot of that.
 

imBask

Banned
Why do you say that?
I guess the best way the learn is by doing huh?

The place seems pretty laid back, the web designer that is there now said i knew a little more than she did...
She said she was backed up on tasks, so I'll probably be taking on a lot of that.

because there's a lot of technologies available and they're all different, and you can't learn them all. If you can understand the basics, every company will give you some time to adapt and learn whatever the hell they're using. That's probably why you think you "don't know enough" too, that feeling will probably never go away ;) There's too much to learn you'll never know "enough", don't worry

also yes, doing it is the best way to learn! Your first couple of project might go a little wonky, but you'll learn incredibly faster than by doing obsolete courses online (or in school with a teacher that is stuck in 2010)
 

kodecraft

Member
The speed is unacceptable though, I just can't stand it... and that's coming from a person who still uses Firefox as his main browser ;)

talking of browsers : I've been using Vivaldi for about 3 weeks now and I just dropped it... I like some of the ideas but overall it's still really rough

Dude, the same goes for me. Firefox is my main go to browser as its built "Ford-tough". I use Vivaldi every now and then because it's 'sexy' its in the infant stages now so I cut it some slack.

I'm highly interested in Mozilla's new browser ProjectTofino which is built with technologies Vivaldi uses. (Web technologies).

Also Sublime is just so fast. I need to move at the speed of thought and Sublime allows that. Atom is cool, Brackets I use alot and its cool too.

I'm still waiting on Google to make a fantastic text editor, one with that "Google design and feel".
 

Popparoks

Member
because there's a lot of technologies available and they're all different, and you can't learn them all. If you can understand the basics, every company will give you some time to adapt and learn whatever the hell they're using. That's probably why you think you "don't know enough" too, that feeling will probably never go away ;) There's too much to learn you'll never know "enough", don't worry

also yes, doing it is the best way to learn! Your first couple of project might go a little wonky, but you'll learn incredibly faster than by doing obsolete courses online (or in school with a teacher that is stuck in 2010)

Thank you for giving me insight! I appreciate it. I realize that there is always room to improve and I'm always willing to learn! I'm open from input from others as well.
 

Daffy Duck

Member
I think I want to kill myself, I have to migrate two of our oldest sites built in ASP from server 2003 to Server 2012, it is not going well.

I have managed to get WebDeploy to migrate one site, but it is now a pain in the ass getting it working on the new server, it was onl a simple site with a database but I'm getting tied up in knots of what I have to do now.
 

JeTmAn81

Member
Anybody done Code In The Dark? It's a coding competition, seems to be focused on frontend layout stuff which I'm not the strongest with. Basically you have fifteen minutes to recreate a layout seen in an image from scratch without testing. I'm not quite sure how to prepare though I did try to recreate Google's homepage. Also, www.flexboxfroggy.com is cool.
 
How is everyone feeling about Atom?

I think it's a wonderful text editor. It's highly functional, and has a beautifully fluid, intuitive, and customizable UI.

It's probably taken over Sublime as my go-to.

Also, Sass is bae.

Likewise I switched from Sublime to Atom, after using Sublime for years. I had been using custom themes in Sublime and got so sick of them fucking up with every marginal update that I just decided to make the switch. I like Atom's package management much more.

There's a couple things I miss... CMD + SHIFT + P - Set Syntax. I'd imagine there's a shortcut in Atom but I just liked how you could set syntax in the command palette.

Also, I really liked Sublime's project management more. Atom has a project management but it's kind of under the hood and obscured. I added an Advanced project extension that works but it's not as good, and now I've built up a bunch of duplicated projects that I can't rename and my project list has like... 9 projects, 3 or 4 of which are dupes of each other. I'm not feeling it and it's frustrating.

I liked Sublime's very explicit project and workspace manager.

Oh, and also not being able to drag tabs into their own separate window ALA Chrome. I'm surprised Atom doesn't have this. It's something I use a lot when I want to put one tab into its own window and throw it over to a second screen or another Space.

Right, I know but it isn't built from the ground up as a text editor with that Google UX. That's what I want.

I'm with you here, but Google is so bad about abandoning and shuttering side projects I don't think I could really trust it full time.

So i recently got offered a position on as a designer/developer for this ad firm. They really liked me for some reason. They mostly use WordPress. They want me to know CSS but i feel like i don't know nearly enough as i should right now, but i did let them know that in the interview. I mostly do Graphic Design. I am brushing up with Rob Percival's Web Udemy course and Codecdemy this weekend.

You guys think i will be alright? What are some tips or essentials i should know?

It doesn't seem that difficult, maybe i'm overthinking it.

You'll be fine, go for it. I've been doing front-end development for like 15 years (5 years semi-professionally in college, 10 years in industry) and I'm routinely still looking stuff up that I just forget and don't know how it works. Tutorials are always good but like the other guy said, you're going to learn way more with real problems than you will doing tutorials.
 

Popparoks

Member
You'll be fine, go for it. I've been doing front-end development for like 15 years (5 years semi-professionally in college, 10 years in industry) and I'm routinely still looking stuff up that I just forget and don't know how it works. Tutorials are always good but like the other guy said, you're going to learn way more with real problems than you will doing tutorials.

Thank you! I was just worried about being dead weight, but they probably wouldn't have brought me on if they thought that. Plus i wouldn't let that happen anyway. It seems that i will mainly be easing the WordPress workload from the person that is there right now.
 

Zakalwe

Banned
Is there anywhere you know of that I can post a 'for hire' add that's effective?

I've just posted to r/forhire, and my social networks. Currently offering portfolio designs for art students, designers, etc...

I have a few clients, I guess it's just a matter of slowly building up, but any advice on how to boost the process is welcome.
 

theecakee

Member
Is there anywhere you know of that I can post a 'for hire' add that's effective?

I've just posted to r/forhire, and my social networks. Currently offering portfolio designs for art students, designers, etc...

I have a few clients, I guess it's just a matter of slowly building up, but any advice on how to boost the process is welcome.

Try like a local Facebook community page maybe? I have a fairly active one for where I live, posted a for hire ad there and got a few requests to design sites.

Craigslist is also another option or if for students check out college Facebook pages or even just like post flyers on a college campus.
 
Top Bottom